feat(stats): add i18n support

packages/stats/app/src/app.tsx

@@ -2,21 +2,17 @@ import { MetaProvider, Meta, Title } from "@solidjs/meta"
 import { Router } from "@solidjs/router"
 import { FileRoutes } from "@solidjs/start/router"
 import { Suspense } from "solid-js"
+import { I18nProvider, useI18n } from "./context/i18n"
+import { LanguageProvider } from "./context/language"
+import { strip } from "./lib/language"
 import "./app.css"
 
-function stripLocaleDataPrefix(pathname: string) {
-  const value = pathname.startsWith("/") ? pathname : `/${pathname}`
-  return value.replace(/^\/[^/]+(?=\/data(?:\/|$))/, "")
-}
-
 function AppMeta() {
+  const i18n = useI18n()
   return (
     <>
-      <Title>AI Model Usage Rankings | OpenCode Data</Title>
-      <Meta
-        name="description"
-        content="Explore OpenCode Go usage across AI models, including token volume, rankings, market share, token pricing, session cost, cache ratio, and geo breakdowns."
-      />
+      <Title>{i18n.t("app.title")}</Title>
+      <Meta name="description" content={i18n.t("app.description")} />
     </>
   )
 }
@@ -26,12 +22,16 @@ export default function App() {
     <Router
       base={import.meta.env.BASE_URL.replace(/\/$/, "")}
       explicitLinks={true}
-      transformUrl={stripLocaleDataPrefix}
+      transformUrl={strip}
       root={(props) => (
-        <MetaProvider>
-          <AppMeta />
-          <Suspense>{props.children}</Suspense>
-        </MetaProvider>
+        <LanguageProvider>
+          <I18nProvider>
+            <MetaProvider>
+              <AppMeta />
+              <Suspense>{props.children}</Suspense>
+            </MetaProvider>
+          </I18nProvider>
+        </LanguageProvider>
       )}
     >
       <FileRoutes />

packages/stats/app/src/component/locale-links.tsx

@@ -0,0 +1,17 @@
+import { For } from "solid-js"
+import { Link } from "@solidjs/meta"
+import { LOCALES, localizedUrl, tag } from "../lib/language"
+import { useLanguage } from "../context/language"
+
+export function LocaleLinks(props: { path: string }) {
+  const language = useLanguage()
+  return (
+    <>
+      <Link rel="canonical" href={localizedUrl(language.locale(), props.path)} />
+      <For each={LOCALES}>
+        {(locale) => <Link rel="alternate" hreflang={tag(locale)} href={localizedUrl(locale, props.path)} />}
+      </For>
+      <Link rel="alternate" hreflang="x-default" href={localizedUrl("en", props.path)} />
+    </>
+  )
+}

packages/stats/app/src/context/i18n.tsx

@@ -0,0 +1,27 @@
+import { createMemo } from "solid-js"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { dict, type Key } from "../i18n"
+import { useLanguage } from "./language"
+
+function resolve(text: string, params?: Record<string, string | number>) {
+  if (!params) return text
+  return text.replace(/\{\{(\w+)\}\}/g, (raw, key) => {
+    const value = params[key]
+    if (value === undefined || value === null) return raw
+    return String(value)
+  })
+}
+
+export const { use: useI18n, provider: I18nProvider } = createSimpleContext({
+  name: "StatsI18n",
+  init: () => {
+    const language = useLanguage()
+    const dictionary = createMemo(() => dict(language.locale()))
+
+    return {
+      t(key: Key, params?: Record<string, string | number>) {
+        return resolve(dictionary()[key], params)
+      },
+    }
+  },
+})

packages/stats/app/src/context/language.tsx

@@ -0,0 +1,61 @@
+import { createEffect } from "solid-js"
+import { getRequestEvent } from "solid-js/web"
+import { createStore } from "solid-js/store"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import {
+  LOCALES,
+  detectFromLanguages,
+  dir,
+  label,
+  localeFromCookieHeader,
+  localeFromRequest,
+  parseLocale,
+  route,
+  tag,
+  type Locale,
+} from "../lib/language"
+
+function initial() {
+  const event = getRequestEvent()
+  if (event) return localeFromRequest(event.request)
+
+  if (typeof document === "object") {
+    const fromDom = parseLocale(document.documentElement.dataset.locale)
+    if (fromDom) return fromDom
+    const fromCookie = localeFromCookieHeader(document.cookie)
+    if (fromCookie) return fromCookie
+  }
+
+  if (typeof navigator !== "object") return "en" satisfies Locale
+  const languages = navigator.languages?.length ? navigator.languages : [navigator.language]
+  return detectFromLanguages(languages)
+}
+
+export const { use: useLanguage, provider: LanguageProvider } = createSimpleContext({
+  name: "StatsLanguage",
+  init: () => {
+    const [store, setStore] = createStore({
+      locale: initial(),
+    })
+
+    createEffect(() => {
+      document.documentElement.lang = tag(store.locale)
+      document.documentElement.dir = dir(store.locale)
+      document.documentElement.dataset.locale = store.locale
+    })
+
+    return {
+      locale: () => store.locale,
+      locales: LOCALES,
+      label,
+      tag,
+      dir,
+      route(pathname: string) {
+        return route(store.locale, pathname)
+      },
+      setLocale(next: Locale) {
+        setStore("locale", next)
+      },
+    }
+  },
+})

packages/stats/app/src/entry-server.tsx

@@ -1,5 +1,7 @@
 // @refresh reload
 import { createHandler, StartServer } from "@solidjs/start/server"
+import { getRequestEvent } from "solid-js/web"
+import { dir, localeFromRequest, tag } from "./lib/language"
 
 const statsThemePreloadScript = `;(function () {
   var preference = "system"
@@ -15,20 +17,25 @@ const statsThemePreloadScript = `;(function () {
 export default createHandler(
   () => (
     <StartServer
-      document={({ assets, children, scripts }) => (
-        <html lang="en">
-          <head>
-            <meta charset="utf-8" />
-            <meta name="viewport" content="width=device-width, initial-scale=1" />
-            <script id="stats-theme-preload-script">{statsThemePreloadScript}</script>
-            {assets}
-          </head>
-          <body>
-            <div id="app">{children}</div>
-            {scripts}
-          </body>
-        </html>
-      )}
+      document={({ assets, children, scripts }) => {
+        const event = getRequestEvent()
+        const locale = event ? localeFromRequest(event.request) : "en"
+
+        return (
+          <html lang={tag(locale)} dir={dir(locale)} data-locale={locale}>
+            <head>
+              <meta charset="utf-8" />
+              <meta name="viewport" content="width=device-width, initial-scale=1" />
+              <script id="stats-theme-preload-script">{statsThemePreloadScript}</script>
+              {assets}
+            </head>
+            <body>
+              <div id="app">{children}</div>
+              {scripts}
+            </body>
+          </html>
+        )
+      }}
     />
   ),
   {