fix: improve OG image text visibility and fix lint issues

- Lighten version and /wk text in grid layout (#525252/#737373 → #a3a3a3)
- Move findCategoryActionButton out of describe block (consistent-function-scoping)
- Fix formatting in Compare.vue and compare.vue

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Adebesin-Cell

app/components/OgImage/Compare.vue

@@ -75,13 +75,10 @@ if (layoutTier.value !== 'summary') {
             `https://api.npmjs.org/downloads/point/last-week/${encoded}`,
             { timeout: FETCH_TIMEOUT_MS },
           ).catch(() => null),
-          $fetch<{ 'dist-tags'?: { latest?: string } }>(
-            `https://registry.npmjs.org/${encoded}`,
-            {
-              timeout: FETCH_TIMEOUT_MS,
-              headers: { Accept: 'application/vnd.npm.install-v1+json' },
-            },
-          ).catch(() => null),
+          $fetch<{ 'dist-tags'?: { latest?: string } }>(`https://registry.npmjs.org/${encoded}`, {
+            timeout: FETCH_TIMEOUT_MS,
+            headers: { Accept: 'application/vnd.npm.install-v1+json' },
+          }).catch(() => null),
         ])
         return {
           name,
@@ -302,16 +299,13 @@ const summaryRemainder = computed(() =>
                 }"
                 >{{ pkg.name }}</span
               >
-              <span
-                v-if="pkg.version"
-                class="text-xs text-[#525252]"
-              >{{ pkg.version }}</span>
+              <span v-if="pkg.version" class="text-xs text-[#a3a3a3]">{{ pkg.version }}</span>
             </span>
             <span class="flex items-baseline gap-0.5">
               <span class="text-2xl font-bold text-[#e5e5e5]">{{
                 formatDownloads(pkg.downloads)
               }}</span>
-              <span class="text-sm font-medium text-[#737373]">/wk</span>
+              <span class="text-sm font-medium text-[#a3a3a3]">/wk</span>
             </span>
           </span>
         </div>

app/pages/compare.vue

@@ -142,7 +142,7 @@ defineOgImageComponent('Compare', {
   packages: () => packages.value,
   emptyDescription: () => $t('compare.packages.meta_description_empty'),
 })
-  
+
 const { announce } = useCommandPalette()
 
 useCommandPaletteContextCommands(

test/nuxt/components/compare/FacetSelector.spec.ts

@@ -100,6 +100,16 @@ vi.mock('@vueuse/router', () => ({
   useRouteQuery: () => ref(''),
 }))
 
+function findCategoryActionButton(
+  component: Awaited<ReturnType<typeof mountSuspended>>,
+  category: string,
+  action: 'all' | 'none',
+) {
+  return component.find(
+    `button[data-facet-category="${category}"][data-facet-category-action="${action}"]`,
+  )
+}
+
 describe('FacetSelector', () => {
   beforeEach(() => {
     mockSelectedFacets.value = ['downloads', 'types']
@@ -232,16 +242,6 @@ describe('FacetSelector', () => {
   })
 
   describe('category all/none buttons', () => {
-    function findCategoryActionButton(
-      component: Awaited<ReturnType<typeof mountSuspended>>,
-      category: string,
-      action: 'all' | 'none',
-    ) {
-      return component.find(
-        `button[data-facet-category="${category}"][data-facet-category-action="${action}"]`,
-      )
-    }
-
     it('calls selectCategory when all button is clicked', async () => {
       const component = await mountSuspended(FacetSelector)