Merge pull request '按分类与合集组织文档 URL，收紧导航与阅读排版' (#2) from codex/docs-navigation into main

Reviewed-on: #2

apps/docs/scripts/auth-cli.ts

@@ -184,17 +184,35 @@ async function main() {
   const searchResponse = await request("/api/search", { headers });
   assert.equal(searchResponse.status, 200);
   const searchIndex = await searchResponse.json();
-  assert.ok(searchIndex.some((doc: { slug: string; searchText: string }) => doc.slug === "pretext/04-chapter" && doc.searchText.includes("getSegmentMetrics")));
+  assert.ok(searchIndex.some((doc: { slug: string; searchText: string }) => doc.slug === "source-studies/pretext/measurement-cache" && doc.searchText.includes("getSegmentMetrics")));
+  for (const doc of searchIndex as { slug: string; sourceSlug: string }[]) {
+    assert.ok(!doc.slug.split("/").some((part) => /^\d+-/.test(part)), doc.slug);
+    const legacy = await request(`/docs/${doc.sourceSlug}?from=legacy`, { headers });
+    assert.equal(legacy.status, 308, doc.sourceSlug);
+    const destination = new URL(legacy.headers.get("location")!, base);
+    assert.equal(destination.pathname, `/docs/${doc.slug}`);
+    assert.equal(destination.searchParams.get("from"), "legacy");
+    assert.ok(legacy.headers.get("cache-control")?.includes("no-store"));
+  }
   let home = "";
   let purpose = "";
   for (const route of routes) {
     const response = await request(route, { headers });
     assert.equal(response.status, 200, route);
-    if (route === "/") home = await response.text();
-    if (route === "/docs/04-endor-purpose-draft") purpose = await response.text();
+    const html = await response.text();
+    if (route === "/") home = html;
+    if (route === "/docs/endor/endor-purpose-draft") purpose = html;
+    if (route.startsWith("/docs/")) {
+      assert.ok(html.includes('aria-label="文档选择"'), route);
+      assert.ok(html.includes('<optgroup label="语言与运行时">'), route);
+      assert.ok(!html.includes('class="nav-back"'), route);
+      const ids = [...html.matchAll(/<h[23] id="([^"]+)"/g)].map((match) => match[1]);
+      assert.equal(new Set(ids).size, ids.length, `Unique heading anchors: ${route}`);
+      for (const id of ids) assert.ok(html.includes(`href="#${id}"`), `TOC anchor: ${route}#${id}`);
+    }
   }
   assert.ok(home.includes("资料库"));
-  assert.ok(home.includes("/docs/pretext/00-overview"));
+  assert.ok(home.includes("/docs/source-studies/pretext/overview"));
   // Inline preview and zoom dialog must both use the compressed browser asset.
   assert.equal(
     [...purpose.matchAll(/<img\b[^>]*\bsrc="\/figures\/endor-review-gate\.webp"/g)].length,

apps/docs/src/components/Shell.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { Icon } from "@/components/Icon";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { DocLink } from "@/lib/docs";
@@ -36,9 +37,6 @@ export function Navigation({
   return (
     <nav aria-label="文档导航">
       {collection ? <>
-        <Link className="nav-back" href="/" onClick={onNavigate}>
-          <Icon name="arrow" size={15} style={{ transform: "rotate(180deg)" }} />全部文档
-        </Link>
         <Link className="collection-identity" href={`/docs/${collections.find((c) => c.name === collection)!.entry.slug}`} onClick={onNavigate}>
           <Icon name={collectionIcon(collection)} size={22} /><span>{collectionLabel(collection)}</span>
         </Link>
@@ -52,7 +50,7 @@ export function Navigation({
           {scopedDocs.filter((d) => d.group === group).map((d) => (
             <Link onClick={onNavigate} aria-current={d.slug === current ? "page" : undefined}
               className="nav-item" href={`/docs/${d.slug}`} key={d.slug}>
-              <span>{d.slug.endsWith("/00-overview") ? "概览" : d.title.replace("（草案）", "")}</span>
+              <span>{d.slug.endsWith("/overview") ? "概览" : d.title.replace("（草案）", "").replace(/^\d+\s*·\s*/, "")}</span>
               {d.draft && <span className="tiny-dot" aria-label="草案" />}
             </Link>
           ))}
@@ -71,6 +69,7 @@ export function Shell({
   current?: string;
   children: ReactNode;
 }) {
+  const router = useRouter();
   const dialog = useRef<HTMLDialogElement>(null);
   const input = useRef<HTMLInputElement>(null);
   const trigger = useRef<HTMLButtonElement>(null);
@@ -126,9 +125,21 @@ export function Shell({
       </a>
       <header className="site-header">
         <Brand />
-        <nav className="top-nav" aria-label="主导航">
-          <Link href="/" aria-current={!current ? "page" : undefined}>文档中心</Link>
-          {collections.map(({ name, entry }) => <Link key={name} href={`/docs/${entry.slug}`} aria-current={collection === name ? "page" : undefined}>{collectionLabel(name)}</Link>)}
+        <nav className="top-nav" aria-label="文档选择">
+          <label className="collection-picker">
+            <span className="picker-category">{docs.find((d) => d.slug === current)?.category ?? "全部分类"}</span>
+            <span className="sr-only">选择分类与文档合集</span>
+            <select value={collection ?? ""} onChange={(event) => {
+              const entry = collections.find((c) => c.name === event.target.value)?.entry;
+              void router.push(entry ? `/docs/${entry.slug}` : "/");
+            }}>
+              <option value="">文档中心</option>
+              {[...new Set(docs.map((d) => d.category))].map((category) => <optgroup label={category} key={category}>
+                {collections.filter((c) => c.entry.category === category).map(({name}) => <option value={name} key={name}>{collectionLabel(name)}</option>)}
+              </optgroup>)}
+            </select>
+            <Icon name="chevron" size={13} />
+          </label>
         </nav>
         <button
           ref={trigger}

apps/docs/src/lib/collections.ts

@@ -18,7 +18,7 @@ export function collectionIcon(name?: string): "book" | "code" | "layers" | "nod
 export function collectionEntries(docs: DocLink[]) {
   return [...new Set(docs.map((doc) => doc.collection))].map((name) => {
     const items = docs.filter((doc) => doc.collection === name);
-    const entry = items.find((doc) => doc.slug.endsWith("/00-overview")) ?? items[0];
+    const entry = items.find((doc) => doc.slug.endsWith("/overview")) ?? items[0];
     return { name, entry, count: items.length };
   });
 }

apps/docs/src/lib/docs.ts

@@ -4,20 +4,24 @@ import catalog from "../../../../content/catalog.json";
 
 const directory = path.resolve(process.cwd(), "../../content/docs");
 const validSlug = /^[a-z0-9]+(?:-[a-z0-9]+)*(?:\/[a-z0-9]+(?:-[a-z0-9]+)*)*$/;
-type Metadata = { collection?: string; group?: string; description?: string; draft?: boolean; featured?: boolean };
+type Metadata = { slug?: string; category?: string; collection?: string; group?: string; description?: string; draft?: boolean; featured?: boolean };
 export type DocLink = {
-  slug: string; title: string; searchText?: string;
+  slug: string; sourceSlug: string; category: string; title: string; searchText?: string;
   group: string; collection: string; description: string; draft: boolean; featured: boolean;
 };
 export type Doc = DocLink & { content: string };
 
 export async function readDoc(slug: string): Promise<Doc> {
   if (!validSlug.test(slug)) throw new Error("Invalid document slug");
-  const content = await fs.readFile(path.join(directory, `${slug}.md`), "utf8");
+  const sourceSlug = Object.entries(catalog.documents).find(([, metadata]) => metadata.slug === slug)?.[0] ?? slug;
+  const content = await fs.readFile(path.join(directory, `${sourceSlug}.md`), "utf8");
   const title = content.match(/^# (.+)$/m)?.[1]?.trim() ?? slug;
-  const collection = catalog.collections.find((c) => !c.path || slug.startsWith(`${c.path}/`))!;
-  const metadata: Metadata = (catalog.documents as Record<string, Metadata>)[slug] ?? {};
-  return { slug, title, content, searchText: content,
+  const collection = catalog.collections.find((c) => !c.path || sourceSlug.startsWith(`${c.path}/`))!;
+  const metadata: Metadata = (catalog.documents as Record<string, Metadata>)[sourceSlug] ?? {};
+  if (!metadata.slug || !metadata.category || !validSlug.test(metadata.slug) || metadata.slug.split("/").some((part) => /^\d+-/.test(part))) {
+    throw new Error(`Register a semantic slug and category in content/catalog.json: ${sourceSlug}`);
+  }
+  return { slug: metadata.slug, sourceSlug, category: metadata.category, title, content, searchText: content,
     group: metadata.group ?? collection.title, collection: metadata.collection ?? collection.title,
     description: metadata.description ?? collection.description,
     draft: metadata.draft ?? false, featured: metadata.featured ?? false,
@@ -36,9 +40,11 @@ export async function listDocs(): Promise<DocLink[]> {
     }));
     return files.flat();
   }
-  return Promise.all((await walk("")).sort().map(async (slug) => {
+  const docs = await Promise.all((await walk("")).sort().map(async (slug) => {
     const { content: _, searchText: __, ...doc } = await readDoc(slug);
     void _; void __;
     return doc;
   }));
+  if (new Set(docs.map((doc) => doc.slug)).size !== docs.length) throw new Error("Duplicate public document slug");
+  return docs;
 }

apps/docs/src/pages/docs/[...slug].tsx

@@ -103,6 +103,17 @@ export default function DocPage({
               <ReactMarkdown
                 remarkPlugins={[remarkGfm]}
                 components={{
+                  a: ({ href, children }) => {
+                    if (!href) return <a>{children}</a>;
+                    let target = href;
+                    if (!/^(?:[a-z]+:|\/\/|#)/i.test(href)) {
+                      const resolved = new URL(href, `https://docs.local/docs/${doc.sourceSlug}`);
+                      const source = decodeURIComponent(resolved.pathname).replace(/^\/docs\//, "").replace(/\.md$/, "");
+                      const linked = docs.find((d) => d.sourceSlug === source || d.slug === source);
+                      if (linked) target = `/docs/${linked.slug}${resolved.search}${resolved.hash}`;
+                    }
+                    return <a href={target}>{children}</a>;
+                  },
                   p: ({ children, node }) => {
                     const slides = node?.children.flatMap((child) =>
                       child.type === "element" && child.tagName === "img" &&
@@ -217,7 +228,7 @@ export default function DocPage({
             <div className="article-end">
               
               <a
-                href={`https://gitea.entroia.com/Zayden-Jung/endorphin-tabularium-docs/src/branch/main/content/docs/${doc.slug}.md`}
+                href={`https://gitea.entroia.com/Zayden-Jung/endorphin-tabularium-docs/src/branch/main/content/docs/${doc.sourceSlug}.md`}
               >
                 查看文档源码 ↗
               </a>
@@ -229,10 +240,7 @@ export default function DocPage({
                   <strong>{siblings[index - 1].title}</strong>
                 </Link>
               ) : (
-                <Link href="/">
-                  <small>← 返回</small>
-                  <strong>文档概览</strong>
-                </Link>
+                <span />
               )}
               {index < siblings.length - 1 && (
                 <Link

apps/docs/src/proxy.ts

@@ -1,5 +1,10 @@
 import { NextResponse, type NextRequest } from "next/server";
 import { authConfig, SESSION_COOKIE, validSession } from "./lib/auth";
+import catalog from "../../../content/catalog.json";
+
+const legacyRoutes = new Map(Object.entries(catalog.documents).map(([source, metadata]) => [
+  `/docs/${source}`, `/docs/${metadata.slug}`,
+]));
 
 export function proxy(request: NextRequest) {
   const path = request.nextUrl.pathname;
@@ -49,6 +54,13 @@ export function proxy(request: NextRequest) {
         );
       }
     }
+    // Keep legacy URLs behind authentication and out of static generation.
+    const destination = legacyRoutes.get(path);
+    if (destination && ["GET", "HEAD"].includes(request.method)) {
+      const target = request.nextUrl.clone();
+      target.pathname = destination;
+      return NextResponse.redirect(target, { status: 308, headers });
+    }
     return NextResponse.next({ headers });
   }
   if (path.startsWith("/api/") || !["GET", "HEAD"].includes(request.method)) {

apps/docs/src/styles/globals.css

@@ -1313,3 +1313,42 @@ svg { flex-shrink: 0; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .featured-link:hover, .featured-link:hover .collection-art, .pagination > a:hover { transform: none; }
 }
+
+/* Compact navigation and local font roles, with no font downloads. */
+:root {
+  --font-reading: "Charter", "Iowan Old Style", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
+  --font-code: "SFMono-Regular", Consolas, "Liberation Mono", "PingFang SC", monospace;
+}
+.collection-picker { display: flex; flex-wrap: wrap; align-items: center; position: relative; min-width: 180px; max-width: 280px; }
+.collection-picker select { appearance: none; width: 100%; cursor: pointer; padding: 8px 30px 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); font: inherit; font-size: 13px; color: var(--ink); text-overflow: ellipsis; }
+.picker-category { width: 100%; font-size: 10px; line-height: 1.4; color: var(--muted); margin-bottom: 2px; }
+.collection-picker > svg { position: absolute; right: 10px; bottom: 12px; pointer-events: none; transform: rotate(90deg); color: var(--muted); }
+.collection-picker select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
+.top-nav { margin-left: 0; }
+.sidebar { padding: 22px 16px 32px; }
+.collection-identity { font-size: 14px; gap: 9px; margin: 0 8px 20px; }
+.collection-identity svg { width: 18px; height: 18px; }
+.nav-group { margin-top: 20px; }
+.nav-group > p { margin: 0 8px 6px; font-size: 11px; letter-spacing: .02em; color: #7d8981; }
+.nav-item { font-size: 13px; padding: 5px 8px; margin: 0; line-height: 1.5; gap: 6px; }
+.nav-item[aria-current="page"]::before { top: 7px; bottom: 7px; }
+.collection-nav-link { padding: 7px 8px; margin-bottom: 2px; gap: 9px; font-size: 13px; }
+.prose { font-family: var(--font-reading); font-size: 16px; line-height: 1.95; }
+.prose :is(h1,h2,h3,h4), .prose table, .code-toolbar, .mobile-toc { font-family: var(--font-sans); }
+.prose :is(h1,h2,h3) { font-weight: 600; letter-spacing: -.025em; }
+.prose :is(code,pre), .code-block pre, kbd { font-family: var(--font-code); font-variant-ligatures: none; }
+.prose code { font-size: .86em; }
+@media (min-width: 1201px) {
+ .home-layout { grid-template-columns: 240px minmax(0,1fr); }
+ .reading-layout { grid-template-columns: 240px minmax(0,1fr) 222px; }
+}
+@media (min-width: 761px) and (max-width: 1200px) {
+ .home-layout, .reading-layout { grid-template-columns: 224px minmax(0,1fr); }
+}
+@media (max-width: 760px) {
+ .top-nav { overflow: visible; }
+ .collection-picker { width: 100%; max-width: 100%; }
+ .picker-category { display: none; }
+ .collection-picker select { padding-block: 6px; }
+ .mobile-navigation .nav-group { margin-top: 16px; }
+}

content/catalog.json

@@ -21,90 +21,180 @@
       "group": "架构设计",
       "description": "Endor 的全球入口、区域运行时与对象数据。",
       "draft": true,
-      "featured": true
+      "featured": true,
+      "slug": "endor/endor-concepts-draft",
+      "category": "Endor"
     },
     "01-getting-started": {
       "group": "开始使用",
-      "description": "本地开发、文档编写与发布。"
+      "description": "本地开发、文档编写与发布。",
+      "slug": "endor/getting-started",
+      "category": "Endor"
     },
     "02-mounting-draft": {
       "group": "架构设计",
       "description": "节点、对象与统一接入协议。",
-      "draft": true
+      "draft": true,
+      "slug": "endor/mounting-draft",
+      "category": "Endor"
     },
     "03-figures": {
       "group": "图形档案",
-      "description": "Python 源码与可编辑 SVG 的制图工作流。"
+      "description": "Python 源码与可编辑 SVG 的制图工作流。",
+      "slug": "endor/figures",
+      "category": "Endor"
     },
     "04-endor-purpose-draft": {
       "group": "项目讨论",
       "description": "从程序入口走向用户与 AI 的对象操作。",
-      "draft": true
+      "draft": true,
+      "slug": "endor/endor-purpose-draft",
+      "category": "Endor"
     },
     "05-object-graphs-gc": {
       "collection": "对象关系与垃圾回收",
       "group": "运行时基础",
-      "description": "从对象引用环到标记清除、分代回收与跨代引用，记录内存管理讨论。"
+      "description": "从对象引用环到标记清除、分代回收与跨代引用，记录内存管理讨论。",
+      "slug": "language-and-runtime/object-relations/object-graphs-gc",
+      "category": "语言与运行时"
     },
     "pretext/00-overview": {
       "description": "理解高性能文本布局的原理，沿着 12 章教程阅读源码。",
-      "featured": true
+      "featured": true,
+      "slug": "source-studies/pretext/overview",
+      "category": "源码研究"
     },
     "language-design/00-overview": {
       "description": "从名称与作用域到反射与表示，按 271 项议题逐步讨论语言设计。",
-      "featured": true
+      "featured": true,
+      "slug": "language-and-runtime/language-design/overview",
+      "category": "语言与运行时"
     },
     "language-design/02-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/names-and-scope",
+      "category": "语言与运行时"
     },
     "language-design/03-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/values-and-types",
+      "category": "语言与运行时"
     },
     "language-design/04-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/storage-and-lifetimes",
+      "category": "语言与运行时"
     },
     "language-design/05-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/objects-and-members",
+      "category": "语言与运行时"
     },
     "language-design/06-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/expressions-and-operators",
+      "category": "语言与运行时"
     },
     "language-design/07-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/functions-and-calls",
+      "category": "语言与运行时"
     },
     "language-design/08-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/control-flow",
+      "category": "语言与运行时"
     },
     "language-design/09-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/collections-and-access",
+      "category": "语言与运行时"
     },
     "language-design/10-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/errors-and-resources",
+      "category": "语言与运行时"
     },
     "language-design/11-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/modules-and-execution",
+      "category": "语言与运行时"
     },
     "language-design/12-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/concurrency-and-async",
+      "category": "语言与运行时"
     },
     "language-design/13-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/external-interaction",
+      "category": "语言与运行时"
     },
     "language-design/14-questions": {
       "description": "语言设计讨论底稿；包含问题、验收要求和当前确认状态。",
-      "draft": true
+      "draft": true,
+      "slug": "language-and-runtime/language-design/reflection-and-representation",
+      "category": "语言与运行时"
+    },
+    "pretext/01-chapter": {
+      "slug": "source-studies/pretext/text-measurement",
+      "category": "源码研究"
+    },
+    "pretext/02-chapter": {
+      "slug": "source-studies/pretext/prepare-and-layout",
+      "category": "源码研究"
+    },
+    "pretext/03-chapter": {
+      "slug": "source-studies/pretext/text-segmentation",
+      "category": "源码研究"
+    },
+    "pretext/04-chapter": {
+      "slug": "source-studies/pretext/measurement-cache",
+      "category": "源码研究"
+    },
+    "pretext/05-chapter": {
+      "slug": "source-studies/pretext/line-breaking",
+      "category": "源码研究"
+    },
+    "pretext/06-chapter": {
+      "slug": "source-studies/pretext/height-only-layout",
+      "category": "源码研究"
+    },
+    "pretext/07-chapter": {
+      "slug": "source-studies/pretext/long-text",
+      "category": "源码研究"
+    },
+    "pretext/08-chapter": {
+      "slug": "source-studies/pretext/accuracy",
+      "category": "源码研究"
+    },
+    "pretext/09-chapter": {
+      "slug": "source-studies/pretext/virtual-lists",
+      "category": "源码研究"
+    },
+    "pretext/10-chapter": {
+      "slug": "source-studies/pretext/performance-verification",
+      "category": "源码研究"
+    },
+    "pretext/11-chapter": {
+      "slug": "source-studies/pretext/source-reading",
+      "category": "源码研究"
+    },
+    "pretext/12-chapter": {
+      "slug": "source-studies/pretext/applying-the-design",
+      "category": "源码研究"
     }
   }
 }

content/docs/01-getting-started.md

@@ -16,7 +16,7 @@ pnpm dev
 
 ## 添加文档
 
-在 `content/docs` 下添加 Markdown 文件，例如 `04-runtime.md`。文件名使用小写字母、数字和连字符；第一个一级标题是导航标题。该文件对应 `/docs/04-runtime`。
+在 `content/docs` 下添加 Markdown 文件，例如 `04-runtime.md`。文件名使用小写字母、数字和连字符；第一个一级标题是导航标题。在 `content/catalog.json` 的 `documents` 中以源文件路径登记 `slug` 和 `category`，例如 `slug: "endor/runtime"`、`category: "Endor"`。公开地址为 `/docs/endor/runtime`；源文件编号仅用于排序，不进入公开 URL。既有源文件地址保留永久跳转，修改已有公开 slug 时需另行保留旧地址映射。
 
 开发模式下刷新页面读取修改；本地生产预览需要重新构建。