feat: use i18n for hardcoded strings in components and pages

Sigmabrogz · Sigmabrogz · commit c27d6f53af5c · 2026-03-18T18:09:41.000Z
Closes #2128
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
@@ -67,9 +67,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
               : 'border-transparent text-fg-subtle hover:text-fg'
           "
           @click="selectedMethod = 'skills-npm'"
-        >
-          skills-npm
-        </button>
+        >{{ $t('package.skills.method_npm') }}</button>
         <button
           role="tab"
           :aria-selected="selectedMethod === 'skills-cli'"
@@ -82,9 +80,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
               : 'border-transparent text-fg-subtle hover:text-fg'
           "
           @click="selectedMethod = 'skills-cli'"
-        >
-          skills CLI
-        </button>
+        >{{ $t('package.skills.method_cli') }}</button>
       </div>
     </div>
 
@@ -100,7 +96,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
         scope="global"
       >
         <template #tool>
-          <code class="font-mono text-fg">skills-npm</code>
+          <code class="font-mono text-fg">{{ $t('package.skills.method_npm') }}</code>
         </template>
       </i18n-t>
       <a
diff --git a/app/components/diff/ViewerPanel.vue b/app/components/diff/ViewerPanel.vue
@@ -174,10 +174,10 @@ function getCodeUrl(version: string): string {
             >
               <div class="flex flex-col gap-2">
                 <!-- Merge modified lines toggle -->
-                <SettingsToggle label="Merge modified lines" v-model="mergeModifiedLines" />
+                <SettingsToggle :label="$t('compare.viewer.merge_modified_lines')" v-model="mergeModifiedLines" />
 
                 <!-- Word wrap toggle -->
-                <SettingsToggle label="Word wrap" v-model="wordWrap" />
+                <SettingsToggle :label="$t('compare.viewer.word_wrap')" v-model="wordWrap" />
 
                 <!-- Sliders -->
                 <div
@@ -186,14 +186,14 @@ function getCodeUrl(version: string): string {
                 >
                   <!-- Change ratio slider -->
                   <div class="sr-only">
-                    <label for="change-ratio">Change ratio</label>
+                    <label for="change-ratio">{{ $t('compare.viewer.change_ratio') }}</label>
                   </div>
                   <div
                     class="slider-shell w-full min-w-0"
                     :class="{ 'is-disabled': !mergeModifiedLines }"
                   >
                     <div class="slider-labels">
-                      <span class="slider-label">Change ratio</span>
+                      <span class="slider-label">{{ $t('compare.viewer.change_ratio') }}</span>
                       <span class="slider-value tabular-nums">{{ maxChangeRatio.toFixed(2) }}</span>
                     </div>
                     <div class="slider-track">
@@ -219,14 +219,14 @@ function getCodeUrl(version: string): string {
 
                   <!-- Diff distance slider -->
                   <div class="sr-only">
-                    <label for="diff-distance">Diff distance</label>
+                    <label for="diff-distance">{{ $t('compare.viewer.diff_distance') }}</label>
                   </div>
                   <div
                     class="slider-shell w-full min-w-0"
                     :class="{ 'is-disabled': !mergeModifiedLines }"
                   >
                     <div class="slider-labels">
-                      <span class="slider-label">Diff distance</span>
+                      <span class="slider-label">{{ $t('compare.viewer.diff_distance') }}</span>
                       <span class="slider-value tabular-nums">{{ maxDiffDistance }}</span>
                     </div>
                     <div class="slider-track">
@@ -252,14 +252,14 @@ function getCodeUrl(version: string): string {
 
                   <!-- Char edits slider -->
                   <div class="sr-only">
-                    <label for="char-edits">Char edits</label>
+                    <label for="char-edits">{{ $t('compare.viewer.char_edits') }}</label>
                   </div>
                   <div
                     class="slider-shell w-full min-w-0"
                     :class="{ 'is-disabled': !mergeModifiedLines }"
                   >
                     <div class="slider-labels">
-                      <span class="slider-label">Char edits</span>
+                      <span class="slider-label">{{ $t('compare.viewer.char_edits') }}</span>
                       <span class="slider-value tabular-nums">{{ inlineMaxCharEdits }}</span>
                     </div>
                     <div class="slider-track">
@@ -317,14 +317,14 @@ function getCodeUrl(version: string): string {
       <!-- Loading state -->
       <div v-else-if="status === 'pending'" class="py-12 text-center">
         <div class="i-svg-spinners-ring-resize w-6 h-6 mx-auto text-fg-muted" />
-        <p class="mt-2 text-sm text-fg-muted">Loading diff...</p>
+        <p class="mt-2 text-sm text-fg-muted">{{ $t('compare.viewer.loading_diff') }}</p>
       </div>
 
       <!-- Error state -->
       <div v-else-if="status === 'error'" class="py-8 text-center">
         <span class="i-lucide:triangle-alert w-8 h-8 mx-auto text-fg-subtle mb-2 block" />
         <p class="text-fg-muted text-sm mb-2">
-          {{ loadError?.message || 'Failed to load diff' }}
+          {{ loadError?.message || $t('compare.viewer.failed_to_load_diff') }}
         </p>
         <div class="flex items-center justify-center gap-2">
           <NuxtLink
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
@@ -37,7 +37,7 @@ useSeoMeta({
             :authors="post.authors"
             :title="post.title"
             :path="post.slug"
-            :excerpt="post.excerpt || post.description || 'No Excerpt Available'"
+            :excerpt="post.excerpt || post.description || $t('blog.no_excerpt')"
             :topics="Array.isArray(post.tags) ? post.tags : placeHolder"
             :published="post.date"
             :index="idx"
@@ -47,7 +47,7 @@ useSeoMeta({
         </template>
       </article>
 
-      <p v-else class="text-center py-20 text-fg-subtle">No posts found.</p>
+      <p v-else class="text-center py-20 text-fg-subtle">{{ $t('blog.no_posts') }}</p>
     </article>
   </main>
 </template>
diff --git a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
@@ -135,21 +135,21 @@ useSeoMeta({
     <!-- Error: invalid route -->
     <div v-if="!versionRange" class="container py-20 text-center">
       <p class="text-fg-muted mb-4">
-        Invalid comparison URL. Use format: /diff/package/v/from...to
+        {{ $t('compare.invalid_url') }}
       </p>
-      <NuxtLink :to="packageRoute(packageName)" class="btn">Go to package</NuxtLink>
+      <NuxtLink :to="packageRoute(packageName)" class="btn">{{ $t('compare.go_to_package') }}</NuxtLink>
     </div>
 
     <!-- Loading state -->
     <div v-else-if="compareStatus === 'pending'" class="container py-20 text-center">
       <div class="i-svg-spinners-ring-resize w-8 h-8 mx-auto text-fg-muted" />
-      <p class="mt-4 text-fg-muted">Comparing versions...</p>
+      <p class="mt-4 text-fg-muted">{{ $t('compare.comparing_versions') }}</p>
     </div>
 
     <!-- Error state -->
     <div v-else-if="compareStatus === 'error'" class="container py-20 text-center" role="alert">
-      <p class="text-fg-muted mb-4">Failed to compare versions</p>
-      <NuxtLink :to="packageRoute(packageName)" class="btn">Back to package</NuxtLink>
+      <p class="text-fg-muted mb-4">{{ $t('compare.failed_to_compare') }}</p>
+      <NuxtLink :to="packageRoute(packageName)" class="btn">{{ $t('compare.back_to_package') }}</NuxtLink>
     </div>
 
     <!-- Comparison content -->
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -110,7 +110,9 @@
       "like_count": "{count} like | {count} likes",
       "repost_count": "{count} repost | {count} reposts",
       "more_replies": "{count} more reply... | {count} more replies..."
-    }
+    },
+    "no_excerpt": "No Excerpt Available",
+    "no_posts": "No posts found."
   },
   "settings": {
     "title": "settings",
@@ -286,7 +288,9 @@
         "refs": "{count} ref | {count} refs",
         "assets": "{count} asset | {count} assets"
       },
-      "view_source": "View source"
+      "view_source": "View source",
+      "method_npm": "skills-npm",
+      "method_cli": "skills CLI"
     },
     "links": {
       "main": "main",
@@ -1205,7 +1209,25 @@
     "files_button": "Files",
     "select_file_prompt": "Select a file from the sidebar to view its diff",
     "close_files_panel": "Close files panel",
-    "filter_files_label": "Filter files by change type"
+    "filter_files_label": "Filter files by change type",
+    "invalid_url": "Invalid comparison URL. Use format: /diff/package/v/from...to",
+    "go_to_package": "Go to package",
+    "comparing_versions": "Comparing versions...",
+    "failed_to_compare": "Failed to compare versions",
+    "back_to_package": "Back to package",
+    "viewer": {
+      "options": "Options",
+      "merge_modified_lines": "Merge modified lines",
+      "word_wrap": "Word wrap",
+      "change_ratio": "Change ratio",
+      "diff_distance": "Diff distance",
+      "char_edits": "Char edits",
+      "view_file": "View file",
+      "loading_diff": "Loading diff...",
+      "failed_to_load_diff": "Failed to load diff",
+      "view_in_code_browser": "View in code browser",
+      "no_content_changes": "No content changes detected"
+    }
   },
   "pds": {
     "title": "npmx.social",
