stack-site-builder 1.10.0

package/src/lib/project.ts

@@ -0,0 +1,309 @@
+import { execFileSync } from 'node:child_process';
+import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { createHighlighter, type Highlighter } from 'shiki';
+import MarkdownIt from 'markdown-it';
+import { site } from '@aas-data/site';
+
+const SAMPLES_DIR = 'samples';
+const REPO = site.repoUrl;
+const THEME = 'github-dark';
+const LANGS = [
+  'python',
+  'typescript',
+  'tsx',
+  'javascript',
+  'jsx',
+  'bash',
+  'docker',
+  'markdown',
+  'json',
+  'yaml',
+  'toml',
+  'sql',
+  'go',
+  'rust',
+];
+
+let hlPromise: Promise<Highlighter> | null = null;
+function getHighlighter() {
+  if (!hlPromise) hlPromise = createHighlighter({ themes: [THEME], langs: LANGS });
+  return hlPromise;
+}
+function highlight(hl: Highlighter, code: string, lang: string): string {
+  const l = hl.getLoadedLanguages().includes(lang) ? lang : 'text';
+  // Tag the <pre> with its language so CSS can soft-wrap shell/output blocks
+  // (bash, text…) while leaving real source code horizontally scrollable.
+  return hl
+    .codeToHtml(code, { lang: l, theme: THEME })
+    .replace(/^<pre/, `<pre data-lang="${l}"`);
+}
+
+export interface ProjectFile {
+  path: string; // relative to the project folder, e.g. "app.py"
+  html: string; // Shiki-highlighted
+}
+export interface ProjectHeading {
+  slug: string;
+  text: string;
+  depth: number;
+}
+export interface RenderedProject {
+  folder: string;
+  name: string;
+  date: string; // when the example was written (YYYY-MM-DD)
+  readmeHtml?: string;
+  headings: ProjectHeading[]; // README h2/h3, for the right-rail TOC
+  files: ProjectFile[];
+  folderUrl: string;
+}
+
+// When each sample was authored. Per-folder overrides go here; anything not
+// listed falls back to DEFAULT_SAMPLE_DATE.
+const DEFAULT_SAMPLE_DATE = '2026-06-28';
+const SAMPLE_DATES: Record<string, string> = {};
+
+function slugify(s: string): string {
+  return s
+    .toLowerCase()
+    .trim()
+    .replace(/[^\p{L}\p{N} -]/gu, '')
+    .replace(/\s+/g, '-');
+}
+
+/**
+ * Render a project README to HTML, giving its h2/h3 stable ids (prefixed with
+ * the folder so headings stay unique across projects) plus a copy-link anchor,
+ * and collecting those headings for the right-rail TOC.
+ */
+function renderReadme(
+  md: MarkdownIt,
+  content: string,
+  folder: string,
+): { html: string; headings: ProjectHeading[]; title?: string } {
+  const tokens = md.parse(content, {});
+  const headings: ProjectHeading[] = [];
+  // The first real h1 is the project's display name. Taken from the parsed
+  // tokens (not a regex over the source) so a `# comment` line inside a fenced
+  // shell block can't be mistaken for it.
+  let title: string | undefined;
+  for (let i = 0; i < tokens.length; i++) {
+    const tk = tokens[i];
+    if (tk.type === 'heading_open' && tk.tag === 'h1' && title === undefined) {
+      title = tokens[i + 1]?.content ?? '';
+    }
+    if (tk.type === 'heading_open' && (tk.tag === 'h2' || tk.tag === 'h3' || tk.tag === 'h4')) {
+      const text = tokens[i + 1]?.content ?? '';
+      const slug = `${folder}-${slugify(text)}`;
+      tk.attrSet('id', slug);
+      // Anchor every level up to h4; the TOC still lists h2/h3 only.
+      if (tk.tag !== 'h4') headings.push({ slug, text, depth: tk.tag === 'h2' ? 2 : 3 });
+    }
+  }
+  const html = md.renderer.render(tokens, md.options, {}).replace(
+    /<(h[234]) id="([^"]+)">([\s\S]*?)<\/\1>/g,
+    (_m, tag, id, inner) =>
+      `<${tag} id="${id}">` +
+      `<a class="aas-anchor" href="#${id}" aria-label="Copy link to section"></a>${inner}</${tag}>`,
+  );
+  return { html, headings, title };
+}
+
+function langFor(name: string): string {
+  if (name === 'Dockerfile' || name.endsWith('.dockerfile')) return 'docker';
+  const ext = name.split('.').pop()?.toLowerCase() ?? '';
+  const map: Record<string, string> = {
+    py: 'python',
+    ts: 'typescript',
+    tsx: 'tsx',
+    js: 'javascript',
+    jsx: 'jsx',
+    md: 'markdown',
+    toml: 'toml',
+    yml: 'yaml',
+    yaml: 'yaml',
+    json: 'json',
+    sh: 'bash',
+    bash: 'bash',
+    env: 'bash',
+    sql: 'sql',
+    go: 'go',
+    rs: 'rust',
+  };
+  return map[ext] ?? 'text';
+}
+
+// In the file tree: source first, then Dockerfile, then dependency/config files.
+function priority(path: string): number {
+  const name = path.split('/').pop() ?? path;
+  if (name === 'Dockerfile' || name.endsWith('.dockerfile')) return 1;
+  if (/^requirements|^package\.json$|^pyproject|^package-lock|lock$/i.test(name)) return 3;
+  return 0;
+}
+
+// The viewer renders text only — skip images/archives/etc. by extension, and
+// anything else that carries NUL bytes (binary content decoded as UTF-8 would
+// render as mojibake in the file tree).
+const BINARY_RE =
+  /\.(png|jpe?g|gif|webp|avif|ico|pdf|zip|gz|tgz|tar|db|sqlite3?|woff2?|ttf|eot|otf|mp[34]|wav|bin|exe|so|dylib|pyc|wasm)$/i;
+
+function walk(dir: string, base: string, out: { path: string; name: string; content: string }[]): void {
+  for (const name of readdirSync(dir)) {
+    const full = join(dir, name);
+    if (statSync(full).isDirectory()) walk(full, base, out);
+    else if (!BINARY_RE.test(name)) {
+      const buf = readFileSync(full);
+      if (buf.subarray(0, 8192).includes(0)) continue;
+      out.push({ path: relative(base, full), name, content: buf.toString('utf8') });
+    }
+  }
+}
+
+/**
+ * Subset of `paths` (relative to the repo root) that git would ignore, so files
+ * like `.env` never leak into the rendered file tree. Respects nested .gitignore
+ * files and negations. Falls back to ignoring nothing if git isn't available.
+ */
+function gitIgnored(paths: string[]): Set<string> {
+  if (!paths.length) return new Set();
+  try {
+    const out = execFileSync('git', ['check-ignore', '--stdin'], {
+      input: paths.join('\n'),
+      encoding: 'utf8',
+    });
+    return new Set(out.split('\n').map((s) => s.trim()).filter(Boolean));
+  } catch (err) {
+    // Exit code 1 ("nothing ignored") still throws; its stdout holds any matches.
+    const out = (err as { stdout?: string }).stdout ?? '';
+    return new Set(out.split('\n').map((s) => s.trim()).filter(Boolean));
+  }
+}
+
+/** A README file in the project, with an optional locale suffix:
+ *  README.md (default) or README.<lang>.md (e.g. README.ko.md). */
+const README_RE = /^readme(?:\.([a-z]{2}))?\.md$/i;
+
+/** All sample folders under samples/, sorted by name. */
+export function listSampleFolders(): string[] {
+  return readdirSync(SAMPLES_DIR, { withFileTypes: true })
+    .filter((e) => e.isDirectory())
+    .map((e) => e.name)
+    .sort();
+}
+
+export interface ProjectSummary {
+  folder: string;
+  name: string; // README h1 in the requested locale (folder as fallback)
+  excerpt: string; // first README paragraph, plain text
+  date: string; // when the sample was authored (YYYY-MM-DD)
+}
+
+/**
+ * Light per-folder metadata for the samples index: the locale-appropriate
+ * README's title and first paragraph — parsed, not rendered, and nothing is
+ * highlighted, so listing every sample stays cheap.
+ */
+export function listProjects(lang: string): ProjectSummary[] {
+  const md = new MarkdownIt();
+  // Markdown inline syntax the excerpt should not carry into a card.
+  const plain = (s: string) =>
+    s.replace(/\[([^\]]*)\]\([^)]*\)/g, '$1').replace(/[*_`]/g, '');
+  return listSampleFolders().map((folder) => {
+    const dir = join(SAMPLES_DIR, folder);
+    const readmes = readdirSync(dir).filter((n) => README_RE.test(n));
+    const pick =
+      readmes.find((n) => n.toLowerCase() === `readme.${lang}.md`) ??
+      readmes.find((n) => n.toLowerCase() === 'readme.md') ??
+      readmes[0];
+    let name = folder;
+    let excerpt = '';
+    if (pick) {
+      const tokens = md.parse(readFileSync(join(dir, pick), 'utf8'), {});
+      for (let i = 0; i < tokens.length; i++) {
+        if (tokens[i].type === 'heading_open' && tokens[i].tag === 'h1' && name === folder)
+          name = tokens[i + 1]?.content ?? folder;
+        else if (tokens[i].type === 'paragraph_open' && !excerpt)
+          excerpt = plain(tokens[i + 1]?.content ?? '').replace(/\s+/g, ' ');
+        if (name !== folder && excerpt) break;
+      }
+    }
+    return { folder, name, excerpt, date: SAMPLE_DATES[folder] ?? DEFAULT_SAMPLE_DATE };
+  });
+}
+
+/**
+ * Read + render the sample projects in the given `samples/<folder>/` list.
+ * For each project the README is localized: `README.<lang>.md` is used when it
+ * exists, otherwise the plain `README.md` is the fallback.
+ */
+export async function renderProjects(folders: string[], lang: string): Promise<RenderedProject[]> {
+  const hl = await getHighlighter();
+  const escapeHtml = (s: string) =>
+    s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const md = new MarkdownIt({
+    html: false,
+    linkify: true,
+    highlight: (code, info) => {
+      const lang = (info || '').trim() || 'text';
+      // Hand mermaid blocks to the client-side MermaidLoader instead of Shiki,
+      // so README diagrams render as graphics rather than highlighted text.
+      if (lang === 'mermaid') return `<pre class="mermaid">${escapeHtml(code)}</pre>`;
+      return highlight(hl, code, lang);
+    },
+  });
+  // README links open in a new tab.
+  const baseLink = md.renderer.rules.link_open ?? ((t, i, o, _e, s) => s.renderToken(t, i, o));
+  md.renderer.rules.link_open = (tokens, idx, opts, env, self) => {
+    tokens[idx].attrSet('target', '_blank');
+    tokens[idx].attrSet('rel', 'noopener noreferrer');
+    return baseLink(tokens, idx, opts, env, self);
+  };
+
+  const out: RenderedProject[] = [];
+  for (const folder of folders) {
+    const dir = join(SAMPLES_DIR, folder);
+    if (!existsSync(dir)) continue;
+    const raw: { path: string; name: string; content: string }[] = [];
+    walk(dir, dir, raw);
+    if (!raw.length) continue;
+
+    // Hide gitignored files (e.g. a local .env) from the file tree.
+    const ignored = gitIgnored(raw.map((f) => join(dir, f.path)));
+    const shown = raw.filter((f) => !ignored.has(join(dir, f.path)));
+    if (!shown.length) continue;
+
+    // Pick the README for the current language: README.<lang>.md, else the
+    // plain README.md. All README variants are kept out of the file tree.
+    const readmes = shown.filter((f) => README_RE.test(f.path));
+    const readme =
+      readmes.find((f) => f.path.toLowerCase() === `readme.${lang}.md`) ??
+      readmes.find((f) => f.path.toLowerCase() === 'readme.md') ??
+      readmes[0];
+
+    let readmeHtml: string | undefined;
+    let headings: ProjectHeading[] = [];
+    let name = folder;
+    if (readme) {
+      let title: string | undefined;
+      ({ html: readmeHtml, headings, title } = renderReadme(md, readme.content, folder));
+      name = title || folder;
+    }
+
+    const files: ProjectFile[] = [];
+    for (const f of shown
+      .filter((f) => !README_RE.test(f.path))
+      .sort((a, b) => priority(a.path) - priority(b.path) || a.path.localeCompare(b.path))) {
+      files.push({ path: f.path, html: highlight(hl, f.content, langFor(f.name)) });
+    }
+    out.push({
+      folder,
+      name,
+      date: SAMPLE_DATES[folder] ?? DEFAULT_SAMPLE_DATE,
+      readmeHtml,
+      headings,
+      files,
+      folderUrl: `${REPO}/tree/main/samples/${folder}`,
+    });
+  }
+  return out;
+}

package/src/lib/samples.ts

@@ -0,0 +1,88 @@
+import { codeToHtml } from 'shiki';
+import MarkdownIt from 'markdown-it';
+
+const md = new MarkdownIt({ html: false, linkify: true });
+
+export interface SampleHeading {
+  slug: string;
+  text: string;
+  depth: number;
+}
+
+export interface RenderedSample {
+  version: string;
+  lang: string;
+  codeHtml: string;
+  descHtml?: string;
+  diagram?: string;
+  note?: string;
+  headings: SampleHeading[];
+}
+
+interface RawSample {
+  version: string;
+  lang?: string;
+  description?: string;
+  diagram?: string;
+  code: string;
+  note?: string;
+}
+
+function slugify(s: string): string {
+  return s
+    .toLowerCase()
+    .trim()
+    .replace(/[^\p{L}\p{N} -]/gu, '')
+    .replace(/\s+/g, '-');
+}
+
+/**
+ * Render code samples for the detail "Code" tab: highlight code with Shiki,
+ * render each Markdown `description` to HTML (giving its h2/h3 stable ids), and
+ * return the per-sample headings so the right-rail TOC can list a version's
+ * internal sections (not the version itself).
+ */
+export async function renderSamples(samples: RawSample[]): Promise<RenderedSample[]> {
+  return Promise.all(
+    samples.map(async (s, idx) => {
+      let codeHtml: string;
+      try {
+        codeHtml = await codeToHtml(s.code, { lang: s.lang ?? 'ts', theme: 'github-dark' });
+      } catch {
+        codeHtml = await codeToHtml(s.code, { lang: 'text', theme: 'github-dark' });
+      }
+
+      let descHtml: string | undefined;
+      const headings: SampleHeading[] = [];
+      if (s.description) {
+        const tokens = md.parse(s.description, {});
+        for (let i = 0; i < tokens.length; i++) {
+          const tk = tokens[i];
+          if (tk.type === 'heading_open' && (tk.tag === 'h2' || tk.tag === 'h3' || tk.tag === 'h4')) {
+            const text = tokens[i + 1]?.content ?? '';
+            const slug = `s${idx}-${slugify(text)}`;
+            tk.attrSet('id', slug);
+            // Anchor every level up to h4; the TOC still lists h2/h3 only.
+            if (tk.tag !== 'h4') headings.push({ slug, text, depth: tk.tag === 'h2' ? 2 : 3 });
+          }
+        }
+        descHtml = md.renderer.render(tokens, md.options, {}).replace(
+          /<(h[234]) id="([^"]+)">([\s\S]*?)<\/\1>/g,
+          (_m, tag, id, inner) =>
+            `<${tag} id="${id}">` +
+            `<a class="aas-anchor" href="#${id}" aria-label="Copy link to section"></a>${inner}</${tag}>`,
+        );
+      }
+
+      return {
+        version: s.version,
+        lang: s.lang ?? 'ts',
+        codeHtml,
+        descHtml,
+        diagram: s.diagram,
+        note: s.note,
+        headings,
+      };
+    }),
+  );
+}

package/src/lib/slides.ts

@@ -0,0 +1,25 @@
+import { getCollection, type CollectionEntry } from 'astro:content';
+import type { Lang } from '../i18n/ui';
+
+export type SlideDeck = CollectionEntry<'slides'>;
+
+/**
+ * The url slug of a deck: its id with the `<lang>/` prefix removed, plus a
+ * trailing `/index` dropped so a folder deck (`<name>/index.mdx`, used when a
+ * deck co-locates images) shares the same `<name>` slug as a flat `<name>.mdx`.
+ */
+export function deckSlugOf(entry: SlideDeck): string {
+  return entry.id.replace(/^[a-z]{2}\//, '').replace(/\/index$/, '');
+}
+
+/** Published slide decks for one locale, by `order` then title. */
+export async function getDecks(lang: Lang): Promise<SlideDeck[]> {
+  const all = await getCollection('slides');
+  return all
+    .filter((e) => e.id.startsWith(`${lang}/`) && !e.data.draft)
+    .sort(
+      (a, b) =>
+        (a.data.order ?? 999) - (b.data.order ?? 999) ||
+        a.data.title.localeCompare(b.data.title),
+    );
+}

package/src/lib/stacks.ts

@@ -0,0 +1,129 @@
+import { getCollection, type CollectionEntry } from 'astro:content';
+import type { Lang } from '../i18n/ui';
+import { descendantIds } from '@aas-data/categories';
+
+export type StackEntry = CollectionEntry<'stacks'>;
+
+/** The url slug of an entry, i.e. its id with the `<lang>/` prefix removed. */
+export function slugOf(entry: StackEntry): string {
+  return entry.id.replace(/^[a-z]{2}\//, '');
+}
+
+/** A name → url-safe slug, e.g. "Roo Code" → "roo-code". */
+export function slugifyName(name: string): string {
+  return name
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+/**
+ * Redirect aliases for a locale's stacks: each former name (after a rename)
+ * slugifies to an alias that should redirect to the entry's canonical slug.
+ * Aliases that collide with a real slug or each other are dropped.
+ */
+export async function getStackAliases(lang: Lang): Promise<{ alias: string; target: string }[]> {
+  const stacks = await getStacks(lang);
+  const canonical = new Set(stacks.map(slugOf));
+  const seen = new Set<string>();
+  const out: { alias: string; target: string }[] = [];
+  for (const s of stacks) {
+    const target = slugOf(s);
+    for (const former of s.data.formerNames) {
+      const alias = slugifyName(former);
+      if (!alias || alias === target || canonical.has(alias) || seen.has(alias)) continue;
+      seen.add(alias);
+      out.push({ alias, target });
+    }
+  }
+  return out;
+}
+
+/** All stack entries for one locale (entries live in `stacks/<lang>/*.mdx`). */
+export async function getStacks(lang: Lang): Promise<StackEntry[]> {
+  const all = await getCollection('stacks');
+  return all.filter((e) => e.id.startsWith(`${lang}/`));
+}
+
+/** Unique, sorted list of tags used by entries in a locale. */
+export async function getAllTags(lang: Lang): Promise<string[]> {
+  const stacks = await getStacks(lang);
+  const set = new Set<string>();
+  for (const s of stacks) for (const tag of s.data.tags) set.add(tag);
+  return [...set].sort();
+}
+
+/** Entries in a locale that carry a given tag. */
+export async function getStacksByTag(lang: Lang, tag: string): Promise<StackEntry[]> {
+  const stacks = await getStacks(lang);
+  return stacks.filter((s) => s.data.tags.includes(tag));
+}
+
+/** Unique vendor url-slugs across a locale's stacks (for /vendors/<slug>). */
+export async function getAllVendors(lang: Lang): Promise<string[]> {
+  const stacks = await getStacks(lang);
+  const set = new Set<string>();
+  for (const s of stacks) {
+    // A vendor with no Latin/digit characters (e.g. a Korean-only name)
+    // slugifies to '' — skip it rather than emit a broken /vendors/ route.
+    const slug = s.data.vendor ? slugifyName(s.data.vendor) : '';
+    if (slug) set.add(slug);
+  }
+  return [...set].sort();
+}
+
+/** Entries in a locale whose vendor slugifies to `slug`, sorted by name. */
+export async function getStacksByVendor(lang: Lang, slug: string): Promise<StackEntry[]> {
+  const stacks = await getStacks(lang);
+  return stacks
+    .filter((s) => s.data.vendor && slugifyName(s.data.vendor) === slug)
+    .sort((a, b) => a.data.name.localeCompare(b.data.name));
+}
+
+/**
+ * A tool referenced by slug, resolved for display (avatar + link + flags).
+ * Unknown slugs — no matching mdx — carry `registered: false` and only a
+ * display name, so the UI can render them as "not in our catalog".
+ */
+export interface ToolRef {
+  slug: string;
+  name: string;
+  registered: boolean;
+  logo?: string;
+  logoDark?: string;
+  category?: string;
+  deprecated?: boolean;
+}
+
+/** Build a slug → ToolRef resolver over a locale's stacks (one lookup map,
+ *  reused across many slugs — e.g. a project's related-tools lists). */
+export async function toolResolver(lang: Lang): Promise<(slug: string) => ToolRef> {
+  const stacks = await getStacks(lang);
+  const bySlug = new Map(stacks.map((s) => [slugOf(s), s]));
+  return (slug) => {
+    const e = bySlug.get(slug);
+    if (!e) return { slug, name: slug, registered: false };
+    return {
+      slug,
+      name: e.data.name,
+      registered: true,
+      logo: e.data.logo,
+      logoDark: e.data.logoDark,
+      category: e.data.category,
+      deprecated: e.data.deprecated,
+    };
+  };
+}
+
+/**
+ * Entries in a locale that belong to a category node or any of its
+ * subcategories (subtree roll-up), sorted alphabetically by name.
+ */
+export async function getStacksByCategory(lang: Lang, id: string): Promise<StackEntry[]> {
+  const ids = new Set(descendantIds(id));
+  const stacks = await getStacks(lang);
+  return stacks
+    .filter((s) => ids.has(s.data.category))
+    .sort((a, b) => a.data.name.localeCompare(b.data.name));
+}

package/src/lib/toc-rail-client.ts

@@ -0,0 +1,79 @@
+/**
+ * Shared CLIENT-SIDE logic for the fixed right-rail TOC — imported by the
+ * <script> blocks of both TocRail.astro (single-column pages: concepts,
+ * articles) and StackDetail.astro (tab-aware rail). Everything here runs in
+ * the browser, not at build time.
+ */
+
+/**
+ * Start the scroll-spy: highlight the rail link whose section is nearest above
+ * the viewport top. Headings that are hidden — inside an inactive tab panel or
+ * a collapsed <details> (offsetParent === null) — are skipped. Returns the spy
+ * so tab/version/example switches can re-run it after changing visibility.
+ */
+export function startScrollSpy(rail: HTMLElement): () => void {
+  const spy = () => {
+    const links = Array.from(rail.querySelectorAll<HTMLAnchorElement>('a[href^="#"]'));
+    let activeId: string | null = null;
+    for (const a of links) {
+      const id = a.getAttribute('href')!.slice(1);
+      const h = document.getElementById(id);
+      if (h && h.offsetParent !== null && h.getBoundingClientRect().top <= 140) activeId = id;
+    }
+    links.forEach((a) =>
+      a.setAttribute('aria-current', String(a.getAttribute('href')!.slice(1) === activeId)),
+    );
+  };
+  window.addEventListener('scroll', spy, { passive: true });
+  spy();
+  return spy;
+}
+
+/** Wire the rail's back-to-top button. */
+export function initBackToTop(rail: HTMLElement): void {
+  rail
+    .querySelector('[data-back-to-top]')
+    ?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+}
+
+/**
+ * Prose reveals (<details> in the body, e.g. "구체적인 예시"): open by default,
+ * remembered per page in localStorage, with a "collapse / expand all" toggle in
+ * the rail foot. Storage access is guarded throughout — a browser that blocks
+ * storage just loses persistence, not the whole feature.
+ */
+export function initReveals(rail: HTMLElement): void {
+  const reveals = Array.from(
+    document.querySelectorAll<HTMLDetailsElement>('.prose details:not(.aas-tree-dir)'),
+  );
+  if (!reveals.length) return;
+  const allBtn = rail.querySelector<HTMLButtonElement>('[data-toggle-all]');
+  const key = (i: number) => `aas:reveal:${location.pathname}:${i}`;
+  const syncAll = () => {
+    if (!allBtn) return;
+    const anyOpen = reveals.some((d) => d.open);
+    allBtn.textContent = anyOpen ? allBtn.dataset.collapse! : allBtn.dataset.expand!;
+  };
+  reveals.forEach((d, i) => {
+    let saved: string | null = null;
+    try {
+      saved = localStorage.getItem(key(i));
+    } catch {}
+    if (saved === '0') d.open = false;
+    else if (saved === '1') d.open = true;
+    d.addEventListener('toggle', () => {
+      try {
+        localStorage.setItem(key(i), d.open ? '1' : '0');
+      } catch {}
+      syncAll();
+    });
+  });
+  if (allBtn) {
+    allBtn.hidden = false;
+    allBtn.addEventListener('click', () => {
+      const open = !reveals.some((d) => d.open);
+      reveals.forEach((d) => (d.open = open));
+    });
+    syncAll();
+  }
+}

package/src/pages/article/[...id].astro

@@ -0,0 +1,24 @@
+---
+import { site } from '@aas-data/site';
+import type { GetStaticPaths } from 'astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import ArticleDetail from '../../components/ArticleDetail.astro';
+import { getArticles, articleSlugOf } from '../../lib/articles';
+
+export const getStaticPaths = (async () => {
+  const entries = await getArticles('en');
+  return entries.map((entry) => ({ params: { id: articleSlugOf(entry) }, props: { entry } }));
+}) satisfies GetStaticPaths;
+
+const { entry } = Astro.props;
+const slug = articleSlugOf(entry);
+---
+
+<BaseLayout
+  title={`${entry.data.title} — ${site.name}`}
+  description={entry.data.description}
+  lang="en"
+  path={`article/${slug}/`}
+>
+  <ArticleDetail entry={entry} lang="en" />
+</BaseLayout>

package/src/pages/article/category/[id].astro

@@ -0,0 +1,17 @@
+---
+import { site } from '@aas-data/site';
+import type { GetStaticPaths } from 'astro';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import BlogIndex from '../../../components/BlogIndex.astro';
+import { articleTree } from '@aas-data/article-categories';
+
+export const getStaticPaths = (() =>
+  articleTree.allIds.map((id) => ({ params: { id }, props: { id } }))) satisfies GetStaticPaths;
+
+const { id } = Astro.props as { id: string };
+const node = articleTree.map.get(id)!;
+---
+
+<BaseLayout title={`${node.label.en} — ${site.name}`} lang="en" path={`article/category/${id}/`}>
+  <BlogIndex lang="en" categoryId={id} />
+</BaseLayout>

package/src/pages/article/index.astro

@@ -0,0 +1,12 @@
+---
+import { site } from '@aas-data/site';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import BlogIndex from '../../components/BlogIndex.astro';
+import { useTranslations } from '../../i18n/ui';
+
+const t = useTranslations('en');
+---
+
+<BaseLayout title={`${t('blog.title')} — ${site.name}`} lang="en" path="article/">
+  <BlogIndex lang="en" />
+</BaseLayout>