feat: show recently viewed packages/orgs/users on homepage

app/composables/useRecentlyViewed.ts

@@ -0,0 +1,32 @@
+import { useLocalStorage } from '@vueuse/core'
+import { computed } from 'vue'
+
+const MAX_RECENT_ITEMS = 5
+const STORAGE_KEY = 'npmx-recent'
+
+export type RecentItemType = 'package' | 'org' | 'user'
+
+export interface RecentItem {
+  type: RecentItemType
+  /** Canonical identifier: package name, org name (without @), or username */
+  name: string
+  /** Display label shown on homepage (e.g. "@nuxt", "~sindresorhus") */
+  label: string
+  /** Unix timestamp (ms) of most recent view */
+  viewedAt: number
+}
+
+export function useRecentlyViewed() {
+  const items = useLocalStorage<RecentItem[]>(STORAGE_KEY, [])
+
+  function trackRecentView(item: Omit<RecentItem, 'viewedAt'>) {
+    if (import.meta.server) return
+    const filtered = items.value.filter(
+      existing => !(existing.type === item.type && existing.name === item.name),
+    )
+    filtered.unshift({ ...item, viewedAt: Date.now() })
+    items.value = filtered.slice(0, MAX_RECENT_ITEMS)
+  }
+
+  return { items: computed(() => items.value), trackRecentView }
+}

app/pages/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
+import type { RecentItem } from '~/composables/useRecentlyViewed'
+import type { RouteLocationRaw } from 'vue-router'
 
 const { model: searchQuery, flushUpdateUrlQuery } = useGlobalSearch()
 const isSearchFocused = shallowRef(false)
@@ -24,6 +25,19 @@ defineOgImageComponent('Default', {
   title: 'npmx',
   description: 'a fast, modern browser for the **npm registry**',
 })
+
+const { items: recentItems } = useRecentlyViewed()
+
+function recentItemRoute(item: RecentItem): RouteLocationRaw {
+  switch (item.type) {
+    case 'package':
+      return packageRoute(item.name)
+    case 'org':
+      return { name: 'org', params: { org: item.name } }
+    case 'user':
+      return { name: '~username', params: { username: item.name } }
+  }
+}
 </script>
 
 <template>
