diff --git a/src/build.ts b/src/build.ts index 539776d3f..24065f393 100644 --- a/src/build.ts +++ b/src/build.ts @@ -10,7 +10,7 @@ import {getClientPath, prepareOutput, visitMarkdownFiles} from "./files.js"; import {createImportResolver, rewriteModule} from "./javascript/imports.js"; import type {Logger, Writer} from "./logger.js"; import {renderServerless} from "./render.js"; -import {bundleStyles, rollupClient} from "./rollup.js"; +import {bundleStyles, rollupClient, saveCssAssets} from "./rollup.js"; import {searchIndex} from "./search.js"; import {Telemetry} from "./telemetry.js"; import {faint} from "./tty.js"; @@ -43,7 +43,12 @@ export interface BuildEffects { * @param outputPath The path of this file relative to the outputRoot. For * example, in a local build this should be relative to the dist directory. */ - writeFile(outputPath: string, contents: Buffer | string): Promise; + writeFile(outputPath: string, contents: Buffer | Uint8Array | string): Promise; + + /** + * @param path The path to test relative to the outputRoot. + */ + fileExists(path: string): Promise; } export async function build( @@ -109,9 +114,9 @@ export async function build( const clientPath = getClientPath(entry); const outputPath = join("_observablehq", name); effects.output.write(`${faint("bundle")} ${clientPath} ${faint("→")} `); - const code = await (entry.endsWith(".css") - ? bundleStyles({path: clientPath}) - : rollupClient(clientPath, {minify: true})); + const code = entry.endsWith(".css") + ? (await bundleStyles({path: clientPath})).text + : await rollupClient(clientPath, {minify: true}); await effects.writeFile(outputPath, code); } if (config.search) { @@ -125,13 +130,14 @@ export async function build( const outputPath = join("_import", style.path); const sourcePath = join(root, style.path); effects.output.write(`${faint("style")} ${sourcePath} ${faint("→")} `); - const code = await bundleStyles({path: sourcePath}); - await effects.writeFile(outputPath, code); + const {text, files} = await bundleStyles({path: sourcePath}); + await effects.writeFile(outputPath, text); + await saveCssAssets(files, effects); } else { const outputPath = join("_observablehq", `theme-${style.theme}.css`); effects.output.write(`${faint("bundle")} theme-${style.theme}.css ${faint("→")} `); - const code = await bundleStyles({theme: style.theme}); - await effects.writeFile(outputPath, code); + const {text} = await bundleStyles({theme: style.theme}); + await effects.writeFile(outputPath, text); } } } @@ -206,6 +212,16 @@ export class FileBuildEffects implements BuildEffects { await prepareOutput(destination); await writeFile(destination, contents); } + async fileExists(path: string): Promise { + path = join(this.outputRoot, path); + try { + await access(path, constants.R_OK); + return true; + } catch (error) { + if (!isEnoent(error)) throw error; + } + return false; + } } function styleEquals(a: Style, b: Style): boolean { diff --git a/src/deploy.ts b/src/deploy.ts index 57acc1c8c..9512f2202 100644 --- a/src/deploy.ts +++ b/src/deploy.ts @@ -375,6 +375,9 @@ class DeployBuildEffects implements BuildEffects { throw error; } } + async fileExists(): Promise { + return false; + } } // export for testing diff --git a/src/preview.ts b/src/preview.ts index 93185dedf..d1558633d 100644 --- a/src/preview.ts +++ b/src/preview.ts @@ -1,7 +1,7 @@ import {createHash} from "node:crypto"; import {watch} from "node:fs"; import type {FSWatcher, WatchEventType} from "node:fs"; -import {access, constants, readFile, stat} from "node:fs/promises"; +import {access, constants, copyFile, readFile, stat, writeFile} from "node:fs/promises"; import {createServer} from "node:http"; import type {IncomingMessage, RequestListener, Server, ServerResponse} from "node:http"; import {basename, dirname, extname, join, normalize} from "node:path"; @@ -15,14 +15,15 @@ import type {Config} from "./config.js"; import {mergeStyle} from "./config.js"; import {Loader} from "./dataloader.js"; import {HttpError, isEnoent, isHttpError, isSystemError} from "./error.js"; -import {getClientPath} from "./files.js"; +import {getClientPath, prepareOutput} from "./files.js"; import {FileWatchers} from "./fileWatchers.js"; import {createImportResolver, rewriteModule} from "./javascript/imports.js"; import {getImplicitSpecifiers, getImplicitStylesheets} from "./libraries.js"; +import type {Logger, Writer} from "./logger.js"; import {diffMarkdown, parseMarkdown} from "./markdown.js"; import type {ParseResult} from "./markdown.js"; import {renderPreview, resolveStylesheet} from "./render.js"; -import {bundleStyles, rollupClient} from "./rollup.js"; +import {bundleStyles, rollupClient, saveCssAssets} from "./rollup.js"; import {searchIndex} from "./search.js"; import {Telemetry} from "./telemetry.js"; import {bold, faint, green, link, red} from "./tty.js"; @@ -38,6 +39,28 @@ export interface PreviewOptions { verbose?: boolean; } +export interface PreviewEffects { + logger: Logger; + output: Writer; + + /** + * @param outputPath The path of this file relative to the outputRoot. For + * example, in a local build this should be relative to the dist directory. + */ + copyFile(sourcePath: string, outputPath: string): Promise; + + /** + * @param outputPath The path of this file relative to the outputRoot. For + * example, in a local build this should be relative to the dist directory. + */ + writeFile(outputPath: string, contents: Buffer | Uint8Array | string): Promise; + + /** + * @param path The path to test relative to the outputRoot. + */ + fileExists(path: string): Promise; +} + export async function preview(options: PreviewOptions): Promise { return PreviewServer.start(options); } @@ -47,14 +70,19 @@ export class PreviewServer { private readonly _server: ReturnType; private readonly _socketServer: WebSocketServer; private readonly _verbose: boolean; + private readonly _effects: PreviewEffects; - private constructor({config, server, verbose}: {config: Config; server: Server; verbose: boolean}) { + private constructor( + {config, server, verbose}: {config: Config; server: Server; verbose: boolean}, + effects: PreviewEffects = new DefaultPreviewEffects(join(config.root, ".observablehq", "cache")) + ) { this._config = config; this._verbose = verbose; this._server = server; this._server.on("request", this._handleRequest); this._socketServer = new WebSocketServer({server: this._server}); this._socketServer.on("connection", this._handleConnection); + this._effects = effects; } static async start({verbose = true, hostname, port, open, ...options}: PreviewOptions) { @@ -103,7 +131,7 @@ export class PreviewServer { if (pathname.endsWith(".js")) { end(req, res, await rollupClient(path), "text/javascript"); } else if (pathname.endsWith(".css")) { - end(req, res, await bundleStyles({path}), "text/css"); + end(req, res, (await bundleStyles({path})).text, "text/css"); } else { throw new HttpError(`Not found: ${pathname}`, 404); } @@ -114,16 +142,22 @@ export class PreviewServer { } else if (pathname === "/_observablehq/minisearch.json") { end(req, res, await searchIndex(config), "application/json"); } else if ((match = /^\/_observablehq\/theme-(?[\w-]+(,[\w-]+)*)?\.css$/.exec(pathname))) { - end(req, res, await bundleStyles({theme: match.groups!.theme?.split(",") ?? []}), "text/css"); + end(req, res, (await bundleStyles({theme: match.groups!.theme?.split(",") ?? []})).text, "text/css"); } else if (pathname.startsWith("/_observablehq/")) { send(req, pathname.slice("/_observablehq".length), {root: publicRoot}).pipe(res); } else if (pathname.startsWith("/_import/")) { const path = pathname.slice("/_import".length); const filepath = join(root, path); + const includePath = join(root, ".observablehq", "cache"); try { - if (pathname.endsWith(".css")) { - await access(filepath, constants.R_OK); - end(req, res, await bundleStyles({path: filepath}), "text/css"); + if (pathname.startsWith("/_import/assets/")) { + await access(join(includePath, pathname), constants.R_OK); + send(req, pathname, {root: includePath}).pipe(res); + return; + } else if (pathname.endsWith(".css")) { + const {text, files} = await bundleStyles({path: filepath}); + await saveCssAssets(files, this._effects); + end(req, res, text, "text/css"); return; } else if (pathname.endsWith(".js")) { const input = await readFile(filepath, "utf-8"); @@ -414,3 +448,40 @@ function handleWatch(socket: WebSocket, req: IncomingMessage, {root, style: defa socket.send(JSON.stringify(message)); } } + +class DefaultPreviewEffects implements PreviewEffects { + private readonly outputRoot: string; + readonly logger: Logger; + readonly output: Writer; + constructor( + outputRoot: string, + {logger = console, output = process.stdout}: {logger?: Logger; output?: Writer} = {} + ) { + if (!outputRoot) throw new Error("missing outputRoot"); + this.logger = logger; + this.output = output; + this.outputRoot = outputRoot; + } + async copyFile(sourcePath: string, outputPath: string): Promise { + const destination = join(this.outputRoot, outputPath); + this.logger.log(destination); + await prepareOutput(destination); + await copyFile(sourcePath, destination); + } + async writeFile(outputPath: string, contents: string | Buffer): Promise { + const destination = join(this.outputRoot, outputPath); + this.logger.log(destination); + await prepareOutput(destination); + await writeFile(destination, contents); + } + async fileExists(path: string): Promise { + path = join(this.outputRoot, path); + try { + await access(path, constants.R_OK); + return true; + } catch (error) { + if (!isEnoent(error)) throw error; + } + return false; + } +} diff --git a/src/rollup.ts b/src/rollup.ts index 547a1126f..2921866fb 100644 --- a/src/rollup.ts +++ b/src/rollup.ts @@ -1,3 +1,4 @@ +import {basename} from "path"; import {nodeResolve} from "@rollup/plugin-node-resolve"; import {type CallExpression} from "acorn"; import {simple} from "acorn-walk"; @@ -5,12 +6,14 @@ import {build} from "esbuild"; import type {AstNode, OutputChunk, Plugin, ResolveIdResult} from "rollup"; import {rollup} from "rollup"; import esbuild from "rollup-plugin-esbuild"; +import type {BuildEffects} from "./build.js"; import {getClientPath} from "./files.js"; import {getStringLiteralValue, isStringLiteral} from "./javascript/features.js"; import {isPathImport, resolveNpmImport} from "./javascript/imports.js"; import {getObservableUiOrigin} from "./observableApiClient.js"; import {Sourcemap} from "./sourcemap.js"; import {THEMES, renderTheme} from "./theme.js"; +import {faint} from "./tty.js"; import {relativeUrl} from "./url.js"; const STYLE_MODULES = { @@ -25,15 +28,39 @@ function rewriteInputsNamespace(code: string) { return code.replace(/\b__ns__\b/g, "inputs-3a86ea"); } -export async function bundleStyles({path, theme}: {path?: string; theme?: string[]}): Promise { - const result = await build({ - bundle: true, - ...(path ? {entryPoints: [path]} : {stdin: {contents: renderTheme(theme!), loader: "css"}}), - write: false, - alias: STYLE_MODULES - }); - const text = result.outputFiles[0].text; - return rewriteInputsNamespace(text); // TODO only for inputs +type AssetReference = {path: string; contents: Uint8Array}; + +const INLINE_CSS = Object.fromEntries( + ["svg", "png", "jpeg", "jpg", "gif", "eot", "otf", "woff", "woff2"].map((ext) => [`.${ext}`, "file" as const]) +); + +export async function bundleStyles({ + path, + theme +}: { + path?: string; + theme?: string[]; +}): Promise<{text: string; files: AssetReference[]}> { + try { + const result = await build({ + bundle: true, + loader: INLINE_CSS, + ...(path ? {entryPoints: [path]} : {stdin: {contents: renderTheme(theme!), loader: "css"}}), + write: false, + outdir: "/_import", + assetNames: "assets/[name].[hash]", + alias: STYLE_MODULES, + logLevel: "silent" + }); + const {text} = result.outputFiles.at(-1)!; + return { + text: path === "src/client/stdlib/inputs.css" ? rewriteInputsNamespace(text) : text, + files: result.outputFiles.slice(0, -1).map(({path, contents}) => ({path: path.slice(1), contents})) + }; + } catch (error: any) { + const err = error?.errors?.[0]?.location; + throw new Error(err ? `Error bundling ${err.file} line ${err.line}:\n${err.lineText}` : "Bundler error."); + } } export async function rollupClient(clientPath: string, {minify = false} = {}): Promise { @@ -154,3 +181,12 @@ function importMetaResolve(): Plugin { } }; } + +export async function saveCssAssets(files: AssetReference[], effects: BuildEffects): Promise { + for (const {path, contents} of files) { + if (!(await effects.fileExists(path))) { + effects.output.write(`${faint("asset")} ${basename(path)} ${faint("→")} `); + await effects.writeFile(path, contents); + } + } +} diff --git a/test/input/build/css-assets-public/atkinson-sample.woff2 b/test/input/build/css-assets-public/atkinson-sample.woff2 new file mode 100644 index 000000000..99b3c6f5e Binary files /dev/null and b/test/input/build/css-assets-public/atkinson-sample.woff2 differ diff --git a/test/input/build/css-assets-public/atkinson.css b/test/input/build/css-assets-public/atkinson.css new file mode 100644 index 000000000..fb2d6ead6 --- /dev/null +++ b/test/input/build/css-assets-public/atkinson.css @@ -0,0 +1,11 @@ +@import url("observablehq:default.css"); +@import url("observablehq:theme-glacier.css"); + +@font-face { + font-family: "atkinson"; + src: url("atkinson-sample.woff2") format("woff2"); +} + +:root { + --serif: atkinson; +} \ No newline at end of file diff --git a/test/input/build/css-assets-public/index.md b/test/input/build/css-assets-public/index.md new file mode 100644 index 000000000..3cb668ec6 --- /dev/null +++ b/test/input/build/css-assets-public/index.md @@ -0,0 +1,53 @@ +--- +style: "atkinson.css" +--- + +# Atkinson Hyperlegible + +## from the Braille Institute + +**a typeface providing greater legibility and readability for low vision readers** + +Atkinson Hyperlegible font is named after Braille Institute founder, J. Robert Atkinson. What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability. Free for anyone to use! + +For more see the [brailleinstitute.org/freefont](https://brailleinstitute.org/freefont) web page. + +--- + +## Font License + +Copyright © 2020, Braille Institute of America, Inc., [brailleinstitute.org/freefont](https://www.brailleinstitute.org/freefont) with Reserved Typeface Name Atkinson Hyperlegible Font. + +#### General + +Copyright Holder allows the Font to be used, studied, modified and redistributed freely as long as it is not sold by itself. The Font, including any derivative works, may be bundled, embedded, redistributed and/or sold with any software or other work provided that the Reserved Typeface Name is not used on, in or by any derivative work. The Font and derivatives, however, cannot be released under any other type of license. The requirement for the Font to remain under this license does not +apply to any document created using the Font or any of its derivatives. + +#### Definitions + +- "Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. +- “Copyright Holder” refers to Braille Institute of America, Inc. +- “Font” refers to the Atkinson Hyperlegible Font developed by Copyright Holder. +- "Font Software" refers to the set of files released by Copyright Holder under this license. This may include source files, build scripts and documentation. +- "Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. +- "Original Version" refers to the collection of the Font Software components as distributed by Copyright Holder. +- "Reserved Typeface Name" refers to the name Atkinson Hyperlegible Font. + +#### Permission & Conditions + +Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: +1) Neither the Font Software nor any of its individual components, in Original Version or Modified Version, may be sold by itself. +2) The Original Version or Modified Version of the Font Software may be bundled, redistributed and/or sold with any other software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. +3) No Modified Version of the Font Software may use the Reserved Typeface Name unless explicit written permission is granted by Copyright Holder. This restriction only applies to the primary font name as presented to the users. +4) The name of Copyright Holder or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version or any related software or other product, except: +(a) to acknowledge the contribution(s) of Copyright Holder and the Author(s); or +(b) with the prior written permission of Copyright Holder. +5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. + +#### Termination + +This license shall immediately terminate and become null and void if any of the above conditions are not met. + +#### Disclaimer + +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK OR OTHER RIGHT. IN NO EVENT SHALL COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OF OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. \ No newline at end of file diff --git a/test/output/build/css-assets-public/_import/assets/atkinson-sample.25NLOUQG.woff2 b/test/output/build/css-assets-public/_import/assets/atkinson-sample.25NLOUQG.woff2 new file mode 100644 index 000000000..99b3c6f5e Binary files /dev/null and b/test/output/build/css-assets-public/_import/assets/atkinson-sample.25NLOUQG.woff2 differ diff --git a/test/output/build/css-assets-public/_import/atkinson.css b/test/output/build/css-assets-public/_import/atkinson.css new file mode 100644 index 000000000..a0da030cd --- /dev/null +++ b/test/output/build/css-assets-public/_import/atkinson.css @@ -0,0 +1,1124 @@ +/* src/style/global.css */ +:root { + --monospace: + Menlo, + Consolas, + monospace; + --monospace-font: 14px/1.5 var(--monospace); + --serif: + "Source Serif Pro", + "Iowan Old Style", + "Apple Garamond", + "Palatino Linotype", + "Times New Roman", + "Droid Serif", + Times, + serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol"; + --sans-serif: + -apple-system, + BlinkMacSystemFont, + "avenir next", + avenir, + helvetica, + "helvetica neue", + ubuntu, + roboto, + noto, + "segoe ui", + arial, + sans-serif; + --theme-blue: #4269d0; + --theme-green: #3ca951; + --theme-red: #ff725c; + --theme-yellow: #efb118; +} +html { + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background: var(--theme-background); + color: var(--theme-foreground); +} +body { + font: 17px/1.5 var(--serif); + margin: 0; +} +a[href] { + color: var(--theme-foreground-focus); +} +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--theme-foreground-alt); + font-weight: 700; + line-height: 1.15; + margin-top: 0; + margin-bottom: 0.25rem; + scroll-margin-top: 1rem; +} +h2 + p, +h3 + p, +h4 + p, +h2 + table, +h3 + table, +h4 + table { + margin-top: 0; +} +h1 + h2 { + color: var(--theme-foreground); + font-size: 20px; + font-style: italic; + font-weight: normal; + margin-bottom: 1rem; +} +a[href] { + text-decoration: none; +} +a[href]:hover, +a[href]:focus { + text-decoration: underline; +} +h1 code, +h2 code, +h3 code, +h4 code, +h5 code, +h6 code { + font-size: 90%; +} +pre { + line-height: 1.5; +} +pre, +code, +tt { + font-family: var(--monospace); + font-size: 14px; +} +img { + max-width: calc(100vw - 28px); +} +p, +table, +figure, +figcaption, +h1, +h2, +h3, +h4, +h5, +h6, +.katex-display { + max-width: 640px; +} +blockquote, +ol, +ul { + max-width: 600px; +} +blockquote { + margin: 1rem 1.5rem; +} +ul ol { + padding-left: 28px; +} +hr { + height: 1px; + margin: 1rem 0; + padding: 1rem 0; + border: none; + background: + no-repeat center/100% 1px linear-gradient( + to right, + var(--theme-foreground-faintest), + var(--theme-foreground-faintest)); +} +pre { + background-color: var(--theme-background-alt); + border-radius: 4px; + margin: 1rem -1rem; + max-width: 960px; + min-height: 1.5em; + padding: 0.5rem 1rem; + overflow-x: auto; + box-sizing: border-box; +} +input:not([type]), +input[type=email], +input[type=number], +input[type=password], +input[type=range], +input[type=search], +input[type=tel], +input[type=text], +input[type=url] { + width: 240px; +} +input, +canvas, +button { + vertical-align: middle; +} +button, +input, +textarea { + accent-color: var(--theme-blue); +} +table { + width: 100%; + border-collapse: collapse; + font: 13px/1.2 var(--sans-serif); +} +table pre, +table code, +table tt { + font-size: inherit; + line-height: inherit; +} +th > pre:only-child, +td > pre:only-child { + margin: 0; + padding: 0; +} +th { + color: var(--theme-foreground); + text-align: left; + vertical-align: bottom; +} +td { + color: var(--theme-foreground-alt); + vertical-align: top; +} +th, +td { + padding: 3px 6.5px 3px 0; +} +th:last-child, +td:last-child { + padding-right: 0; +} +tr:not(:last-child) { + border-bottom: solid 1px var(--theme-foreground-faintest); +} +thead tr { + border-bottom: solid 1px var(--theme-foreground-fainter); +} +figure, +table { + margin: 1rem 0; +} +figure img { + max-width: 100%; +} +figure > h2, +figure > h3 { + font-family: var(--sans-serif); +} +figure > h2 { + font-size: 20px; +} +figure > h3 { + font-size: 16px; + font-weight: normal; +} +figcaption { + font: small var(--sans-serif); + color: var(--theme-foreground-muted); +} +a[href].observablehq-header-anchor { + color: inherit; +} +:root { + --font-big: 700 32px/1 var(--sans-serif); + --font-small: 14px var(--sans-serif); +} +.big { + font: var(--font-big); +} +.small { + font: var(--font-small); +} +.red { + color: var(--theme-red); +} +.yellow { + color: var(--theme-yellow); +} +.green { + color: var(--theme-green); +} +.blue { + color: var(--theme-blue); +} +.muted { + color: var(--theme-foreground-muted); +} + +/* src/style/layout.css */ +:root { + --theme-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 7L8.125 9.5L11.25 7' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); + --theme-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m10.5,11 2.5-3-2.5-3 M6,8h7' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='2' y='2' fill='currentColor' height='12' rx='0.5' width='2'/%3E%3C/svg%3E"); + --theme-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-width='2' fill='none' d='M15,15L10.5,10.5a3,3 0 1,0 -6 -6a3,3 0 1,0 6 6'%3E%3C/path%3E%3C/svg%3E"); +} +#observablehq-main, +#observablehq-header, +#observablehq-footer { + margin: 1rem auto; + max-width: 1152px; +} +#observablehq-main { + min-height: calc(100vh - 20rem); + position: relative; + z-index: 0; +} +#observablehq-footer { + display: block; + margin-top: 10rem; + font: 12px var(--sans-serif); + color: var(--theme-foreground-faint); +} +#observablehq-footer nav { + display: grid; + max-width: 640px; + grid-template-columns: 1fr 1fr; + column-gap: 1rem; + margin-bottom: 1rem; +} +#observablehq-footer nav a { + display: flex; + flex-direction: column; + border: 1px solid var(--theme-foreground-fainter); + border-radius: 8px; + padding: 1rem; + line-height: 1rem; + text-decoration: none; +} +#observablehq-footer nav a span { + font-size: 14px; +} +#observablehq-footer nav a:hover span { + text-decoration: underline; +} +#observablehq-footer nav a:hover { + border-color: var(--theme-foreground-focus); +} +#observablehq-footer nav a[rel=prev] { + grid-column: 1; + align-items: start; +} +#observablehq-footer nav a[rel=next] { + grid-column: 2; + align-items: end; +} +#observablehq-footer nav a::before { + color: var(--theme-foreground-faint); +} +#observablehq-footer nav a[rel=prev]::before { + content: "Previous page"; +} +#observablehq-footer nav a[rel=next]::before { + content: "Next page"; +} +#observablehq-center { + margin: 1rem 2rem; +} +#observablehq-sidebar { + position: fixed; + background: var(--theme-background-alt); + color: var(--theme-foreground-muted); + font: 14px var(--sans-serif); + visibility: hidden; + font-weight: 500; + width: 272px; + z-index: 2; + top: 0; + bottom: 0; + left: -272px; + box-sizing: border-box; + padding: 0 0.5rem 1rem 0.5rem; + overflow-y: auto; +} +#observablehq-sidebar ol, +#observablehq-toc ol { + list-style: none; + margin: 0; + padding: 0; +} +#observablehq-sidebar > ol, +#observablehq-sidebar > details { + position: relative; + padding-bottom: 0.5rem; + margin: 0.5rem 0; + border-bottom: solid 1px var(--theme-foreground-faintest); +} +#observablehq-sidebar > ol:first-child { + position: sticky; + top: 0; + z-index: 1; + background: var(--theme-background-alt); + font-size: 16px; + font-weight: 700; + padding-top: 1rem; + padding-left: 0.5rem; + margin: 0; + margin-left: -0.5rem; + color: var(--theme-foreground); +} +#observablehq-sidebar > ol:last-child, +#observablehq-sidebar > details:last-child { + border-bottom: none; +} +#observablehq-sidebar summary { + font-weight: 700; + color: var(--theme-foreground); + cursor: default; +} +#observablehq-sidebar summary::-webkit-details-marker, +#observablehq-sidebar summary::marker { + display: none; +} +#observablehq-sidebar summary::after { + position: absolute; + right: 0.5rem; + width: 1rem; + height: 1rem; + background: var(--theme-foreground-muted); + content: ""; + -webkit-mask: var(--theme-caret); + mask: var(--theme-caret); + transition: transform 250ms ease; + transform: rotate(-90deg); + transform-origin: 50% 50%; +} +#observablehq-sidebar summary:hover::after { + color: var(--theme-foreground); +} +#observablehq-sidebar details[open] summary::after { + transform: rotate(0deg); +} +#observablehq-sidebar-toggle { + position: fixed; + appearance: none; + background: none; + top: 0; + left: 0; + height: 100%; + width: 2rem; + display: flex; + align-items: center; + justify-content: center; + cursor: e-resize; + margin: 0; + color: var(--theme-foreground-muted); + z-index: 1; +} +#observablehq-sidebar-close { + position: absolute; + top: 1rem; + right: 0; + width: 2rem; + height: 2.2rem; + display: flex; + align-items: center; + justify-content: center; + color: var(--theme-foreground-muted); + cursor: w-resize; + z-index: 2; +} +#observablehq-sidebar-toggle::before, +#observablehq-sidebar-close::before { + content: ""; + width: 1rem; + height: 1rem; + background: currentColor; + -webkit-mask: var(--theme-toggle); + mask: var(--theme-toggle); +} +#observablehq-sidebar-close::before { + transform: scaleX(-1); +} +#observablehq-sidebar summary, +.observablehq-link a { + display: flex; + padding: 0.5rem 1rem 0.5rem 1.5rem; + margin-left: -0.5rem; + align-items: center; +} +#observablehq-sidebar summary:hover, +.observablehq-link-active a, +.observablehq-link a:hover { + background: var(--theme-background); +} +.observablehq-link a:hover { + color: var(--theme-foreground-focus); +} +#observablehq-toc { + display: none; + position: fixed; + color: var(--theme-foreground-muted); + font: 400 14px var(--sans-serif); + z-index: 1; + top: 0; + right: 0; + bottom: 0; + overflow-y: auto; +} +#observablehq-toc nav { + width: 192px; + margin: 2rem 0; + padding: 0 1rem; + box-sizing: border-box; + border-left: solid 1px var(--theme-foreground-faintest); +} +#observablehq-toc div { + font-weight: 700; + color: var(--theme-foreground); + margin-bottom: 0.5rem; +} +.observablehq-secondary-link a { + display: block; + padding: 0.25rem 0; +} +.observablehq-link:not(.observablehq-link-active) a[href]:not(:hover), +.observablehq-secondary-link:not(.observablehq-secondary-link-active) a[href]:not(:hover) { + color: inherit; +} +.observablehq-link-active, +.observablehq-secondary-link-active { + position: relative; +} +.observablehq-link-active::before, +.observablehq-secondary-link-highlight { + content: ""; + position: absolute; + width: 3px; + background: var(--theme-foreground-focus); +} +.observablehq-link-active::before { + top: 0; + bottom: 0; + left: -0.5rem; +} +.observablehq-secondary-link-highlight { + left: 1px; + top: 2rem; + height: 0; + transition: top 150ms ease, height 150ms ease; +} +#observablehq-sidebar { + transition: visibility 150ms 0ms, left 150ms 0ms ease; +} +.observablehq-sidebar-open ~ #observablehq-sidebar, +#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar { + left: 0; + visibility: initial; + box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1); + transition: visibility 0ms 0ms, left 150ms 0ms ease; +} +#observablehq-sidebar-backdrop { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 2; +} +.observablehq-sidebar-open ~ #observablehq-sidebar-backdrop, +#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar-backdrop { + display: initial; +} +@media (prefers-color-scheme: dark) { + #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar { + box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.5); + } +} +@media (min-width: calc(640px + 6rem + 272px)) { + #observablehq-sidebar { + transition: none !important; + } + #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar-backdrop { + display: none; + } + #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar, + #observablehq-sidebar-toggle:indeterminate ~ #observablehq-sidebar { + left: 0; + visibility: initial; + box-shadow: none; + border-right: solid 1px var(--theme-foreground-faintest); + } + #observablehq-sidebar-toggle:checked ~ #observablehq-center, + #observablehq-sidebar-toggle:indeterminate ~ #observablehq-center { + padding-left: calc(272px + 1rem); + padding-right: 1rem; + } +} +@media (min-width: calc(640px + 6rem + 192px)) { + #observablehq-toc ~ #observablehq-center { + padding-right: calc(192px + 1rem); + } + #observablehq-toc { + display: block; + } +} +@media (min-width: calc(640px + 6rem + 272px)) { + #observablehq-sidebar-toggle:checked ~ #observablehq-toc, + #observablehq-sidebar-toggle:indeterminate ~ #observablehq-toc { + display: none; + } +} +@media (min-width: calc(640px + 6rem + 272px + 192px)) { + #observablehq-sidebar-toggle:checked ~ #observablehq-toc, + #observablehq-sidebar-toggle:indeterminate ~ #observablehq-toc, + #observablehq-toc { + display: block; + } + #observablehq-sidebar-toggle:checked ~ #observablehq-toc ~ #observablehq-center, + #observablehq-sidebar-toggle:indeterminate ~ #observablehq-toc ~ #observablehq-center, + #observablehq-toc ~ #observablehq-center { + padding-right: calc(192px + 1rem); + } +} +.observablehq-pre-container { + position: relative; + margin: 1rem -1rem; + max-width: 960px; +} +.observablehq-pre-container::after { + position: absolute; + top: 0; + right: 0; + height: 21px; + font: 12px var(--sans-serif); + color: var(--theme-foreground-muted); + background: + linear-gradient( + to right, + transparent, + var(--theme-background-alt) 40%); + padding: 0.5rem 0.5rem 0.5rem 1.5rem; +} +.observablehq-pre-container[data-language]::after { + content: attr(data-language); +} +.observablehq-pre-container pre { + padding-right: 4rem; + margin: 0; + max-width: none; +} +.observablehq-pre-copy { + position: absolute; + top: 0; + right: 0; + background: none; + color: transparent; + border: none; + border-radius: 4px; + padding: 0 8px; + margin: 4px; + height: 29px; + cursor: pointer; + z-index: 1; + display: flex; + align-items: center; +} +.observablehq-pre-container[data-copy] .observablehq-pre-copy, +.observablehq-pre-container:hover .observablehq-pre-copy, +.observablehq-pre-container .observablehq-pre-copy:focus { + background: var(--theme-background-alt); + color: var(--theme-foreground-faint); +} +.observablehq-pre-container .observablehq-pre-copy:hover { + color: var(--theme-foreground-muted); +} +.observablehq-pre-container .observablehq-pre-copy:active { + color: var(--theme-foreground); + background: var(--theme-foreground-faintest); +} +#observablehq-sidebar.observablehq-search-results > ol:not(:first-child), +#observablehq-sidebar.observablehq-search-results > details { + display: none; +} +#observablehq-search { + position: relative; + padding: 0.5rem 0 0 0; + display: flex; + align-items: center; +} +#observablehq-search input { + padding: 6px 4px 6px 2.2em; + width: 100%; + border: none; + border-radius: 4px; + background-color: var(--theme-background); + font-size: 13.3px; + height: 28px; +} +#observablehq-search input::placeholder { + color: var(--theme-foreground-faint); +} +#observablehq-search::before { + position: absolute; + left: 0.5rem; + content: ""; + width: 1rem; + height: 1rem; + background: currentColor; + -webkit-mask: var(--theme-magnifier); + mask: var(--theme-magnifier); + pointer-events: none; +} +#observablehq-search::after { + position: absolute; + right: 6px; + content: attr(data-shortcut); + pointer-events: none; +} +#observablehq-search:focus-within::after { + content: ""; +} +#observablehq-search-results { + --relevance-width: 32px; + position: absolute; + overflow-y: auto; + top: 6.5rem; + left: 0; + right: 0.5rem; + bottom: 0; +} +#observablehq-search-results a span { + max-width: 184px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +#observablehq-search-results div { + text-align: right; + font-size: 10px; + margin: 0.5em; +} +#observablehq-search-results li { + position: relative; + display: flex; + align-items: center; +} +#observablehq-search-results a { + flex-grow: 1; +} +#observablehq-search-results li:after, +#observablehq-search-results a:after { + content: ""; + width: var(--relevance-width); + height: 4px; + position: absolute; + right: 0.5em; + border-radius: 2px; + background: var(--theme-foreground-muted); +} +#observablehq-search-results li.observablehq-link-active:after { + background: var(--theme-foreground-focus); +} +#observablehq-search-results a:after { + background: var(--theme-foreground-faintest); +} +#observablehq-search-results li[data-score="0"]:after { + width: calc(var(--relevance-width) * 0.125); +} +#observablehq-search-results li[data-score="1"]:after { + width: calc(var(--relevance-width) * 0.25); +} +#observablehq-search-results li[data-score="2"]:after { + width: calc(var(--relevance-width) * 0.4375); +} +#observablehq-search-results li[data-score="3"]:after { + width: calc(var(--relevance-width) * 0.625); +} +#observablehq-search-results li[data-score="4"]:after { + width: calc(var(--relevance-width) * 0.8125); +} +@media print { + #observablehq-center { + padding-left: 1em !important; + } + #observablehq-sidebar, + #observablehq-footer { + display: none !important; + } +} + +/* src/style/grid.css */ +#observablehq-center { + container-type: inline-size; +} +.grid { + margin: 1rem 0; + display: grid; + gap: 1rem; + grid-auto-rows: 1fr; +} +.grid svg { + overflow: visible; +} +.grid figure { + margin: 0; +} +.grid > * > p:first-child { + margin-top: 0; +} +.grid > * > p:last-child { + margin-bottom: 0; +} +@container (min-width: 640px) { + .grid-cols-2, + .grid-cols-4 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .grid-cols-2 .grid-colspan-2, + .grid-cols-2 .grid-colspan-3, + .grid-cols-2 .grid-colspan-4, + .grid-cols-4 .grid-colspan-2, + .grid-cols-4 .grid-colspan-3, + .grid-cols-4 .grid-colspan-4 { + grid-column: span 2; + } +} +@container (min-width: 720px) { + .grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .grid-cols-3 .grid-colspan-2 { + grid-column: span 2; + } + .grid-cols-3 .grid-colspan-3 { + grid-column: span 3; + } +} +@container (min-width: 1080px) { + .grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .grid-cols-4 .grid-colspan-3 { + grid-column: span 3; + } + .grid-cols-4 .grid-colspan-4 { + grid-column: span 4; + } +} +.grid-rowspan-2 { + grid-row: span 2; +} +.grid-rowspan-3 { + grid-row: span 3; +} +.grid-rowspan-4 { + grid-row: span 4; +} + +/* src/style/note.css */ +.note, +.tip, +.warning, +.caution { + border-left: solid 1px var(--theme-foreground-fainter); + padding: 0 2rem; + margin: 1rem 0; + box-sizing: border-box; + max-width: 640px; +} +.note::before, +.tip::before, +.warning::before, +.caution::before { + content: "Note"; + display: block; + margin-bottom: 1rem; + font-weight: 700; + color: var(--theme-foreground-muted); +} +.tip { + border-left-color: var(--theme-green); +} +.tip::before { + content: "Tip"; + color: var(--theme-green); +} +.warning { + border-left-color: var(--theme-yellow); +} +.warning::before { + content: "Warning"; + color: var(--theme-yellow); +} +.caution { + border-left-color: var(--theme-red); +} +.caution::before { + content: "Caution"; + color: var(--theme-red); +} +.note[label]::before, +.tip[label]::before, +.warning[label]::before, +.caution[label]::before { + content: attr(label); +} + +/* src/style/card.css */ +.card { + background: var(--theme-background-alt); + border: solid 1px var(--theme-foreground-faintest); + border-radius: 0.75rem; + padding: 1rem; + margin: 1rem 0; + font: 14px var(--sans-serif); +} +.grid > .card, +.card figure { + margin: 0; +} +.card h2, +.card h3 { + font-size: inherit; +} +.card h2 { + font-weight: 500; + font-size: 15px; +} +.card h3 { + font-weight: 400; + color: var(--theme-foreground-muted); +} +.card h2 ~ svg, +.card h3 ~ svg, +.card h2 ~ p, +.card h3 ~ p { + margin-top: 1rem; +} + +/* src/style/inspector.css */ +.observablehq--block:not(.observablehq--loading):empty { + margin: 0; +} +@keyframes observablehq-loading { + from { + transform: rotate(0); + } + to { + transform: rotate(360deg); + } +} +.observablehq--loading::before { + content: "\21bb"; + font: var(--monospace-font); + color: var(--theme-foreground-muted); + display: inline-block; + transform-origin: 0.32em 55%; + animation-name: observablehq-loading; + animation-timing-function: linear; + animation-duration: 1s; + animation-iteration-count: infinite; +} +.observablehq--block.observablehq--loading::before { + display: block; +} +.observablehq--block { + margin: 1rem 0; +} +.observablehq--block .observablehq, +.observablehq--block .observablehq--inspect { + display: block; +} +.observablehq--collapsed, +.observablehq--expanded.observablehq--inspect a { + cursor: pointer; +} +.observablehq--caret { + margin-right: 4px; + vertical-align: baseline; +} +.observablehq--field { + text-indent: -1rem; + margin-left: 1rem; +} +.observablehq--inspect { + font: var(--monospace-font); + overflow-x: auto; + white-space: pre; +} +.observablehq--inspect.observablehq--import { + white-space: normal; +} +.observablehq--inspect::-webkit-scrollbar { + display: none; +} +.observablehq--error .observablehq--inspect { + word-break: break-all; + white-space: pre-wrap; +} +.observablehq--string-expand { + margin-left: 6px; + padding: 2px 6px; + border-radius: 2px; + font-size: 80%; + background: var(--theme-background-alt); + cursor: pointer; + vertical-align: middle; +} +.observablehq--keyword, +.hljs-doctag, +.hljs-keyword, +.hljs-meta .hljs-keyword, +.hljs-template-tag, +.hljs-template-variable, +.hljs-type, +.hljs-variable.language_ { + color: var(--syntax-keyword); +} +.observablehq--symbol, +.hljs-title, +.hljs-title.class_, +.hljs-title.class_.inherited__, +.hljs-title.function_ { + color: var(--syntax-entity); +} +.observablehq--index, +.observablehq--key, +.hljs-attr, +.hljs-attribute, +.hljs-meta, +.hljs-operator, +.hljs-variable, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-selector-id { + color: var(--syntax-constant); +} +.observablehq--regexp, +.observablehq--string, +.hljs-regexp, +.hljs-string, +.hljs-meta .hljs-string { + color: var(--syntax-string); +} +.observablehq--null, +.observablehq--undefined, +.hljs-built_in, +.hljs-literal, +.hljs-symbol { + color: var(--syntax-variable); +} +.observablehq--prototype-key, +.observablehq--empty, +.hljs-comment, +.hljs-formula { + color: var(--syntax-comment); +} +.observablehq--bigint, +.observablehq--boolean, +.observablehq--date, +.observablehq--forbidden, +.observablehq--number, +.hljs-name, +.hljs-number, +.hljs-quote, +.hljs-selector-tag, +.hljs-selector-pseudo { + color: var(--syntax-entity-tag); +} +.hljs-subst { + color: var(--syntax-storage-modifier-import); +} +.hljs-section { + color: var(--syntax-markup-heading); + font-weight: bold; +} +.hljs-bullet { + color: var(--syntax-markup-list); +} +.hljs-emphasis { + color: var(--syntax-markup-italic); + font-style: italic; +} +.hljs-strong { + color: var(--syntax-markup-bold); + font-weight: bold; +} +.hljs-addition { + color: var(--syntax-markup-inserted); + background-color: var(--syntax-markup-inserted-background); +} +.hljs-deletion { + color: var(--syntax-markup-deleted); + background-color: var(--syntax-markup-deleted-background); +} +.observablehq--empty { + font-style: oblique; +} +.observablehq--error { + color: var(--syntax-keyword); +} + +/* src/style/plot.css */ +.plot-d6a7b5 { + --plot-background: var(--theme-background); +} +p .plot-d6a7b5 { + display: inline-block; +} + +/* src/style/default.css */ + +/* src/style/syntax-light.css */ +:root { + --syntax-keyword: #d73a49; + --syntax-entity: #6f42c1; + --syntax-constant: #005cc5; + --syntax-string: #032f62; + --syntax-variable: #e36209; + --syntax-comment: var(--theme-foreground-muted); + --syntax-entity-tag: #22863a; + --syntax-storage-modifier-import: #24292e; + --syntax-markup-heading: #005cc5; + --syntax-markup-list: #735c0f; + --syntax-markup-italic: #24292e; + --syntax-markup-bold: #24292e; + --syntax-markup-inserted: #22863a; + --syntax-markup-inserted-background: #f0fff4; + --syntax-markup-deleted: #b31d28; + --syntax-markup-deleted-background: #ffeef0; +} + +/* src/style/abstract-light.css */ +:root { + --theme-background-b: color-mix(in srgb, var(--theme-foreground) 4%, var(--theme-background-a)); + --theme-background: var(--theme-background-a); + --theme-background-alt: var(--theme-background-b); + --theme-foreground-alt: color-mix(in srgb, var(--theme-foreground) 90%, var(--theme-background-a)); + --theme-foreground-muted: color-mix(in srgb, var(--theme-foreground) 60%, var(--theme-background-a)); + --theme-foreground-faint: color-mix(in srgb, var(--theme-foreground) 50%, var(--theme-background-a)); + --theme-foreground-fainter: color-mix(in srgb, var(--theme-foreground) 30%, var(--theme-background-a)); + --theme-foreground-faintest: color-mix(in srgb, var(--theme-foreground) 14%, var(--theme-background-a)); + color-scheme: light; +} + +/* src/style/theme-glacier.css */ +:root { + --theme-foreground: #1c3957; + --theme-foreground-focus: #d75c48; + --theme-background-a: #f4faff; +} + +/* test/input/build/css-assets-public/atkinson.css */ +@font-face { + font-family: "atkinson"; + src: url("./assets/atkinson-sample.25NLOUQG.woff2") format("woff2"); +} +:root { + --serif: atkinson; +} diff --git a/test/output/build/css-assets-public/_observablehq/client.js b/test/output/build/css-assets-public/_observablehq/client.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/runtime.js b/test/output/build/css-assets-public/_observablehq/runtime.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib.js b/test/output/build/css-assets-public/_observablehq/stdlib.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib/dot.js b/test/output/build/css-assets-public/_observablehq/stdlib/dot.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib/duckdb.js b/test/output/build/css-assets-public/_observablehq/stdlib/duckdb.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib/inputs.css b/test/output/build/css-assets-public/_observablehq/stdlib/inputs.css new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib/inputs.js b/test/output/build/css-assets-public/_observablehq/stdlib/inputs.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib/mermaid.js b/test/output/build/css-assets-public/_observablehq/stdlib/mermaid.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib/sqlite.js b/test/output/build/css-assets-public/_observablehq/stdlib/sqlite.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib/tex.js b/test/output/build/css-assets-public/_observablehq/stdlib/tex.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib/vega-lite.js b/test/output/build/css-assets-public/_observablehq/stdlib/vega-lite.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib/xlsx.js b/test/output/build/css-assets-public/_observablehq/stdlib/xlsx.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/_observablehq/stdlib/zip.js b/test/output/build/css-assets-public/_observablehq/stdlib/zip.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-assets-public/index.html b/test/output/build/css-assets-public/index.html new file mode 100644 index 000000000..1287f4343 --- /dev/null +++ b/test/output/build/css-assets-public/index.html @@ -0,0 +1,68 @@ + + + +Atkinson Hyperlegible + + + + + + + + + + +
+
+

