Merge pull request #1 from tequdev/astro-style-i18n

Refactor i18n to use Astro's built-in `Astro.currentLocale` and `getRelativeLocaleUrl()` instead of manual URL parsing
2026-08-19 01:01:42 +00:00 · 2026-04-09 07:04:45 +02:00
parent 0f2476d688 2c614e3325
commit 9ad330553c
6 changed files with 50 additions and 41 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -16,6 +16,7 @@ export default defineConfig({
    starlight({
      title: 'Xahau Docs',
      description: 'Documentation for the Xahau blockchain',
+      defaultLocale: 'root',
      locales: {
        root: { label: 'English', lang: 'en' },
        es: { label: 'Español', lang: 'es' },
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,11 +1,9 @@
 ---
  import { Image } from 'astro:assets'
+  import { getRelativeLocaleUrl } from 'astro:i18n'
  import logo from '../assets/xahau-logo.svg'

-  const LOCALES = ['es', 'ja']
-  const firstSegment = Astro.url.pathname.split('/')[1]
-  const locale = LOCALES.includes(firstSegment) ? firstSegment : 'en'
-  const p = locale !== 'en' ? `/${locale}` : ''
+  const locale = Astro.currentLocale ?? 'en'

  const translations = {
    en: {
@@ -78,7 +76,7 @@
    class="flex-none container mx-auto py-12 max-w-7xl p-6 grid grid-cols-1 md:grid-cols-10 gap-4"
  >
    <div class="col-span-1 md:col-span-3 flex flex-col gap-3">
-      <a href={p || '/'}>
+      <a href={getRelativeLocaleUrl(locale, '/')}>
        <Image src={logo} class="w-1/2" alt="Xahau"/>
      </a>
      <p>
@@ -92,37 +90,53 @@
      <p>
        <strong>Xahau</strong>
      </p>
-      <a href={`${p}/about`}>{t.about}</a>
-      <a href={`${p}/features`}>{t.features}</a>
-      <a href={`${p}/ecosystem`}>{t.ecosystem}</a>
-      <a href={`${p}/roadmap`}>{t.roadmap}</a>
-      <a href={`${p}/docs/compliance/responsible-disclosure`}>{t.break}</a>
+      <a href={getRelativeLocaleUrl(locale, '/about')}>{t.about}</a>
+      <a href={getRelativeLocaleUrl(locale, '/features')}>{t.features}</a>
+      <a href={getRelativeLocaleUrl(locale, '/ecosystem')}>{t.ecosystem}</a>
+      <a href={getRelativeLocaleUrl(locale, '/roadmap')}>{t.roadmap}</a>
+      <a
+        href={getRelativeLocaleUrl(locale, '/docs/compliance/responsible-disclosure')}
+      >
+        {t.break}
+      </a>
      <a href="/fraud-report">{t.fraud}</a>
-      <a href={`${p}/docs/resources/media-kit`}>{t.media}</a>
+      <a href={getRelativeLocaleUrl(locale, '/docs/resources/media-kit')}>
+        {t.media}
+      </a>
      <a href="/privacy-policy">{t.privacy}</a>
    </div>
    <div class="col-span-1 md:col-span-2 flex flex-col gap-3">
      <p>
        <strong>{t.docs}</strong>
      </p>
-      <a href={`${p}/docs`}>{t.getstarted}</a>
-      <a href={`${p}/docs/protocol-reference/transactions`}>{t.protocol}</a>
-      <a href={`${p}/docs/hooks`}>Hooks</a>
-      <a href={`${p}/docs/data-apis`}>Data APIs</a>
-      <a href={`${p}/docs/infrastructure/system-requirements`}>{t.infra}</a>
-      <a href={`${p}/docs/resources/whitepaper`}>Whitepaper</a>
+      <a href={getRelativeLocaleUrl(locale, '/docs')}>{t.getstarted}</a>
+      <a
+        href={getRelativeLocaleUrl(locale, '/docs/protocol-reference/transactions')}
+      >
+        {t.protocol}
+      </a>
+      <a href={getRelativeLocaleUrl(locale, '/docs/hooks')}>Hooks</a>
+      <a href={getRelativeLocaleUrl(locale, '/docs/data-apis')}>Data APIs</a>
+      <a
+        href={getRelativeLocaleUrl(locale, '/docs/infrastructure/system-requirements')}
+      >
+        {t.infra}
+      </a>
+      <a href={getRelativeLocaleUrl(locale, '/docs/resources/whitepaper')}>
+        Whitepaper
+      </a>
    </div>
    <div class="col-span-1 md:col-span-2 flex flex-col gap-3">
      <p>
        <strong>{t.connect}</strong>
      </p>
-      <a href={`${p}/connect`}>{t.events}</a>
-      <a href={`${p}/contest`}>Dev Contest</a>
+      <a href={getRelativeLocaleUrl(locale, '/connect')}>{t.events}</a>
+      <a href={getRelativeLocaleUrl(locale, '/contest')}>Dev Contest</a>
      <a href="https://x.com/XahauNetwork" target="_blank">X</a>
      <a href="https://github.com/Xahau" target="_blank">GitHub</a>
-      <a href="https://discord.com/invite/UzU58haAn4" target="_blank"
-        >{t.discord}</a
-      >
+      <a href="https://discord.com/invite/UzU58haAn4" target="_blank">
+        {t.discord}
+      </a>
    </div>
  </div>
 </footer>
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -21,7 +21,6 @@ import { useState } from 'react'

 import logo from '../assets/xahau-logo.svg'

-const LOCALES = ['es', 'ja']

 const languages = [
  { code: 'en', label: 'English', flag: '🇬🇧' },
@@ -85,8 +84,7 @@ export default function Header(props) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  const pathname = props.url.pathname
-  const firstSegment = pathname.split('/')[1]
-  const currentLocale = LOCALES.includes(firstSegment) ? firstSegment : 'en'
+  const currentLocale = props.locale || 'en'
  const p = currentLocale !== 'en' ? `/${currentLocale}` : ''
  const t = nav[currentLocale]

@@ -132,7 +130,7 @@ export default function Header(props) {
  ]

  const pathSegments = pathname.slice(1).split('/')
-  const activeSegment = LOCALES.includes(pathSegments[0])
+  const activeSegment = currentLocale !== 'en'
    ? pathSegments[1]
    : pathSegments[0]

--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -3,8 +3,7 @@
  import Footer from '../components/Footer.astro'
  import Header from '../components/Header.jsx'

-  const _firstSeg = Astro.url.pathname.split('/')[1]
-  const _lang = ['es', 'ja'].includes(_firstSeg) ? _firstSeg : 'en'
+  const _lang = Astro.currentLocale ?? 'en'
  const _canonicalURL = new URL(Astro.url.pathname, Astro.site)
  const _socialImageURL = new URL('/xahau-logo.png', Astro.site)
  const _title = Astro.props.frontmatter?.title
@@ -41,7 +40,7 @@
    <meta name="twitter:image" content={_socialImageURL}>
  </head>
  <body class="font-[Onest] bg-xahau-background min-h-screen flex flex-col">
-    <Header client:load url={Astro.url}/>
+    <Header client:load url={Astro.url} locale={_lang}/>
    <slot/>
    <Footer/>
    <CookieConsent/>
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -12,7 +12,7 @@
  rel="stylesheet"
 >
 <div class="font-[Onest] bg-xahau-background min-h-screen flex flex-col">
-  <Header client:load url={Astro.url}/>
+  <Header client:load url={Astro.url} locale={Astro.currentLocale ?? 'en'}/>
  <div class="page-content flex-1 container mx-auto p-6">
    <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
      <div>
--- a/src/layouts/IndexLayout.astro
+++ b/src/layouts/IndexLayout.astro
@@ -1,5 +1,6 @@
 ---
  import '../styles/main.css'
+  import { getRelativeLocaleUrl } from 'astro:i18n'
  import worldmap from '../assets/worldmap.svg'
  import type { IndexLocale } from '../i18n/indexTranslations'
  import { indexTranslations } from '../i18n/indexTranslations'
@@ -7,12 +8,7 @@

  const _frontmatter = Astro.props.frontmatter

-  const LOCALES = ['es', 'ja']
-  const firstSegment = Astro.url.pathname.split('/')[1]
-  const locale = (
-    LOCALES.includes(firstSegment) ? firstSegment : 'en'
-  ) as IndexLocale
-  const p = locale !== 'en' ? `/${locale}` : ''
+  const locale = (Astro.currentLocale ?? 'en') as IndexLocale
  const i = indexTranslations[locale]
 ---
 <BaseLayout frontmatter={_frontmatter}>
@@ -42,13 +38,13 @@
        </p>
        <div class="flex gap-4">
          <a
-            href={`${p}/about`}
+            href={getRelativeLocaleUrl(locale, '/about')}
            class="px-10 h-12 flex items-center justify-center bg-xahau-green text-black text-base font-bold hover:bg-black hover:text-white transition"
          >
            {i.hero_learn}
          </a>
          <a
-            href={`${p}/docs`}
+            href={getRelativeLocaleUrl(locale, '/docs')}
            class="px-10 h-12 flex items-center justify-center bg-gray-300 text-black text-base font-bold hover:bg-black hover:text-white transition"
          >
            {i.hero_docs}
@@ -97,10 +93,11 @@
          <p class="text-base font-light text-black">{i.feat5_desc}</p>
        </div>
        <a
-          href={`${p}/features`}
+          href={getRelativeLocaleUrl(locale, '/features')}
          class="self-end px-10 h-12 flex items-center justify-center bg-xahau-green text-black text-base font-bold hover:bg-black hover:text-white transition"
-          >{i.feat_more}</a
        >
+          {i.feat_more}
+        </a>
      </div>
    </div>
  </div>
@@ -144,7 +141,7 @@
          <h4 class="text-4xl md:text-6xl font-extrabold">16M+</h4>
        </div>
        <a
-          href={`${p}/docs/infrastructure/system-requirements/`}
+          href={getRelativeLocaleUrl(locale, '/docs/infrastructure/system-requirements/')}
          class="col-span-6 row-start-auto md:row-start-2 px-10 h-12 flex items-center justify-center bg-xahau-green text-black text-base font-bold hover:bg-black hover:text-white transition"
          >{i.stats_node_cta}</a
        >