Merge branch 'main' into feat/resolve-40

Author: eryue0220

.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/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/preview.ts

@@ -11,7 +11,7 @@ import npmxDark from './theme'
 initialize()
 
 // @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/Chart/SplitSparkline.vue

@@ -31,9 +31,7 @@ const props = defineProps<{
 
 const { locale } = useI18n()
 const colorMode = useColorMode()
-const numberFormatter = useNumberFormatter({
-  maximumFractionDigits: 0,
-})
+const numberFormatter = useNumberFormatter()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 const palette = getPalette('')

app/components/OgBrand.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    height?: number
+  }>(),
+  {
+    height: 60,
+  },
+)
+
+const width = computed(() => Math.round(props.height * (602 / 170)))
+</script>
+
+<template>
+  <img
+    src="/logo.svg"
+    alt="npmx"
+    :width="width"
+    :height="height"
+    :style="{ width: `${width}px`, height: `${height}px` }"
+  />
+</template>