Atkinson Hyperlegible

+

from the Braille Institute

+

a typeface providing greater legibility and readability for low vision readers

+

Atkinson Hyperlegible font is named after Braille Institute founder, J. Robert Atkinson. What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability. Free for anyone to use!

+

For more see the brailleinstitute.org/freefont web page.

+
+

Font License

+

Copyright © 2020, Braille Institute of America, Inc., brailleinstitute.org/freefont with Reserved Typeface Name Atkinson Hyperlegible Font.

+

General

+

Copyright Holder allows the Font to be used, studied, modified and redistributed freely as long as it is not sold by itself. The Font, including any derivative works, may be bundled, embedded, redistributed and/or sold with any software or other work provided that the Reserved Typeface Name is not used on, in or by any derivative work. The Font and derivatives, however, cannot be released under any other type of license. The requirement for the Font to remain under this license does not +apply to any document created using the Font or any of its derivatives.

+

Definitions

+
    +
  • "Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
    • +
  • “Copyright Holder” refers to Braille Institute of America, Inc.
    • +
  • “Font” refers to the Atkinson Hyperlegible Font developed by Copyright Holder.
    • +
  • "Font Software" refers to the set of files released by Copyright Holder under this license. This may include source files, build scripts and documentation.
    • +
  • "Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
    • +
  • "Original Version" refers to the collection of the Font Software components as distributed by Copyright Holder.
    • +
  • "Reserved Typeface Name" refers to the name Atkinson Hyperlegible Font.
    • +
+

Permission & Conditions

+

Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:

+
    +
  1. Neither the Font Software nor any of its individual components, in Original Version or Modified Version, may be sold by itself.
    2. +
  2. The Original Version or Modified Version of the Font Software may be bundled, redistributed and/or sold with any other software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
    3. +
  3. No Modified Version of the Font Software may use the Reserved Typeface Name unless explicit written permission is granted by Copyright Holder. This restriction only applies to the primary font name as presented to the users.
    4. +
  4. The name of Copyright Holder or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version or any related software or other product, except: +(a) to acknowledge the contribution(s) of Copyright Holder and the Author(s); or +(b) with the prior written permission of Copyright Holder.
    5. +
  5. The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license.
    6. +
+

Termination

+

This license shall immediately terminate and become null and void if any of the above conditions are not met.

+

Disclaimer

+

THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK OR OTHER RIGHT. IN NO EVENT SHALL COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OF OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.

+
+ +