for-humanity 0.1.2 → 0.2.1

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") {

package/src/component/widget/shell/_wg-shell-nav-list.css

@@ -0,0 +1,158 @@
+/*
+ * 재귀 문서 목록 · 단계별 가지와 조상 경로의 1px 트리
+ */
+.wg_shellNavList__root {
+    margin: 0 0 0 var(--app-space-tree-inset);
+    padding: 0;
+    list-style: none;
+}
+
+.wg_shellNavList__branch {
+    /* 하위 묶음도 문서와 같은 첫 줄 기준으로 가지 연결 */
+    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);
+    font-size: var(--app-font-size-label);
+    line-height: 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__item {
+    /* 하위 목록을 포함해 다음 형제까지 줄기 연결 */
+    display: flow-root;
+
+    /* 세로 줄기는 각 항목 기준 · 마지막 항목의 첫 줄 가운데에서 종료 */
+    position: relative;
+
+    &::before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        border-left: 1px solid var(--app-color-border-soft);
+        content: "";
+        pointer-events: none;
+    }
+
+    &:where(:last-child)::before {
+        bottom: auto;
+        height: calc(0.5lh + var(--app-space-tree-row));
+    }
+
+    /* hover·키보드 포커스의 도착점 · 첫 줄 아래는 기본 줄기 유지 */
+    &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: calc(0.5lh + var(--app-space-tree-row));
+        border-left: 1px solid transparent;
+        content: "";
+        pointer-events: none;
+    }
+
+    &:where(:hover)::after {
+        border-left-color: var(--app-color-text-strong);
+    }
+
+    &:where(:has(:focus-visible))::after {
+        border-left-color: var(--app-color-text-strong);
+    }
+
+    /* 뒤 항목까지의 세로 경로 · 같은 목록의 형제 안에서만 연결 */
+    &:where(:has(~ .wg_shellNavList__item:hover))::before {
+        border-left-color: var(--app-color-text-strong);
+    }
+
+    &:where(:has(~ .wg_shellNavList__item :focus-visible))::before {
+        border-left-color: var(--app-color-text-strong);
+    }
+
+    & > .wg_shellNavList__root {
+        margin-left: var(--app-space-tree-indent);
+    }
+
+    /* 하위 문서를 탐색할 때 조상 묶음의 가지도 함께 연결 */
+    &:where(:hover) > .wg_shellNavList__branch::before {
+        border-top-color: var(--app-color-text-strong);
+    }
+
+    &:where(:has(:focus-visible)) > .wg_shellNavList__branch::before {
+        border-top-color: var(--app-color-text-strong);
+    }
+}
+
+.wg_shellNavList__item--trail {
+    &::before {
+        border-left-color: var(--app-color-text-strong);
+    }
+}
+
+.wg_shellNavList__item--current {
+    &::after {
+        border-left-color: var(--app-color-text-strong);
+    }
+
+    & > .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;
+    }
+
+    &:where(:hover)::before {
+        border-top-color: currentcolor;
+    }
+
+    /* hover와 같은 밑줄·가지선으로 키보드 위치 표시 */
+    &: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;
+    }
+}

package/src/component/widget/shell/_wg-shell-nav-list.tsx

@@ -0,0 +1,72 @@
+import clsx from "clsx";
+import {Fragment} from "react";
+import type {Doc} from "@/type/doc";
+import type {DocGroup} from "@/type/doc-group";
+import "./_wg-shell-nav-list.css";
+
+/**
+ * 한 단계의 문서 목록과 하위 묶음 · 재귀에서도 같은 탐색 표현 유지
+ */
+export interface WgShellNavListProps {
+    /**
+     * 현재 단계의 문서와 하위 묶음
+     */
+    group: DocGroup;
+    /**
+     * 현재 문서 · 조상 묶음의 경로까지 표시
+     */
+    currentDoc?: Doc;
+}
+
+export const WgShellNavList = (props: WgShellNavListProps) => {
+    const entries = [
+        ...props.group.docs.map((doc) => ({kind: "document" as const, key: `doc:${doc.id}`, doc, current: doc.id === props.currentDoc?.id})),
+        ...props.group.groups.map((group) => ({
+            kind: "group" as const,
+            key: `group:${JSON.stringify(group.path)}`,
+            group,
+            current: group.path.every((name, index) => name === props.currentDoc?.data.group[index]),
+        })),
+    ];
+    const currentIndex = entries.findIndex((entry) => entry.current);
+
+    return (
+        <ul className={clsx("wg_shellNavList__root")} aria-label={props.group.name}>
+            {/**
+             * 현재 경로 앞의 줄기와 도착 가지 · 문서 링크는 원래 파일 URL 사용
+             */}
+            {entries.map((entry, index) => (
+                <li
+                    className={clsx("wg_shellNavList__item", {
+                        "wg_shellNavList__item--trail": index < currentIndex,
+                        "wg_shellNavList__item--current": entry.current,
+                    })}
+                    key={entry.key}
+                >
+                    {/**
+                     * 독립 문서 · 키보드 포커스와 현재 페이지 표시는 링크가 담당
+                     */}
+                    {entry.kind === "document" && (
+                        <a
+                            className={clsx("wg_shellNavList__link", {"wg_shellNavList__link--active": entry.current})}
+                            href={`/${entry.doc.id}/`}
+                            title={entry.doc.data.label}
+                            aria-current={entry.current ? "page" : undefined}
+                        >
+                            {entry.doc.data.name}
+                        </a>
+                    )}
+                    {/**
+                     * 하위 묶음 · 같은 목록을 재귀로 이어 깊이에 따라 들여쓰기
+                     */}
+                    {entry.kind === "group" && (
+                        <Fragment>
+                            <span className={clsx("wg_shellNavList__branch")}>{entry.group.name}</span>
+                            <WgShellNavList group={entry.group} currentDoc={props.currentDoc} />
+                        </Fragment>
+                    )}
+                </li>
+            ))}
+        </ul>
+    );
+};

