Merge branch 'main' into feat-change-i18n-configuration

# Conflicts:
#	package.json
#	pnpm-lock.yaml

Author: userquin

.github/workflows/lunaria.yml

@@ -0,0 +1,41 @@
+name: lunaria
+
+on:
+  # Trigger the workflow every time a pull request is opened or synchronized at the target `main` branch
+  pull_request_target:
+    types: [opened, synchronize]
+
+# Automatically cancel in-progress actions on the same branch
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request_target' && github.head_ref || github.ref }}
+  cancel-in-progress: true
+
+# Allow this job to clone the repository and comment on the pull request
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  lunaria-overview:
+    name: Generate Lunaria Overview
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          # Necessary for Lunaria to work properly
+          # Makes the action clone the entire git history
+          fetch-depth: 0
+
+      - run: corepack enable
+      - uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: Generate Lunaria Overview
+        uses: lunariajs/action@v1-prerelease

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

@@ -6,7 +6,7 @@ const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disco
 
 const tokenInput = shallowRef('')
 const portInput = shallowRef('31415')
-const copied = shallowRef(false)
+const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
 async function handleConnect() {
   const port = Number.parseInt(portInput.value, 10) || 31415
@@ -26,11 +26,7 @@ function copyCommand() {
   if (portInput.value !== '31415') {
     command += ` --port ${portInput.value}`
   }
-  navigator.clipboard.writeText(command)
-  copied.value = true
-  setTimeout(() => {
-    copied.value = false
-  }, 2000)
+  copy(command)
 }
 
 const selectedPM = useSelectedPackageManager()
@@ -83,7 +79,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" />
@@ -162,8 +158,7 @@ watch(open, isOpen => {
                     type="password"
                     name="connector-token"
                     :placeholder="$t('connector.modal.token_placeholder')"
-                    autocomplete="off"
-                    spellcheck="false"
+                    v-bind="noCorrect"
                     class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                   />
                 </div>

app/components/OrgMembersPanel.vue

@@ -327,7 +327,7 @@ watch(lastExecutionTime, () => {
           type="search"
           name="members-search"
           :placeholder="$t('org.members.filter_placeholder')"
-          autocomplete="off"
+          v-bind="noCorrect"
           class="w-full pl-7 pr-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         />
       </div>
@@ -512,8 +512,7 @@ watch(lastExecutionTime, () => {
             type="text"
             name="new-member-username"
             :placeholder="$t('org.members.username_placeholder')"
-            autocomplete="off"
-            spellcheck="false"
+            v-bind="noCorrect"
             class="w-full px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
           />
           <div class="flex items-center gap-2">

app/components/OrgTeamsPanel.vue

@@ -296,7 +296,7 @@ watch(lastExecutionTime, () => {
           type="search"
           name="teams-search"
           :placeholder="$t('org.teams.filter_placeholder')"
-          autocomplete="off"
+          v-bind="noCorrect"
           class="w-full pl-7 pr-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         />
       </div>
@@ -453,8 +453,7 @@ watch(lastExecutionTime, () => {
                 type="text"
                 :name="`add-user-${teamName}`"
                 :placeholder="$t('org.teams.username_placeholder')"
-                autocomplete="off"
-                spellcheck="false"
+                v-bind="noCorrect"
                 class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
               />
               <button
@@ -510,8 +509,7 @@ watch(lastExecutionTime, () => {
               type="text"
               name="new-team-name"
               :placeholder="$t('org.teams.team_name_placeholder')"
-              autocomplete="off"
-              spellcheck="false"
+              v-bind="noCorrect"
               class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-r text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
             />
           </div>

app/components/PackageDependencies.vue

@@ -48,9 +48,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
@@ -99,12 +116,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"
@@ -154,16 +185,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

@@ -487,7 +487,9 @@ const config = computed(() => ({
       stroke: isDarkMode.value ? '#4A4A4A' : '#a3a3a3',
       labels: {
         axis: {
-          yLabel: $t('package.downloads.y_axis_label', { granularity: selectedGranularity.value }),
+          yLabel: $t('package.downloads.y_axis_label', {
+            granularity: $t(`package.downloads.granularity_${selectedGranularity.value}`),
+          }),
           xLabel: packageName,
           yLabelOffsetX: 12,
           fontSize: 24,

app/components/PackageListControls.vue

@@ -66,7 +66,7 @@ const showFilteredCount = computed(() => {
         v-model="filterValue"
         type="search"
         :placeholder="placeholder ?? $t('package.list.filter_placeholder')"
-        autocomplete="off"
+        v-bind="noCorrect"
         class="w-full bg-bg-subtle border border-border rounded-lg pl-10 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
       />
     </div>