fix: extract strings

Author: danielroe

app/components/PackageDownloadAnalytics.vue

@@ -4,6 +4,8 @@ import type { VueUiXyDatasetItem } from 'vue-data-ui'
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
 import { useDebounceFn } from '@vueuse/core'
 
+const { t } = useI18n()
+
 const {
   weeklyDownloads,
   inModal = false,
@@ -396,7 +398,7 @@ const config = computed(() => ({
     grid: {
       labels: {
         axis: {
-          yLabel: `${selectedGranularity.value} downloads`,
+          yLabel: t('package.downloads.y_axis_label', { granularity: selectedGranularity.value }),
           xLabel: packageName,
           yLabelOffsetX: 12,
           fontSize: 24,
@@ -465,7 +467,7 @@ const config = computed(() => ({
             for="granularity"
             class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
           >
-            Granularity
+            {{ t('package.downloads.granularity') }}
           </label>
 
           <div
@@ -476,10 +478,10 @@ const config = computed(() => ({
               v-model="selectedGranularity"
               class="w-full bg-transparent font-mono text-sm text-fg outline-none"
             >
-              <option value="daily">Daily</option>
-              <option value="weekly">Weekly</option>
-              <option value="monthly">Monthly</option>
-              <option value="yearly">Yearly</option>
+              <option value="daily">{{ t('package.downloads.granularity_daily') }}</option>
+              <option value="weekly">{{ t('package.downloads.granularity_weekly') }}</option>
+              <option value="monthly">{{ t('package.downloads.granularity_monthly') }}</option>
+              <option value="yearly">{{ t('package.downloads.granularity_yearly') }}</option>
             </select>
           </div>
         </div>
@@ -491,7 +493,7 @@ const config = computed(() => ({
               for="startDate"
               class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
             >
-              Start
+              {{ t('package.downloads.start_date') }}
             </label>
             <div
               class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-fg/50)"
@@ -511,7 +513,7 @@ const config = computed(() => ({
               for="endDate"
               class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
             >
-              End
+              {{ t('package.downloads.end_date') }}
             </label>
             <div
               class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-fg/50)"
@@ -632,7 +634,7 @@ const config = computed(() => ({
       v-if="inModal && !chartData.dataset && !pending"
       class="min-h-[260px] flex items-center justify-center text-fg-subtle font-mono text-sm"
     >
-      No download data available
+      {{ t('package.downloads.no_data') }}
     </div>
 
     <div
@@ -641,7 +643,7 @@ const config = computed(() => ({
       aria-live="polite"
       class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
     >
-      Loading…
+      {{ t('package.downloads.loading') }}
     </div>
   </div>
 </template>

app/components/PackageWeeklyDownloadStats.vue

@@ -127,7 +127,7 @@ const config = computed(() => ({
   </div>
 
   <ChartModal v-model:open="showModal">
-    <template #title>Downloads</template>
+    <template #title>{{ $t('package.downloads.modal_title') }}</template>
 
     <PackageDownloadAnalytics
       :weeklyDownloads="weeklyDownloads"

i18n/locales/en.json

@@ -155,7 +155,18 @@
     "downloads": {
       "title": "Weekly Downloads",
       "date_range": "{start} to {end}",
-      "analyze": "Analyze downloads"
+      "analyze": "Analyze downloads",
+      "modal_title": "Downloads",
+      "granularity": "Granularity",
+      "granularity_daily": "Daily",
+      "granularity_weekly": "Weekly",
+      "granularity_monthly": "Monthly",
+      "granularity_yearly": "Yearly",
+      "start_date": "Start",
+      "end_date": "End",
+      "no_data": "No download data available",
+      "loading": "Loading...",
+      "y_axis_label": "{granularity} downloads"
     },
     "install_scripts": {
       "title": "Install Scripts",