chore: release v0.10.0

.env.example

@@ -1,5 +1,5 @@
-#secure password, can use openssl rand -hex 32
+# secure password, can use `openssl rand -hex 32`
 NUXT_SESSION_PASSWORD=""
 
-#HMAC secret for image proxy URL signing, can use openssl rand -hex 32
-NUXT_IMAGE_PROXY_SECRET=""
+# HMAC secret for image-proxy and OG image URL signing, can use `openssl rand -hex 32`
+NUXT_IMAGE_PROXY_SECRET=""

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,5 +1,7 @@
 name: "\U0001F41E Bug report"
 description: Create a report to help us improve npmx
+type: bug
+labels: ['pending triage']
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,5 +1,6 @@
 name: '🚀 Feature request'
 description: Suggest a feature that will improve npmx
+type: feature
 labels: ['pending triage']
 body:
   - type: markdown

.github/workflows/ci.yml

@@ -114,6 +114,9 @@ jobs:
     steps:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
+      - name: 👑 Fix Git ownership
+        run: git config --global --add safe.directory /__w/npmx.dev/npmx.dev
+
       - uses: voidzero-dev/setup-vp@8ecb39174989ce55af90f45cf55b02738599831d # v1
         with:
           node-version: lts/*

.github/workflows/dependency-diff.yml

@@ -35,7 +35,8 @@ jobs:
         with:
           mode: artifact
           detect-replacements: 'true'
-          duplicate-threshold: '4'
+          # Too noisy. Disabling until this can report on duplicate CHANGES in this PR.
+          duplicate-threshold: '999'
           dependency-threshold: '15'
           size-threshold: '200000'
 

.github/workflows/stale.yml

@@ -0,0 +1,41 @@
+name: Stale Issues and PRs
+
+on:
+  schedule:
+    # Run daily at 2 AM UTC
+    - cron: '0 2 * * *'
+  workflow_dispatch: # Allow manual trigger
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  stale-bugs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f
+        with:
+          days-before-issue-stale: 30
+          days-before-issue-close: 7
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          remove-stale-when-updated: true
+          only-issue-types: 'bug'
+          stale-issue-label: 'stale'
+          close-issue-label: 'stale'
+          operations-per-run: 500
+
+  stale-prs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f
+        with:
+          days-before-issue-stale: -1
+          days-before-issue-close: -1
+          days-before-pr-stale: 30
+          days-before-pr-close: 7
+          remove-stale-when-updated: true
+          stale-pr-label: 'stale'
+          close-pr-label: 'stale'
+          operations-per-run: 500

.nuxtrc

@@ -1 +1 @@
-setups.@nuxt/test-utils="4.0.0"
+setups.@nuxt/test-utils="4.0.2"

.storybook/main.ts

@@ -5,8 +5,7 @@ import { resolve } from 'node:path'
 const config = {
   stories: [
     // List welcome first in sidebar
-    '../.storybook/docs/welcome.mdx',
-    '../.storybook/docs/*.mdx',
+    '../app/storybook/welcome.mdx',
     '../app/**/*.@(mdx|stories.@(js|ts))',
   ],
   addons: [

.storybook/preview-head.html

@@ -61,3 +61,19 @@
     background-color: var(--bg, oklch(0.171 0 0)) !important;
   }
 </style>
+<script>
+  // related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
+  // Stub Nuxt specific globals
+  // @nuxtjs/color-mode's plugin.client.js reads window[globalName] at module
+  // evaluation time — before any Storybook setup() callback runs — so the
+  // global must exist in the HTML head, not in preview.ts.
+  window.__NUXT_COLOR_MODE__ ??= {
+    preference: 'system',
+    value: 'dark',
+    getColorScheme: function () {
+      return 'dark'
+    },
+    addColorScheme: function () {},
+    removeColorScheme: function () {},
+  }
+</script>

.storybook/preview.ts

@@ -10,18 +10,8 @@ import npmxDark from './theme'
 
 initialize()
 
-// related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
-// Stub Nuxt specific globals
 // @ts-expect-error - dynamic global name
-globalThis['__NUXT_COLOR_MODE__'] ??= {
-  preference: 'system',
-  value: 'dark',
-  getColorScheme: fn(() => 'dark'),
-  addColorScheme: fn(),
-  removeColorScheme: fn(),
-}
-// @ts-expect-error - dynamic global name
-globalThis.defineOgImageComponent = fn()
+globalThis.defineOgImage = fn()
 
 // Subscribe to locale changes from storybook-i18n addon (once, outside decorator)
 let currentI18nInstance: any = null

CONTRIBUTING.md

@@ -348,7 +348,7 @@ Ideally, extract utilities into separate files so they can be unit tested. 🙏
 
 ### Internal linking
 
