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/assets/logos/sponsors/index.ts

@@ -54,7 +54,7 @@ export const SPONSORS = [
       dark: LogoNetlify,
       light: LogoNetlifyLight,
     },
-    normalisingIndent: '0.125rem',
+    normalisingIndent: '0.25rem',
     url: 'https://netlify.com/',
   },
   {

app/components/About/LogoImg.vue

@@ -11,14 +11,20 @@ const props = defineProps<{
 </script>
 <template>
   <div v-if="typeof src === 'string'" class="h-full">
-    <img :src="src" loading="lazy" height="36" class="w-auto block h-full" :alt="alt" />
+    <img
+      :src="src"
+      loading="lazy"
+      height="36"
+      class="h-full w-full object-contain block"
+      :alt="alt"
+    />
   </div>
   <div v-else-if="src.light === 'auto'" class="h-full">
     <img
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:invert light:grayscale h-full"
+      class="h-full w-full object-contain block light:invert light:grayscale"
       :alt="alt"
     />
   </div>
@@ -27,14 +33,14 @@ const props = defineProps<{
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:hidden h-full"
+      class="h-full w-full object-contain block light:hidden"
       :alt="alt"
     />
     <img
       :src="src.light"
       loading="lazy"
       height="36"
-      class="w-auto block hidden light:block h-full"
+      class="h-full w-full object-contain block hidden light:block"
       :alt="alt"
     />
   </div>

app/components/About/LogoList.vue

@@ -22,40 +22,50 @@ const props = defineProps<{
 </script>
 
 <template>
-  <ul class="flex flex-wrap gap-4 md:gap-x-6 md:gap-y-4 list-none">
-    <li v-for="item in list" :key="item.name">
+  <ul class="list-none">
+    <li
+      v-for="item in list"
+      :key="item.name"
+      :style="
+        'items' in item && `grid-column: span ${item.items.length} / span ${item.items.length};`
+      "
+    >
       <a
         v-if="'logo' in item"
         :href="item.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="relative flex items-center justify-center h-14 min-w-14 rounded-md hover:bg-fg/10 transition-colors p-1"
+        class="relative flex items-center justify-center h-16 rounded-md bg-bg-muted hover:bg-bg-subtle border border-border transition-colors py-1 px-3"
         :style="{ paddingBlock: item.normalisingIndent }"
         :aria-label="item.name"
       >
         <AboutLogoImg :src="item.logo" :alt="item.name" />
       </a>
-      <div v-else-if="item.items" class="relative flex items-center justify-center">
+      <div
+        v-else-if="item.items"
+        class="relative flex items-center justify-center h-full bg-bg-muted border border-border rounded-md py-1 px-2"
+      >
         <svg
           width="11"
           height="38"
           viewBox="0 0 11 38"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           aria-hidden="true"
+          class="h-full w-auto"
         >
           <path
             d="M5.62151 0C-1.8519 10.6931 -1.89574 27.2683 5.62151 37.9997H10.6709C3.15538 27.2683 3.19922 10.6931 10.6709 0H5.62151Z"
             fill="currentColor"
           />
         </svg>
         <ul class="flex items-center justify-center h-full gap-0.5 list-none">
-          <li v-for="groupItem in item.items" :key="groupItem.name">
+          <li v-for="groupItem in item.items" :key="groupItem.name" class="h-full">
             <a
               :href="groupItem.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="relative flex items-center justify-center h-10 min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
+              class="relative flex items-center justify-center h-full aspect-square rounded-md hover:bg-bg-subtle border border-transparent hover:border-border transition-colors p-1.5"
               :style="{ paddingBlock: groupItem.normalisingIndent }"
               :aria-label="groupItem.name"
             >
@@ -70,6 +80,7 @@ const props = defineProps<{
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           aria-hidden="true"
+          class="h-full w-auto"
         >
           <path
             d="M5.04935 0H0C7.4734 10.6931 7.51725 27.2683 0 37.9997H5.04935C12.5648 27.2683 12.521 10.6931 5.04935 0Z"