Merge branch 'main' into perf/ofetch-timeout

Author: OrbisK

CONTRIBUTING.md

@@ -301,6 +301,14 @@ For example to check if all Japanese translation keys are up-to-date, run:
 pnpm i18n:check ja-JP
 ```
 
+To automatically add missing keys with English placeholders, use `--fix`:
+
+```bash
+pnpm i18n:check:fix fr-FR
+```
+
+This will add missing keys with `"EN TEXT TO REPLACE: {english text}"` as placeholder values, making it easier to see what needs translation.
+
 #### Country variants (advanced)
 
 Most languages only need a single locale file. Country variants are only needed when you want to support regional differences (e.g., `es-ES` for Spain vs `es-419` for Latin America).
@@ -361,13 +369,17 @@ We recommend the [i18n-ally](https://marketplace.visualstudio.com/items?itemName
 
 The extension is included in our workspace recommendations, so VSCode should prompt you to install it.
 
-### Formatting with locale
+### Formatting numbers and dates
 
-When formatting numbers or dates that should respect the user's locale, pass the locale:
+Use vue-i18n's built-in formatters for locale-aware formatting:
 
-```typescript
-const { locale } = useI18n()
-const formatted = formatNumber(12345, locale.value) // "12,345" in en-US
+```vue
+<template>
+  <p>{{ $n(12345) }}</p>
+  <!-- "12,345" in en-US, "12 345" in fr-FR -->
+  <p>{{ $d(new Date()) }}</p>
+  <!-- locale-aware date -->
+</template>
 ```
 
 ## Testing

app/assets/main.css

@@ -463,6 +463,7 @@ html.light .shiki span {
   border-collapse: collapse;
   margin: 1.5rem 0;
   font-size: 0.875rem;
+  word-break: keep-all;
 }
 
 .readme-content th,

app/components/AppFooter.vue

@@ -13,7 +13,7 @@ const isHome = computed(() => route.name === 'index')
           <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
           <BuildEnvironment v-if="!isHome" footer />
         </div>
-        <div class="flex items-center gap-3 sm:gap-6">
+        <div class="flex flex-wrap items-center gap-x-3 sm:gap-6">
           <NuxtLink
             to="/about"
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"

app/components/AppHeader.vue

@@ -10,27 +10,29 @@ withDefaults(
 
 const { isConnected, npmUser } = useConnector()
 
-const router = useRouter()
-
 const showFullSearch = shallowRef(false)
 
-onKeyStroke(',', e => {
-  // Don't trigger if user is typing in an input
-  const target = e.target as HTMLElement
-  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-    return
-  }
+onKeyStroke(
+  ',',
+  e => {
+    // Don't trigger if user is typing in an input
+    const target = e.target as HTMLElement
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+      return
+    }
 
-  e.preventDefault()
-  router.push('/settings')
-})
+    e.preventDefault()
+    navigateTo('/settings')
+  },
+  { dedupe: true },
+)
 </script>
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="container h-14 flex items-center justify-start"
+      class="container min-h-14 flex items-center justify-start"
     >
       <!-- Start: Logo -->
       <div :class="{ 'hidden sm:block': showFullSearch }" class="flex-shrink-0">
