Merge branch 'main' into renovate/nuxt

Author: danielroe

.storybook/handlers.ts

@@ -91,3 +91,68 @@ export const pdsUsersHandler = http.get('/api/atproto/pds-users', () => {
     },
   ])
 })
+
+export const i18nStatusHandler = http.get('/lunaria/status.json', () => {
+  return HttpResponse.json({
+    generatedAt: '2026-01-22T10:07:07.000Z',
+    sourceLocale: {
+      lang: 'en',
+      label: 'English',
+      totalKeys: 500,
+    },
+    locales: [
+      {
+        lang: 'en-GB',
+        label: 'English (UK)',
+        dir: 'ltr',
+        totalKeys: 500,
+        completedKeys: 423,
+        percentComplete: 84,
+        missingKeys: [
+          'settings.background_themes.label',
+          'settings.enable_graph_pulse_loop',
+          'settings.enable_graph_pulse_loop_description',
+          'settings.data_source.algolia_description',
+          'settings.data_source.npm_description',
+          'i18n.contribute_hint',
+          'i18n.copy_keys',
+        ],
+        githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/en-GB.json',
+        githubHistoryUrl:
+          'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/en-GB.json',
+      },
+      {
+        lang: 'fr-FR',
+        label: 'Français',
+        dir: 'ltr',
+        totalKeys: 500,
+        completedKeys: 423,
+        percentComplete: 84,
+        missingKeys: [
+          'settings.background_themes.label',
+          'settings.enable_graph_pulse_loop',
+          'settings.enable_graph_pulse_loop_description',
+          'settings.data_source.algolia_description',
+          'settings.data_source.npm_description',
+          'i18n.contribute_hint',
+          'i18n.copy_keys',
+        ],
+        githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/fr-FR.json',
+        githubHistoryUrl:
+          'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/fr-FR.json',
+      },
+      {
+        lang: 'de-DE',
+        label: 'Deutsch',
+        dir: 'ltr',
+        totalKeys: 500,
+        completedKeys: 500,
+        percentComplete: 100,
+        missingKeys: [],
+        githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/de-DE.json',
+        githubHistoryUrl:
+          'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/de-DE.json',
+      },
+    ],
+  })
+})

.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,16 +10,6 @@ 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()
 

app/components/Package/TrendsChart.vue

