i18n 対応の実験 (#91)

astro/.eslintrc.cjs

@@ -52,6 +52,7 @@ module.exports = {
         "tailwind.config.mjs",
         "jest.config.cjs",
         "astro.config.mjs",
+        "astro-i18next.config.ts",
     ],
     overrides: [
         {

astro/.gitignore

@@ -21,3 +21,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+# i18n
+astro_tmp_pages_*

astro/astro.config.mjs

@@ -1,23 +1,43 @@
-import { defineConfig } from 'astro/config';
-import react from "@astrojs/react";
-import tailwind from "@astrojs/tailwind";
-import cloudflare from "@astrojs/cloudflare";
-import partytown from '@astrojs/partytown';
+import { defineConfig } from "astro/config"
+import react from "@astrojs/react"
+import tailwind from "@astrojs/tailwind"
+import cloudflare from "@astrojs/cloudflare"
+import partytown from "@astrojs/partytown"
+import { i18n } from "astro-i18n-aut/integration"
+
+const defaultLocale = "ja"
+const locales = {
+    ja: "ja", // the `defaultLocale` value must present in `locales` keys
+    en: "en",
+}
 
 // https://astro.build/config
 /** @type {import('tailwindcss').Config} */
 export default defineConfig({
-  base: "/",
-  site: "https://skyshare.uk/",
-  server: {
-    port: 4321,
-    host: true
-  },
-  integrations: [
-    react(), 
-    tailwind(),
-    partytown()
-  ],
-  output: "hybrid",
-  adapter: cloudflare(),
-});
+    base: "/",
+    site: "https://skyshare.uk/",
+    server: {
+        port: 4321,
+        host: true,
+    },
+    integrations: [
+        react(),
+        tailwind(),
+        partytown(),
+        i18n({
+            locales,
+            defaultLocale,
+        }),
+    ],
+    output: "hybrid",
+    adapter: cloudflare(),
+    trailingSlash: "always",
+    build: {
+        format: "directory",
+    },
+    routing: {
+        prefixDefaultLocale: true,
+    },
+})
+
+import { defineConfig } from "astro/config"

astro/package.json

@@ -25,6 +25,7 @@
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "astro": "^4.1.2",
+    "astro-i18n-aut": "^0.7.0",
     "browser-image-compression": "^2.0.2",
     "cheerio": "^1.0.0-rc.12",
     "js-base64": "^3.7.6",

astro/src/pages/index.astro

@@ -9,6 +9,11 @@ import Xicon from "@/components/Xicon.astro"
 import Bskyicon from "@/components/Bskyicon.astro"
 
 const robots = ["index", "follow", "noarchive", "noimageindex"]
+
+import { getLocale } from "astro-i18n-aut"
+
+const locale = getLocale(Astro.url)
+
 ---
 
 <Pagelayout
@@ -46,7 +51,9 @@ const robots = ["index", "follow", "noarchive", "noimageindex"]
                     bg-opacity-80 border-0 py-4 px-10
                     focus:outline-none hover:bg-sky-200
                     inline-flex rounded-full transition-colors shadow-md"
-            >Blueskyへログイン
+            >Blueskyにサインイン
+            {locale === "ja" ? "（日本語やで）" :
+                locale === "en" ? "（英語やで）" : "（言語不明やで）"}
         </a>
         <div class="text-center mx-auto md:max-w-3xl my-5">
             <div