feat: add i18n for the index page

Author: MatteoGabriele

app/components/AppFooter.vue

@@ -85,35 +85,35 @@ onMounted(() => {
   >
     <div class="container py-2 sm:py-6 flex flex-col gap-1 sm:gap-3 text-fg-subtle text-sm">
       <div class="flex flex-row items-center justify-between gap-2 sm:gap-4">
-        <p class="font-mono m-0 hidden sm:block">a better browser for the npm registry</p>
+        <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>
         <!-- On mobile, show disclaimer here instead of tagline -->
-        <p class="text-xs text-fg-muted m-0 sm:hidden">not affiliated with npm, Inc.</p>
+        <p class="text-xs text-fg-muted m-0 sm:hidden">{{ $t('non_affiliation_disclaimer') }}</p>
         <div class="flex items-center gap-4 sm:gap-6">
           <a
             href="https://repo.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w- flex items-center"
           >
-            source
+            {{ $t('footer.source') }}
           </a>
           <a
             href="https://social.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
           >
-            social
+            {{ $t('footer.social') }}
           </a>
           <a
             href="https://chat.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
           >
-            chat
+            {{ $t('footer.chat') }}
           </a>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-left m-0 hidden sm:block">
-        npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.
+        {{ $t('trademark_disclaimer') }}
       </p>
     </div>
   </footer>

app/components/AppHeader.vue

@@ -32,7 +32,7 @@ withDefaults(
             class="link-subtle font-mono text-sm inline-flex items-center gap-2"
             aria-keyshortcuts="/"
           >
-            search
+            {{ $t('nav.search') }}
             <kbd
               class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
               aria-hidden="true"

app/components/SettingsMenu.vue

@@ -46,12 +46,12 @@ onKeyStroke(',', e => {
       class="link-subtle font-mono text-sm inline-flex items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
       :aria-expanded="isOpen"
       aria-haspopup="menu"
-      aria-label="Settings"
+      :aria-label="$t('nav.settings')"
       aria-keyshortcuts=","
       @click="toggle"
     >
       <span class="i-carbon-settings w-4 h-4 sm:hidden" aria-hidden="true" />
-      <span class="hidden sm:inline">settings</span>
+      <span class="hidden sm:inline">{{ $t('nav.settings') }}</span>
       <kbd
         class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
         aria-hidden="true"
@@ -76,7 +76,7 @@ onKeyStroke(',', e => {
         class="absolute right-0 top-full mt-2 w-64 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden"
       >
         <div class="px-3 py-2 border-b border-border">
-          <h2 class="text-xs text-fg-subtle uppercase tracking-wider">Settings</h2>
+          <h2 class="text-xs text-fg-subtle uppercase tracking-wider">{{ $t('nav.settings') }}</h2>
         </div>
 
         <div class="p-2 space-y-1">
@@ -88,7 +88,7 @@ onKeyStroke(',', e => {
             :aria-checked="settings.relativeDates"
             @click="settings.relativeDates = !settings.relativeDates"
           >
-            <span class="text-sm text-fg select-none">Relative dates</span>
+            <span class="text-sm text-fg select-none">{{ $t('settings.relative_dates') }}</span>
             <span
               class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none"
               :class="settings.relativeDates ? 'bg-fg' : 'bg-bg-subtle'"
@@ -111,7 +111,7 @@ onKeyStroke(',', e => {
             :aria-checked="settings.includeTypesInInstall"
             @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
           >
-            <span class="text-sm text-fg select-none">Include @types in install</span>
+            <span class="text-sm text-fg select-none">{{ $t('settings.include_types') }}</span>
             <span
               class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none"
               :class="settings.includeTypesInInstall ? 'bg-fg' : 'bg-bg-subtle'"

app/pages/index.vue

@@ -10,10 +10,10 @@ function handleSearch() {
   })
 }
 
+const { t } = useI18n()
 useSeoMeta({
-  title: 'npmx - Package Browser for the npm Registry',
-  description:
-    'A better browser for the npm registry. Search, browse, and explore packages with a modern interface.',
+  title: t('seo.home.title'),
+  description: t('seo.home.description'),
 })
 
 defineOgImageComponent('Default')
@@ -34,7 +34,7 @@ defineOgImageComponent('Default')
         class="text-fg-muted text-lg sm:text-xl max-w-md mb-12 animate-slide-up animate-fill-both"
         style="animation-delay: 0.1s"
       >
-        a better browser for the npm registry
+        {{ $t('tagline') }}
       </p>
 
       <!-- Search form with micro-interactions -->
@@ -43,7 +43,9 @@ defineOgImageComponent('Default')
         style="animation-delay: 0.2s"
       >
         <form role="search" class="relative" @submit.prevent="handleSearch">
-          <label for="home-search" class="sr-only">Search npm packages</label>
+          <label for="home-search" class="sr-only">
+            {{ $t('search.label') }}
+          </label>
 
           <!-- Search input with glow effect on focus -->
           <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
@@ -64,7 +66,7 @@ defineOgImageComponent('Default')
                 v-model="searchQuery"
                 type="search"
                 name="q"
-                placeholder="search packages..."
+                :placeholder="$t('search.placeholder')"
                 autocomplete="off"
                 class="w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-all duration-300 focus:(border-border-hover outline-none)"
                 @input="handleSearch"
@@ -76,7 +78,7 @@ defineOgImageComponent('Default')
                 type="submit"
                 class="absolute right-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 active:scale-95"
               >
-                search
+                {{ $t('search.button') }}
               </button>
             </div>
           </div>
@@ -86,7 +88,7 @@ defineOgImageComponent('Default')
 
     <!-- Popular packages -->
     <nav
-      aria-label="Popular packages"
+      :aria-label="$t('nav.popular_packages')"
       class="pb-20 text-center animate-fade-in animate-fill-both"
       style="animation-delay: 0.3s"
     >

i18n/locales/en.json

@@ -0,0 +1,30 @@
+{
+  "seo": {
+    "home": {
+      "title": "npmx - Package Browser for the npm Registry",
+      "description": "A better browser for the npm registry. Search, browse, and explore packages with a modern interface."
+    }
+  },
+  "tagline": "a better browser for the npm registry",
+  "non_affiliation_disclaimer": "not affiliated with npm, Inc.",
+  "trademark_disclaimer": "npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.",
+  "footer": {
+    "source": "source",
+    "social": "social",
+    "chat": "chat"
+  },
+  "search": {
+    "label": "Search npm packages",
+    "placeholder": "search packages...",
+    "button": "search"
+  },
+  "nav": {
+    "popular_packages": "Popular packages",
+    "search": "search",
+    "settings": "settings"
+  },
+  "settings": {
+    "relative_dates": "Relative dates",
+    "include_types": "Include {'@'}types in install"
+  }
+}

nuxt.config.ts

@@ -16,6 +16,7 @@ export default defineNuxtConfig({
     '@nuxt/test-utils',
     '@vite-pwa/nuxt',
     '@vueuse/nuxt',
+    '@nuxtjs/i18n',
   ],
 
   devtools: { enabled: true },
@@ -131,4 +132,10 @@ export default defineNuxtConfig({
       ],
     },
   },
+
+  i18n: {
+    defaultLocale: 'en',
+    strategy: 'no_prefix',
+    locales: [{ code: 'en', name: 'English', file: 'en.json' }],
+  },
 })

package.json

@@ -32,6 +32,7 @@
     "@nuxt/fonts": "^0.13.0",
     "@nuxt/scripts": "^0.13.2",
     "@nuxtjs/html-validator": "^2.1.0",
+    "@nuxtjs/i18n": "10.2.1",
     "@shikijs/langs": "^3.21.0",
     "@shikijs/themes": "^3.21.0",
     "@vueuse/core": "^14.1.0",