@master/internal-site 0.1.2 → 0.2.0

package/src/astro/routes.template.ts

@@ -3,6 +3,7 @@ import { mergeAssets, type PageAssets, type PropagatedModule } from '@master/int
 import { createStaticPaths, directoriesOf, localesOf, sectionOf, type ParamsModule, type RouteProps, type Section } from '@master/internal-site/astro/route-paths'
 import type { Metadata } from '@master/internal-site/types/Metadata'
 import type { Props } from '@master/internal-site/types/Props'
+import { loadLocalizedContent } from '@master/internal-site/factories/create-page'
 
 export { localizePathname, sectionOf } from '@master/internal-site/astro/route-paths'
 export type { RouteProps, Section } from '@master/internal-site/astro/route-paths'
@@ -18,6 +19,7 @@ interface PageModule {
   metadata?: Partial<Metadata>
   generateMetadata?: (props: Pick<Props, 'params'>) => Promise<Partial<Metadata>> | Partial<Metadata>
   /** `false` for pages that render no document surfaces, code or prose, such as indexes. */
+  /** Article typography only; feature components own their CSS dependencies. */
   documentStyles?: boolean
 }
 
@@ -76,6 +78,8 @@ export async function loadRoute({ file, locale, params }: RouteProps): Promise<L
   const metadata = (module.generateMetadata ? await module.generateMetadata(props) : module.metadata) ?? {}
   const layers = [module.default]
   const propagated: PropagatedModule<unknown>[] = [page.propagated]
