for-humanity 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## Unreleased
+
+## 0.3.0 — 2026-10-04
+
+- Support nested document pages with optional `parent` IDs, preserving existing groups and document URLs.
+- Resolve `./` and `../` parent references relative to document files so project folders can also be used as document roots.
+- Reject missing parents, self references, parent cycles and parent links across different group paths.
+- Extend active, hover and keyboard focus tree paths through clickable parent documents.
+- Distinguish sidebar groups from document links and page headings, and rename the table of contents to "On this page" with a gray label matching the groups.
+- Clarify trunk-based development, site deployment and package release policy.
+
+## 0.2.1 — 2026-10-04
+
+- Fingerprint stylesheet and browser-script URLs so new pages cannot reuse assets cached from an older deployment.
+- Cache fingerprinted CSS, scripts and fonts with immutable headers on Cloudflare Pages.
+
 ## 0.2.0 — 2026-10-04
 
 - Support nested navigation with `group` name arrays while keeping single-name groups compatible.

package/README.md

@@ -33,7 +33,7 @@ Write Markdown. Keep the context. Share a static site.
 Node.js 22 or later and pnpm. Install the CLI in your document project:
 
 ```sh
-pnpm add -D --save-exact for-humanity@0.2.0
+pnpm add -D --save-exact for-humanity@0.3.0
 mkdir docs
 ```
 
@@ -52,7 +52,7 @@ pnpm exec for-humanity preview docs
 
 If your Markdown files are in the project root, use `.` instead of `docs`. The root `README.md` becomes the home page; root `AGENTS.md` and `CLAUDE.md` stay out of the site.
 