@@ -1540,7 +1540,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
           const rows = items
             .map((d: Record<string, any>) => {
               const label = String(d?.name ?? '').trim()
-              const raw = Number(d?.value ?? 0)
+              const raw = Math.round(Number(d?.value ?? 0))
               const v = compactNumberFormatter.value.format(Number.isFinite(raw) ? raw : 0)
 
               if (!hasMultipleItems) {

app/composables/useClipboardAsync.ts

@@ -0,0 +1,41 @@
+import type { ShallowRef } from 'vue'
+
+type UseClipboardAsyncReturn = {
+  copy: () => void
+  copied: ShallowRef<boolean>
+}
+
+type UseClipboardAsyncOptions = {
+  copiedDuring: number
+}
+
+export function useClipboardAsync(
+  fn: () => Promise<string>,
+  options?: UseClipboardAsyncOptions,
+): UseClipboardAsyncReturn {
+  const copied = shallowRef(false)
+  const timeout = useTimeoutFn(() => (copied.value = false), options?.copiedDuring ?? 0, {
+    immediate: false,
+  })
+
+  async function copy() {
+    const asyncClipboard = new ClipboardItem({
+      'text/plain': fn().then(text => {
+        return new Blob([text], { type: 'text/plain' })
+      }),
+    })
+
+    try {
+      await navigator.clipboard.write([asyncClipboard])
+      copied.value = true
+      timeout.start()
+    } catch {
+      copied.value = false
+    }
+  }
+
+  return {
+    copy,
+    copied,
+  }
+}

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

@@ -96,26 +96,22 @@ const {
 )
 
 //copy README file as Markdown
-const { copied: copiedReadme, copy: copyReadme } = useClipboard({
-  source: () => '',
-  copiedDuring: 2000,
-})
+const { copied: copiedReadme, copy: copyReadme } = useClipboardAsync(
+  async () => {
+    await fetchReadmeMarkdown()
+    return readmeMarkdownData.value?.markdown ?? ''
+  },
+  {
+    copiedDuring: 2000,
+  },
+)
 
 function prefetchReadmeMarkdown() {
   if (readmeMarkdownStatus.value === 'idle') {
     fetchReadmeMarkdown()
   }
 }
 
-async function copyReadmeHandler() {
-  await fetchReadmeMarkdown()
-
-  const markdown = readmeMarkdownData.value?.markdown
-  if (!markdown) return
-
-  await copyReadme(markdown)
-}
-
 // Track active TOC item based on scroll position
 const tocItems = computed(() => readmeData.value?.toc ?? [])
 const { activeId: activeTocId } = useActiveTocItem(tocItems)
@@ -1019,7 +1015,7 @@ const showSkeleton = shallowRef(false)
                 <ButtonBase
                   @mouseenter="prefetchReadmeMarkdown"
                   @focus="prefetchReadmeMarkdown"
-                  @click="copyReadmeHandler()"
+                  @click="copyReadme"
                   :aria-pressed="copiedReadme"
                   :aria-label="
                     copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')

app/pages/settings.stories.ts

@@ -0,0 +1,55 @@
+import Settings from './settings.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import { userEvent, expect } from 'storybook/test'
+import { pageDecorator } from '../../.storybook/decorators'
+import { i18nStatusHandler } from '../../.storybook/handlers'
+
+const meta = {
+  component: Settings,
+  globals: {
+    locale: 'en-US',
+  },
+  beforeEach: () => localStorage.removeItem('npmx-settings'),
+  parameters: {
+    layout: 'fullscreen',
+    msw: {
+      handlers: [i18nStatusHandler],
+    },
+  },
+  decorators: [pageDecorator],
+} satisfies Meta<typeof Settings>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** English locale (default). The Language section shows a GitHub link to help translate the site. */
+export const Default: Story = {}
+
+export const NpmRegistryDataSource: Story = {
+  play: async ({ canvas, step }) => {
+    await step('Select npm registry as the data source', async () => {
+      const select = await canvas.findByRole('combobox', { name: /data source/i })
+      await userEvent.selectOptions(select, 'npm')
+      await expect(select).toHaveValue('npm')
+    })
+  },
+}
+
+/** Non-English locale with incomplete translations. The Language section shows `SettingsTranslationHelper` with a progress bar and list of missing translation keys. `/lunaria/status.json` is intercepted by MSW to provide mock translation status data. */
+export const NonEnglishTranslationHelper: Story = {
+  globals: {
+    locale: 'fr-FR',
+  },
+}
+
+/** Non-English locale without translations API response. The Language section shows a GitHub link to help translate the site. */
+export const WithoutTranslationHelper: Story = {
+  globals: {
+    locale: 'fr-FR',
+  },
+  parameters: {
+    msw: {
+      handlers: [],
+    },
+  },
+}

nuxt.config.ts

@@ -15,7 +15,8 @@ export default defineNuxtConfig({
     '@vite-pwa/nuxt',
     '@vueuse/nuxt',
     '@nuxtjs/i18n',
-    ...(isStorybook ? [] : ['@nuxt/fonts', '@nuxtjs/color-mode']),
+    '@nuxtjs/color-mode',
+    ...(isStorybook ? [] : ['@nuxt/fonts']),
   ],
 
   $test: {

server/api/registry/timeline/sizes/[...pkg].get.ts

@@ -1,3 +1,5 @@
+import { getVersions } from 'fast-npm-meta'
+
 const DEFAULT_LIMIT = 25
 
 export interface TimelineSizeEntry {
@@ -39,11 +41,11 @@ export default defineCachedEventHandler(
     const limit = Math.max(1, Math.min(100, Number(query.limit) || DEFAULT_LIMIT))
 
     try {
-      const packument = await fetchNpmPackage(packageName)
+      const { versions, time } = await getVersions(packageName)
 
-      const allVersions = Object.keys(packument.versions)
-        .filter(v => packument.time[v])
-        .sort((a, b) => Date.parse(packument.time[b]!) - Date.parse(packument.time[a]!))
+      const allVersions = versions
+        .filter(v => time[v])
+        .sort((a, b) => Date.parse(time[b]!) - Date.parse(time[a]!))
 
       const pageVersions = allVersions.slice(offset, offset + limit)