Merge branch 'main' of https://github.com/alex-key/npmx.dev into feat/improve-lunaria-status-page

Author: alex-key

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.formatOnSave": true,
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": ["./i18n/locales"],
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "js/ts.tsdk.path": "node_modules/typescript/lib",
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
     "*.vue": "${capture}.stories.ts"

app/components/Package/Dependencies.vue

@@ -150,7 +150,11 @@ const numberFormatter = useNumberFormatter()
               :to="packageRoute(dep, getVulnerableDepInfo(dep)!.version)"
               class="shrink-0"
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
-              :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
+              :title="
+                $t('package.dependencies.vulnerabilities_count', {
+                  count: getVulnerableDepInfo(dep)!.counts.total,
+                })
+              "
               classicon="i-lucide:shield-check"
             >
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
@@ -176,7 +180,11 @@ const numberFormatter = useNumberFormatter()
               ({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
             </span>
             <span v-if="getVulnerableDepInfo(dep)" class="sr-only">
-              ({{ getVulnerableDepInfo(dep)!.counts.total }} vulnerabilities)
+              ({{
+                $t('package.dependencies.vulnerabilities_count', {
+                  count: getVulnerableDepInfo(dep)!.counts.total,
+                })
+              }})
             </span>
           </span>
         </li>

app/components/Package/ListToolbar.vue

@@ -228,7 +228,7 @@ const { selectedPackages, clearSelectedPackages } = usePackageSelection()
           </ButtonBase>
           <button
             @click="clearSelectedPackages"
-            aria-label="Close action bar"
+            :aria-label="$t('filters.clear_selected_label')"
             class="flex items-center ms-2"
           >
             <span class="i-lucide:x text-sm" />

app/components/Package/SkillsModal.vue

@@ -83,7 +83,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           "
           @click="selectedMethod = 'skills-cli'"
         >
-          skills CLI
+          {{ $t('package.skills.skills_cli') }}
         </button>
       </div>
     </div>

app/components/Package/TableRow.vue

@@ -22,13 +22,6 @@ const isSelected = computed<boolean>(() => {
   return isPackageSelected(props.result.package.name)
 })
 
-function formatDownloads(count?: number): string {
-  if (count === undefined) return '-'
-  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`
-  if (count >= 1_000) return `${(count / 1_000).toFixed(1)}K`
-  return count.toString()
-}
-
 function formatScore(value?: number): string {
   if (value === undefined || value === 0) return '-'
   return Math.round(value * 100).toString()
@@ -44,6 +37,8 @@ const allMaintainersText = computed(() => {
   if (!pkg.value.maintainers?.length) return ''
   return pkg.value.maintainers.map(m => m.name || m.email).join(', ')
 })
+
+const compactNumberFormatter = useCompactNumberFormatter()
 </script>
 
 <template>
@@ -89,7 +84,11 @@ const allMaintainersText = computed(() => {
       v-if="isColumnVisible('downloads')"
       class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
     >
-      {{ formatDownloads(result.downloads?.weekly) }}
+      {{
+        result.downloads?.weekly !== undefined
+          ? compactNumberFormatter.format(result.downloads.weekly)
+          : '-'
+      }}
     </td>
 
     <!-- Updated -->

app/components/Package/VersionDistribution.vue

@@ -375,7 +375,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
               tabindex="0"
               class="i-lucide:info w-3.5 h-3.5 text-fg-subtle cursor-help shrink-0 rounded-sm"
               role="img"
-              aria-label="versions info"
+              :aria-label="$t('package.versions.grouping_versions_about')"
             />
           </TooltipApp>
         </label>
@@ -412,7 +412,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
               tabindex="0"
               class="i-lucide:info w-3.5 h-3.5 text-fg-subtle cursor-help shrink-0 rounded-sm"
               role="img"
-              aria-label="versions info"
+              :aria-label="$t('package.versions.grouping_usage_about')"
             />
           </TooltipApp>
         </label>

app/components/PaginationControls.vue

@@ -155,7 +155,7 @@ function handlePageSizeChange(event: Event) {
           @change="handlePageSizeChange"
           :items="
             PAGE_SIZE_OPTIONS.map(size => ({
-              label: $t('filters.pagination.per_page', { count: size }),
+              label: $t('filters.pagination.per_page', { count: $n(size) }),
               value: String(size),
             }))
           "
@@ -207,7 +207,7 @@ function handlePageSizeChange(event: Event) {
             :aria-current="page === currentPage ? 'page' : undefined"
             @click="goToPage(page)"
           >
-            {{ page }}
+            {{ $n(page) }}
           </button>
         </template>
 

app/components/VersionSelector.vue

@@ -543,7 +543,7 @@ watch(
               type="button"
               class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0"
               :aria-expanded="group.isExpanded"
-              :aria-label="group.isExpanded ? 'Collapse' : 'Expand'"
+              :aria-label="group.isExpanded ? $t('common.collapse') : $t('common.expand')"
               @click.stop="toggleGroup(group.id)"
             >
               <span

app/components/diff/ViewerPanel.vue

@@ -145,7 +145,7 @@ function getCodeUrl(version: string): string {
             @click="showOptions = !showOptions"
           >
             <span class="i-lucide:settings w-3.5 h-3.5" />
-            Options
+            {{ $t('compare.options') }}
             <span
               class="i-lucide:chevron-down w-3 h-3 transition-transform"
               :class="{ 'rotate-180': showOptions }"
@@ -174,10 +174,13 @@ 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.merge_modified_lines')"
+                  v-model="mergeModifiedLines"
+                />
 
                 <!-- Word wrap toggle -->
-                <SettingsToggle label="Word wrap" v-model="wordWrap" />
+                <SettingsToggle :label="$t('compare.word_wrap')" v-model="wordWrap" />
 
                 <!-- Sliders -->
                 <div
@@ -186,14 +189,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.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.change_ratio') }}</span>
                       <span class="slider-value tabular-nums">{{ maxChangeRatio.toFixed(2) }}</span>
                     </div>
                     <div class="slider-track">
@@ -219,14 +222,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.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.diff_distance') }}</span>
                       <span class="slider-value tabular-nums">{{ maxDiffDistance }}</span>
                     </div>
                     <div class="slider-track">
@@ -252,14 +255,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.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.char_edits') }}</span>
                       <span class="slider-value tabular-nums">{{ inlineMaxCharEdits }}</span>
                     </div>
                     <div class="slider-track">
@@ -295,7 +298,7 @@ function getCodeUrl(version: string): string {
           class="px-2 py-1 text-xs text-fg-muted hover:text-fg bg-bg-muted border border-border rounded transition-colors"
           target="_blank"
         >
-          View file
+          {{ $t('compare.view_file') }}
         </NuxtLink>
       </div>
     </div>
@@ -317,22 +320,22 @@ 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.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.loading_diff_error') }}
         </p>
         <div class="flex items-center justify-center gap-2">
           <NuxtLink
             v-if="file.type !== 'removed'"
             :to="getCodeUrl(toVersion)"
             class="text-xs text-fg-muted hover:text-fg underline"
           >
-            View in code browser
+            {{ $t('compare.view_in_code_browser') }}
           </NuxtLink>
         </div>
       </div>
@@ -342,7 +345,7 @@ function getCodeUrl(version: string): string {
         v-else-if="diff && diff.hunks.length === 0"
         class="py-8 text-center text-fg-muted text-sm"
       >
-        No content changes detected
+        {{ $t('compare.no_content_changes') }}
       </div>
 
       <!-- Diff content -->

app/pages/about.stories.ts

@@ -0,0 +1,30 @@
+import About from './about.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import AppHeader from '~/components/AppHeader.vue'
+import AppFooter from '~/components/AppFooter.vue'
+
+const meta = {
+  component: About,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    () => ({
+      components: { AppHeader, AppFooter },
+      template: `
+        <div class="min-h-screen flex flex-col bg-bg text-fg">
+          <AppHeader :show-logo="true" />
+          <div id="main-content" class="flex-1 flex flex-col" tabindex="-1">
+            <story />
+          </div>
+          <AppFooter />
+        </div>
+      `,
+    }),
+  ],
+} satisfies Meta<typeof About>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}