User provided CSS Now user can configure optimal fonts for each their languages.

Changes

15 changed files (+344/-16)

• LICENSES/LicenseRef-AlteDin1451.txt (new)
  • @@ -0,0 +1,95 @@
    + Copyright (c) 2017, Peter Wiegel, www.peter-wiegel.de, wiegel@peter-wiegel.de + with Reserved Font Name "Alte DIN 1451" + + + This Font Software is licensed under the SIL Open Font License, Version 1.1. + This license is copied below, and is also available with a FAQ at: + http://scripts.sil.org/OFL + + + ----------------------------------------------------------- + SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 + ----------------------------------------------------------- + + PREAMBLE + The goals of the Open Font License (OFL) are to stimulate worldwide + development of collaborative font projects, to support the font creation + efforts of academic and linguistic communities, and to provide a free and + open framework in which fonts may be shared and improved in partnership + with others. + + The OFL allows the licensed fonts to be used, studied, modified and + redistributed freely as long as they are not sold by themselves. The + fonts, including any derivative works, can be bundled, embedded, + redistributed and/or sold with any software provided that any reserved + names are not used by derivative works. The fonts and derivatives, + however, cannot be released under any other type of license. The + requirement for fonts to remain under this license does not apply + to any document created using the fonts or their derivatives. + + DEFINITIONS + "Font Software" refers to the set of files released by the Copyright + Holder(s) under this license and clearly marked as such. This may + include source files, build scripts and documentation. + + "Reserved Font Name" refers to any names specified as such after the + copyright statement(s). + + "Original Version" refers to the collection of Font Software components as + distributed by the Copyright Holder(s). + + "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. + + "Author" refers to any designer, engineer, programmer, technical + writer or other person who contributed to the Font Software. + + 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 or Modified Versions, may be sold by itself. + + 2) Original or Modified Versions of the Font Software may be bundled, + redistributed and/or sold with any 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 Font + Name(s) unless explicit written permission is granted by the corresponding + Copyright Holder. This restriction only applies to the primary font name as + presented to the users. + + 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font + Software shall not be used to promote, endorse or advertise any + Modified Version, except to acknowledge the contribution(s) of the + Copyright Holder(s) and the Author(s) or with their explicit written + permission. + + 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. The requirement for fonts to + remain under this license does not apply to any document created + using the Font Software. + + TERMINATION + This license becomes 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 THE + 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 OR INABILITY TO USE THE FONT SOFTWARE OR FROM + OTHER DEALINGS IN THE FONT SOFTWARE.
