refactor(i18n): externalize and organize hardcoded strings (#282)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: shuuji3

app/app.vue

@@ -50,7 +50,7 @@ if (import.meta.client) {
 
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
-    <a href="#main-content" class="skip-link font-mono">Skip to main content</a>
+    <a href="#main-content" class="skip-link font-mono">{{ $t('common.skip_link') }}</a>
 
     <AppHeader :show-logo="!isHomepage" />
 

app/components/AccentColorPicker.vue

@@ -5,7 +5,7 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 </script>
 
 <template>
-  <div role="listbox" aria-label="Accent colors" class="flex items-center gap-4">
+  <div role="listbox" :aria-label="$t('settings.accent_colors')" class="flex items-center gap-4">
     <button
       v-for="color in accentColors"
       :key="color.id"
@@ -19,7 +19,7 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
     />
     <button
       type="button"
-      aria-label="Clear accent color"
+      :aria-label="$t('settings.clear_accent')"
       class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
       @click="setAccentColor(null)"
     >

app/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="border-t border-border mt-auto" aria-label="Site footer">
+  <footer class="border-t border-border mt-auto" :aria-label="$t('footer.site_footer')">
     <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
       <div class="flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-4">
         <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>

app/components/AppHeader.vue

@@ -45,10 +45,10 @@ onKeyStroke(',', e => {
 
 <template>
   <header
-    aria-label="Site header"
+    :aria-label="$t('header.site_header')"
     class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border"
   >
-    <nav aria-label="Main navigation" class="container h-14 flex items-center">
+    <nav :aria-label="$t('nav.main_navigation')" class="container h-14 flex items-center">
       <!-- Left: Logo -->
       <div class="flex-shrink-0">
         <NuxtLink

app/components/ChartModal.vue

@@ -29,7 +29,7 @@ function handleKeydown(event: KeyboardEvent) {
         <button
           type="button"
           class="absolute inset-0 bg-black/60 cursor-default"
-          aria-label="Close modal"
+          :aria-label="$t('common.close_modal')"
           @click="open = false"
         />
 
@@ -47,7 +47,7 @@ function handleKeydown(event: KeyboardEvent) {
               <button
                 type="button"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                aria-label="Close"
+                :aria-label="$t('common.close')"
                 @click="open = false"
               >
                 <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />

app/components/PackageDependencies.vue

@@ -118,7 +118,7 @@ const sortedOptionalDependencies = computed(() => {
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
             >
               <span class="i-carbon-security w-3 h-3 block" aria-hidden="true" />
-              <span class="sr-only">View vulnerabilities</span>
+              <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
             </NuxtLink>
             <NuxtLink
               :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"

app/pages/[...package].vue

@@ -521,7 +521,7 @@ defineOgImageComponent('Package', {
             <!-- Internal navigation: Docs + Code (hidden on mobile, shown in external links instead) -->
             <nav
               v-if="displayVersion"
-              aria-label="Package navigation"
+              :aria-label="$t('package.navigation')"
               class="hidden sm:flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ml-auto self-center"
             >
               <NuxtLink
@@ -831,7 +831,9 @@ defineOgImageComponent('Package', {
       <!-- Binary-only packages: Show only execute command (no install) -->
       <section v-if="isBinaryOnly" aria-labelledby="run-heading" class="area-install scroll-mt-20">
         <div class="flex flex-wrap items-center justify-between mb-3">
-          <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">Run</h2>
+          <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
+            {{ $t('package.run.title') }}
+          </h2>
           <!-- Package manager tabs -->
           <div
             class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md"

app/pages/code/[...path].vue

@@ -295,7 +295,7 @@ useSeoMeta({
 
         <!-- Breadcrumb navigation -->
         <nav
-          aria-label="File path"
+          :aria-label="$t('code.file_path')"
           class="flex items-center gap-1 font-mono text-sm overflow-x-auto"
         >
           <NuxtLink

app/pages/docs/[...path].vue

@@ -156,9 +156,9 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 
         <div v-else-if="showEmptyState" class="p-6 sm:p-8 lg:p-12">
           <div class="max-w-xl rounded-lg border border-border bg-bg-muted p-6">
-            <h2 class="font-mono text-lg mb-2">Docs not available</h2>
+            <h2 class="font-mono text-lg mb-2">{{ $t('package.docs.not_available') }}</h2>
             <p class="text-fg-subtle text-sm">
-              {{ docsData?.message ?? 'We could not generate docs for this version.' }}
+              {{ docsData?.message ?? $t('package.docs.not_available_detail') }}
             </p>
             <div class="flex gap-4 mt-4">
               <NuxtLink

app/pages/search.vue

@@ -703,7 +703,7 @@ defineOgImageComponent('Default', {
     <!-- Sticky search header - positioned below AppHeader (h-14 = 56px) -->
     <header class="sticky top-14 z-40 bg-bg/95 backdrop-blur-sm border-b border-border">
       <div class="container-sm py-4">
-        <h1 class="font-mono text-xl sm:text-2xl font-medium mb-4">search</h1>
+        <h1 class="font-mono text-xl sm:text-2xl font-medium mb-4">{{ $t('nav.search') }}</h1>
 
         <search>
           <form role="search" method="GET" action="/search" class="relative" @submit.prevent>
@@ -755,7 +755,7 @@ defineOgImageComponent('Default', {
 
     <!-- Results area with container padding -->
     <div class="container-sm pt-20 pb-6">
-      <section v-if="query" aria-label="Search results" @keydown="handleResultsKeydown">
+      <section v-if="query" :aria-label="$t('search.results')" @keydown="handleResultsKeydown">
         <!-- Initial loading (only after user interaction, not during view transition) -->
         <LoadingSpinner v-if="showSearching" :text="$t('search.searching')" />