-Always use **object syntax with named routes** for internal navigation. This makes links resilient to URL structure changes and provides type safety via `unplugin-vue-router`.
+Always use **object syntax with named routes** for internal navigation. This makes links resilient to URL structure changes and provides type safety with the [typedPages Nuxt option](https://nuxt.com/docs/4.x/guide/going-further/experimental-features#typedpages).
 
 ```vue
 <!-- Good: named route -->

app/app.vue

@@ -127,6 +127,10 @@ if (import.meta.client) {
     useEventListener(document, 'click', handleModalLightDismiss)
   }
 }
+
+// title and description will be inferred
+// this will be overridden by upstream pages that use different templates
+defineOgImage('Page.takumi', {}, { alt: 'npmx — a fast, modern browser for the npm registry' })
 </script>
 
 <template>

app/components/AppFooter.vue

@@ -120,6 +120,10 @@ const closeModal = () => modalRef.value?.close?.()
                   <kbd class="kbd">f</kbd>
                   <span>{{ $t('shortcuts.open_diff') }}</span>
                 </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">t</kbd>
+                  <span>{{ $t('shortcuts.open_timeline') }}</span>
+                </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">c</kbd>
                   <span>{{ $t('shortcuts.compare_from_package') }}</span>

app/components/Brand/Customize.vue

@@ -75,8 +75,7 @@ async function downloadCustomPng() {
   if (!svg) return
   pngLoading.value = true
 
-  const blob = new Blob([svg], { type: 'image/svg+xml' })
-  const url = URL.createObjectURL(blob)
+  const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
 
   try {
     await document.fonts.ready
@@ -108,7 +107,6 @@ async function downloadCustomPng() {
       }, 'image/png')
     })
   } finally {
-    URL.revokeObjectURL(url)
     pngLoading.value = false
   }
 }
@@ -145,24 +143,30 @@ async function downloadCustomPng() {
           <span class="text-sm font-mono text-fg-muted shrink-0">{{
             $t('brand.customize.accent_label')
           }}</span>
-          <div class="flex items-center gap-1.5" role="radiogroup">
-            <ButtonBase
+          <div class="flex items-center gap-1.5">
+            <label
               v-for="color in pickerColors"
               :key="color.id"
-              role="radio"
-              :aria-checked="activeAccentId === color.id"
-              :aria-label="color.label"
-              class="!w-6 !h-6 !rounded-full !border-2 !p-0 !min-w-0 transition-all duration-150 motion-reduce:transition-none"
+              class="relative w-6 h-6 rounded-full border-2 cursor-pointer duration-150 motion-reduce:transition-none focus-within:ring-2 focus-within:ring-fg focus-within:ring-offset-2 focus-within:ring-offset-bg"
               :class="
                 activeAccentId === color.id
-                  ? '!border-fg scale-110'
+                  ? 'border-fg scale-110'
                   : color.id === 'neutral'
-                    ? '!border-border hover:!border-border-hover'
-                    : '!border-transparent hover:!border-border-hover'
+                    ? 'border-border hover:border-border-hover'
+                    : 'border-transparent hover:border-border-hover'
               "
               :style="{ backgroundColor: color.value }"
-              @click="customAccent = color.id"
-            />
+            >
+              <input
+                type="radio"
+                name="brand-customize-accent"
+                :value="color.id"
+                :checked="activeAccentId === color.id"
+                :aria-label="color.label"
+                class="sr-only"
+                @change="customAccent = color.id"
+              />
+            </label>
           </div>
         </fieldset>
 
@@ -172,40 +176,33 @@ async function downloadCustomPng() {
             <span class="text-sm font-mono text-fg-muted">{{
               $t('brand.customize.bg_label')
             }}</span>
-            <div
-              class="flex items-center border border-border rounded-md overflow-hidden"
-              role="radiogroup"
-            >
-              <ButtonBase
-                size="md"
-                role="radio"
-                :aria-checked="customBgDark"
-                :aria-label="$t('brand.logos.on_dark')"
-                class="!border-none !rounded-none motion-reduce:transition-none"
-                :class="
-                  customBgDark
-                    ? 'bg-bg-muted text-fg'
-                    : 'bg-transparent text-fg-muted hover:text-fg'
-                "
-                @click="customBgDark = true"
+            <div class="flex items-center border border-border rounded-md overflow-hidden">
+              <label
+                class="px-3 py-1.5 text-sm font-mono cursor-pointer motion-reduce:transition-none focus-within:bg-fg/10"
+                :class="customBgDark ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
               >
+                <input
+                  v-model="customBgDark"
+                  type="radio"
+                  name="brand-customize-bg"
+                  :value="true"
+                  class="sr-only"
+                />
                 {{ $t('brand.logos.on_dark') }}
-              </ButtonBase>
-              <ButtonBase
-                size="md"
-                role="radio"
-                :aria-checked="!customBgDark"
-                :aria-label="$t('brand.logos.on_light')"
-                class="!border-none !rounded-none border-is border-is-border motion-reduce:transition-none"
-                :class="
-                  !customBgDark
-                    ? 'bg-bg-muted text-fg'
-                    : 'bg-transparent text-fg-muted hover:text-fg'
-                "
-                @click="customBgDark = false"
+              </label>
+              <label
+                class="px-3 py-1.5 text-sm font-mono cursor-pointer border-is border-is-border motion-reduce:transition-none focus-within:bg-fg/10"
+                :class="!customBgDark ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
               >
+                <input
+                  v-model="customBgDark"
+                  type="radio"
+                  name="brand-customize-bg"
+                  :value="false"
+                  class="sr-only"
+                />
                 {{ $t('brand.logos.on_light') }}
-              </ButtonBase>
+              </label>
             </div>
           </div>
 

app/components/Chart/SplitSparkline.vue

@@ -31,6 +31,7 @@ const props = defineProps<{
 
 const { locale } = useI18n()
 const colorMode = useColorMode()
+const numberFormatter = useNumberFormatter()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 const palette = getPalette('')
@@ -153,6 +154,9 @@ const configs = computed(() => {
           fontSize: 24,
           bold: false,
           color: colors.value.fg,
+          formatter: ({ value }) => {
+            return numberFormatter.value.format(value)
+          },
           datetimeFormatter: {
             enable: true,
             locale: locale.value,