package/src/component/widget/shell/_wg-shell-nav.css

@@ -12,120 +12,6 @@
     gap: var(--app-space-stack);
 }
 
-.wg_shellNav__list {
-    margin: 0 0 0 var(--app-space-tree-inset);
-    padding: 0;
-    list-style: none;
-}
-
-.wg_shellNav__item {
-    /* 세로 줄기는 각 항목 기준 · 마지막 항목의 첫 줄 가운데에서 종료 */
-    position: relative;
-
-    &::before {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        border-left: 1px solid var(--app-color-border-soft);
-        content: "";
-        pointer-events: none;
-    }
-
-    &:where(:last-child)::before {
-        bottom: auto;
-        height: calc(0.5lh + var(--app-space-tree-row));
-    }
-
-    /* hover·키보드 포커스의 도착점 · 첫 줄 아래는 기본 줄기 유지 */
-    &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: calc(0.5lh + var(--app-space-tree-row));
-        border-left: 1px solid transparent;
-        content: "";
-        pointer-events: none;
-    }
-
-    &:where(:hover)::after {
-        border-left-color: var(--app-color-text-strong);
-    }
-
-    &:where(:has(:focus-visible))::after {
-        border-left-color: var(--app-color-text-strong);
-    }
-
-    /* 뒤 항목까지의 세로 경로 · 같은 목록의 형제 안에서만 연결 */
-    &:where(:has(~ .wg_shellNav__item:hover))::before {
-        border-left-color: var(--app-color-text-strong);
-    }
-
-    &:where(:has(~ .wg_shellNav__item :focus-visible))::before {
-        border-left-color: var(--app-color-text-strong);
-    }
-}
-
-.wg_shellNav__item--trail {
-    &::before {
-        border-left-color: var(--app-color-text-strong);
-    }
-}
-
-.wg_shellNav__item--current {
-    &::after {
-        border-left-color: var(--app-color-text-strong);
-    }
-}
-
-.wg_shellNav__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;
-
-    &::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;
-    }
-
-    &:where(:hover)::before {
-        border-top-color: currentcolor;
-    }
-
-    /* hover와 같은 밑줄·가지선으로 키보드 위치 표시 */
-    &:where(:focus-visible) {
-        outline: none;
-        text-decoration: underline;
-    }
-
-    &:where(:focus-visible)::before {
-        border-top-color: currentcolor;
-    }
-}
-
-.wg_shellNav__link--active {
-    color: var(--app-color-text-strong);
-    font-weight: var(--app-font-weight-active);
-
-    &::before {
-        border-top-color: currentcolor;
-    }
-}
-
 .wg_shellNav__group {
     margin: 0 0 4px;
     color: var(--app-color-text-muted);

package/src/component/widget/shell/_wg-shell-nav.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
+import {WgShellNavList} from "@/component/widget/shell/_wg-shell-nav-list";
 import {copy_nav_aria_label} from "@/constant/copy";
-import {toDocGroups} from "@/content/to-doc-groups";
+import {toDocGroups} from "@/content/to-doc-groups/to-doc-groups";
 import type {Doc} from "@/type/doc";
 import type {SiteConfig} from "@/type/site-config";
 import "./_wg-shell-nav.css";
@@ -25,6 +26,7 @@ export interface WgShellNavProps {
 
 export const WgShellNav = (props: WgShellNavProps) => {
     const docGroups = toDocGroups({docs: props.docs, navigation: props.site.navigation});
+    const currentDoc = props.docs.find((doc) => doc.id === props.current);
 
     return (
         <nav className={clsx("wg_shellNav__root")} aria-label={copy_nav_aria_label}>
@@ -35,40 +37,12 @@ export const WgShellNav = (props: WgShellNavProps) => {
                 {/**
                  * 묶음 이름과 독립 문서 · 제목이 링크의 접근 가능한 이름
                  */}
-                {docGroups.map((group) => {
-                    const currentIndex = group.docs.findIndex((doc) => doc.id === props.current);
-
-                    return (
-                        <section className={clsx("wg_shellNav__docGroup")} key={group.name} aria-label={group.name}>
-                            <div className={clsx("wg_shellNav__group")}>{group.name}</div>
-                            {/**
-                             * 현재 문서와 묶음 시작부터 이어지는 세로 경로 표시
-                             */}
-                            <ul className={clsx("wg_shellNav__list")}>
-                                {group.docs.map((doc, index) => (
-                                    <li
-                                        className={clsx("wg_shellNav__item", {
-                                            "wg_shellNav__item--trail": index < currentIndex,
-                                            "wg_shellNav__item--current": index === currentIndex,
-                                        })}
-                                        key={doc.id}
-                                    >
-                                        <a
-                                            className={clsx("wg_shellNav__link", {
-                                                "wg_shellNav__link--active": index === currentIndex,
-                                            })}
-                                            href={`/${doc.id}/`}
-                                            title={doc.data.label}
-                                            aria-current={index === currentIndex ? "page" : undefined}
-                                        >
-                                            {doc.data.name}
-                                        </a>
-                                    </li>
-                                ))}
-                            </ul>
-                        </section>
-                    );
-                })}
+                {docGroups.map((group) => (
+                    <section className={clsx("wg_shellNav__docGroup")} key={group.name} aria-label={group.name}>
+                        <div className={clsx("wg_shellNav__group")}>{group.name}</div>
+                        <WgShellNavList group={group} currentDoc={currentDoc} />
+                    </section>
+                ))}
             </div>
         </nav>
     );

package/src/component/widget/shell/wg-shell.tsx

@@ -4,7 +4,7 @@ import {toTocGroups} from "@/component/widget/shell/_function/to-toc-groups";
 import type {DocOutline} from "@/component/widget/shell/_type/doc-outline";
 import {WgShellNav} from "@/component/widget/shell/_wg-shell-nav";
 import {WgShellToc} from "@/component/widget/shell/_wg-shell-toc";
-import {asset_client_path, asset_favicon_path, asset_reload_path, asset_style_path} from "@/constant/asset";
+import {asset_favicon_path, asset_reload_path} from "@/constant/asset";
 import {copy_nav_close, copy_nav_open, copy_nav_title} from "@/constant/copy";
 import type {Doc} from "@/type/doc";
 import type {SiteAssets} from "@/type/site-assets";
@@ -71,7 +71,7 @@ export const WgShell = (props: WgShellProps) => {
                     <link key={href} rel="preload" href={href} as="font" type="font/woff2" crossOrigin="" />
                 ))}
                 <script dangerouslySetInnerHTML={{__html: 'document.documentElement.style.scrollBehavior="auto"'}} />
-                <link rel="stylesheet" href={asset_style_path} />
+                <link rel="stylesheet" href={props.assets.stylePath} />
                 {props.assets.reload && <script dangerouslySetInnerHTML={{__html: reloadScript}} />}
             </head>
             {/**
@@ -140,7 +140,7 @@ export const WgShell = (props: WgShellProps) => {
                     <div className={clsx("wg_shell__drawerContent")} data-navigation-content="" />
                 </dialog>
                 <img className={clsx("wg_shell__cursorFace")} src={asset_favicon_path} width="24" height="24" alt="" aria-hidden="true" draggable={false} data-cursor-face="" />
-                <script type="module" src={asset_client_path} />
+                <script type="module" src={props.assets.clientPath} />
             </body>
         </html>
     );

package/src/constant/asset.ts

@@ -8,12 +8,12 @@
 export const asset_dir = "_fh";
 
 /**
- * esbuild의 컴포넌트 CSS 묶음
+ * 내용 지문을 붙일 esbuild CSS의 기본 URL
  */
 export const asset_style_path = `/${asset_dir}/style.css`;
 
 /**
- * 테마·목차·hash 보정 브라우저 스크립트
+ * 내용 지문을 붙일 테마·목차·hash 보정 스크립트의 기본 URL
  */
 export const asset_client_path = `/${asset_dir}/client.js`;
 

package/src/content/read-docs.test.ts

@@ -6,11 +6,25 @@ import {test} from "node:test";
 import {renderToStaticMarkup} from "react-dom/server";
 import {createApp} from "@/app";
 import {WgShellNav} from "@/component/widget/shell/_wg-shell-nav";
+import {asset_client_path, asset_style_path} from "@/constant/asset";
 import {createProcessor} from "@/content/create-processor";
 import {readDocs} from "@/content/read-docs";
 import {readHome} from "@/content/read-home";
+import {toDocGroups} from "@/content/to-doc-groups/to-doc-groups";
+import {docDataSchema} from "@/type/doc-data";
 import {siteConfigSchema} from "@/type/site-config";
 
+test("page resource URLs use the supplied content fingerprints instead of fixed cache keys", async () => {
+    const site = siteConfigSchema.parse({});
+    const assets = {fontCss: "", preload: [], reload: false, stylePath: "/_fh/style.abc123.css", clientPath: "/_fh/client.def456.js"};
+    const app = createApp({site, store: {docs: []}, assets});
+    const html = await (await app.request("/")).text();
+
+    assert.match(html, /rel="stylesheet" href="\/_fh\/style\.abc123\.css"/);
+    assert.match(html, /type="module" src="\/_fh\/client\.def456\.js"/);
+    assert.doesNotMatch(html, /(?:href|src)="\/_fh\/(?:style\.css|client\.js)"/);
+});
+
 test("documents with the same initial retain distinct URLs", async (t) => {
     const root = await mkdtemp(join(tmpdir(), "for-humanity-docs-"));
     const site = siteConfigSchema.parse({});
@@ -67,6 +81,85 @@ test("navigation shows every document group in reading order without document ic
     assert.match(html, /href="\/writing\/"[^>]*aria-current="page"/);
 });
 
+test("group paths preserve literal names and reject empty or invalid segments", () => {
+    const data = {name: "Guide", label: "Guide"};
+
+    assert.deepEqual(docDataSchema.parse({...data, group: " Guide "}).group, ["Guide"]);
+    assert.deepEqual(docDataSchema.parse({...data, group: [" Projects ", "Example project", "Research"]}).group, ["Projects", "Example project", "Research"]);
+    assert.deepEqual(docDataSchema.parse({...data, group: "Research, decisions / notes"}).group, ["Research, decisions / notes"]);
+
+    for (const group of ["", " ", [], ["Projects", " "], ["Projects", 1], [["Projects"]], null]) {
+        assert.equal(docDataSchema.safeParse({...data, group}).success, false);
+    }
+
+    assert.equal(siteConfigSchema.safeParse({navigation: ["Guide", [" Guide "]]}).success, false);
+    assert.equal(siteConfigSchema.safeParse({navigation: [["Projects", ""]]}).success, false);
+    assert.equal(siteConfigSchema.safeParse({navigation: []}).success, true);
+});
+
+test("nested groups follow metadata paths and keep sibling branches and document URLs distinct", async (t) => {
+    const root = await mkdtemp(join(tmpdir(), "for-humanity-groups-"));
+    const site = siteConfigSchema.parse({navigation: ["Guide", ["Projects", "Atlas", "Research"], ["Projects", "Atlas", "Decisions"]]});
+
+    t.after(() => rm(root, {recursive: true, force: true}));
+    await Promise.all([
+        writeFile(join(root, "guide.md"), "---\nname: Guide\nlabel: Guide\ngroup: Guide\n---\n\nText.\n"),
+        writeFile(join(root, "guide-two.md"), "---\nname: More guide\nlabel: Guide\ngroup: [Guide]\n---\n\nText.\n"),
+        writeFile(join(root, "overview.md"), "---\nname: Overview\nlabel: Overview\ngroup: [Projects, Atlas]\n---\n\nText.\n"),
+        writeFile(join(root, "parts.md"), "---\nname: Parts\nlabel: Parts\ngroup: [Projects, Atlas, Research]\norder: 1\n---\n\nText.\n"),
+        writeFile(join(root, "authoring.md"), "---\nname: Authoring\nlabel: Authoring\ngroup: [Projects, Atlas, Research]\norder: 2\n---\n\nText.\n"),
+        writeFile(join(root, "decision.md"), "---\nname: Decision\nlabel: Decision\ngroup: [Projects, Atlas, Decisions]\n---\n\nText.\n"),
+        writeFile(join(root, "other.md"), "---\nname: Other research\nlabel: Other research\ngroup: [Projects, Beacon, Research]\n---\n\nText.\n"),
+        writeFile(join(root, "deep.md"), "---\nname: Deep research\nlabel: Deep research\ngroup: [Projects, Atlas, Research, Archive, Drafts]\n---\n\nText.\n"),
+    ]);
+
+    const docs = await readDocs({root, processor: createProcessor({site, root})});
+    const groups = toDocGroups({docs, navigation: site.navigation});
+
+    assert.deepEqual(
+        groups.map((group) => group.name),
+        ["Guide", "Projects"],
+    );
+    assert.deepEqual(
+        groups[0].docs.map((doc) => doc.id),
+        ["guide", "guide-two"],
+    );
+    assert.deepEqual(
+        groups[1].groups.map((group) => group.name),
+        ["Atlas", "Beacon"],
+    );
+    assert.deepEqual(
+        groups[1].groups[0].docs.map((doc) => doc.id),
+        ["overview"],
+    );
+    assert.deepEqual(
+        groups[1].groups[0].groups.map((group) => group.name),
+        ["Research", "Decisions"],
+    );
+    assert.deepEqual(
+        groups[1].groups[0].groups[0].docs.map((doc) => doc.id),
+        ["parts", "authoring"],
+    );
+    assert.deepEqual(
+        groups[1].groups[1].groups[0].docs.map((doc) => doc.id),
+        ["other"],
+    );
+    assert.equal(groups[1].groups[0].groups[0].groups[0].groups[0].name, "Drafts");
+    assert.deepEqual(toDocGroups({docs: docs.toReversed(), navigation: site.navigation}), groups);
+
+    const html = renderToStaticMarkup(WgShellNav({site, docs, current: "authoring"}));
+
+    assert.match(html, /href="\/authoring\/"[^>]*aria-current="page"/);
+    assert.match(html, /Atlas<\/span><ul\b/);
+    assert.match(html, /Research<\/span><ul\b/);
+    assert.equal([...html.matchAll(/href="\/authoring\/"/g)].length, 1);
+    assert.equal([...html.matchAll(/>Research<\/span>/g)].length, 2);
+    assert.equal([...html.matchAll(/wg_shellNavList__item--current/g)].length, 3);
+    assert.doesNotMatch(renderToStaticMarkup(WgShellNav({site, docs})), /aria-current="page"|wg_shellNavList__item--current/);
+    assert.ok(html.indexOf('href="/parts/"') < html.indexOf('href="/authoring/"'));
+    assert.doesNotMatch(html, /<details\b/);
+});
+
 test("frontmatter supports BOM, CRLF and a closing fence at EOF", async (t) => {
     const root = await mkdtemp(join(tmpdir(), "for-humanity-docs-"));
     const site = siteConfigSchema.parse({});
@@ -120,7 +213,7 @@ test("a plain root README renders at home and relative home links resolve from n
     ]);
 
     const [docs, home] = await Promise.all([readDocs({root, processor}), readHome({root, processor})]);
-    const app = createApp({site, store: {docs, home}, assets: {fontCss: "", preload: [], reload: false}});
+    const app = createApp({site, store: {docs, home}, assets: {stylePath: asset_style_path, clientPath: asset_client_path, fontCss: "", preload: [], reload: false}});
     const response = await app.request("/");
     const html = await response.text();
 
@@ -149,7 +242,7 @@ test("a missing README provides a creation hint without generated overview cards
 
     t.after(() => rm(root, {recursive: true, force: true}));
     const home = await readHome({root, processor: createProcessor({site, root})});
-    const app = createApp({site, store: {docs: [], home}, assets: {fontCss: "", preload: [], reload: false}});
+    const app = createApp({site, store: {docs: [], home}, assets: {stylePath: asset_style_path, clientPath: asset_client_path, fontCss: "", preload: [], reload: false}});
     const html = await (await app.request("/")).text();
 
     assert.equal(home, undefined);
@@ -228,7 +321,7 @@ test("headings and contents preserve authored text without automatic numbering",
     );
 
     const docs = await readDocs({root, processor: createProcessor({site, root})});
-    const app = createApp({site, store: {docs}, assets: {fontCss: "", preload: [], reload: false}});
+    const app = createApp({site, store: {docs}, assets: {stylePath: asset_style_path, clientPath: asset_client_path, fontCss: "", preload: [], reload: false}});
     const html = await (await app.request("/guide/")).text();
 
     assert.match(html, /<h2[^>]*id="overview"[^>]*><span class="wg_prose__headingText">Overview<\/span><\/h2>/);