feat: multi-language site

site/astro.config.mjs

@@ -7,15 +7,48 @@ import sitemap from '@astrojs/sitemap';
 import mdx from '@astrojs/mdx';
 
 import cloudflare from '@astrojs/cloudflare';
+import remarkLocalizeDocLinks from './src/lib/remark-localize-doc-links.mjs';
 
 export default defineConfig({
   site: 'https://shutterbridge.yarosfpv.com',
   compressHTML: true,
-  integrations: [svelte(), icon(), sitemap(), mdx()],
+
+  markdown: {
+    remarkPlugins: [remarkLocalizeDocLinks],
+  },
+  integrations: [
+    svelte(),
+    icon(),
+    sitemap({
+      i18n: {
+        defaultLocale: 'en',
+        locales: { en: 'en', es: 'es', uk: 'uk' },
+      },
+    }),
+    mdx(),
+  ],
+
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'es', 'uk'],
+    routing: {
+      prefixDefaultLocale: true,
+    },
+  },
 
   vite: {
     plugins: [tailwindcss()],
-    optimizeDeps: { include: ['esptool-js'] },
+    // Pre-bundle the deps that would otherwise be discovered mid-session and
+    // trigger a full optimizer reload, which the Cloudflare workerd dev runner
+    // can't survive (crash: ".vite/deps_ssr/handler-*.js does not exist").
+    optimizeDeps: {
+      include: [
+        'esptool-js',
+        '@astrojs/svelte/server.js',
+        'astro-icon/components',
+        'astro/logger/console',
+      ],
+    },
   },
 
   adapter: cloudflare(),

site/package.json

@@ -14,7 +14,7 @@
     "generate-types": "wrangler types"
   },
   "dependencies": {
-    "@astrojs/cloudflare": "^14.3.0",
+    "@astrojs/cloudflare": "^14.3.2",
     "@astrojs/mdx": "^7.0.5",
     "@astrojs/sitemap": "^3.7.4",
     "@astrojs/svelte": "^9.0.1",

site/src/components/BaseHead.astro

@@ -11,10 +11,17 @@ interface Props {
   title: string;
   description: string;
   image?: string;
+  lang?: string;
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const { title, description, image = "/og.webp" } = Astro.props;
+const { title, description, image = "/og.webp", lang = "en" } = Astro.props;
+
+const normalizedPath = Astro.url.pathname.replace(/^\/(en|es|uk)(?=\/|$)/, "");
+const locales = ["en", "es", "uk"];
+const altHref = (code: string) =>
+  new URL(`/${code}${normalizedPath === "" ? "/" : normalizedPath}`, Astro.site)
+    .href;
 
 const siteURL = new URL("/", Astro.site).href;
 const publisher = {
@@ -106,6 +113,13 @@ const jsonLd = {
 
 <link rel="canonical" href={canonicalURL} />
 
+{
+  locales.map((code) => (
+    <link rel="alternate" hreflang={code} href={altHref(code)} />
+  ))
+}
+<link rel="alternate" hreflang="x-default" href={altHref("en")} />
+
 <title>{title}</title>
 <meta name="title" content={title} />
 <meta name="description" content={description} />
@@ -116,7 +130,10 @@ const jsonLd = {
 <meta property="og:description" content={description} />
 <meta property="og:image" content={new URL(image, Astro.url)} />
 <meta property="og:site_name" content={SITE_TITLE} />
-<meta property="og:locale" content="en_US" />
+<meta
+  property="og:locale"
+  content={lang === "es" ? "es_ES" : lang === "uk" ? "uk_UA" : "en_US"}
+/>
 
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:title" content={title} />