-Version `0.2.0` supports `dev`, `build` and `preview`. `init` is planned; see the [Roadmap](https://github.com/minu-ha/for-humanity/blob/main/templates/document/roadmap.md) and [Changelog](https://github.com/minu-ha/for-humanity/blob/main/CHANGELOG.md).
+Version `0.3.0` supports `dev`, `build` and `preview`. `init` is planned; see the [Roadmap](https://github.com/minu-ha/for-humanity/blob/main/templates/document/roadmap.md) and [Changelog](https://github.com/minu-ha/for-humanity/blob/main/CHANGELOG.md).
 Cloudflare Pages can host the generated site. See [Deployment](https://github.com/minu-ha/for-humanity/blob/main/templates/document/deployment.md) for the build settings.
 
 ### Develop the kit
@@ -74,7 +74,7 @@ pnpm preview    # Preview the static site
 pnpm build:pages # Add Cloudflare Pages headers and a 404 page
 ```
 
-Changes pushed to `main` update the documentation site. A stable version tag such as `v0.2.0` runs checks, publishes the package to npm, then creates a GitHub Release with the same package file.
+Changes pushed to `main` update the documentation site. A stable version tag such as `v0.3.0` runs checks, publishes the package to npm, then creates a GitHub Release with the same package file.
 The npm README updates with each package release. See [Maintenance](https://github.com/minu-ha/for-humanity/blob/main/templates/document/maintenance.md#packaging-and-release) for the release steps.
 
 ## Make it yours
@@ -95,6 +95,7 @@ export default {
 See [Commands](https://github.com/minu-ha/for-humanity/blob/main/templates/document/commands.md) for using another document folder, and [Settings](https://github.com/minu-ha/for-humanity/blob/main/templates/document/settings.md) for configuration.
 Each document other than the root README chooses a `group` and optional `order`. Pages stay independent; groups do not need parent documents or nested folders. Document names may share the same first letter.
 Use `group: Guide` for one group or `group: [Projects, Example project, Research]` for nested navigation. Group paths do not change document URLs.
+Use `parent: writing` to place a document below another document in the same group. File-relative references such as `parent: ./readme` also work. Parent pages remain clickable and each page keeps its own URL; see [Navigation](https://github.com/minu-ha/for-humanity/blob/main/templates/document/navigation.md).
 
 ## Write with context
 

package/dist/cli.css

@@ -306,8 +306,27 @@
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
   color: var(--app-color-text-muted);
-  font-size: var(--app-font-size-label);
+  font-size: var(--app-font-size-group);
+  line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
+  overflow-wrap: anywhere;
+  &::before {
+    position: absolute;
+    top: calc(0.5lh + var(--app-space-tree-row));
+    left: 0;
+    width: var(--app-space-tree-indent);
+    border-top: 1px solid var(--app-color-border-soft);
+    content: "";
+    pointer-events: none;
+  }
+}
+.wg_shellNavList__link {
+  position: relative;
+  display: block;
+  padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
+  color: var(--app-color-link);
+  font-size: var(--app-font-size-dense);
   line-height: var(--app-line-height-tight);
+  text-decoration: none;
   overflow-wrap: anywhere;
   &::before {
     position: absolute;
@@ -318,6 +337,26 @@
     content: "";
     pointer-events: none;
   }
+  &:where(:hover) {
+    text-decoration: underline;
+  }
+  &:where(:hover)::before {
+    border-top-color: currentcolor;
+  }
+  &:where(:focus-visible) {
+    outline: none;
+    text-decoration: underline;
+  }
+  &:where(:focus-visible)::before {
+    border-top-color: currentcolor;
+  }
+}
+.wg_shellNavList__link--active {
+  color: var(--app-color-link);
+  font-weight: var(--app-font-weight-active);
+  &::before {
+    border-top-color: currentcolor;
+  }
 }
 .wg_shellNavList__item {
   display: flow-root;
@@ -345,77 +384,47 @@
     pointer-events: none;
   }
   &:where(:hover)::after {
-    border-left-color: var(--app-color-text-strong);
+    border-left-color: var(--app-color-link);
   }
   &:where(:has(:focus-visible))::after {
-    border-left-color: var(--app-color-text-strong);
+    border-left-color: var(--app-color-link);
   }
   &:where(:has(~ .wg_shellNavList__item:hover))::before {
-    border-left-color: var(--app-color-text-strong);
+    border-left-color: var(--app-color-link);
   }
   &:where(:has(~ .wg_shellNavList__item :focus-visible))::before {
-    border-left-color: var(--app-color-text-strong);
+    border-left-color: var(--app-color-link);
   }
   & > .wg_shellNavList__root {
     margin-left: var(--app-space-tree-indent);
   }
   &:where(:hover) > .wg_shellNavList__branch::before {
-    border-top-color: var(--app-color-text-strong);
+    border-top-color: var(--app-color-link);
   }
   &:where(:has(:focus-visible)) > .wg_shellNavList__branch::before {
-    border-top-color: var(--app-color-text-strong);
+    border-top-color: var(--app-color-link);
+  }
+  &:where(:hover) > .wg_shellNavList__link::before {
+    border-top-color: var(--app-color-link);
+  }
+  &:where(:has(:focus-visible)) > .wg_shellNavList__link::before {
+    border-top-color: var(--app-color-link);
   }
 }
 .wg_shellNavList__item--trail {
   &::before {
-    border-left-color: var(--app-color-text-strong);
+    border-left-color: var(--app-color-link);
   }
 }
 .wg_shellNavList__item--current {
   &::after {
-    border-left-color: var(--app-color-text-strong);
+    border-left-color: var(--app-color-link);
   }
   & > .wg_shellNavList__branch::before {
-    border-top-color: var(--app-color-text-strong);
-  }
-}
-.wg_shellNavList__link {
-  position: relative;
-  display: block;
-  padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
-  color: var(--app-color-text);
-  font-size: var(--app-font-size-dense);
-  line-height: var(--app-line-height-tight);
-  text-decoration: none;
-  overflow-wrap: anywhere;
-  &::before {
-    position: absolute;
-    top: calc(0.5lh + var(--app-space-tree-row));
-    left: 0;
-    width: var(--app-space-tree-indent);
-    border-top: 1px solid var(--app-color-border-soft);
-    content: "";
-    pointer-events: none;
-  }
-  &:where(:hover) {
-    text-decoration: underline;
+    border-top-color: var(--app-color-link);
   }
-  &:where(:hover)::before {
-    border-top-color: currentcolor;
-  }
-  &:where(:focus-visible) {
-    outline: none;
-    text-decoration: underline;
-  }
-  &:where(:focus-visible)::before {
-    border-top-color: currentcolor;
-  }
-}
-.wg_shellNavList__link--active {
-  color: var(--app-color-text-strong);
-  font-weight: var(--app-font-weight-active);
-  &::before {
-    border-top-color: currentcolor;
+  & > .wg_shellNavList__link::before {
+    border-top-color: var(--app-color-link);
   }
 }
 
@@ -432,7 +441,8 @@
 .wg_shellNav__group {
   margin: 0 0 4px;
   color: var(--app-color-text-muted);
-  font-size: var(--app-font-size-label);
+  font-size: var(--app-font-size-group);
+  line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
   text-box: trim-start cap alphabetic;
 }
 
@@ -448,13 +458,14 @@
   margin-bottom: var(--app-space-inline);
   color: var(--app-color-text-muted);
   font-size: var(--app-font-size-label);
-  font-weight: var(--app-font-weight-mark);
+  font-weight: var(--app-font-weight-strong);
   letter-spacing: var(--app-letter-spacing-label);
 }
 .wg_shellToc__group {
   margin: var(--app-space-stack) 0 4px;
   color: var(--app-color-text-muted);
-  font-size: var(--app-font-size-label);
+  font-size: var(--app-font-size-group);
+  line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
 }
 .wg_shellToc__list {
   margin: 0 0 0 var(--app-space-tree-inset);
@@ -465,7 +476,7 @@
   position: relative;
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
-  color: var(--app-color-text-muted);
+  color: var(--app-color-text);
   font-size: var(--app-font-size-dense);
   line-height: var(--app-line-height-tight);
   text-decoration: none;
@@ -611,7 +622,7 @@
   position: relative;
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
-  color: var(--app-color-text-muted);
+  color: var(--app-color-text);
   font-size: var(--app-font-size-detail);
   line-height: var(--app-line-height-tight);
   text-decoration: none;
@@ -702,6 +713,7 @@
     sans-serif;
   --app-font-mono: "JetBrains Mono Variable", var(--app-font-sans);
   --app-font-brand: "Architects Daughter", var(--app-font-sans);
+  --app-font-size-group: 11px;
   --app-font-size-label: 12px;
   --app-font-size-detail: 12px;
   --app-font-size-dense: 12px;
@@ -711,7 +723,7 @@
   --app-font-size-section: 14px;
   --app-font-size-title: 16px;
   --app-font-weight-mark: 400;
-  --app-font-weight-active: 500;
+  --app-font-weight-active: 600;
   --app-font-weight-strong: 600;
   --app-font-weight-title: 600;
   --app-line-height-title: 1.5;

package/dist/cli.js

@@ -73,8 +73,12 @@ import clsx2 from "clsx";
 import { Fragment } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var WgShellNavList = (props) => {
+  const currentAncestors = new Set(props.currentDoc?.ancestors);
   const entries = [
-    ...props.group.docs.map((doc) => ({ kind: "document", key: `doc:${doc.id}`, doc, current: doc.id === props.currentDoc?.id })),
+    ...props.group.docs.map((doc) => {
+      const active = doc.id === props.currentDoc?.id;
+      return { kind: "document", key: `doc:${doc.id}`, doc, active, current: active || currentAncestors.has(doc.id) };
+    }),
     ...props.group.groups.map((group) => ({
       kind: "group",
       key: `group:${JSON.stringify(group.path)}`,
@@ -91,16 +95,25 @@ var WgShellNavList = (props) => {
         "wg_shellNavList__item--current": entry.current
       }),
       children: [
-        entry.kind === "document" && /* @__PURE__ */ jsx2(
-          "a",
-          {
-            className: clsx2("wg_shellNavList__link", { "wg_shellNavList__link--active": entry.current }),
-            href: `/${entry.doc.id}/`,
-            title: entry.doc.data.label,
-            "aria-current": entry.current ? "page" : void 0,
-            children: entry.doc.data.name
-          }
-        ),
+        entry.kind === "document" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2(
+            "a",
+            {
+              className: clsx2("wg_shellNavList__link", { "wg_shellNavList__link--active": entry.active }),
+              href: `/${entry.doc.id}/`,
+              title: entry.doc.data.label,
+              "aria-current": entry.active ? "page" : void 0,
+              children: entry.doc.data.name
+            }
+          ),
+          entry.doc.children !== void 0 && /* @__PURE__ */ jsx2(
+            WgShellNavList,
+            {
+              group: { name: entry.doc.data.name, path: entry.doc.data.group, docs: entry.doc.children, groups: [] },
+              currentDoc: props.currentDoc
+            }
+          )
+        ] }),
         entry.kind === "group" && /* @__PURE__ */ jsxs2(Fragment, { children: [
           /* @__PURE__ */ jsx2("span", { className: clsx2("wg_shellNavList__branch"), children: entry.group.name }),
           /* @__PURE__ */ jsx2(WgShellNavList, { group: entry.group, currentDoc: props.currentDoc })
@@ -118,7 +131,7 @@ var copy_nav_open = "Open navigation";
 var copy_nav_close = "Close navigation";
 var copy_nav_title = "Navigation";
 var copy_home_missing = "\uBB38\uC11C \uD3F4\uB354\uC5D0 README.md\uB97C \uCD94\uAC00\uD558\uBA74 \uC774\uACF3\uC5D0 \uD648 \uD654\uBA74\uC73C\uB85C \uD45C\uC2DC\uB429\uB2C8\uB2E4.";
-var copy_nav_toc_label = "Contents";
+var copy_nav_toc_label = "On this page";
 var copy_error_home_clash = "\uD648 README\uAC00 \uACB9\uCE5C\uB2E4";
 var copy_error_prefix = "for-humanity";
 var copy_error_font_preload = "Missing bundled font for preload";
@@ -128,6 +141,9 @@ var copy_error_frontmatter = "frontmatter\uAC00 \uC62C\uBC14\uB974\uC9C0 \uC54A\
 var copy_error_navigation_clash = "navigation\uC758 \uBB36\uC74C\uC774 \uACB9\uCE5C\uB2E4";
 var copy_error_doc_id = "\uBB38\uC11C id\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uB294 \uACBD\uB85C";
 var copy_error_doc_id_clash = "\uBB38\uC11C id\uAC00 \uACB9\uCE5C\uB2E4";
+var copy_error_doc_parent_missing = "\uBD80\uBAA8 \uBB38\uC11C\uAC00 \uC5C6\uB2E4";
+var copy_error_doc_parent_cycle = "\uBB38\uC11C parent\uAC00 \uC21C\uD658\uD55C\uB2E4";
+var copy_error_doc_parent_group = "\uBD80\uBAA8 \uBB38\uC11C\uC640 group\uC774 \uB2E4\uB974\uB2E4";
 var copy_error_flow = "\uD750\uB984\uB3C4\uB97C \uADF8\uB9AC\uC9C0 \uBABB\uD588\uB2E4";
 var copy_error_unknown_directive = "\uBAA8\uB974\uB294 \uBD80\uD488\uC774\uB2E4";
 var copy_error_directive_syntax = "\uBD80\uD488 \uBB38\uBC95\uC774 \uC62C\uBC14\uB974\uC9C0 \uC54A\uB2E4";
@@ -138,6 +154,14 @@ var copy_warn_unknown_status = "\uC124\uC815\uC5D0 \uC5C6\uB294 \uC0C1\uD0DC \uB
 var locale_doc_name = "en";
 var locale_doc_group = "ko";
 
+// src/content/to-doc-groups/_to-doc-branches.ts
+var toDocBranches = (options) => {
+  return options.docs.toSorted((a, b) => a.data.order - b.data.order || a.data.name.localeCompare(b.data.name, locale_doc_name) || a.id.localeCompare(b.id, locale_doc_name)).map((doc) => {
+    const children = options.children.get(doc.id);
+    return { ...doc, children: children === void 0 ? void 0 : toDocBranches({ docs: children, children: options.children }) };
+  });
+};
+
 // src/content/to-doc-groups/_to-doc-group-branches.ts
 var toDocGroupBranches = (options) => {
   return [
@@ -157,8 +181,17 @@ var toDocGroupBranches = (options) => {
     return {
       name: group.name,
       path: group.path,
-      docs: group.docs.filter((doc) => doc.data.group.length === group.path.length).toSorted((a, b) => a.data.order - b.data.order || a.data.name.localeCompare(b.data.name, locale_doc_name) || a.id.localeCompare(b.id, locale_doc_name)),
-      groups: toDocGroupBranches({ docs: group.docs, path: group.path, positions: options.positions, unlistedPosition: options.unlistedPosition })
+      docs: toDocBranches({
+        docs: group.docs.filter((doc) => doc.data.group.length === group.path.length && doc.data.parent === void 0),
+        children: options.children
+      }),
+      groups: toDocGroupBranches({
+        docs: group.docs,
+        children: options.children,
+        path: group.path,
+        positions: options.positions,
+        unlistedPosition: options.unlistedPosition
+      })
     };
   });
 };
@@ -166,7 +199,8 @@ var toDocGroupBranches = (options) => {
 // src/content/to-doc-groups/to-doc-groups.ts
 var toDocGroups = (options) => {
   const positions = new Map(options.navigation.flatMap((path, index) => path.map((_name, depth) => [JSON.stringify(path.slice(0, depth + 1)), index])).toReversed());
-  return toDocGroupBranches({ docs: options.docs, path: [], positions, unlistedPosition: options.navigation.length });
+  const children = Map.groupBy(options.docs, (doc) => doc.data.parent);
+  return toDocGroupBranches({ docs: options.docs, children, path: [], positions, unlistedPosition: options.navigation.length });
 };
 
 // src/component/widget/shell/_wg-shell-nav.tsx
@@ -227,7 +261,7 @@ var WgShell = (props) => {
       /* @__PURE__ */ jsx5("style", { dangerouslySetInnerHTML: { __html: props.assets.fontCss } }),
       props.assets.preload.map((href) => /* @__PURE__ */ jsx5("link", { rel: "preload", href, as: "font", type: "font/woff2", crossOrigin: "" }, href)),
       /* @__PURE__ */ jsx5("script", { dangerouslySetInnerHTML: { __html: 'document.documentElement.style.scrollBehavior="auto"' } }),
-      /* @__PURE__ */ jsx5("link", { rel: "stylesheet", href: asset_style_path }),
+      /* @__PURE__ */ jsx5("link", { rel: "stylesheet", href: props.assets.stylePath }),
       props.assets.reload && /* @__PURE__ */ jsx5("script", { dangerouslySetInnerHTML: { __html: reloadScript } })
     ] }),
     /* @__PURE__ */ jsxs5("body", { className: clsx5("wg_shell__root"), children: [
@@ -261,7 +295,7 @@ var WgShell = (props) => {
         /* @__PURE__ */ jsx5("div", { className: clsx5("wg_shell__drawerContent"), "data-navigation-content": "" })
       ] }),
       /* @__PURE__ */ jsx5("img", { className: clsx5("wg_shell__cursorFace"), src: asset_favicon_path, width: "24", height: "24", alt: "", "aria-hidden": "true", draggable: false, "data-cursor-face": "" }),
-      /* @__PURE__ */ jsx5("script", { type: "module", src: asset_client_path })
+      /* @__PURE__ */ jsx5("script", { type: "module", src: props.assets.clientPath })
     ] })
   ] });
 };
@@ -972,7 +1006,7 @@ var createProcessor = (options) => {
 
 // src/content/read-docs.ts
 import { readdir, readFile } from "node:fs/promises";
-import { join, sep } from "node:path";
+import { join, posix as posix2, sep } from "node:path";
 import { VFile } from "vfile";
 import { parse as parseYaml } from "yaml";
 
@@ -1008,6 +1042,10 @@ var docDataSchema = z2.object({
    * 사이드바의 문서 묶음 경로 · 문자열도 배열로 정규화
    */
   group: groupPathSchema,
+  /**
+   * 같은 묶음 안의 부모 문서 id · 확장자 제외, ./·../ 상대 경로도 허용
+   */
+  parent: z2.string().trim().min(1).optional(),
   /**
    * 묶음 안의 읽는 순서 · 미지정 문서는 뒤에서 이름순
    */
@@ -1034,13 +1072,18 @@ var readDocs = async (options) => {
       if (!parsed.success) {
         throw new Error(`${copy_error_frontmatter}: ${path}: ${parsed.error.issues.map((issue) => `${issue.path.join(".")} ${issue.message}`).join(", ")}`);
       }
-      const fh = { frontmatter: parsed.data, headings: [], sections: [] };
+      const data = {
+        ...parsed.data,
+        parent: parsed.data.parent !== void 0 && /^\.\.?\//.test(parsed.data.parent) ? posix2.join(posix2.dirname(id), parsed.data.parent) : parsed.data.parent
+      };
+      const fh = { frontmatter: data, headings: [], sections: [] };
       file.data.fh = fh;
       tree.children = tree.children.filter((node) => node.type !== "yaml");
       const rendered = await options.processor.run(tree, file);
       return {
         id,
-        data: parsed.data,
+        data,
+        ancestors: [],
         html: options.processor.stringify(rendered, file),
         outline: { headings: fh.headings, sections: fh.sections }
       };
@@ -1050,7 +1093,25 @@ var readDocs = async (options) => {
   if (duplicateIds.length > 0) {
     throw new Error(`${copy_error_doc_id_clash}: ${duplicateIds.map((entry) => entry[0]).join(", ")}`);
   }
-  return docs;
+  const docsById = new Map(docs.map((doc) => [doc.id, doc]));
+  return docs.map((doc) => {
+    const ancestors = /* @__PURE__ */ new Set([doc.id]);
+    for (let parentId = doc.data.parent; parentId !== void 0; ) {
+      const parent = docsById.get(parentId);
+      if (parent === void 0) {
+        throw new Error(`${copy_error_doc_parent_missing}: ${doc.id} \u2192 ${parentId}`);
+      }
+      if (ancestors.has(parent.id)) {
+        throw new Error(`${copy_error_doc_parent_cycle}: ${[...ancestors, parent.id].join(" \u2192 ")}`);
+      }
+      if (JSON.stringify(parent.data.group) !== JSON.stringify(doc.data.group)) {
+        throw new Error(`${copy_error_doc_parent_group}: ${doc.id} \u2192 ${parent.id}`);
+      }
+      ancestors.add(parent.id);
+      parentId = parent.data.parent;
+    }
+    return { ...doc, ancestors: [...ancestors].slice(1).toReversed() };
+  });
 };
 
 // src/content/read-home.ts
@@ -1169,17 +1230,26 @@ var toErrorMessage = (error) => {
   return error instanceof Error ? error.message : String(error);
 };
 
-// src/util/font/to-font-css.ts
+// src/util/file/to-asset-path.ts
 import { createHash } from "node:crypto";
 import { readFileSync } from "node:fs";
+import { posix as posix3 } from "node:path";
+var toAssetPath = (options) => {
+  const extension = posix3.extname(options.path);
+  return `${posix3.dirname(options.path)}/${posix3.basename(options.path, extension)}.${createHash("sha256").update(readFileSync(options.file)).digest("hex")}${extension}`;
+};
+
+// src/util/font/to-font-css.ts
+import { createHash as createHash2 } from "node:crypto";
+import { readFileSync as readFileSync2 } from "node:fs";
 import { basename, dirname as dirname2, extname as extname2, join as join3 } from "node:path";
 var toFontCss = (options) => {
   const files = /* @__PURE__ */ new Map();
-  const css = [...readFileSync(options.css, "utf8").matchAll(/@font-face\s*\{[^}]*\}/g)].map(
+  const css = [...readFileSync2(options.css, "utf8").matchAll(/@font-face\s*\{[^}]*\}/g)].map(
     (match) => match[0].replace(/font-display:\s*[^;]+;/g, `font-display: ${font_display_strategy};`).replace(/url\(([^)]+)\)/g, (_match, relativeUrl) => {
       const file = join3(dirname2(options.css), relativeUrl);
       const extension = extname2(file);
-      const hash = createHash("sha256").update(readFileSync(file)).digest("hex").slice(0, font_hash_length);
+      const hash = createHash2("sha256").update(readFileSync2(file)).digest("hex").slice(0, font_hash_length);
       const url = `${options.fontDir}/${basename(file, extension)}.${hash}${extension}`;
       files.set(url, file);
       return `url(${url})`;
@@ -1228,9 +1298,11 @@ var main = async () => {
     throw new Error(`${copy_error_font_preload}: ${font_sans_preload_file}`);
   }
   const fontCss = [sans.css, mono.css, brand.css].join("\n");
+  const stylePath = toAssetPath({ path: asset_style_path, file: join4(kitRoot, "dist/cli.css") });
+  const clientPath = toAssetPath({ path: asset_client_path, file: join4(kitRoot, "dist/client.js") });
   const files = new Map([
-    [asset_style_path, join4(kitRoot, "dist/cli.css")],
-    [asset_client_path, join4(kitRoot, "dist/client.js")],
+    [stylePath, join4(kitRoot, "dist/cli.css")],
+    [clientPath, join4(kitRoot, "dist/client.js")],
     [asset_favicon_path, join4(kitRoot, "src/asset/favicon.svg")],
     ...sans.files,
     ...mono.files,
@@ -1242,7 +1314,7 @@ var main = async () => {
   const app = createApp({
     site: siteConfig,
     store,
-    assets: { fontCss, preload: [...brand.files.keys(), sansPreload[0], ...mono.files.keys()], reload: command === "dev" }
+    assets: { stylePath, clientPath, fontCss, preload: [...brand.files.keys(), sansPreload[0], ...mono.files.keys()], reload: command === "dev" }
   });
   if (command === "build") {
     await rm(outDir, { recursive: true, force: true });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "for-humanity",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "Documents written for humans to read: a docs kit with a sidebar, parts, sections and flowcharts, built on Hono and React",
     "keywords": [
         "docs",

package/src/cli.ts

@@ -25,6 +25,7 @@ import {readHome} from "@/content/read-home";
 import {createDevApp} from "@/dev";
 import {siteConfigSchema} from "@/type/site-config";
 import {toErrorMessage} from "@/util/error/to-error-message";
+import {toAssetPath} from "@/util/file/to-asset-path";
 import {toFontCss} from "@/util/font/to-font-css";
 
 const commands = ["dev", "build", "preview"];
@@ -82,9 +83,11 @@ const main = async () => {
     }
 
     const fontCss = [sans.css, mono.css, brand.css].join("\n");
+    const stylePath = toAssetPath({path: asset_style_path, file: join(kitRoot, "dist/cli.css")});
+    const clientPath = toAssetPath({path: asset_client_path, file: join(kitRoot, "dist/client.js")});
     const files = new Map([
-        [asset_style_path, join(kitRoot, "dist/cli.css")],
-        [asset_client_path, join(kitRoot, "dist/client.js")],
+        [stylePath, join(kitRoot, "dist/cli.css")],
+        [clientPath, join(kitRoot, "dist/client.js")],
         [asset_favicon_path, join(kitRoot, "src/asset/favicon.svg")],
         ...sans.files,
         ...mono.files,
@@ -96,7 +99,7 @@ const main = async () => {
     const app = createApp({
         site: siteConfig,
         store,
-        assets: {fontCss, preload: [...brand.files.keys(), sansPreload[0], ...mono.files.keys()], reload: command === "dev"},
+        assets: {stylePath, clientPath, fontCss, preload: [...brand.files.keys(), sansPreload[0], ...mono.files.keys()], reload: command === "dev"},
     });
 
     if (command === "build") {