feat: implement internationalization support and enhance site components

- Added i18n configuration to support multiple locales (en, es, pt, it, fr, de, nl) in astro.config.mjs.
- Created i18n.ts to manage locale data, including labels and codes.
- Updated BaseHead.astro to generate alternate URLs for different locales and improve Open Graph metadata.
- Refactored ActionLink.astro, CapabilityIndex.astro, DownloadPanel.astro, and other components to utilize localized content and improve accessibility.
- Enhanced SiteNav.astro and SiteFooter.astro to reflect localized navigation and footer links.
- Improved community.astro to dynamically display community information based on the selected locale.

Author: ManuelGil

astro.config.mjs

@@ -6,6 +6,13 @@ import tailwindcss from '@tailwindcss/vite';
 export default defineConfig({
   site: 'https://amonite.org',
   output: 'static',
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'es', 'pt', 'it', 'fr', 'de', 'nl'],
+    routing: {
+      prefixDefaultLocale: false,
+    },
+  },
   integrations: [sitemap()],
   vite: {
     plugins: [tailwindcss()],

docs/VISUAL.md

@@ -15,20 +15,24 @@ Stylised ammonite. Official assets only (`src/assets/logo.png`, `public/` favico
 
 ## Colour
 
-Neutrals carry the UI. Amber is a sparse accent.
-
-| Token           | Value     | Role                        |
-| --------------- | --------- | --------------------------- |
-| amber / primary | `#C08A2B` | Accent, links               |
-| stone           | `#8B8B4A` | Rare earth accent           |
-| sand            | `#DBC3A5` | Soft panels                 |
-| mist            | `#ECEBE1` | Default background          |
-| slate           | `#4A4F57` | Muted text, borders         |
-| graphite        | `#34373D` | Primary text; dark surfaces |
-| deep-green      | `#3D5A40` | Occasional natural accent   |
+Neutrals carry the UI. Amber is a sparse accent. Components use semantic
+tokens so the same hierarchy remains legible in light and dark appearances.
+
+| Token             | Light value | Dark value | Role                         |
+| ----------------- | ----------- | ---------- | ---------------------------- |
+| surface           | `#ECEBE1`   | `#1B1E1F`  | Page background              |
+| surface-soft      | `#E8E3D7`   | `#25292A`  | Quiet panels and footer      |
+| surface-inverse   | `#34373D`   | `#2B2F30`  | Hero and emphasis surfaces   |
+| text              | `#34373D`   | `#ECE9DF`  | Primary text                 |
+| text-muted        | `#4A4F57`   | `#B8BCB8`  | Supporting text              |
+| accent            | `#805C17`   | `#E6B85A`  | Accent text and markers      |
+| accent-surface    | `#805C17`   | `#805C17`  | Primary accent controls      |
 
 No saturated blues, purples, neon, or glow chrome.
 
+The appearance selector offers System, Light, and Dark. System follows the
+operating system preference and is the default.
+
 ## Typography
 
 | Role               | Family                                                                                              |
@@ -58,4 +62,6 @@ Cyberpunk / RGB spectacle · SaaS landing theatre · fear-based security cliché
 
 ## Accessibility
 
-Readable graphite on mist. Visible focus rings. Honour `prefers-reduced-motion`.
+Semantic contrast pairs are selected for readability in both appearances.
+Focus rings remain visible on light and dark surfaces. Honour
+`prefers-reduced-motion`.

src/components/BaseHead.astro

@@ -1,29 +1,38 @@
 ---
 import { getImage } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
+import { getAbsoluteLocaleUrl } from 'astro:i18n';
 import FallbackImage from '../assets/screenshots/first-boot.png';
 import { SITE_AUTHOR, SITE_TITLE } from '../consts';
+import { LOCALE_CODES, LOCALES, getLocale, MEDIA_COPY, type Locale } from '../i18n';
 
 interface Props {
   title: string;
   description: string;
   image?: ImageMetadata | string;
   /** Describes the share image for screen readers and AI extraction. */
   imageAlt?: string;
+  locale?: Locale;
 }
 
 /** Matches FallbackImage. Pages that pass their own image should pass their own alt. */
-const FALLBACK_IMAGE_ALT =
-  'Amonite live session at first boot, with the Welcome handbook and the installer open on an otherwise empty desktop';
-
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-
 const {
   title,
   description,
   image = FallbackImage,
-  imageAlt = FALLBACK_IMAGE_ALT,
+  imageAlt: imageAltProp,
+  locale: localeProp,
 } = Astro.props;
+const locale = getLocale(localeProp ?? Astro.currentLocale);
+const imageAlt = imageAltProp ?? MEDIA_COPY[locale].fallbackImageAlt;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const routeSegments = Astro.url.pathname.split('/').filter(Boolean);
+if (routeSegments[0] === locale) routeSegments.shift();
+const localizedPath = routeSegments.join('/');
+const alternateUrls = LOCALES.map((alternateLocale) => ({
+  locale: alternateLocale,
+  href: getAbsoluteLocaleUrl(alternateLocale, localizedPath),
+}));
 
 const ogImage =
   typeof image === 'string'
@@ -44,8 +53,12 @@ const imageURL = new URL(ogImage.src, Astro.site);
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 <meta name="generator" content={Astro.generator} />
 <meta name="author" content={SITE_AUTHOR} />
-<meta name="color-scheme" content="light" />
+<meta name="color-scheme" content="light dark" />
 <link rel="canonical" href={canonicalURL} />
+{alternateUrls.map((alternate) => (
+  <link rel="alternate" hreflang={alternate.locale} href={alternate.href} />
+))}
+<link rel="alternate" hreflang="x-default" href={alternateUrls[0].href} />
 <meta
   name="robots"
   content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
@@ -67,7 +80,14 @@ const imageURL = new URL(ogImage.src, Astro.site);
 {ogImage.width && <meta property="og:image:width" content={String(ogImage.width)} />}
 {ogImage.height && <meta property="og:image:height" content={String(ogImage.height)} />}
 <meta property="og:site_name" content={SITE_TITLE} />
-<meta property="og:locale" content="en_US" />
+<meta property="og:locale" content={LOCALE_CODES[locale].replace('-', '_')} />
+{
+  alternateUrls
+    .filter((alternate) => alternate.locale !== locale)
+    .map((alternate) => (
+      <meta property="og:locale:alternate" content={LOCALE_CODES[alternate.locale].replace('-', '_')} />
+    ))
+}
 
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:title" content={title} />

src/components/site/ActionLink.astro

@@ -1,4 +1,6 @@
 ---
+import { getLocale, SHARED_COPY } from '../../i18n';
+
 export interface Props {
   href: string;
   variant?: 'primary' | 'secondary' | 'accent' | 'ghost';
@@ -12,18 +14,20 @@ const {
   class: className = '',
   external = false,
 } = Astro.props;
+const copy = SHARED_COPY[getLocale(Astro.currentLocale)];
 
 const variants = {
-  primary: 'bg-graphite text-mist hover:bg-graphite/90',
-  secondary: 'border border-border bg-mist text-graphite hover:border-slate/40',
-  accent: 'bg-amber text-graphite hover:bg-sand',
-  ghost: 'text-graphite underline decoration-border underline-offset-[5px] hover:decoration-slate',
+  primary: 'bg-surface-inverse text-text-inverse hover:bg-surface-inverse/90',
+  secondary: 'border border-border bg-surface text-text hover:border-text-muted/40',
+  accent:
+    'bg-accent-surface text-accent-foreground hover:bg-accent-hover-surface hover:text-text',
+  ghost: 'text-text underline decoration-border underline-offset-[5px] hover:decoration-text-muted',
 };
 
 const base =
   variant === 'ghost'
-    ? 'inline font-medium'
-    : 'inline-flex items-center justify-center rounded-default px-5 py-2.5 text-sm font-medium transition-colors';
+    ? 'inline-flex min-h-11 items-center font-medium transition-colors'
+    : 'inline-flex min-h-11 items-center justify-center rounded-default px-5 py-2.5 text-sm font-medium transition-colors';
 ---
 
 <a
@@ -32,4 +36,5 @@ const base =
   {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
 >
   <slot />
+  {external && <span class="sr-only"> {copy.opensNewTab}</span>}
 </a>

src/components/site/CapabilityIndex.astro

@@ -4,32 +4,36 @@
  * `via` lines expose how each capability is realized; they stay
  * subordinate to the outcome, never above it.
  */
-import { DISTRIBUTION } from '../../consts';
+import { getCopy, getLocale, SHARED_COPY, type Locale } from '../../i18n';
 
 export interface Props {
   showVia?: boolean;
   class?: string;
+  locale?: Locale;
 }
 
-const { showVia = false, class: className = '' } = Astro.props;
+const { showVia = false, class: className = '', locale: localeProp } = Astro.props;
+const locale = getLocale(localeProp ?? Astro.currentLocale);
+const copy = getCopy(locale);
+const shared = SHARED_COPY[locale];
 ---
 
 <ol class:list={['border-t border-border', className]}>
   {
-    DISTRIBUTION.capabilities.map((item, i) => (
+    copy.product.capabilities.map((item, i) => (
       <li class="grid gap-x-8 gap-y-2 border-b border-border py-5 sm:grid-cols-[3.5rem_15rem_1fr] sm:py-6 lg:grid-cols-[4rem_16rem_1fr]">
-        <span class="font-mono text-sm text-slate/60" aria-hidden="true">
+        <span class="font-mono text-sm text-text-muted/60" aria-hidden="true">
           {String(i + 1).padStart(2, '0')}
         </span>
-        <h3 class="text-base font-semibold tracking-tight text-graphite">
+        <h3 class="text-base font-semibold tracking-tight text-text">
           {item.title}
         </h3>
-        <div class="text-sm leading-relaxed text-slate sm:col-start-3">
+        <div class="text-sm leading-relaxed text-text-muted sm:col-start-3">
           <p>{item.body}</p>
           {showVia && (
-            <p class="mt-3 border-l-2 border-sand pl-3 text-[0.8125rem] leading-relaxed text-slate/90">
-              <span class="font-mono text-xs uppercase tracking-[0.08em] text-amber">
-                via{' '}
+            <p class="mt-3 border-l-2 border-accent-soft pl-3 text-[0.8125rem] leading-relaxed text-text-muted/90">
+              <span class="font-mono text-xs uppercase tracking-[0.08em] text-accent">
+                {shared.via}{' '}
               </span>
               {item.via}
             </p>

src/components/site/DownloadPanel.astro

@@ -4,48 +4,68 @@
  */
 import ActionLink from './ActionLink.astro';
 import { DISTRIBUTION, PUBLIC_EDITIONS } from '../../consts';
+import {
+  formatCopy,
+  getCopy,
+  getLocale,
+  getReleaseCopy,
+  localizedPath,
+  SHARED_COPY,
+  type Locale,
+} from '../../i18n';
 
+export interface Props {
+  locale?: Locale;
+}
+
+const { locale: localeProp } = Astro.props;
+const locale = getLocale(localeProp ?? Astro.currentLocale);
+const copy = getCopy(locale);
+const shared = SHARED_COPY[locale];
+const releaseCopy = getReleaseCopy(locale, DISTRIBUTION.editionId, DISTRIBUTION.release);
 const availableEditions = PUBLIC_EDITIONS.filter(
   (edition) => edition.status === 'available',
 );
 const availableLabel =
   availableEditions.length > 0
-    ? `${availableEditions.map((edition) => edition.name).join(' and ')} available`
-    : 'Editions';
+    ? formatCopy(copy.home.available, {
+        editions: availableEditions.map((edition) => edition.name).join(' · '),
+      })
+    : copy.home.editionsEyebrow;
 ---
 
-<aside class="border border-border bg-graphite text-mist">
+<aside class="border border-border bg-surface-inverse text-text-inverse">
   <div class="grid gap-8 p-8 sm:p-10 lg:grid-cols-[1.25fr_1fr] lg:items-end lg:gap-12">
     <div>
-      <p class="label-mono font-medium text-sand">
-        {DISTRIBUTION.editionName} · {DISTRIBUTION.releaseLabel}
+      <p class="label-mono font-medium text-accent-soft">
+        {DISTRIBUTION.editionName} · {releaseCopy.label}
       </p>
       <h2 class="mt-4 text-2xl font-semibold tracking-tight sm:text-3xl">
-        Get the operating system
+        {copy.nav.downloads}
       </h2>
-      <p class="mt-3 max-w-xl text-sm leading-relaxed text-mist/75 sm:text-[0.95rem] sm:leading-relaxed">
-        {`${availableLabel}. Download and verify current releases.`}
+      <p class="mt-3 max-w-xl text-sm leading-relaxed text-text-inverse/75 sm:text-[0.95rem] sm:leading-relaxed">
+        {`${availableLabel}. ${copy.home.downloadVerify}.`}
       </p>
-      <p class="mt-5 font-mono text-xs text-mist/50">
-        {DISTRIBUTION.isoFileName} · SHA256 · GPG signed
+      <p class="mt-5 font-mono text-xs text-text-inverse/75">
+        {DISTRIBUTION.isoFileName} · SHA256 · {shared.signed}
       </p>
     </div>
 
     <div class="flex flex-col gap-3 sm:items-stretch lg:items-end">
       <ActionLink
-        href="/downloads"
+        href={localizedPath(locale, 'downloads')}
         variant="accent"
         class="w-full justify-center sm:w-auto"
       >
-        Downloads & verification
+        {copy.common.downloads} & {copy.common.verificationGuide}
       </ActionLink>
       <ActionLink
         href={DISTRIBUTION.artifacts.releaseNotes.href}
         variant="ghost"
         external
-        class="text-center text-mist/80 decoration-mist/30 hover:text-mist hover:decoration-mist/60 sm:text-right"
+        class="text-center text-text-inverse/90 decoration-text-inverse/60 hover:text-text-inverse hover:decoration-text-inverse sm:text-right"
       >
-        {`Open ${DISTRIBUTION.editionName} release`}
+        {`${copy.common.openRelease} · ${DISTRIBUTION.editionName}`}
       </ActionLink>
     </div>
   </div>

src/components/site/EditionOverview.astro

@@ -5,39 +5,53 @@
  * Renders every public edition from data — does not assume how many exist.
  */
 import { PUBLIC_EDITIONS } from '../../consts';
+import { getCopy, getEditionCopy, getLocale, type Locale } from '../../i18n';
 
 export interface Props {
   class?: string;
+  locale?: Locale;
 }
 
-const { class: className = '' } = Astro.props;
+const { class: className = '', locale: localeProp } = Astro.props;
+const locale = getLocale(localeProp ?? Astro.currentLocale);
+const copy = getCopy(locale);
 ---
 
 <ol class:list={['border-t border-border', className]}>
   {
-    PUBLIC_EDITIONS.map((edition, i) => (
-      <li class="grid gap-x-8 gap-y-3 border-b border-border py-6 sm:grid-cols-[3.5rem_10rem_1fr] sm:py-7 lg:grid-cols-[4rem_12rem_1fr]">
-        <span class="font-mono text-sm text-slate/60" aria-hidden="true">
+    PUBLIC_EDITIONS.map((edition, i) => {
+      const editionCopy = getEditionCopy(locale, edition.id);
+      const statusLabel =
+        edition.status === 'available'
+          ? copy.common.available
+          : edition.status === 'experimental'
+            ? copy.common.experimental
+            : edition.statusLabel;
+
+      return (
+        <li class="grid gap-x-8 gap-y-3 border-b border-border py-6 sm:grid-cols-[3.5rem_10rem_1fr] sm:py-7 lg:grid-cols-[4rem_12rem_1fr]">
+        <span class="font-mono text-sm text-text-muted/60" aria-hidden="true">
           {String(i + 1).padStart(2, '0')}
         </span>
         <div>
-          <h3 class="text-base font-semibold tracking-tight text-graphite">
+          <h3 class="text-base font-semibold tracking-tight text-text">
             {edition.name}
           </h3>
-          <p class="label-mono mt-1 text-amber">{edition.statusLabel}</p>
+          <p class="label-mono mt-1 text-accent">{statusLabel}</p>
         </div>
-        <div class="space-y-3 text-sm leading-relaxed text-slate sm:col-start-3">
-          {edition.audience && <p>{edition.audience}</p>}
-          {edition.difference && <p>{edition.difference}</p>}
+        <div class="space-y-3 text-sm leading-relaxed text-text-muted sm:col-start-3">
+          {editionCopy?.audience && <p>{editionCopy.audience}</p>}
+          {editionCopy?.difference && <p>{editionCopy.difference}</p>}
           {edition.role && <p>{edition.role}</p>}
-          <p>{edition.statusDetail}</p>
+          <p>{editionCopy?.statusDetail ?? edition.statusDetail}</p>
           {edition.currentRelease && (
-            <p class="font-mono text-xs text-slate/80">
-              Current release · {edition.currentRelease.version}
+            <p class="font-mono text-xs text-text-muted">
+              {copy.common.currentRelease} · {edition.currentRelease.version}
             </p>
           )}
         </div>
       </li>
-    ))
+      );
+    })
   }
 </ol>

src/components/site/PageHeader.astro

@@ -8,19 +8,19 @@ export interface Props {
 const { title, lead, eyebrow } = Astro.props;
 ---
 
-<header class="border-b border-border bg-sand/15">
+<header class="border-b border-border bg-surface-soft">
   <div class="mx-auto max-w-6xl px-6 py-16 sm:py-20">
     {
       eyebrow && (
-        <p class="label-mono font-medium text-amber">{eyebrow}</p>
+        <p class="label-mono font-medium text-accent">{eyebrow}</p>
       )
     }
-    <h1 class="display-serif mt-3 max-w-3xl text-3xl leading-tight text-graphite sm:text-4xl md:text-[2.75rem]">
+    <h1 class="display-serif mt-3 max-w-3xl text-3xl leading-tight text-text sm:text-4xl md:text-[2.75rem]">
       {title}
     </h1>
     {
       lead && (
-        <p class="mt-5 max-w-2xl text-lg leading-relaxed text-slate">{lead}</p>
+        <p class="mt-5 max-w-2xl text-lg leading-relaxed text-text-muted">{lead}</p>
       )
     }
   </div>