feat: replace framework pkgs with random "n p m x" picks

Show 4 randomly-selected packages whose names contain the letters n, p, m, X, with the matching
letter highlighted in bold + accent colour (one distinct colour per letter when no user accent is
set).

Selection algorithm:
1. Fetch top 500 popular packages from the Algolia search index (empty query, default popularity
   ranking). Algolia doesn't support filtering by name substring (and doesn't know about our social
   likes), so we filter these results down after the fact (not deprecated, >=10k downloads/30d,
   modified <2yrs).
2. For each letter (n, p, m, x)
  1. Take 30 random candidates whose name contains that letter and check their social like count.
  2. If there are candidates with >=5 community likes, keep only those; otherwise, keep all.
  3. Randomly pick one remaining candidate.
  4. If there are no remaining candidates, pick the hardcoded default for this letter (nuxt, pnpm,
     module-replacements, oxfmt).

Results are cached for 1 hour via with SWR, so all users see the same picks for about an hour, and
no user ever experiences a cache miss (and Algolia/constellation slowness).

Author: serhalp

app/pages/index.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
+import type { NpmxPicksResponse } from '#shared/types/picks'
+
+const { data: picksData } = useFetch<NpmxPicksResponse>('/api/picks')
+const { selectedAccentColor } = useAccentColor()
+
+const PICK_COLORS = ['coral', 'amber', 'emerald', 'sky'] as const
+function pickLetterColor(index: number): string | undefined {
+  if (selectedAccentColor.value) return undefined
+  return `var(--swatch-${PICK_COLORS[index]})`
+}
 
 const { model: searchQuery, flushUpdateUrlQuery } = useGlobalSearch()
 const isSearchFocused = shallowRef(false)
@@ -108,17 +117,22 @@ defineOgImageComponent('Default', {
       </header>
 
       <nav
-        :aria-label="$t('nav.popular_packages')"
+        v-if="picksData?.picks?.length"
+        :aria-label="$t('nav.npmx_picks')"
         class="pt-4 pb-36 sm:pb-40 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both max-w-xl mx-auto"
         style="animation-delay: 0.3s"
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
-          <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
-            <LinkBase :to="packageRoute(framework.package)" class="gap-2 text-sm">
+          <li v-for="(pick, i) in picksData?.picks" :key="pick.letter">
+            <LinkBase :to="packageRoute(pick.name)" class="text-sm">
               <span
-                class="home-tag-dot w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
-              />
-              {{ framework.name }}
+                >{{ pick.name.slice(0, pick.letterIndex)
+                }}<span
+                  class="font-bold text-accent"
+                  :style="pickLetterColor(i) ? { color: pickLetterColor(i) } : undefined"
+                  >{{ pick.name[pick.letterIndex] }}</span
+                >{{ pick.name.slice(pick.letterIndex + 1) }}</span
+              >
             </LinkBase>
           </li>
         </ul>
@@ -132,13 +146,3 @@ defineOgImageComponent('Default', {
     </section>
   </main>
 </template>
-
-<style scoped>
-/* Windows High Contrast Mode support */
-@media (forced-colors: active) {
-  .home-tag-dot {
-    forced-color-adjust: none;
-    background-color: CanvasText;
-  }
-}
-</style>

i18n/locales/ar.json

@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "الصفحة الرئيسية",
-    "popular_packages": "الحزم الشائعة",
     "settings": "الإعدادات",
     "compare": "مقارنة",
     "back": "عودة",

i18n/locales/az-AZ.json

@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Əsas",
-    "popular_packages": "Populyar paketlər",
     "settings": "tənzimləmələr",
     "back": "geri"
   },

i18n/locales/bg-BG.json

@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Главна",
-    "popular_packages": "Популярни пакети",
     "settings": "настройки",
     "compare": "сравняване",
     "back": "назад",

i18n/locales/bn-IN.json

@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "প্রধান",
-    "popular_packages": "জনপ্রিয় প্যাকেজগুলি",
     "settings": "সেটিংস",
     "compare": "তুলনা করুন",
     "back": "পিছনে",

i18n/locales/cs-CZ.json

@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hlavní",
-    "popular_packages": "Populární balíčky",
     "settings": "nastavení",
     "compare": "porovnat",
     "back": "zpět",

i18n/locales/de-DE.json

@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hauptnavigation",
-    "popular_packages": "Beliebte Pakete",
     "settings": "Einstellungen",
     "compare": "Vergleichen",
     "back": "Zurück",

i18n/locales/en.json

@@ -66,7 +66,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",

i18n/locales/es.json

@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",

i18n/locales/fr-FR.json

@@ -66,7 +66,7 @@
   },
   "nav": {
     "main_navigation": "Barre de navigation",
-    "popular_packages": "Paquets populaires",
+    "npmx_picks": "Suggestions npmx",
     "settings": "paramètres",
     "compare": "comparer",
     "back": "Retour",