Update

Author: CrSjimo

README.md

@@ -43,7 +43,9 @@ English uses the root path; Simplified Chinese uses `/zh-Hans/`. Each locale has
 
 Edit `public/i18n/en.json` and `public/i18n/zh-Hans.json` to update copy. Keep the same keys and section structure in every locale. These resources contain data only; components handle presentation and behavior.
 
-To add a language, create its JSON resource, register it in `src/i18n/index.ts`, and update the locale and sitemap settings in `astro.config.ts`. Add the localized text for every existing key, including accessibility labels and metadata. Language names come from each resource's `languageName` field.
+Visitors to unprefixed URLs are directed to the first supported language in their browser preferences. Chinese language tags resolve to Simplified Chinese, and unsupported languages fall back to English. Explicit `/zh-Hans/` URLs retain their language. A manual selection in the language menu is saved and takes priority over browser preferences on subsequent visits. Language changes preserve query parameters and section anchors. If local storage is unavailable, manual selections use a `lang` query parameter instead.
+
+To add a language, create its JSON resource, register it in `src/i18n/index.ts`, and add its identifier to `src/i18n/routing.mjs`. Astro and sitemap configuration share this locale list. Add the localized text for every existing key, including accessibility labels and metadata. Language names come from each resource's `languageName` field.
 
 ## Announcements
 

astro.config.ts

@@ -9,17 +9,18 @@ import sitemap from '@astrojs/sitemap';
 import tailwindcss from '@tailwindcss/vite';
 import icon from 'astro-icon';
 import astrowind from './vendor/integration';
+import { defaultLocale, locales } from './src/i18n/routing.mjs';
 
 export default defineConfig({
   site: 'https://diffscope.org',
   output: 'static',
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en', 'zh-Hans'],
+    defaultLocale,
+    locales: [...locales],
     routing: { prefixDefaultLocale: false },
   },
   integrations: [
-    sitemap({ i18n: { defaultLocale: 'en', locales: { en: 'en', 'zh-Hans': 'zh-Hans' } } }),
+    sitemap({ i18n: { defaultLocale, locales: Object.fromEntries(locales.map((locale) => [locale, locale])) } }),
     icon({ iconDir: 'src/assets/icons', include: { tabler: ['*'] } }),
     astrowind({ config: './src/config.yaml' }),
   ],

public/announcement.json

@@ -1,3 +1,3 @@
 {
-  "enabled": false
+  "enabled": true
 }

public/i18n/en.json

@@ -84,7 +84,7 @@
   },
   "languageName": "English",
   "announcement": {
-    "text": ""
+    "text": "This project is currently under development. Downloads will be available soon."
   },
   "placeholder": {
     "body": "TODO"

public/i18n/zh-Hans.json

@@ -74,7 +74,7 @@
   "footer": {
     "rights": "© Team OpenVPI",
     "licenseBefore": "除非另有声明，网站内容以 ",
-    "licenseAfter": "许可。",
+    "licenseAfter": " 许可。",
     "licenseName": "CC BY-SA 4.0"
   },
   "notFound": {
@@ -84,7 +84,7 @@
   },
   "languageName": "简体中文",
   "announcement": {
-    "text": ""
+    "text": "本项目当前正在开发中。下载将在不久后可用。"
   },
   "placeholder": {
     "body": "TODO"

src/components/widgets/Header.astro

@@ -44,6 +44,7 @@ const links = Object.entries(t.nav).map(([key, label]) => ({
                 href={localizePath(page || '/', language)}
                 lang={language}
                 hreflang={language}
+                data-language={language}
                 aria-current={locale === language ? 'true' : undefined}
               >
                 {localeNames[language]}

src/i18n/index.ts

@@ -5,13 +5,12 @@
 
 import en from '../../public/i18n/en.json';
 import zh from '../../public/i18n/zh-Hans.json';
+import { locales } from './routing.mjs';
+export { locales, localizePath } from './routing.mjs';
 
 export type Dictionary = typeof en;
-export const locales = ['en', 'zh-Hans'] as const;
 export type Locale = (typeof locales)[number];
 export const dictionaries: Record<Locale, Dictionary> = { en, 'zh-Hans': zh };
 export const localeNames: Record<Locale, string> = Object.fromEntries(
   locales.map((locale) => [locale, dictionaries[locale].languageName])
 ) as Record<Locale, string>;
-export const localizePath = (path: string, locale: Locale) =>
-  `${locale === 'en' ? '' : `/${locale}`}${path === '/' ? '/' : `/${path.replace(/^\/+|\/+$/g, '')}/`}`;

src/i18n/routing.mjs

@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: Team OpenVPI
+ * SPDX-License-Identifier: MIT
+ */
+
+/** @type {readonly ['en', 'zh-Hans']} */
+export const locales = ['en', 'zh-Hans'];
+export const defaultLocale = 'en';
+export const pages = ['', 'downloads', 'features', 'contribute', 'community'];
+export const localePreferenceKey = 'diffscope-locale';
+
+/**
+ * @param {string} path
+ * @param {typeof locales[number]} locale
+ */
+export const localizePath = (path, locale) =>
+  `${locale === defaultLocale ? '' : `/${locale}`}${path === '/' ? '/' : `/${path.replace(/^\/+|\/+$/g, '')}/`}`;
+
+/** @param {readonly string[]} languages */
+export function matchBrowserLocale(languages) {
+  for (const language of languages) {
+    const normalized = language.toLowerCase().replaceAll('_', '-');
+    const exact = locales.find((locale) => locale.toLowerCase() === normalized);
+    if (exact) return exact;
+    const base = normalized.split('-')[0];
+    const related = locales.find((locale) => locale.toLowerCase().split('-')[0] === base);
+    if (related) return related;
+  }
+  return defaultLocale;
+}
+
+/**
+ * Only negotiate unprefixed page URLs; explicit locale URLs remain authoritative.
+ * @param {string} pathname
+ * @param {readonly string[]} languages
+ * @param {string | null} preference
+ */
+export function getLanguageRedirect(pathname, languages, preference) {
+  const page = pathname.replace(/^\//, '').replace(/\/$/, '');
+  if (!pages.includes(page)) return null;
+  const locale = locales.find((locale) => locale === preference) ?? matchBrowserLocale(languages);
+  return locale === defaultLocale ? null : localizePath(page || '/', locale);
+}

src/layouts/PageLayout.astro

@@ -50,6 +50,9 @@ const canonical = new URL(localizePath(page || '/', locale), Astro.site);
     <meta property="og:image:height" content="630" />
     <meta name="twitter:card" content="summary_large_image" />
     <CustomStyles />
+    <script>
+      import '~/scripts/language';
+    </script>
     <script is:inline>
       (() => {
         let preference = null;

src/pages/[...path].astro

@@ -6,10 +6,11 @@
 import PageLayout from '~/layouts/PageLayout.astro';
 import Home from '~/components/widgets/Home.astro';
 import { dictionaries, locales, type Locale } from '~/i18n';
+import { pages } from '~/i18n/routing.mjs';
 
 export function getStaticPaths() {
   return locales.flatMap((locale) =>
-    ['', 'downloads', 'features', 'contribute', 'community'].map((page) => ({
+    pages.map((page) => ({
       params: { path: [locale === 'en' ? '' : locale, page].filter(Boolean).join('/') || undefined },
       props: { locale, page },
     }))