• cli.ts
  • @@ -135,6 +135,7 @@ "doc-ext",
    "lang", "base-url", "og-image", + "user-css", ], boolean: [ "help",
  • @@ -393,6 +394,11 @@ );
    } } + const userCSSInput = flags["user-css"] || configFile.output?.userCSS; + const userCSS = userCSSInput + ? fileSystemReader.fromFsPath(userCSSInput) + : undefined; + const pageBuilder = new DefaultThemeBuilder({ siteName, copyright,
  • @@ -403,6 +409,7 @@ baseURL,
    openGraph: ogImage && { image: ogImage, }, + userCSS, }); const documentTree = await treeBuilder.build({
  • @@ -503,6 +510,13 @@ --out <PATH>
    Path to the output directory. Macana creates the target directory if it does not exist at the path. Use slash ("/") for path separator regardless of platform. Corresponding config key is ${p("output.path")} (${t("string")}). + + --user-css <PATH> + Path to the user provided CSS. This CSS contents will be appended to the final CSS: + this CSS can override every styles. The target file MUST be inside ${ + b("VAULT_PATH") + }. + Corresponding config key is ${p("output.userCSS")} (${t("string")}). --base-url <PATH OR URL> URL or path to base at.
• cli/config.ts
  • @@ -17,6 +17,8 @@
    precompress?: boolean; baseURL?: string; + + userCSS?: string; }; metadata?: {
  • @@ -77,6 +79,7 @@ output: parser.object({
    path: fsPathParser, baseURL: parser.string({ nonEmpty: true, trim: true }), precompress: parser.boolean, + userCSS: fsPathParser, }), metadata: parser.object({ name: parser.string({ nonEmpty: true }),
• deno.jsonc
  • @@ -17,7 +17,7 @@ "exclude": ["require-await", "require-yield", "no-fallthrough"]
    } }, "tasks": { - "build-docs": "deno run --allow-read=docs --allow-write=docs/.dist cli.ts --config docs/.macana/config.jsonc", + "build-docs": "deno run --allow-read=. --allow-write=docs/.dist cli.ts --config docs/.macana/config.jsonc", "serve-docs": "cd docs/.dist && deno run --allow-read=. --allow-net https://deno.land/std/http/file_server.ts ." } }
• deno.lock
  • @@ -192,6 +192,7 @@ "https://deno.land/std@0.224.0/jsonc/mod.ts": "1756f094e00894ec27416b4fcccbcf445e73892a83cf1937de3aad7de2d5da7c",
    "https://deno.land/std@0.224.0/jsonc/parse.ts": "06fbe10f0bb0cba684f7902bf7de5126b16eb0e5a82220c98a4b86675c7f9cff", "https://deno.land/x/brotli@0.1.7/mod.ts": "08b913e51488b6e7fa181f2814b9ad087fdb5520041db0368f8156bfa45fd73e", "https://deno.land/x/brotli@0.1.7/wasm.js": "77771b89e89ec7ff6e3e0939a7fb4f9b166abec3504cec0532ad5c127d6f35d2", + "https://deno.land/x/hyperactive_css@v0.2.0/index.ts": "408e709caf18cdd4a6313d54a8241359913c0733e851a2c62de798dd9c8398be", "https://deno.land/x/lz4@v0.1.2/mod.ts": "4decfc1a3569d03fd1813bd39128b71c8f082850fe98ecfdde20025772916582", "https://deno.land/x/lz4@v0.1.2/wasm.js": "b9c65605327ba273f0c76a6dc596ec534d4cda0f0225d7a94ebc606782319e46", "https://deno.land/x/zstd_wasm@0.0.21/deno/zstd.deno.js": "189187a43a4bdc8d695ff2f6525c8d3461cbd715333123e502a6a3bd84c272b4",
• deps/deno.land/x/hyperactive_css/mod.ts (new)
  • @@ -0,0 +1,5 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // + // SPDX-License-Identifier: Apache-2.0 + + export * from "https://deno.land/x/hyperactive_css@v0.2.0/index.ts";
• docs/.macana/config.jsonc
  • @@ -3,7 +3,8 @@ "input": {
    "path": "../" }, "output": { - "path": "../.dist" + "path": "../.dist", + "userCSS": "../Assets/user.css" }, "documents": { "defaultLanguage": "en-US",
• docs/Assets/din1451alt.ttf (new)
• docs/Assets/din1451alt.ttf.license (new)
  • @@ -0,0 +1,3 @@
    + SPDX-FileCopyrightText: 2017, Peter Wiegel, www.peter-wiegel.de, wiegel@peter-wiegel.de + + SPDX-License-Identifier: LicenseRef-AlteDin1451
• docs/Assets/user.css (new)
  • @@ -0,0 +1,17 @@
    + /* SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + * SPDX-License-Identifier: Apache-2.0 + */ + + @font-face { + font-family: "DIN"; + src: url("din1451alt.ttf"); + } + + header { + font-family: "DIN", sans-serif; + } + + header span { + margin-top: 0.125em; + line-height: 1; + }
• docs/en/References/Config.md
  • @@ -31,6 +31,17 @@
    Path part needs to end with trailing slash: otherwise the last segment will be omitted. For example, link for the `Foo.md` under `--base-url /bar/baz` will look like `/bar/Foo/`. + ### `output.userCSS` + + - Type: `string` (file path) + - CLI: `--user-css <PATH>` option + + Path to the user provided CSS file. + Path needs to be relative and inside the vault, and will be resolved from the config file. + + Assets referenced in the CSS file are automatically included in the final output, such as font file. + Referenced assets needs to be relative and inside the vault too. + ### `output.precompress` - Type: `boolean`
• docs/en/Roadmap.md
  • @@ -1,6 +1,6 @@
    --- createdAt: 2024-04-15T23:00:00+09:00 - updatedAt: 2024-05-29T15:00:00+09:00 + updatedAt: 2024-05-29T22:50:00+09:00 --- ## v1.0
  • @@ -16,8 +16,8 @@
    ## v0.2 - [x] Option for OpenGraph attributes - - [ ] Custom fonts per language - - [ ] User provided global CSS + - [x] Custom fonts per language + - [x] User provided global CSS - [ ] Headings down levelling option (render `# Foo` as `<h2>Foo</h2>`) - [ ] 404 page
• filesystem_reader/deno_fs.ts
  • @@ -2,7 +2,7 @@ // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
    // // SPDX-License-Identifier: Apache-2.0 - import { SEPARATOR } from "../deps/deno.land/std/path/mod.ts"; + import { relative, SEPARATOR } from "../deps/deno.land/std/path/mod.ts"; import { logger } from "../logger.ts";
  • @@ -216,6 +216,23 @@ },
    }; return root; + } + + /** + * This method MAY require "read" permission for CWD. + */ + fromFsPath(path: string): readonly string[] { + const rel = relative(this.#root, path).split(SEPARATOR); + + return rel.filter((segment) => { + if (segment === "..") { + throw new Error( + "DenoFsReader: Access to outside the reader root directory.", + ); + } + + return segment !== "."; + }); } #constructParents(
• page_builder/default_theme/css.ts
  • @@ -2,7 +2,9 @@ // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
    // // SPDX-License-Identifier: Apache-2.0 - interface Css { + import * as hCSS from "../../deps/deno.land/x/hyperactive_css/mod.ts"; + + export interface Css { readonly chunks: ReadonlySet<string>; }
  • @@ -15,6 +17,12 @@ ...params: readonly string[]
    ): Css { const code = cssTmplBuilder(tmpl, params); + return { + chunks: new Set([code]), + }; + } + + export function fromString(code: string): Css { return { chunks: new Set([code]), };
  • @@ -94,3 +102,101 @@ names.map((name, i) => name ? [name, `${prefix}__${i.toString(31)}`] : null)
    .filter((entry): entry is NonNullable<typeof entry> => !!entry), ); } + + export interface CSSAssets { + paths: readonly string[]; + + replace(fn: (from: string) => string): string; + } + + export function getAssets(code: string): CSSAssets { + const ast = hCSS.parseAStylesheet(code); + + const assets = ast.rules.map((rule) => parseRule(rule)).flat().filter( + (token) => { + // URL + if (/^[a-z0-9]+:/.test(token.value)) { + return false; + } + + // Absolute URL + if (token.value.startsWith("/")) { + return false; + } + + return true; + }, + ); + + return { + paths: assets.map((token) => token.value).filter((x, i, arr) => + arr.indexOf(x) === i + ), + replace(f) { + const ordered = assets.sort((a, b) => + b.debug.from.offset - a.debug.from.offset + ); + + let ret = code; + for (const token of ordered) { + if (token instanceof hCSS.StringToken) { + ret = ret.slice(0, token.debug.from.offset + 1) + `"` + + f(token.value) + + `"` + ret.slice(token.debug.to.offset + 1); + } else { + ret = ret.slice(0, token.debug.from.offset + 1) + `url(` + + f(token.value) + + `)` + ret.slice(token.debug.to.offset + 1); + } + } + + return ret; + }, + }; + } + + function parseRule( + rule: hCSS.CSSParserRule, + ): readonly (hCSS.URLToken | hCSS.StringToken)[] { + if (rule instanceof hCSS.AtRule) { + return [ + ...rule.rules.map((rule) => parseRule(rule)).flat(), + ...rule.declarations.map((rule) => parseRule(rule)).flat(), + ]; + } + + if (rule instanceof hCSS.QualifiedRule) { + return rule.declarations.map((decl) => parseRule(decl)).flat(); + } + + if (rule instanceof hCSS.Declaration) { + return rule.value.map((value) => parseToken(value)).flat(); + } + + return []; + } + + function parseToken( + token: hCSS.CSSParserToken, + ): readonly (hCSS.URLToken | hCSS.StringToken)[] { + if (token instanceof hCSS.URLToken) { + return [token]; + } + + if (token instanceof hCSS.SimpleBlock) { + return token.value.map((block) => parseToken(block)).flat(); + } + + if (token instanceof hCSS.Func) { + // hyperactivecss cannot parse `url("...")` as an URL token + if (token.name === "url") { + return token.value.filter((t): t is hCSS.StringToken => + t instanceof hCSS.StringToken + ); + } + + return token.value.map((token) => parseToken(token)).flat(); + } + + return []; + }
• page_builder/default_theme/mod.ts
  • @@ -26,12 +26,14 @@ type ObsidianMarkdownDocument,
    } from "../../content_parser/obsidian_markdown.ts"; import type { JSONCanvasDocument } from "../../content_parser/json_canvas.ts"; import * as jsonCanvas from "../../content_parser/json_canvas/utils.ts"; + import type { FileSystemWriter } from "../../filesystem_writer/interface.ts"; import type { AssetToken, Document, DocumentDirectory, DocumentToken, DocumentTree, + RootDirectoryReader, } from "../../types.ts"; import * as css from "./css.ts";
  • @@ -124,6 +126,11 @@ binary: Uint8Array;
    }; /** + * Path to the user provided CSS file. + */ + userCSS?: readonly string[]; + + /** * URL or path to base at. */ baseURL?: URL | string;
  • @@ -154,6 +161,7 @@ };
    #siteName: string; #baseURL?: URL | string; #openGraph: DefaultThemeBuilderConstructorParameters["openGraph"]; + #userCSS?: readonly string[]; constructor( {
  • @@ -164,6 +172,7 @@ siteLogo,
    siteName, baseURL, openGraph, + userCSS, }: DefaultThemeBuilderConstructorParameters, ) { this.#copyright = copyright;
  • @@ -173,6 +182,7 @@ this.#siteLogo = siteLogo;
    this.#siteName = siteName; this.#baseURL = baseURL; this.#openGraph = openGraph; + this.#userCSS = userCSS; } async build(
  • @@ -180,14 +190,23 @@ { documentTree, fileSystemReader, fileSystemWriter }: BuildParameters,
    ) { const start = performance.now(); + const root = await fileSystemReader.getRootDirectory(); + + const baseStyles = css.join( + globalStyles, + fromMdastStyles, + markdownPageStyles, + jsonCanvasPageStyles, + jsonCanvasRendererStyles, + ); + + const userCss = await this.#loadUserCSSAndCopyAssets( + root, + fileSystemWriter, + ); + const styles = css.serialize( - css.join( - globalStyles, - fromMdastStyles, - markdownPageStyles, - jsonCanvasPageStyles, - jsonCanvasRendererStyles, - ), + userCss ? css.join(baseStyles, userCss) : baseStyles, ); const minCss = csso.minify(styles);
  • @@ -200,8 +219,6 @@ await fileSystemWriter.write(
    assets.globalCss, new TextEncoder().encode(minCss.css), ); - - const root = await fileSystemReader.getRootDirectory(); if (this.#faviconSvg) { if (this.#faviconSvg instanceof Uint8Array) {
  • @@ -573,6 +590,44 @@ assets,
    }) )); } + + #loadUserCSSAndCopyAssets = async ( + root: RootDirectoryReader, + writer: FileSystemWriter, + ): Promise<css.Css | null> => { + if (!this.#userCSS) { + return null; + } + + const userCSS = this.#userCSS; + + const file = await root.openFile(userCSS); + const code = new TextDecoder().decode(await file.read()); + + const assets = css.getAssets(code); + + const convertPath = (from: string) => { + return [ + ...userCSS.slice(0, -1), + ...from.split("/").filter((segment) => segment !== "."), + ]; + }; + + for (const asset of assets.paths) { + const path = convertPath(asset); + + await writer.write( + path, + await (await root.openFile(path)).read(), + ); + } + + return css.fromString( + assets.replace((path) => + this.#resolveURL(convertPath(path), [".assets"]) + ), + ); + }; #resolveURL = (to: readonly string[], from: readonly string[]): string => { if (!this.#baseURL) {