+  const localized = await loadLocalizedContent(locale, metadata)
+  if (localized) { await localized.getMod(); propagated.push(localized) }
   const directories = directoriesOf(file, contentRoot)
   for (let depth = directories.length; depth > 0; depth--) {
     const layoutFile = `${contentRoot}${directories.slice(0, depth).join('/')}/layout.astro`

package/src/astro/site-context.ts

@@ -1,5 +1,6 @@
 import config from 'virtual:master-site/config'
 import { createSite, type Site, type SiteContextValue } from '../docs-shell/site'
+import sharedTranslations from '../docs-shell/common/translations'
 
 export function localeOfPathname(pathname: string): string {
   const segment = pathname.split('/')[1]
@@ -18,10 +19,17 @@ export function canonicalPathname(pathname: string) {
 export function siteContextOf(url: URL): SiteContextValue {
   const pathname = canonicalPathname(url.pathname)
   const locale = localeOfPathname(pathname)
-  const { translations, ...i18n } = config.i18n
-  return { locale, pathname, translations: translations[locale] ?? {}, i18n }
+  const { translations, defaultLocale, locales, hreflangOfLocale, nameOfLocale, localizablePathnameRoots, localizableOrigins } = config.i18n
+  // Only public navigation settings belong in the serialized island context.
+  const i18n = { defaultLocale, locales, hreflangOfLocale, nameOfLocale, localizablePathnameRoots, localizableOrigins }
+  return { locale, pathname, translations: { ...sharedTranslations[locale], ...translations[locale] }, i18n }
 }
 
 export function siteOf(astro: { url: URL }): Site {
   return createSite(siteContextOf(astro.url))
 }
+
+/** Request-local authored figure captions and other article-specific copy. */
+export function documentCopyOf(astro: { locals: object }): Record<string, any> {
+  return (astro.locals as Record<string, any>).masterDocument ?? {}
+}

package/src/astro/style-assets.ts

@@ -0,0 +1,107 @@
+import { createHash } from 'node:crypto'
+import { readdir, readFile, writeFile } from 'node:fs/promises'
+import { dirname, resolve } from 'node:path'
+
+/** Collapse only the compiler's unconditional, same-directory asset links.
+ * This is concatenation of already compiled CSS, not a second CSS compiler.
+ * Keep conditions, layers, URLs, repeated occurrences and unrelated imports intact.
+ */
+export async function inlineGeneratedStyles(file: string, ancestors: string[] = []): Promise<string> {
+  if (ancestors.includes(file)) throw new Error(`Cyclic generated stylesheet: ${file}`)
+  const source = await readFile(file, 'utf8')
+  let code = '', cursor = 0
+  // Generated imports form a leading prologue. Never search declarations or
+  // comments for import-looking text (for example a teaching sample's content).
+  while (cursor < source.length) {
+    const rest = source.slice(cursor)
+    const trivia = /^(?:\s+|\/\*[\s\S]*?\*\/|@layer\s+[\w,\s-]+;)/.exec(rest)
+    if (trivia) { code += trivia[0]; cursor += trivia[0].length; continue }
+    const match = /^@import\s+["'](\.\/master-css-[\w-]+\.css)["']\s*;/.exec(rest)
+    if (!match) break
+    code += await inlineGeneratedStyles(resolve(dirname(file), match[1]), [...ancestors, file]) + '\n'
+    cursor += match[0].length
+  }
+  const expanded = code + source.slice(cursor)
+  // A remaining import would become invalid after an inlined declaration.
+  // Retain this entry intact, including its original import prologue. A match
+  // inside a comment/string merely skips this optional optimization.
+  return /@(?:import|charset|namespace)\b/.test(expanded) ? source : expanded
+}
+
+/** Preserve HTML link order and each reusable entry's cache identity. Originals
+ * remain available to any JS/CSS references; no client loading logic is added. */
+export async function compactStyleAssets(output: string) {
+  const root = resolve(output), replacements = new Map<string, string>()
+  const documents = new Map<string, string>(), users = new Map<string, string[]>()
+  const boundaries = new Set<string>()
+  async function emit(code: string) {
+    const hash = createHash('sha256').update(code).digest('hex').slice(0, 20)
+    const href = `/_astro/site-style-${hash}.css`
+    await writeFile(resolve(root, '.' + href), code)
+    return href
+  }
+  async function walk(directory: string): Promise<void> {
+    for (const entry of await readdir(directory, { withFileTypes: true })) {
+      const file = resolve(directory, entry.name)
+      if (entry.isDirectory()) { await walk(file); continue }
+      if (!entry.name.endsWith('.html')) continue
+      let html = await readFile(file, 'utf8')
+      const links = [...html.matchAll(/<link\b(?=[^>]*\brel="stylesheet")(?=[^>]*\bhref="(\/_astro\/[^"/]+\.css)")[^>]*>/g)]
+      for (const match of links) {
+        const href = match[1]
+        if (!replacements.has(href)) {
+          const input = resolve(root, '.' + href)
+          const source = await readFile(input, 'utf8')
+          const code = await inlineGeneratedStyles(input)
+          const next = source === code ? href : await emit(code)
+          replacements.set(href, next)
+        }
+        const next = replacements.get(href)!
+        if (/\/(site|interface|documents)\./.test(href)) boundaries.add(next)
+        const pages = users.get(next) ?? []
+        if (!pages.includes(file)) pages.push(file)
+        users.set(next, pages)
+        html = html.replace(match[0], match[0].replace(`href="${href}"`, `href="${next}"`))
+      }
+      documents.set(file, html)
+    }
+  }
+  await walk(root)
+  // Co-delivered feature assets share a cache boundary. Merge only adjacent,
+  // plain links with identical route usage; never reorder a rule or pull a
+  // feature onto a route that did not already load it.
+  const signatures = new Map([...users].map(([href, pages]) => [href, pages.sort().join('\n')]))
+  const adjacent = new Map<string, Set<string>>()
+  for (const [file, html] of documents) {
+    for (const match of html.matchAll(/(?=<link rel="stylesheet" href="([^"\s]+)">\s*<link rel="stylesheet" href="([^"\s]+)">)/g)) {
+      const key = `${match[1]}\n${match[2]}`
+      const pages = adjacent.get(key) ?? new Set<string>()
+      pages.add(file); adjacent.set(key, pages)
+    }
+  }
+  for (const [file, source] of documents) {
+    let html = source
+    const runs = [...source.matchAll(/(?:<link rel="stylesheet" href="\/_astro\/[^"/]+\.css">\s*){2,}/g)]
+    for (const run of runs) {
+      const links = [...run[0].matchAll(/<link rel="stylesheet" href="([^"\s]+)">\s*/g)]
+      let replacement = '', group: typeof links = []
+      async function flush() {
+        if (group.length > 1) {
+          const code = (await Promise.all(group.map(link => readFile(resolve(root, '.' + link[1]), 'utf8')))).join('\n')
+          // An unresolved import must stay at the start of its own stylesheet.
+          replacement += code.includes('@import') ? group.map(link => link[0]).join('') : `<link rel="stylesheet" href="${await emit(code)}">`
+        } else replacement += group.map(link => link[0]).join('')
+        group = []
+      }
+      for (const link of links) {
+        if (boundaries.has(link[1])) { await flush(); replacement += link[0]; continue }
+        if (group.length && (signatures.get(group[0][1]) !== signatures.get(link[1])
+          || adjacent.get(`${group.at(-1)![1]}\n${link[1]}`)?.size !== users.get(link[1])?.length)) await flush()
+        group.push(link)
+      }
+      await flush()
+      html = html.replace(run[0], replacement)
+    }
+    await writeFile(file, html)
+  }
+}

package/src/benchmarks/BenchmarkBarRows.astro

@@ -1,5 +1,6 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/chart.css'
+import '@master/internal-site/styles/system/metrics.css'
 import '@master/internal-site/styles/benchmarks.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import { uniqueId } from '@master/internal-site/utils/unique-id'
@@ -27,7 +28,7 @@ const resolvedMax = max ?? Math.max(0, ...items.map((item) => item.max ?? item.v
       {item.detail && <small>{t(item.detail)}</small>}
     </span>
     <div class="ui-bar" role="meter" aria-labelledby={`${labelId} ${valueId}`} aria-valuemin={0} aria-valuemax={itemMax} aria-valuenow={item.value}>
-      <i data-tone={item.color === 'neutral' ? 'muted' : undefined} style={{ width: `${clampPercent(item.value, itemMax)}%` }} />
+      <i data-tone={item.color === 'neutral' ? 'muted' : undefined} style={{ width: `${clampPercent(item.value, itemMax)}%`, background: item.fill }} />
     </div>
     <output id={valueId}>{valueLabel}</output>
   </div>

package/src/benchmarks/BenchmarkBars.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/chart.css'
 import '@master/internal-site/styles/benchmarks.css'
 import BenchmarkBarRows from '@master/internal-site/benchmarks/BenchmarkBarRows.astro'
 import type { BenchmarkBarsProps } from '@master/internal-site/benchmarks/types.ts'

package/src/benchmarks/BenchmarkChart.astro

@@ -1,4 +1,7 @@
 ---
+import { siteOf } from '@master/internal-site/astro/site-context'
+import { localizeBenchmarkChart } from './localization'
+import '@master/internal-site/styles/system/table.css'
 import ExpandContent from '@master/internal-site/components/ExpandContent.svelte'
 import BenchmarkBars from '@master/internal-site/benchmarks/BenchmarkBars.astro'
 import BenchmarkMetricTable from '@master/internal-site/benchmarks/BenchmarkMetricTable.astro'
@@ -10,7 +13,8 @@ interface Props {
 }
 
 /** Renders an authored chart model; `utils/benchmark-content` exports the same model as Markdown. */
-const { chart } = Astro.props
+const { t } = siteOf(Astro)
+const chart = localizeBenchmarkChart(Astro.props.chart, t)
 ---
 
 {chart.kind === 'bars' && <BenchmarkBars items={chart.items} max={chart.max} unit={chart.unit} valueFormatter={chart.valueFormatter} />}

package/src/benchmarks/BenchmarkChartGroup.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/chart.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkBarRows from '@master/internal-site/benchmarks/BenchmarkBarRows.astro'
 import type { BenchmarkBarItem } from '@master/internal-site/benchmarks/types.ts'

package/src/benchmarks/BenchmarkDataTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/disclosure.css'
 import '@master/internal-site/styles/benchmarks.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkScrollRegion from '@master/internal-site/benchmarks/BenchmarkScrollRegion.svelte'

package/src/benchmarks/BenchmarkFigure.astro

@@ -1,5 +1,6 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/tray.css'
+import '@master/internal-site/styles/system/tray-code.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import RenderNode from '@master/internal-site/components/RenderNode.astro'
 

package/src/benchmarks/BenchmarkMetricTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/table.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkStatus from '@master/internal-site/benchmarks/BenchmarkStatus.astro'
 import type { BenchmarkMetric } from '@master/internal-site/benchmarks/types.ts'
@@ -16,7 +16,7 @@ const hasDetails = metrics.some((metric) => metric.detail)
 ---
 
 {/* Preserve keyboard access to wide metric tables. */}
-<div class="ui-table" role="region" aria-label={label} tabindex="0">
+<div class="ui-table" role="region" aria-label={t(label)} tabindex="0">
   <table>
     <thead>
       <tr>

package/src/benchmarks/BenchmarkMetrics.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/metrics.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import BenchmarkStatus from '@master/internal-site/benchmarks/BenchmarkStatus.astro'
 import type { BenchmarkMetric } from '@master/internal-site/benchmarks/types.ts'

package/src/benchmarks/BenchmarkSampleSummary.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/metrics.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import type { BenchmarkSampleSummaryStats } from '@master/internal-site/benchmarks/types.ts'
 import { formatMetricValue } from '@master/internal-site/benchmarks/utils.ts'

package/src/benchmarks/BenchmarkScrollRegion.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import '@master/internal-site/styles/system/data.css'
+  import '@master/internal-site/styles/system/table.css'
+
   import type { Snippet } from 'svelte'
 
   let { title, children }: { title: string; children?: Snippet } = $props()

package/src/benchmarks/BenchmarkSource.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/source.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 
 interface Props {

package/src/benchmarks/BenchmarkStackedBars.astro

@@ -1,5 +1,6 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/chart.css'
+import '@master/internal-site/styles/system/metrics.css'
 import '@master/internal-site/styles/system/specimens.css'
 import '@master/internal-site/styles/benchmarks.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
@@ -34,11 +35,11 @@ const labelPrefix = uniqueId(Astro, 'benchmark-stacked-bars')
         <div class="ui-bar" data-variant="stacked" role="img" aria-labelledby={`${labelId} ${valueId}`}>
           {item.segments.map((segment, segmentIndex) => <i
             data-tone={benchmarkTone(segment.color ?? benchmarkColors[segmentIndex % benchmarkColors.length])}
-            title={`${segment.label}: ${segment.valueLabel ?? formatMetricValue(segment.value, unit)}`}
+            title={`${t(segment.label)}: ${segment.valueLabel ?? formatMetricValue(segment.value, unit)}`}
             style={{ width: `${clampPercent(segment.value, max ?? total)}%` }} />)}
         </div>
         <output id={valueId}>{totalLabel}</output>
-        <ul class="ui-legend" role="group" aria-label={`${item.label} breakdown`}>
+        <ul class="ui-legend" role="group" aria-label={t('{label} breakdown').replace('{label}', t(item.label))}>
           {item.segments.map((segment, segmentIndex) => {
             const valueLabel = segment.valueLabel ?? (valueFormatter ? valueFormatter(segment.value) : formatMetricValue(segment.value, unit))
             return <li>

package/src/benchmarks/BenchmarkStatus.astro

@@ -1,4 +1,6 @@
 ---
+import { siteOf } from '@master/internal-site/astro/site-context'
+const { t } = siteOf(Astro)
 import '@master/internal-site/styles/system/specimens.css'
 import type { BenchmarkTone } from '@master/internal-site/benchmarks/types.ts'
 import { benchmarkStatusTones } from '@master/internal-site/benchmarks/utils.ts'
@@ -13,4 +15,4 @@ const names: Record<Exclude<BenchmarkTone, 'neutral'>, string> = { good: 'Good',
 const { tone } = Astro.props
 ---
 
-{tone && tone !== 'neutral' && <span class="ui-badge" data-tone={benchmarkStatusTones[tone]} data-variant="dot" data-size="sm">{names[tone]}</span>}
+{tone && tone !== 'neutral' && <span class="ui-badge" data-tone={benchmarkStatusTones[tone]} data-variant="dot" data-size="sm">{t(names[tone])}</span>}

package/src/benchmarks/localization.ts

@@ -0,0 +1,22 @@
+/** Reader copy only: numeric values, technical units, fixture rows and formatters stay canonical. */
+const proseFields = new Set(['label', 'labelNote', 'title', 'detail', 'description', 'caption', 'headers'])
+
+function mapCopy<T>(model: T, translate: (text: string) => string): T {
+  const visit = (value: unknown, field: string): unknown => {
+    if (typeof value === 'string') return proseFields.has(field) && value.trim() ? translate(value) : value
+    if (Array.isArray(value)) return value.map(item => visit(item, field))
+    if (value && typeof value === 'object') return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, visit(item, key)]))
+    return value
+  }
+  return visit(model, '') as T
+}
+
+export function benchmarkCopyKeys(model: unknown): string[] {
+  const keys = new Set<string>()
+  mapCopy(model, text => { keys.add(text); return text })
+  return [...keys].sort()
+}
+
+export function localizeBenchmarkChart<T>(model: T, translate: (text: string) => string): T {
+  return mapCopy(model, translate)
+}

package/src/benchmarks/types.ts

@@ -20,6 +20,8 @@ export interface BenchmarkBarItem {
   detail?: string
   icon?: BenchmarkIcon
   color?: BenchmarkColor
+  /** Explicit series identity, such as a brand's CSS color. Overrides the neutral fill. */
+  fill?: string
 }
 
 export interface BenchmarkSegment {

package/src/blog/article/BlogArticleContents.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import '@master/internal-site/styles/docs-shell/page-content.css'
+  import '@master/internal-site/styles/system/toc.css'
   import PageContentList from '@master/internal-site/components/PageContentList.svelte'
   import PageContentProvider from '@master/internal-site/components/PageContentProvider.svelte'
   import type { PageContentItem } from '@master/internal-site/components/page-content.svelte'

package/src/blog/article/BlogArticleEnd.astro

@@ -1,11 +1,10 @@
 ---
-import dayjs from 'dayjs'
+import { formatDate } from '../../docs-shell/common/locales'
 import IconArrowLeft from '@tabler/icons-svelte-runes/icons/arrow-left'
 import IconArrowRight from '@tabler/icons-svelte-runes/icons/arrow-right'
 import Link from '@master/internal-site/components/Link.svelte'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import TitleLines from './title-lines.astro'
-import { sourceLanguageOf } from './language'
 import type { BlogArticleNeighbor } from './neighbors'
 
 interface Props {
@@ -20,14 +19,12 @@ interface Props {
  * article as quiet links.
  */
 const { newer, older, showCategory = true } = Astro.props
-const { t: $, i18n, locale } = siteOf(Astro)
-const tw = locale === 'tw'
-const languageOf = (text?: string) => sourceLanguageOf(text, { ...i18n, locale })
+const { t: $, locale } = siteOf(Astro)
 // Readers who finish a post usually continue backwards through the archive; the newest post leads with the one before it.
 const lead = older ?? newer
 const other = lead === older ? newer : undefined
 // Written out in full, as on the post's own header and on the index's featured sheet.
-const date = (value: string) => dayjs(value).format(tw ? 'YYYY 年 M 月 D 日' : 'MMMM D, YYYY')
+const date = (value: string) => formatDate(value, locale)
 ---
 
 <nav class="blog-article-end blog-rails blog-rails-rule" aria-labelledby="blog-article-end-title">
@@ -38,8 +35,8 @@ const date = (value: string) => dayjs(value).format(tw ? 'YYYY 年 M 月 D 日'
         {showCategory && lead.category && <span>{$(lead.category)}</span>}
         {lead.date && <time datetime={lead.date}>{date(lead.date)}</time>}
       </span>
-      <span class="blog-article-next-title" lang={languageOf(lead.title)}><TitleLines title={$(lead.title)} class="blog-article-next-title-line" /><IconArrowRight class="blog-article-next-arrow" aria-hidden="true" size={22} stroke={1.25} /></span>
-      {lead.description && <span class="blog-article-next-description" lang={languageOf(lead.description)}>{$(lead.description)}</span>}
+      <span class="blog-article-next-title"><TitleLines title={$(lead.title)} class="blog-article-next-title-line" /><IconArrowRight class="blog-article-next-arrow" aria-hidden="true" size={22} stroke={1.25} /></span>
+      {lead.description && <span class="blog-article-next-description">{$(lead.description)}</span>}
     </Link>
   )}
   <div class="blog-article-end-links">
@@ -47,7 +44,7 @@ const date = (value: string) => dayjs(value).format(tw ? 'YYYY 年 M 月 D 日'
     {other && (
       <Link class="blog-article-end-link" href={other.pathname}>
         <span class="blog-article-end-link-label">{$('Newer')}</span>
-        <span class="blog-article-end-link-title" lang={languageOf(other.title)}>{$(other.title)}</span>
+        <span class="blog-article-end-link-title">{$(other.title)}</span>
         <IconArrowRight aria-hidden="true" size={14} stroke={1.75} />
       </Link>
     )}

package/src/blog/article/BlogArticleMasthead.astro

@@ -1,14 +1,14 @@
 ---
-import dayjs from 'dayjs'
+import { formatDate } from '../../docs-shell/common/locales'
 import authors from '@master/internal-site/data/authors'
 import Image from '@master/internal-site/components/Image.svelte'
 import Link from '@master/internal-site/components/Link.svelte'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import TitleLines from './title-lines.astro'
-import { sourceLanguageOf } from './language'
+import type { DefinedMetadata } from '@master/internal-site/types/Metadata'
 
 interface Props {
-  metadata: any
+  metadata: DefinedMetadata
 }
 
 /**
@@ -17,11 +17,9 @@ interface Props {
  * falls on it from above and to the left.
  */
 const { metadata } = Astro.props
-const { t: $, i18n, locale } = siteOf(Astro)
-const tw = locale === 'tw'
+const { t: $, locale } = siteOf(Astro)
 const source: string = metadata.title?.absolute || metadata.title
 const title: string = $(source)
-const languageOf = (text?: string) => sourceLanguageOf(text, { ...i18n, locale })
 const people = (metadata.authors ?? [])
   .map(({ name }: { name: string }) => authors.find((author) => author.name === name))
   .filter(Boolean) as typeof authors
@@ -31,11 +29,11 @@ const people = (metadata.authors ?? [])
   {(metadata.category || metadata.date) && (
     <p class="blog-article-meta">
       {metadata.category && <span>{$(metadata.category)}</span>}
-      {metadata.date && <time datetime={metadata.date}>{dayjs(metadata.date).format(tw ? 'YYYY 年 M 月 D 日' : 'MMMM D, YYYY')}</time>}
+      {metadata.date && <time datetime={metadata.date}>{formatDate(metadata.date, locale)}</time>}
     </p>
   )}
-  <h1 class="blog-article-title blog-stone-text" lang={languageOf(source)}><TitleLines title={title} class="blog-article-title-line" /></h1>
-  {metadata.description && <p class="blog-article-dek" lang={languageOf(metadata.description)}>{$(metadata.description)}</p>}
+  <h1 class="blog-article-title blog-stone-text"><TitleLines title={title} class="blog-article-title-line" /></h1>
+  {metadata.description && <p class="blog-article-dek">{$(metadata.description)}</p>}
   {people.length > 0 && (
     <div class="blog-article-byline">
       <span class="blog-article-byline-label">{$('Written by')}</span>
@@ -58,4 +56,14 @@ const people = (metadata.authors ?? [])
       </ul>
     </div>
   )}
+  {metadata.cover && (
+    <img
+      class="blog-article-cover"
+      src={metadata.cover.src}
+      alt={metadata.cover.alt}
+      width={metadata.cover.width}
+      height={metadata.cover.height}
+      fetchpriority="high"
+    />
+  )}
 </header>

package/src/config.ts

@@ -28,10 +28,13 @@ export interface SiteI18nConfig {
   hreflangOfLocale: Record<string, string>
   nameOfLocale: Record<string, string>
   localizablePathnameRoots: string[]
+  localizableOrigins?: Record<string, readonly string[]>
   translations: Record<string, Record<string, string>>
   sectionLocales?: Record<string, readonly string[]>
   /** These sections emit translated URLs only when translated MDX exists. */
   translatedOnly?: readonly string[]
+  /** Build-only resource loader and version-controlled explicit translation reviews. */
+  validation?: { reviews: URL; resources: URL }
 }
 
 export interface DocumentConfig {

package/src/css/NamespaceUtilityTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/table.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import { uniqueId } from '@master/internal-site/utils/unique-id'
 import InlineCode from '@master/internal-site/components/InlineCode.astro'

package/src/css/ThemeNumberVariableTable.astro

@@ -1,5 +1,5 @@
 ---
-import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/system/table.css'
 import { siteOf } from '@master/internal-site/astro/site-context'
 import { uniqueId } from '@master/internal-site/utils/unique-id'
 import InlineCode from '@master/internal-site/components/InlineCode.astro'

package/src/css/foundation-data/specimen-content.ts

@@ -4,7 +4,7 @@ import { configuredMarkupMarkdown } from '@master/internal-site/css/configured-e
 export function specimenFactsMarkdown(namespace: string, keys?: string[]) {
   return specimenTokens(namespace, keys).map(token => `- \`--${token.name}\`: ${token.values.map(value => `\`${value.value}\` (${value.path.join(' → ')})`).join('; ')}${tokenAdvice(namespace, token.key) ? ` — ${tokenAdvice(namespace, token.key)}` : ''}`).join('\n')
 }
-export function selectedSpecimensMarkdown(namespace: string, keys: string[]) {
+export function selectedSpecimensMarkdown(namespace: string, keys: string[], t: (text: string) => string = text => text) {
   const scene = foundationScene(namespace, keys)
-  return `${scene.caption}\n\n${specimenFactsMarkdown(namespace, keys)}${scene.html && namespace !== 'color' ? `\n\n${configuredMarkupMarkdown(scene.css ?? '', scene.html)}` : ''}`
+  return `${t(scene.caption ?? '')}\n\n${specimenFactsMarkdown(namespace, keys)}${scene.html && namespace !== 'color' ? `\n\n${configuredMarkupMarkdown(scene.css ?? '', scene.html)}` : ''}`
 }