npmx-dev · serhalp · Feb 24, 2026 · Feb 24, 2026 · Feb 24, 2026
diff --git a/app/pages/index.vue b/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>
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "الصفحة الرئيسية",
-    "popular_packages": "الحزم الشائعة",
     "settings": "الإعدادات",
     "compare": "مقارنة",
     "back": "عودة",

diff --git a/i18n/locales/az-AZ.json b/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"
   },

diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Главна",
-    "popular_packages": "Популярни пакети",
     "settings": "настройки",
     "compare": "сравняване",
     "back": "назад",

diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "প্রধান",
-    "popular_packages": "জনপ্রিয় প্যাকেজগুলি",
     "settings": "সেটিংস",
     "compare": "তুলনা করুন",
     "back": "পিছনে",

diff --git a/i18n/locales/cs-CZ.json b/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",

diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hauptnavigation",
-    "popular_packages": "Beliebte Pakete",
     "settings": "Einstellungen",
     "compare": "Vergleichen",
     "back": "Zurück",

diff --git a/i18n/locales/en.json b/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",

diff --git a/i18n/locales/es.json b/i18n/locales/es.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",

diff --git a/i18n/locales/fr-FR.json b/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",

diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पैकेज",
     "settings": "सेटिंग्स",
     "compare": "तुलना करें",
     "back": "वापस",

diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Főmenü",
-    "popular_packages": "Népszerű csomagok",
     "settings": "beállítások",
     "back": "vissza"
   },

diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "Utama",
-    "popular_packages": "Paket populer",
     "settings": "pengaturan",
     "compare": "bandingkan",
     "back": "kembali",

diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
@@ -50,7 +50,6 @@
   },
   "nav": {
     "main_navigation": "Principale",
-    "popular_packages": "Pacchetti popolari",
     "settings": "impostazioni",
     "compare": "confronta",
     "back": "indietro",

diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "メイン",
-    "popular_packages": "人気のパッケージ",
     "settings": "設定",
     "compare": "比較",
     "back": "戻る",

diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पॅकेजेस",
     "settings": "सेटिंग्ज",
     "compare": "तुलना करा",
     "back": "मागे",

diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hovedmeny",
-    "popular_packages": "Populære pakker",
     "settings": "innstillinger",
     "compare": "sammenlign",
     "back": "tilbake",

diff --git a/i18n/locales/ne-NP.json b/i18n/locales/ne-NP.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय प्याकेजहरू",
     "settings": "सेटिङ्स",
     "compare": "तुलना",
     "back": "पछाडि",

diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Główne",
-    "popular_packages": "Popularne pakiety",
     "settings": "ustawienia",
     "compare": "porównaj",
     "back": "wstecz",

diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
@@ -45,7 +45,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Pacotes populares",
     "settings": "configurações",
     "compare": "comparar",
     "back": "voltar",

diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Главное",
-    "popular_packages": "Популярные пакеты",
     "settings": "настройки",
     "back": "назад"
   },

diff --git a/i18n/locales/ta-IN.json b/i18n/locales/ta-IN.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "முதன்மை",
-    "popular_packages": "பிரபலமான தொகுப்புகள்",
     "settings": "அமைப்புகள்",
     "compare": "ஒப்பிடு",
     "back": "பின்செல்",

diff --git a/i18n/locales/te-IN.json b/i18n/locales/te-IN.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "ప్రధాన",
-    "popular_packages": "జనాదరణ ప్యాకేజ్‌లు",
     "settings": "సెట్టింగ్‌లు",
     "compare": "పోల్చండి",
     "back": "వెనక్కి",

diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Головна",
-    "popular_packages": "Популярні пакети",
     "settings": "параметри",
     "compare": "порівняти",
     "back": "назад",

diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "主页",
-    "popular_packages": "热门软件包",
     "settings": "设置",
     "compare": "比较包",
     "back": "返回",

diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "首頁",
-    "popular_packages": "熱門套件",
     "settings": "設定",
     "compare": "比較",
     "back": "返回",

diff --git a/i18n/schema.json b/i18n/schema.json
@@ -202,7 +202,7 @@
         "main_navigation": {
           "type": "string"
         },
-        "popular_packages": {
+        "npmx_picks": {
           "type": "string"
         },
         "settings": {

diff --git a/lunaria/files/ar-EG.json b/lunaria/files/ar-EG.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "الصفحة الرئيسية",
-    "popular_packages": "الحزم الشائعة",
     "settings": "الإعدادات",
     "compare": "مقارنة",
     "back": "عودة",

diff --git a/lunaria/files/az-AZ.json b/lunaria/files/az-AZ.json
@@ -41,7 +41,6 @@
   },
   "nav": {
     "main_navigation": "Əsas",
-    "popular_packages": "Populyar paketlər",
     "settings": "tənzimləmələr",
     "back": "geri"
   },

diff --git a/lunaria/files/bg-BG.json b/lunaria/files/bg-BG.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Главна",
-    "popular_packages": "Популярни пакети",
     "settings": "настройки",
     "compare": "сравняване",
     "back": "назад",

diff --git a/lunaria/files/bn-IN.json b/lunaria/files/bn-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "প্রধান",
-    "popular_packages": "জনপ্রিয় প্যাকেজগুলি",
     "settings": "সেটিংস",
     "compare": "তুলনা করুন",
     "back": "পিছনে",

diff --git a/lunaria/files/cs-CZ.json b/lunaria/files/cs-CZ.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Hlavní",
-    "popular_packages": "Populární balíčky",
     "settings": "nastavení",
     "compare": "porovnat",
     "back": "zpět",

diff --git a/lunaria/files/de-DE.json b/lunaria/files/de-DE.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Hauptnavigation",
-    "popular_packages": "Beliebte Pakete",
     "settings": "Einstellungen",
     "compare": "Vergleichen",
     "back": "Zurück",

diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
@@ -65,7 +65,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",

diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
@@ -65,7 +65,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",

diff --git a/lunaria/files/es-419.json b/lunaria/files/es-419.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",

diff --git a/lunaria/files/es-ES.json b/lunaria/files/es-ES.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",

diff --git a/lunaria/files/fr-FR.json b/lunaria/files/fr-FR.json
@@ -65,7 +65,7 @@
   },
   "nav": {
     "main_navigation": "Barre de navigation",
-    "popular_packages": "Paquets populaires",
+    "npmx_picks": "Suggestions npmx",
     "settings": "paramètres",
     "compare": "comparer",
     "back": "Retour",

diff --git a/lunaria/files/hi-IN.json b/lunaria/files/hi-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पैकेज",
     "settings": "सेटिंग्स",
     "compare": "तुलना करें",
     "back": "वापस",

diff --git a/lunaria/files/hu-HU.json b/lunaria/files/hu-HU.json
@@ -41,7 +41,6 @@
   },
   "nav": {
     "main_navigation": "Főmenü",
-    "popular_packages": "Népszerű csomagok",
     "settings": "beállítások",
     "back": "vissza"
   },

diff --git a/lunaria/files/id-ID.json b/lunaria/files/id-ID.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "Utama",
-    "popular_packages": "Paket populer",
     "settings": "pengaturan",
     "compare": "bandingkan",
     "back": "kembali",

diff --git a/lunaria/files/it-IT.json b/lunaria/files/it-IT.json
@@ -49,7 +49,6 @@
   },
   "nav": {
     "main_navigation": "Principale",
-    "popular_packages": "Pacchetti popolari",
     "settings": "impostazioni",
     "compare": "confronta",
     "back": "indietro",