@@ -107,22 +121,31 @@ defineOgImageComponent('Default', {
         <BuildEnvironment class="mt-4" />
       </header>
 
-      <nav
-        :aria-label="$t('nav.popular_packages')"
-        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">
-              <span
-                class="home-tag-dot w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
-              />
-              {{ framework.name }}
-            </LinkBase>
-          </li>
-        </ul>
-      </nav>
+      <div class="pt-4 pb-36 sm:pb-40 max-w-xl mx-auto">
+        <ClientOnly>
+          <nav
+            v-if="recentItems.length > 0"
+            aria-labelledby="recently-viewed-label"
+            class="text-center motion-safe:animate-fade-in motion-safe:animate-fill-both"
+            style="animation-delay: 0.3s"
+          >
+            <div class="flex flex-wrap items-center justify-center gap-x-2 gap-y-3">
+              <span id="recently-viewed-label" class="text-xs text-fg-subtle tracking-wider">
+                {{ $t('nav.recently_viewed') }}:
+              </span>
+              <ul
+                class="flex flex-wrap items-center justify-center gap-x-4 gap-y-3 list-none m-0 p-0"
+              >
+                <li v-for="item in recentItems" :key="`${item.type}-${item.name}`">
+                  <LinkBase :to="recentItemRoute(item)" class="text-sm">
+                    {{ item.label }}
+                  </LinkBase>
+                </li>
+              </ul>
+            </div>
+          </nav>
+        </ClientOnly>
+      </div>
     </section>
 
     <section class="border-t border-border py-24 bg-bg-subtle/10">
@@ -132,13 +155,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>

app/pages/org/[org].vue

@@ -121,6 +121,19 @@ watch(orgName, () => {
   currentPage.value = 1
 })
 
+if (import.meta.client) {
+  const { trackRecentView } = useRecentlyViewed()
+  watch(
+    () => [status.value, orgName.value] as const,
+    ([s, name]) => {
+      if (s === 'success') {
+        trackRecentView({ type: 'org', name, label: `@${name}` })
+      }
+    },
+    { immediate: true },
+  )
+}
+
 // Handle filter chip removal
 function handleClearFilter(chip: FilterChip) {
   clearFilter(chip)

app/pages/package/[[org]]/[name].vue

@@ -643,6 +643,19 @@ onKeyStroke(
 )
 
 const showSkeleton = shallowRef(false)
+
+if (import.meta.client) {
+  const { trackRecentView } = useRecentlyViewed()
+  watch(
+    () => [status.value, packageName.value] as const,
+    ([s, name]) => {
+      if (s === 'success') {
+        trackRecentView({ type: 'package', name, label: name })
+      }
+    },
+    { immediate: true },
+  )
+}
 </script>
 
 <template>

app/pages/~[username]/index.vue

@@ -119,6 +119,19 @@ watch(username, () => {
   sortOption.value = 'downloads'
 })
 
+if (import.meta.client) {
+  const { trackRecentView } = useRecentlyViewed()
+  watch(
+    () => [status.value, username.value] as const,
+    ([s, name]) => {
+      if (s === 'success') {
+        trackRecentView({ type: 'user', name, label: `~${name}` })
+      }
+    },
+    { immediate: true },
+  )
+}
+
 useSeoMeta({
   title: () => `~${username.value} - npmx`,
   ogTitle: () => `~${username.value} - npmx`,

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",
+    "recently_viewed": "recently viewed",
     "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",
+    "recently_viewed": "consultés récemment",
     "settings": "paramètres",
     "compare": "comparer",
     "back": "Retour",

i18n/locales/hi-IN.json

@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पैकेज",
     "settings": "सेटिंग्स",
     "compare": "तुलना करें",
     "back": "वापस",

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"
   },

i18n/locales/id-ID.json

@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "Utama",
-    "popular_packages": "Paket populer",
     "settings": "pengaturan",
     "compare": "bandingkan",
     "back": "kembali",

i18n/locales/it-IT.json

@@ -50,7 +50,6 @@
   },
   "nav": {
     "main_navigation": "Principale",
-    "popular_packages": "Pacchetti popolari",
     "settings": "impostazioni",
     "compare": "confronta",
     "back": "indietro",

i18n/locales/ja-JP.json

@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "メイン",
-    "popular_packages": "人気のパッケージ",
     "settings": "設定",
     "compare": "比較",
     "back": "戻る",

i18n/locales/mr-IN.json

@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पॅकेजेस",
     "settings": "सेटिंग्ज",
     "compare": "तुलना करा",
     "back": "मागे",

i18n/locales/nb-NO.json

@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hovedmeny",
-    "popular_packages": "Populære pakker",
     "settings": "innstillinger",
     "compare": "sammenlign",
     "back": "tilbake",

i18n/locales/ne-NP.json

@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय प्याकेजहरू",
     "settings": "सेटिङ्स",
     "compare": "तुलना",
     "back": "पछाडि",

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",

i18n/locales/pt-BR.json

@@ -45,7 +45,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Pacotes populares",
     "settings": "configurações",
     "compare": "comparar",
     "back": "voltar",

i18n/locales/ru-RU.json

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

i18n/locales/ta-IN.json

@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "முதன்மை",
-    "popular_packages": "பிரபலமான தொகுப்புகள்",
     "settings": "அமைப்புகள்",
     "compare": "ஒப்பிடு",
     "back": "பின்செல்",

i18n/locales/te-IN.json

@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "ప్రధాన",
-    "popular_packages": "జనాదరణ ప్యాకేజ్‌లు",
     "settings": "సెట్టింగ్‌లు",
     "compare": "పోల్చండి",
     "back": "వెనక్కి",

i18n/locales/uk-UA.json

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

i18n/locales/zh-CN.json

@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "主页",
-    "popular_packages": "热门软件包",
     "settings": "设置",
     "compare": "比较包",
     "back": "返回",

i18n/locales/zh-TW.json

@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "首頁",
-    "popular_packages": "熱門套件",
     "settings": "設定",
     "compare": "比較",
     "back": "返回",

i18n/schema.json

@@ -202,7 +202,7 @@
         "main_navigation": {
           "type": "string"
         },
-        "popular_packages": {
+        "recently_viewed": {
           "type": "string"
         },
         "settings": {