@@ -83,18 +85,18 @@ onKeyStroke(',', e => {
       <!-- End: User status + GitHub -->
       <div
         :class="{ 'hidden sm:flex': showFullSearch }"
-        class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0"
+        class="flex-1 flex flex-wrap items-center justify-end sm:gap-3 ms-auto sm:ms-0"
       >
         <NuxtLink
           to="/about"
-          class="sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="px-2 py-1.5 sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
         >
           {{ $t('footer.about') }}
         </NuxtLink>
 
         <NuxtLink
           to="/settings"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-2 px-2 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}

app/components/BuildEnvironment.vue

@@ -3,6 +3,7 @@ defineProps<{
   footer?: boolean
 }>()
 
+const { locale } = useI18n()
 const buildInfo = useAppConfig().buildInfo
 </script>
 
@@ -13,7 +14,7 @@ const buildInfo = useAppConfig().buildInfo
     style="animation-delay: 0.05s"
   >
     <i18n-t keypath="built_at">
-      <NuxtTime :datetime="buildInfo.time" relative />
+      <NuxtTime :datetime="buildInfo.time" :locale="locale" relative />
     </i18n-t>
     <span>&middot;</span>
     <NuxtLink

app/components/CollapsibleSection.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Props {
+  title: string
+  isLoading?: boolean
+  headingLevel?: `h${number}`
+  id: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoading: false,
+  headingLevel: 'h2',
+})
+
+const appSettings = useSettings()
+
+const buttonId = `${props.id}-collapsible-button`
+const contentId = `${props.id}-collapsible-content`
+const headingId = `${props.id}-heading`
+
+const isOpen = ref(true)
+
+onPrehydrate(() => {
+  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const collapsed: string[] = settings?.sidebar?.collapsed || []
+  for (const id of collapsed) {
+    if (!document.documentElement.dataset.collapsed?.includes(id)) {
+      document.documentElement.dataset.collapsed = (
+        document.documentElement.dataset.collapsed +
+        ' ' +
+        id
+      ).trim()
+    }
+  }
+})
+
+onMounted(() => {
+  if (document?.documentElement) {
+    isOpen.value = !(document.documentElement.dataset.collapsed?.includes(props.id) ?? false)
+  }
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+
+  const removed = appSettings.settings.value.sidebar.collapsed.filter(c => c !== props.id)
+
+  if (isOpen.value) {
+    appSettings.settings.value.sidebar.collapsed = removed
+  } else {
+    removed.push(props.id)
+    appSettings.settings.value.sidebar.collapsed = removed
+  }
+
+  document.documentElement.dataset.collapsed =
+    appSettings.settings.value.sidebar.collapsed.join(' ')
+}
+
+const ariaLabel = computed(() => {
+  const action = isOpen.value ? 'Collapse' : 'Expand'
+  return props.title ? `${action} ${props.title}` : action
+})
+useHead({
+  style: [
+    {
+      innerHTML: `
+:root[data-collapsed~='${props.id}'] section[data-anchor-id='${props.id}'] .collapsible-content {
+  grid-template-rows: 0fr;
+}`,
+    },
+  ],
+})
+</script>
+
+<template>
+  <section class="scroll-mt-20" :data-anchor-id="id">
+    <div class="flex items-center justify-between mb-3">
+      <component
+        :is="headingLevel"
+        :id="headingId"
+        class="group text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2"
+      >
+        <button
+          :id="buttonId"
+          type="button"
+          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          :aria-expanded="isOpen"
+          :aria-controls="contentId"
+          :aria-label="ariaLabel"
+          @click="toggle"
+        >
+          <span
+            v-if="isLoading"
+            class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
+            aria-hidden="true"
+          />
+          <span
+            v-else
+            class="w-3 h-3 transition-transform duration-200"
+            :class="isOpen ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+            aria-hidden="true"
+          />
+        </button>
+
+        <a
+          :href="`#${id}`"
+          class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+        >
+          {{ title }}
+          <span
+            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            aria-hidden="true"
+          />
+        </a>
+      </component>
+
+      <!-- Actions slot for buttons or other elements -->
+      <slot name="actions" />
+    </div>
+
+    <div
+      :id="contentId"
+      class="grid ms-6 transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
+    >
+      <div class="min-h-0">
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>

app/components/PackageCard.vue

@@ -123,7 +123,7 @@ const emit = defineEmits<{
             <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
             <dd class="flex items-center gap-1.5">
               <span class="i-carbon:chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
-              <span class="font-mono">{{ formatNumber(result.downloads.weekly) }}/w</span>
+              <span class="font-mono">{{ $n(result.downloads.weekly) }}/w</span>
             </dd>
           </div>
         </dl>
@@ -158,7 +158,7 @@ const emit = defineEmits<{
         >
           <span class="i-carbon:chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
           <span class="font-mono text-xs">
-            {{ formatNumber(result.downloads.weekly) }} {{ $t('common.per_week') }}
+            {{ $n(result.downloads.weekly) }} {{ $t('common.per_week') }}
           </span>
         </div>
       </div>

app/components/PackageDependencies.vue

@@ -70,22 +70,11 @@ const sortedOptionalDependencies = computed(() => {
 <template>
   <div class="space-y-8">
     <!-- Dependencies -->
-    <section id="dependencies" v-if="sortedDependencies.length > 0" class="scroll-mt-20">
-      <h2
-        id="dependencies-heading"
-        class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
-      >
-        <a
-          href="#dependencies"
-          class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-        >
-          {{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
-          <span
-            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-            aria-hidden="true"
-          />
-        </a>
-      </h2>
+    <CollapsibleSection
+      v-if="sortedDependencies.length > 0"
+      id="dependencies"
+      :title="$t('package.dependencies.title', { count: sortedDependencies.length })"
+    >
       <ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
@@ -151,33 +140,14 @@ const sortedOptionalDependencies = computed(() => {
           </span>
         </li>
       </ul>
-      <button
-        v-if="sortedDependencies.length > 10 && !depsExpanded"
-        type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-        @click="depsExpanded = true"
-      >
-        {{ $t('package.dependencies.show_all', { count: sortedDependencies.length }) }}
-      </button>
-    </section>
+    </CollapsibleSection>
 
     <!-- Peer Dependencies -->
-    <section id="peer-dependencies" v-if="sortedPeerDependencies.length > 0" class="scroll-mt-20">
-      <h2
-        id="peer-dependencies-heading"
-        class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
-      >
-        <a
-          href="#peer-dependencies"
-          class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-        >
-          {{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
-          <span
-            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-            aria-hidden="true"
-          />
-        </a>
-      </h2>
+    <CollapsibleSection
+      v-if="sortedPeerDependencies.length > 0"
+      id="peer-dependencies"
+      :title="$t('package.peer_dependencies.title', { count: sortedPeerDependencies.length })"
+    >
       <ul
         class="space-y-1 list-none m-0 p-0"
         :aria-label="$t('package.peer_dependencies.list_label')"
@@ -223,31 +193,16 @@ const sortedOptionalDependencies = computed(() => {
       >
         {{ $t('package.peer_dependencies.show_all', { count: sortedPeerDependencies.length }) }}
       </button>
-    </section>
+    </CollapsibleSection>
 
     <!-- Optional Dependencies -->
-    <section
-      id="optional-dependencies"
+    <CollapsibleSection
       v-if="sortedOptionalDependencies.length > 0"
-      class="scroll-mt-20"
+      id="optional-dependencies"
+      :title="
+        $t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
+      "
     >
-      <h2
-        id="optional-dependencies-heading"
-        class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
-      >
-        <a
-          href="#optional-dependencies"
-          class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-        >
-          {{
-            $t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
-          }}
-          <span
-            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-            aria-hidden="true"
-          />
-        </a>
-      </h2>
       <ul
         class="space-y-1 list-none m-0 p-0"
         :aria-label="$t('package.optional_dependencies.list_label')"
@@ -286,6 +241,6 @@ const sortedOptionalDependencies = computed(() => {
           $t('package.optional_dependencies.show_all', { count: sortedOptionalDependencies.length })
         }}
       </button>
-    </section>
+    </CollapsibleSection>
   </div>
 </template>