stack-site-builder 1.10.0 → 1.12.0

package/src/components/ThemeToggle.astro

@@ -1,6 +1,5 @@
 ---
 import { useTranslations, type Lang } from '../i18n/ui';
-import ChevronDown from './ChevronDown.astro';
 
 interface Props {
   lang: Lang;
@@ -18,12 +17,11 @@ const options = [
 
 <details class="aas-theme">
   <summary
-    class="flex cursor-pointer list-none items-center gap-1 rounded-lg border border-[var(--aas-border)] px-2.5 py-1 text-[var(--aas-text)] select-none"
+    class="flex cursor-pointer list-none items-center rounded-lg border border-[var(--aas-border)] px-2.5 py-1 text-[var(--aas-text)] select-none"
     aria-label={t('theme.label')}
     title={t('theme.label')}
   >
     <span data-theme-icon aria-hidden="true">☀</span>
-    <ChevronDown class="text-[var(--aas-muted)]" />
   </summary>
   <ul
     class="absolute right-0 z-10 mt-1 min-w-[8rem] overflow-hidden rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] py-1 shadow-lg"

package/src/components/ToolMeta.astro

@@ -1,5 +1,5 @@
 ---
-import { pricingLabels, licenseLabel, useTranslations, type Lang } from '../i18n/ui';
+import { pricingLabel, licenseLabel, useTranslations, type Lang } from '../i18n/ui';
 import { formatStars, type Staleness } from '../lib/github';
 import { pricingTags, COMPLETELY_FREE } from '../lib/pricing';
 import StarIcon from './StarIcon.astro';
@@ -81,7 +81,7 @@ const chip = 'aas-chip rounded-lg px-2.5 py-1';
       {language && <span class={chip}>{language}</span>}
       {pricingTags(pricing).map((p) => (
         <span class:list={[p === COMPLETELY_FREE ? 'aas-free' : 'aas-pricing', 'rounded-lg px-2.5 py-1']}>
-          {pricingLabels[lang][p] ?? p}
+          {pricingLabel(lang, p)}
         </span>
       ))}
       {license && (

package/src/content.ts

@@ -224,5 +224,33 @@ export function defineAasCollections({ categoryMap }: { categoryMap: Map<string,
     }),
   });
 
-  return { stacks, articles, concepts, slides };
+  /**
+   * The `pages` collection holds standalone top-level pages — an About/소개, a
+   * contact page, terms, etc. Unlike the other collections there's no index or
+   * taxonomy: each entry renders on its own at the site root (`/<slug>/`), and
+   * (when `nav` is set) shows up as its own item in the header navigation. This
+   * is how a site adds a first-class section that is just one page.
+   *
+   * Locale-partitioned like the rest: `pages/en/about.mdx`, `pages/ko/about.mdx`.
+   */
+  const pages = defineCollection({
+    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/pages' }),
+    schema: ({ image }) =>
+      z.object({
+        title: z.string(),
+        description: z.string().optional(),
+        image: image().optional(), // hero image (optimized; relative to the file)
+        imageAlt: z.string().optional(),
+        // Header-nav placement. `nav` toggles the link; `navLabel` overrides the
+        // link's accessible label (defaults to `title`); `order` sorts the page
+        // links among themselves (lower first). A page with `nav: false` still
+        // renders at its URL but isn't linked from the header.
+        nav: z.boolean().default(true),
+        navLabel: z.string().optional(),
+        order: z.number().default(0),
+        draft: z.boolean().default(false),
+      }),
+  });
+
+  return { stacks, articles, concepts, slides, pages };
 }

package/src/i18n/ui.ts

@@ -8,14 +8,48 @@
  */
 import { site } from '@aas-data/site';
 
-export const languages = {
-  en: 'English',
-  ko: '한국어',
-} as const;
+/** One locale the site ships. `code` matches the astro.config `i18n` locale and
+ *  the content folder (`stacks/<code>/…`); `label` names it in the switcher;
+ *  `dateLocale` is the BCP-47 tag for date formatting (defaults to `code`). */
+export interface LocaleDef {
+  code: string;
+  label: string;
+  dateLocale?: string;
+}
+
+// The theme ships English + Korean. A consuming site overrides this list via
+// `site.locales` to rename them, reorder them, or add its own (e.g. `ja`). The
+// list is authoritative and ordered: it drives the language switcher, and its
+// FIRST entry is the default locale (must match astro.config `i18n.defaultLocale`).
+const themeLocales: LocaleDef[] = [
+  { code: 'en', label: 'English', dateLocale: 'en-US' },
+  { code: 'ko', label: '한국어', dateLocale: 'ko-KR' },
+];
+// Read defensively: a site that hasn't opted into custom locales simply has no
+// `locales` field, and should keep the theme's en/ko default (not a type error).
+const siteLocales = (site as { locales?: LocaleDef[] }).locales;
+const localeList: LocaleDef[] =
+  Array.isArray(siteLocales) && siteLocales.length ? siteLocales : themeLocales;
+
+/** Display names keyed by code — the language switcher iterates this. */
+export const languages: Record<string, string> = Object.fromEntries(
+  localeList.map((l) => [l.code, l.label]),
+);
 
-export type Lang = keyof typeof languages;
+// Locales are site-configurable, so `Lang` can't be a fixed union of codes.
+export type Lang = string;
 
-export const defaultLang: Lang = 'en';
+export const defaultLang: Lang = localeList[0].code;
+
+/** BCP-47 tag for `Intl` date/number formatting in `lang` (falls back to the
+ *  bare code, then the default locale). */
+export function dateLocaleOf(lang: Lang): string {
+  return (
+    localeList.find((l) => l.code === lang)?.dateLocale ??
+    localeList.find((l) => l.code === defaultLang)?.dateLocale ??
+    lang
+  );
+}
 
 /** UI chrome strings, keyed by a dotted id. */
 export const ui = {
@@ -29,6 +63,10 @@ export const ui = {
     'nav.slides': 'Slides',
     'nav.backToTop': 'Back to top',
     'nav.glossary': 'Glossary',
+    'nav.language': 'Language',
+    'nav.menu': 'Menu',
+    'code.copy': 'Copy code',
+    'code.copied': 'Copied',
     'slides.title': 'Slides',
     'slides.tagline': 'Concept decks — the same ideas as the concept pages, in slide form.',
     'slides.deck': 'Deck',
@@ -167,6 +205,10 @@ export const ui = {
     'nav.slides': '슬라이드',
     'nav.backToTop': '맨 위로',
     'nav.glossary': '용어집',
+    'nav.language': '언어',
+    'nav.menu': '메뉴',
+    'code.copy': '코드 복사',
+    'code.copied': '복사됨',
     'slides.title': '슬라이드',
     'slides.tagline': '개념 덱 — 개념 페이지와 같은 내용을 슬라이드로 옮겼습니다.',
     'slides.deck': '덱',
@@ -299,18 +341,33 @@ export const ui = {
 export type UIKey = keyof (typeof ui)['en'];
 
 /**
- * Returns a `t(key)` translator bound to the given language. A site can
- * override any string (taglines, headings…) via `site.ui.<lang>` in its
- * `src/data/site.ts` — overrides win over the theme defaults here.
+ * Returns a `t(key)` translator bound to the given language. Lookup order:
+ * the site's override for this locale, the theme string for this locale, then
+ * the same two for the default locale, then the key itself. The default-locale
+ * fallback is what lets a site add a locale (e.g. `ja`) and supply only some
+ * strings via `site.ui.ja` — the rest degrade to the default locale instead of
+ * throwing on a locale the theme doesn't ship.
  */
 export function useTranslations(lang: Lang) {
   return function t(key: UIKey): string {
-    return site.ui?.[lang]?.[key] ?? ui[lang][key] ?? ui[defaultLang][key];
+    return (
+      site.ui?.[lang]?.[key] ??
+      (ui as Record<string, Partial<Record<UIKey, string>>>)[lang]?.[key] ??
+      site.ui?.[defaultLang]?.[key] ??
+      (ui as Record<string, Partial<Record<UIKey, string>>>)[defaultLang]?.[key] ??
+      key
+    );
   };
 }
 
+/** Localized label for a `pricing` enum value, falling back to the default
+ *  locale then the raw value (so a site-added locale never crashes). */
+export function pricingLabel(lang: Lang, value: string): string {
+  return pricingLabels[lang]?.[value] ?? pricingLabels[defaultLang]?.[value] ?? value;
+}
+
 /** Human labels for the `pricing` frontmatter enum, per locale. */
-export const pricingLabels: Record<Lang, Record<string, string>> = {
+export const pricingLabels: Record<string, Record<string, string>> = {
   en: {
     'completely-free': 'Completely free',
     'open-source': 'Open source',
@@ -328,10 +385,10 @@ export const pricingLabels: Record<Lang, Record<string, string>> = {
 };
 
 /** Descriptive (non-name) licenses get localized; real license names pass through. */
-const licenseLabels: Record<Lang, Record<string, string>> = {
+const licenseLabels: Record<string, Record<string, string>> = {
   en: { proprietary: 'Proprietary' },
   ko: { proprietary: '독점' },
 };
 export function licenseLabel(lang: Lang, value: string): string {
-  return licenseLabels[lang][value] ?? value;
+  return licenseLabels[lang]?.[value] ?? licenseLabels[defaultLang]?.[value] ?? value;
 }

package/src/layouts/BaseLayout.astro

@@ -6,6 +6,7 @@ import { useTranslations, languages, type Lang } from '../i18n/ui';
 import LanguageSwitcher from '../components/LanguageSwitcher.astro';
 import ThemeToggle from '../components/ThemeToggle.astro';
 import BackToTop from '../components/BackToTop.astro';
+import { getNavPages, pageSlugOf } from '../lib/pages';
 
 interface Props {
   title: string;
@@ -32,10 +33,70 @@ const localeHomes = Object.fromEntries(
   (Object.keys(languages) as Lang[]).map((c) => [c, getRelativeLocaleUrl(c, '')]),
 );
 const isDefaultHome = path === '' && lang === 'en';
+
+// Standalone pages (the `pages` collection) that opt into a header-nav link,
+// e.g. an About/소개 page. Rendered as their own nav items alongside the
+// built-in sections; the accessible label comes from the page's own frontmatter.
+const navPages = await getNavPages(lang);
+
+// The header sections, as data — rendered twice from one source so the two
+// layouts never drift: an icon-only row (≥sm) and a labelled dropdown menu
+// (<sm, so a phone header stays to a few controls instead of a long icon run).
+// `svg` is the icon's inner markup (drawn into a shared <svg> shell below).
+const navItems: {
+  href: string;
+  label: string;
+  svg: string;
+  external?: boolean;
+  keepFilters?: boolean;
+}[] = [
+  {
+    href: `${home}#categories`,
+    label: t('nav.browse'),
+    keepFilters: true,
+    svg: '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
+  },
+  {
+    href: getRelativeLocaleUrl(lang, 'concept/'),
+    label: t('nav.concepts'),
+    svg: '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
+  },
+  {
+    href: getRelativeLocaleUrl(lang, 'article/'),
+    label: t('nav.blog'),
+    svg: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/>',
+  },
+  {
+    href: getRelativeLocaleUrl(lang, 'sample/'),
+    label: t('nav.samples'),
+    svg: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
+  },
+  {
+    href: getRelativeLocaleUrl(lang, 'slides/'),
+    label: t('nav.slides'),
+    svg: '<path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/><path d="M12 12v9"/>',
+  },
+  {
+    href: getRelativeLocaleUrl(lang, 'glossary/'),
+    label: t('nav.glossary'),
+    svg: '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>',
+  },
+  ...navPages.map((p) => ({
+    href: getRelativeLocaleUrl(lang, `${pageSlugOf(p)}/`),
+    label: p.data.navLabel ?? p.data.title,
+    svg: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+  })),
+  {
+    href: site.repoUrl,
+    label: 'GitHub',
+    external: true,
+    svg: '<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C4 2 3 2 3 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 2 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/>',
+  },
+];
 ---
 
 <!doctype html>
-<html lang={lang}>
+<html lang={lang} data-copy-label={t('code.copy')} data-copied-label={t('code.copied')}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -107,66 +168,67 @@ const isDefaultHome = path === '' && lang === 'en';
           {/* Below 600px only the bolt remains, so the narrow header never truncates the wordmark. */}
           <span class="hidden truncate min-[600px]:inline">{site.name}</span>
         </a>
-        {/* Nav links are icon-only at every width (labels live in aria-label). */}
+        {/* Section links are icon-only (labels live in aria-label). On phones
+            (<sm) they collapse into the labelled dropdown menu below, so the
+            header stays to a few controls; from sm up the full icon row shows. */}
         <nav class="flex shrink-0 items-center gap-3 text-sm text-[var(--aas-muted)] sm:gap-4">
-          <a
-            href={`${home}#categories`}
-            data-keep-filters
-            class="flex items-center no-underline hover:text-[var(--aas-text)]"
-            aria-label={t('nav.browse')}
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
-          </a>
-          <a
-            href={getRelativeLocaleUrl(lang, 'concept/')}
-            class="flex items-center no-underline hover:text-[var(--aas-text)]"
-            aria-label={t('nav.concepts')}
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg>
-          </a>
-          <a
-            href={getRelativeLocaleUrl(lang, 'article/')}
-            class="flex items-center no-underline hover:text-[var(--aas-text)]"
-            aria-label={t('nav.blog')}
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
-          </a>
-          <a
-            href={getRelativeLocaleUrl(lang, 'sample/')}
-            class="flex items-center no-underline hover:text-[var(--aas-text)]"
-            aria-label={t('nav.samples')}
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>
-          </a>
-          <a
-            href={getRelativeLocaleUrl(lang, 'slides/')}
-            class="flex items-center no-underline hover:text-[var(--aas-text)]"
-            aria-label={t('nav.slides')}
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/><path d="M12 12v9"/></svg>
-          </a>
-          <a
-            href={getRelativeLocaleUrl(lang, 'glossary/')}
-            class="flex items-center no-underline hover:text-[var(--aas-text)]"
-            aria-label={t('nav.glossary')}
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
-          </a>
-          <a
-            href={site.repoUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center no-underline hover:text-[var(--aas-text)]"
-            aria-label="GitHub"
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C4 2 3 2 3 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 2 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
-          </a>
+          <div class="hidden items-center gap-3 sm:flex sm:gap-4">
+            {
+              navItems.map((item) => (
+                <a
+                  href={item.href}
+                  class="flex items-center no-underline hover:text-[var(--aas-text)]"
+                  aria-label={item.label}
+                  {...(item.keepFilters ? { 'data-keep-filters': true } : {})}
+                  {...(item.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                >
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" set:html={item.svg} />
+                </a>
+              ))
+            }
+          </div>
           <ThemeToggle lang={lang} />
           <LanguageSwitcher lang={lang} path={path} />
+          <details class="aas-menu relative sm:hidden">
+            <summary
+              class="flex cursor-pointer list-none items-center rounded-lg border border-[var(--aas-border)] px-2.5 py-1 text-[var(--aas-text)] select-none"
+              aria-label={t('nav.menu')}
+              title={t('nav.menu')}
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></svg>
+            </summary>
+            <ul
+              class="absolute right-0 z-20 mt-1 min-w-[11rem] overflow-hidden rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] py-1 shadow-lg"
+            >
+              {
+                navItems.map((item) => (
+                  <li>
+                    <a
+                      href={item.href}
+                      class="flex items-center gap-2.5 px-3 py-2 whitespace-nowrap text-[var(--aas-text)] no-underline hover:bg-[var(--aas-bg)]"
+                      {...(item.keepFilters ? { 'data-keep-filters': true } : {})}
+                      {...(item.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                    >
+                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="shrink-0 text-[var(--aas-muted)]" set:html={item.svg} />
+                      <span>{item.label}</span>
+                    </a>
+                  </li>
+                ))
+              }
+            </ul>
+          </details>
         </nav>
       </div>
     </header>
 
+    <style>
+      /* Hide the default <details> disclosure triangle on the mobile menu
+         (Safari needs the -webkit rule even with list-style: none). */
+      .aas-menu > summary::-webkit-details-marker {
+        display: none;
+      }
+    </style>
+
     <main class:list={['mx-auto px-5 py-10', container]}>
       <slot />
     </main>
@@ -209,9 +271,8 @@ const isDefaultHome = path === '' && lang === 'en';
       // (.aas-code). The button is pinned to a non-scrolling host so it stays in
       // place on long, horizontally-scrolling code.
       (function mountCopyButtons() {
-        const koLang = document.documentElement.lang === 'ko';
-        const LABEL = koLang ? '코드 복사' : 'Copy code';
-        const DONE = koLang ? '복사됨' : 'Copied';
+        const LABEL = document.documentElement.dataset.copyLabel || 'Copy code';
+        const DONE = document.documentElement.dataset.copiedLabel || 'Copied';
         const COPY_ICON =
           '<svg class="aas-ico-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="13" height="13" x="9" y="9" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
         const CHECK_ICON =

package/src/lib/dates.ts

@@ -1,4 +1,4 @@
-import type { Lang } from '../i18n/ui';
+import { dateLocaleOf, type Lang } from '../i18n/ui';
 
 /**
  * Human-facing date in the reader's locale (e.g. "June 28, 2026" / "2026년 6월
@@ -7,7 +7,7 @@ import type { Lang } from '../i18n/ui';
  * attribute on the surrounding `<time>` for machines.
  */
 export function formatDate(d: Date, lang: Lang): string {
-  return new Intl.DateTimeFormat(lang === 'ko' ? 'ko-KR' : 'en-US', {
+  return new Intl.DateTimeFormat(dateLocaleOf(lang), {
     year: 'numeric',
     month: 'long',
     day: 'numeric',

package/src/lib/facets.ts

@@ -1,5 +1,5 @@
 import { pricingTags } from './pricing';
-import { pricingLabels, licenseLabel, useTranslations, type Lang } from '../i18n/ui';
+import { pricingLabel, licenseLabel, useTranslations, type Lang } from '../i18n/ui';
 import type { StackEntry } from './stacks';
 
 export interface FacetOption {
@@ -39,7 +39,7 @@ export function deriveFacets(entries: StackEntry[], lang: Lang): Facet[] {
       label: t('detail.pricing'),
       options: pricingOrder
         .filter((p) => usedPricing.has(p))
-        .map((p) => ({ value: p, label: pricingLabels[lang][p] ?? p })),
+        .map((p) => ({ value: p, label: pricingLabel(lang, p) })),
     },
     {
       key: 'license',

package/src/lib/locales.ts

@@ -0,0 +1,16 @@
+import { languages, defaultLang, type Lang } from '../i18n/ui';
+
+/**
+ * Helpers for the single `src/pages/[...lang]/` route tree. Every page's
+ * getStaticPaths walks {@link allLocales} and emits one path per locale, using
+ * {@link langParam} for the `[...lang]` rest param: `undefined` for the default
+ * locale (so it renders at the site root) and the code otherwise (so it renders
+ * under `/<code>/`). Adding a locale is a site-config change, not a new file.
+ */
+
+/** All locale codes the site ships, in switcher order (default first). */
+export const allLocales = Object.keys(languages) as Lang[];
+
+/** The `[...lang]` param for a locale: `undefined` for the default, else the code. */
+export const langParam = (lang: Lang): string | undefined =>
+  lang === defaultLang ? undefined : lang;

package/src/lib/pages.ts

@@ -0,0 +1,24 @@
+import { getCollection, type CollectionEntry } from 'astro:content';
+import type { Lang } from '../i18n/ui';
+
+export type PageEntry = CollectionEntry<'pages'>;
+
+/** The url slug of a page, i.e. its id with the `<lang>/` prefix removed. */
+export function pageSlugOf(entry: PageEntry): string {
+  return entry.id.replace(/^[a-z]{2}\//, '');
+}
+
+/** Standalone pages for one locale, in `order` (then title) order. */
+export async function getPages(lang: Lang): Promise<PageEntry[]> {
+  const all = await getCollection('pages');
+  return all
+    .filter((e) => e.id.startsWith(`${lang}/`) && !e.data.draft)
+    .sort(
+      (a, b) => a.data.order - b.data.order || a.data.title.localeCompare(b.data.title),
+    );
+}
+
+/** The subset of {@link getPages} that opts into a header-nav link. */
+export async function getNavPages(lang: Lang): Promise<PageEntry[]> {
+  return (await getPages(lang)).filter((e) => e.data.nav);
+}

package/src/pages/[...lang]/[page].astro

@@ -0,0 +1,30 @@
+---
+import { site } from '@aas-data/site';
+import type { GetStaticPaths } from 'astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PageDetail from '../../components/PageDetail.astro';
+import { getPages, pageSlugOf } from '../../lib/pages';
+import { allLocales, langParam } from '../../lib/locales';
+
+export const getStaticPaths = (async () => {
+  const paths: Awaited<ReturnType<GetStaticPaths>> = [];
+  for (const lang of allLocales) {
+    for (const entry of await getPages(lang)) {
+      paths.push({ params: { lang: langParam(lang), page: pageSlugOf(entry) }, props: { lang, entry } });
+    }
+  }
+  return paths;
+}) satisfies GetStaticPaths;
+
+const { lang, entry } = Astro.props;
+const slug = pageSlugOf(entry);
+---
+
+<BaseLayout
+  title={`${entry.data.title} — ${site.name}`}
+  description={entry.data.description}
+  lang={lang}
+  path={`${slug}/`}
+>
+  <PageDetail entry={entry} lang={lang} />
+</BaseLayout>

package/src/pages/{ko → [...lang]}/article/[...id].astro

@@ -4,21 +4,27 @@ import type { GetStaticPaths } from 'astro';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
 import ArticleDetail from '../../../components/ArticleDetail.astro';
 import { getArticles, articleSlugOf } from '../../../lib/articles';
+import { allLocales, langParam } from '../../../lib/locales';
 
 export const getStaticPaths = (async () => {
-  const entries = await getArticles('ko');
-  return entries.map((entry) => ({ params: { id: articleSlugOf(entry) }, props: { entry } }));
+  const paths: Awaited<ReturnType<GetStaticPaths>> = [];
+  for (const lang of allLocales) {
+    for (const entry of await getArticles(lang)) {
+      paths.push({ params: { lang: langParam(lang), id: articleSlugOf(entry) }, props: { lang, entry } });
+    }
+  }
+  return paths;
 }) satisfies GetStaticPaths;
 
-const { entry } = Astro.props;
+const { lang, entry } = Astro.props;
 const slug = articleSlugOf(entry);
 ---
 
 <BaseLayout
   title={`${entry.data.title} — ${site.name}`}
   description={entry.data.description}
-  lang="ko"
+  lang={lang}
   path={`article/${slug}/`}
 >
-  <ArticleDetail entry={entry} lang="ko" />
+  <ArticleDetail entry={entry} lang={lang} />
 </BaseLayout>

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

@@ -0,0 +1,25 @@
+---
+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';
+import { allLocales, langParam } from '../../../../lib/locales';
+
+export const getStaticPaths = (() => {
+  const paths: Awaited<ReturnType<GetStaticPaths>> = [];
+  for (const lang of allLocales) {
+    for (const id of articleTree.allIds) {
+      paths.push({ params: { lang: langParam(lang), id }, props: { lang, id } });
+    }
+  }
+  return paths;
+}) satisfies GetStaticPaths;
+
+const { lang, id } = Astro.props as { lang: string; id: string };
+const node = articleTree.map.get(id)!;
+---
+
+<BaseLayout title={`${node.label[lang]} — ${site.name}`} lang={lang} path={`article/category/${id}/`}>
+  <BlogIndex lang={lang} categoryId={id} />
+</BaseLayout>

package/src/pages/[...lang]/article/index.astro

@@ -0,0 +1,18 @@
+---
+import { site } from '@aas-data/site';
+import type { GetStaticPaths } from 'astro';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import BlogIndex from '../../../components/BlogIndex.astro';
+import { useTranslations } from '../../../i18n/ui';
+import { allLocales, langParam } from '../../../lib/locales';
+
+export const getStaticPaths = (() =>
+  allLocales.map((lang) => ({ params: { lang: langParam(lang) }, props: { lang } }))) satisfies GetStaticPaths;
+
+const { lang } = Astro.props;
+const t = useTranslations(lang);
+---
+
+<BaseLayout title={`${t('blog.title')} — ${site.name}`} lang={lang} path="article/">
+  <BlogIndex lang={lang} />
+</BaseLayout>

package/src/pages/[...lang]/categories/[id].astro

@@ -0,0 +1,28 @@
+---
+import { site } from '@aas-data/site';
+import type { GetStaticPaths } from 'astro';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import CategoryIndex from '../../../components/CategoryIndex.astro';
+import { allCategoryIds, categoryMap } from '@aas-data/categories';
+import { getStacksByCategory } from '../../../lib/stacks';
+import { allLocales, langParam } from '../../../lib/locales';
+
+export const getStaticPaths = (async () => {
+  const paths: Awaited<ReturnType<GetStaticPaths>> = [];
+  for (const lang of allLocales) {
+    for (const id of allCategoryIds) {
+      // Skip nodes with no tools in their subtree for this locale (no empty pages).
+      if ((await getStacksByCategory(lang, id)).length === 0) continue;
+      paths.push({ params: { lang: langParam(lang), id }, props: { lang, id } });
+    }
+  }
+  return paths;
+}) satisfies GetStaticPaths;
+
+const { lang, id } = Astro.props;
+const node = categoryMap.get(id)!;
+---
+
+<BaseLayout title={`${node.label[lang]} — ${site.name}`} lang={lang} path={`categories/${id}/`}>
+  <CategoryIndex lang={lang} id={id} />
+</BaseLayout>