Merge main into feat/deps-vulnerability

Author: danielroe

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

.github/workflows/semantic-pull-requests.yml

@@ -0,0 +1,35 @@
+name: chore
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+permissions: {}
+
+jobs:
+  semantic-pr:
+    permissions:
+      contents: read
+      pull-requests: read # for amannn/action-semantic-pull-request to analyze PRs
+      statuses: write # for amannn/action-semantic-pull-request to mark status of analyzed PR
+    if: github.repository == 'npmx-dev/npmx.dev'
+    runs-on: ubuntu-latest
+    name: semantic-pr
+    steps:
+      - name: Validate PR title
+        uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
+        with:
+          scopes: |
+            docs
+            i18n
+            deps
+          subjectPattern: ^(?![A-Z]).+$
+          subjectPatternError: |
+            The subject "{subject}" found in the pull request title "{title}"
+            didn't match the configured pattern. Please ensure that the subject
+            doesn't start with an uppercase character.
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

CONTRIBUTING.md

@@ -365,13 +365,27 @@ Make sure to read about [Playwright best practices](https://playwright.dev/docs/
 4. ensure CI checks pass (lint, type check, tests)
 5. request review from maintainers
 
-### Commit messages
+### Commit messages and PR titles
 
-Write clear, concise commit messages that explain the "why" behind changes:
+Write clear, concise PR titles that explain the "why" behind changes.
+
+We use [Conventional Commits](https://www.conventionalcommits.org/). Since we squash on merge, the PR title becomes the commit message in `main`, so it's important to get it right.
+
+Format: `type(scope): description`
+
+**Types:** `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore`, `revert`
+
+**Scopes (optional):** `docs`, `i18n`, `deps`
+
+**Examples:**
 
 - `fix: resolve search pagination issue`
 - `feat: add package version comparison`
-- `docs: update installation instructions`
+- `fix(i18n): update French translations`
+- `chore(deps): update vite to v6`
+
+> [!NOTE]
+> The subject must start with a lowercase letter. Individual commit messages within your PR don't need to follow this format since they'll be squashed.
 
 ## Pre-commit hooks
 

app/assets/main.css

@@ -157,6 +157,16 @@ button {
   top: 0;
 }
 
+/* Shiki theme colors */
+html.light .shiki,
+html.light .shiki span {
+  color: var(--shiki-light) !important;
+  background-color: var(--shiki-light-bg) !important;
+  font-style: var(--shiki-light-font-style) !important;
+  font-weight: var(--shiki-light-font-weight) !important;
+  text-decoration: var(--shiki-light-text-decoration) !important;
+}
+
 /* README prose styling */
 .readme-content {
   color: var(--fg-muted);
@@ -238,7 +248,7 @@ button {
 .readme-content pre,
 .readme-content .shiki {
   background: oklch(0.145 0 0) !important;
-  border: 1px solid oklch(0.2686 0 0);
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 1rem;
   overflow-x: auto;

app/components/AppFooter.vue

@@ -89,6 +89,14 @@ onMounted(() => {
         <!-- On mobile, show disclaimer here instead of tagline -->
         <p class="text-xs text-fg-muted m-0 sm:hidden">{{ $t('non_affiliation_disclaimer') }}</p>
         <div class="flex items-center gap-4 sm:gap-6">
+          <a
+            href="https://docs.npmx.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link-subtle font-mono text-xs min-h-11 min-w- flex items-center"
+          >
+            {{ $t('footer.docs') }}
+          </a>
           <a
             href="https://repo.npmx.dev"
             target="_blank"

app/components/ClaimPackageModal.vue

@@ -160,7 +160,7 @@ const connectorModalOpen = shallowRef(false)
               <button
                 type="button"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                :aria-label="$t('claim.modal.close')"
+                :aria-label="$t('common.close')"
                 @click="open = false"
               >
                 <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
@@ -203,7 +203,7 @@ const connectorModalOpen = shallowRef(false)
                   class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                   @click="open = false"
                 >
-                  {{ $t('claim.modal.close') }}
+                  {{ $t('common.close') }}
                 </button>
               </div>
             </div>
@@ -395,7 +395,7 @@ const connectorModalOpen = shallowRef(false)
                 class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                 @click="open = false"
               >
-                {{ $t('claim.modal.close') }}
+                {{ $t('common.close') }}
               </button>
             </div>
 
@@ -412,7 +412,7 @@ const connectorModalOpen = shallowRef(false)
                 class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                 @click="checkAvailability"
               >
-                {{ $t('claim.modal.retry') }}
+                {{ $t('common.retry') }}
               </button>
             </div>
           </div>

app/components/ConnectorModal.vue

@@ -83,7 +83,7 @@ watch(open, isOpen => {
               <button
                 type="button"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                :aria-label="$t('connector.modal.close')"
+                :aria-label="$t('common.close')"
                 @click="open = false"
               >
                 <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />

app/components/PackageDependencies.vue

@@ -64,9 +64,26 @@ const sortedOptionalDependencies = computed(() => {
 <template>
   <div class="space-y-8">
     <!-- Dependencies -->
-    <section v-if="sortedDependencies.length > 0" aria-labelledby="dependencies-heading">
-      <h2 id="dependencies-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
-        {{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
+    <section
+      id="dependencies"
+      v-if="sortedDependencies.length > 0"
+      aria-labelledby="dependencies-heading"
+      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>
       <ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
         <li
@@ -131,12 +148,26 @@ const sortedOptionalDependencies = computed(() => {
     </section>
 
     <!-- Peer Dependencies -->
-    <section v-if="sortedPeerDependencies.length > 0" aria-labelledby="peer-dependencies-heading">
+    <section
+      id="peer-dependencies"
+      v-if="sortedPeerDependencies.length > 0"
+      aria-labelledby="peer-dependencies-heading"
+      class="scroll-mt-20"
+    >
       <h2
         id="peer-dependencies-heading"
-        class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
+        class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
       >
-        {{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
+        <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>
       <ul
         class="space-y-1 list-none m-0 p-0"
@@ -186,16 +217,27 @@ const sortedOptionalDependencies = computed(() => {
 
     <!-- Optional Dependencies -->
     <section
+      id="optional-dependencies"
       v-if="sortedOptionalDependencies.length > 0"
       aria-labelledby="optional-dependencies-heading"
+      class="scroll-mt-20"
     >
       <h2
         id="optional-dependencies-heading"
-        class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
+        class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
       >
-        {{
-          $t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
-        }}
+        <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"

app/components/PackageDownloadAnalytics.vue

@@ -191,6 +191,16 @@ function safeMax(a: string, b: string): string {
   return a.localeCompare(b) >= 0 ? a : b
 }
 
+function extractDates(dateLabel: string) {
+  if (typeof dateLabel !== 'string') return []
+
+  const parts = dateLabel.trim().split(/\s+/).filter(Boolean)
+
+  if (parts.length < 2) return []
+
+  return [parts[0], parts[parts.length - 1]]
+}
+
 /**
  * Two-phase state:
  * - selectedGranularity: immediate UI
@@ -448,17 +458,26 @@ const config = computed(() => ({
       },
       callbacks: {
         img: ({ imageUri }: { imageUri: string }) => {
-          loadFile(imageUri, `${packageName}-${selectedGranularity.value}.png`)
+          loadFile(
+            imageUri,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.png`,
+          )
         },
         csv: (csvStr: string) => {
           const blob = new Blob([csvStr.replace('data:text/csv;charset=utf-8,', '')])
           const url = URL.createObjectURL(blob)
-          loadFile(url, `${packageName}-${selectedGranularity.value}.csv`)
+          loadFile(
+            url,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.csv`,
+          )
           URL.revokeObjectURL(url)
         },
         svg: ({ blob }: { blob: Blob }) => {
           const url = URL.createObjectURL(blob)
-          loadFile(url, `${packageName}-${selectedGranularity.value}.svg`)
+          loadFile(
+            url,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.svg`,
+          )
           URL.revokeObjectURL(url)
         },
       },
@@ -512,6 +531,13 @@ const config = computed(() => ({
     },
     zoom: {
       maxWidth: 500,
+      customFormat:
+        displayedGranularity.value !== 'weekly'
+          ? undefined
+          : ({ absoluteIndex, side }: { absoluteIndex: number; side: 'left' | 'right' }) => {
+              const parts = extractDates(chartData.value.dates[absoluteIndex] ?? '')
+              return side === 'left' ? parts[0] : parts.at(-1)
+            },
       highlightColor: isDarkMode.value ? '#2A2A2A' : '#E1E5E8',
       minimap: {
         show: true,

app/components/PackageMaintainers.vue

@@ -153,9 +153,23 @@ watch(
 </script>
 
 <template>
-  <section v-if="maintainers?.length" aria-labelledby="maintainers-heading">
-    <h2 id="maintainers-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
-      {{ $t('package.maintainers.title') }}
+  <section
+    id="maintainers"
+    v-if="maintainers?.length"
+    aria-labelledby="maintainers-heading"
+    class="scroll-mt-20"
+  >
+    <h2 id="maintainers-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
+      <a
+        href="#maintainers"
+        class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+      >
+        {{ $t('package.maintainers.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>
     </h2>
     <ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">
       <li