chore: merge conflicts resolved

Author: vinnymac

.github/workflows/ci.yml

@@ -235,3 +235,8 @@ jobs:
 
       - name: 🌐 Check for missing or dynamic i18n keys
         run: pnpm i18n:report
+
+      - name: 🌐 Check i18n schema is up to date
+        run: |
+          pnpm i18n:schema
+          git diff --exit-code i18n/schema.json

.github/workflows/mirror-tangled.yml

@@ -0,0 +1,36 @@
+name: mirror
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - '*'
+
+permissions:
+  contents: read
+
+jobs:
+  mirror:
+    name: 🕸️ Mirror to Tangled
+    runs-on: ubuntu-24.04-arm
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        with:
+          fetch-depth: 0
+
+      - name: 🔑 Configure SSH
+        env:
+          TANGLED_SSH_KEY: ${{ secrets.TANGLED_SSH_KEY }}
+        run: |
+          mkdir -p ~/.ssh
+          echo "$TANGLED_SSH_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -t ed25519 tangled.org >> ~/.ssh/known_hosts 2>/dev/null
+
+      - name: ⬆︎ Push to Tangled
+        run: |
+          git remote add tangled git@tangled.org:npmx.dev/npmx.dev
+          git push tangled main --force
+          git push tangled --tags --force

app/components/AppHeader.vue

@@ -259,7 +259,7 @@ onKeyStroke(
           class="border-none"
           variant="button-secondary"
           :to="link.to"
-          :keyshortcut="link.keyshortcut"
+          :aria-keyshortcuts="link.keyshortcut"
         >
           {{ link.label }}
         </LinkBase>
@@ -270,7 +270,7 @@ onKeyStroke(
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
         type="button"
-        class="sm:hidden flex"
+        class="sm:hidden"
         :aria-label="$t('nav.open_menu')"
         :aria-expanded="showMobileMenu"
         @click="showMobileMenu = !showMobileMenu"

app/components/Button/Base.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    'disabled'?: boolean
-    'type'?: 'button' | 'submit'
-    'variant'?: 'primary' | 'secondary'
-    'size'?: 'small' | 'medium'
-    'keyshortcut'?: string
+    disabled?: boolean
+    type?: 'button' | 'submit'
+    variant?: 'primary' | 'secondary'
+    size?: 'small' | 'medium'
+    ariaKeyshortcuts?: string
+    block?: boolean
 
-    /**
-     * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
-     */
-    'aria-keyshortcuts'?: never
-
-    'classicon'?: string
+    classicon?: string
   }>(),
   {
     type: 'button',
@@ -32,11 +28,13 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group cursor-pointer gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
+      'inline-flex': !block,
+      'flex': block,
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(bg-fg text-bg/50))':
+      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant === 'primary',
@@ -51,20 +49,16 @@ defineExpose({
        */
       disabled ? true : undefined
     "
-    :aria-keyshortcuts="keyshortcut"
+    :aria-keyshortcuts="ariaKeyshortcuts"
   >
-    <span
-      v-if="classicon"
-      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
-      aria-hidden="true"
-    />
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <kbd
-      v-if="keyshortcut"
+      v-if="ariaKeyshortcuts"
       class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
-      {{ keyshortcut }}
+      {{ ariaKeyshortcuts }}
     </kbd>
   </button>
 </template>

app/components/Code/DirectoryListing.vue

@@ -76,13 +76,14 @@ const bytesFormatter = useBytesFormatter()
           class="border-b border-border hover:bg-bg-subtle transition-colors"
         >
           <td colspan="2">
-            <NuxtLink
+            <LinkBase
               :to="getCodeRoute(parentPath || undefined)"
-              class="flex items-center gap-2 py-2 px-4 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
+              class="py-2 px-4 font-mono text-sm w-full"
+              no-underline
+              classicon="i-carbon:folder text-yellow-600"
             >
-              <span class="i-carbon:folder w-4 h-4 text-yellow-600" />
-              <span>..</span>
-            </NuxtLink>
+              <span class="w-full flex justify-self-stretch items-center gap-2"> .. </span>
+            </LinkBase>
           </td>
         </tr>
 
@@ -93,24 +94,26 @@ const bytesFormatter = useBytesFormatter()
           class="border-b border-border hover:bg-bg-subtle transition-colors"
         >
           <td colspan="2">
-            <NuxtLink
+            <LinkBase
               :to="getCodeRoute(node.path)"
-              class="flex items-center gap-2 py-2 px-4 font-mono text-sm hover:text-fg transition-colors"
-              :class="node.type === 'directory' ? 'text-fg' : 'text-fg-muted'"
+              class="py-2 px-4 font-mono text-sm w-full"
+              no-underline
+              :classicon="
+                node.type === 'directory'
+                  ? 'i-carbon:folder text-yellow-600'
+                  : getFileIcon(node.name)
+              "
             >
-              <span
-                v-if="node.type === 'directory'"
-                class="i-carbon:folder w-4 h-4 text-yellow-600"
-              />
-              <span v-else class="w-4 h-4" :class="getFileIcon(node.name)" />
-              <span class="flex-1">{{ node.name }}</span>
-              <span
-                v-if="node.type === 'file' && node.size"
-                class="text-end font-mono text-xs text-fg-subtle"
-              >
-                {{ bytesFormatter.format(node.size) }}
+              <span class="w-full flex justify-self-stretch items-center gap-2">
+                <span class="flex-1">{{ node.name }}</span>
+                <span
+                  v-if="node.type === 'file' && node.size"
+                  class="text-end text-xs text-fg-subtle"
+                >
+                  {{ bytesFormatter.format(node.size) }}
+                </span>
               </span>
-            </NuxtLink>
+            </LinkBase>
           </td>
         </tr>
       </tbody>

app/components/Code/FileTree.vue

@@ -49,17 +49,14 @@ watch(
     <li v-for="node in tree" :key="node.path">
       <!-- Directory -->
       <template v-if="node.type === 'directory'">
-        <button
-          type="button"
-          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-start font-mono text-sm transition-colors hover:bg-bg-muted"
-          :class="isNodeActive(node) ? 'text-fg' : 'text-fg-muted'"
+        <ButtonBase
+          class="w-full justify-start! rounded-none! border-none!"
+          block
+          :aria-pressed="isNodeActive(node)"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
+          :classicon="isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
         >
-          <span
-            class="w-4 h-4 shrink-0 transition-transform"
-            :class="[isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right']"
-          />
           <span
             class="w-4 h-4 shrink-0"
             :class="
@@ -69,7 +66,7 @@ watch(
             "
           />
           <span class="truncate">{{ node.name }}</span>
-        </button>
+        </ButtonBase>
         <CodeFileTree
           v-if="isExpanded(node.path) && node.children"
           :tree="node.children"
@@ -82,15 +79,17 @@ watch(
 
       <!-- File -->
       <template v-else>
-        <NuxtLink
+        <LinkBase
+          variant="button-secondary"
           :to="getFileRoute(node.path)"
-          class="flex items-center gap-1.5 py-1.5 px-3 font-mono text-sm transition-colors hover:bg-bg-muted"
-          :class="currentPath === node.path ? 'bg-bg-muted text-fg' : 'text-fg-muted'"
+          :aria-current="currentPath === node.path"
+          class="w-full justify-start! rounded-none! border-none!"
+          block
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
+          :classicon="getFileIcon(node.name)"
         >
-          <span class="w-4 h-4 shrink-0" :class="getFileIcon(node.name)" />
           <span class="truncate">{{ node.name }}</span>
-        </NuxtLink>
+        </LinkBase>
       </template>
     </li>
   </ul>

app/components/Code/MobileTreeDrawer.vue

@@ -27,14 +27,13 @@ watch(isOpen, open => (isLocked.value = open))
 
 <template>
   <!-- Toggle button (mobile only) -->
-  <button
-    type="button"
-    class="md:hidden fixed bottom-4 inset-ie-4 z-40 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
+  <ButtonBase
+    variant="primary"
+    class="md:hidden fixed bottom-4 inset-ie-4 z-45"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
-  >
-    <span class="w-5 h-5" :class="isOpen ? 'i-carbon:close' : 'i-carbon:folder'" />
-  </button>
+    :classicon="isOpen ? 'i-carbon:close' : 'i-carbon:folder'"
+  />
 
   <!-- Backdrop -->
   <Transition
@@ -66,14 +65,11 @@ watch(isOpen, open => (isLocked.value = open))
       >
         <span class="font-mono text-sm text-fg-muted">{{ $t('code.files_label') }}</span>
         <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
-        <button
-          type="button"
-          class="text-fg-muted hover:text-fg transition-colors"
+        <ButtonBase
           :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
-        >
-          <span class="i-carbon:close w-5 h-5" />
-        </button>
+          classicon="i-carbon-close"
+        />
       </div>
       <CodeFileTree
         :tree="tree"

app/components/Code/Viewer.vue

@@ -67,6 +67,7 @@ watch(
       :style="{ '--line-digits': lineDigits }"
       aria-hidden="true"
     >
+      <!-- This needs to be a native <a> element, because `LinkBase` (or specifically `NuxtLink`) does not seem to work when trying to prevent default behavior (jumping to the anchor) -->
       <a
         v-for="lineNum in lineNumbers"
         :id="`L${lineNum}`"

app/components/CollapsibleSection.vue

@@ -103,7 +103,7 @@ useHead({
           />
         </button>
 
-        <LinkBase :to="`#${id}`" class="">
+        <LinkBase :to="`#${id}`">
           {{ title }}
         </LinkBase>
       </component>

app/components/Compare/ComparisonGrid.vue

@@ -40,13 +40,14 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
         <!-- Package columns -->
         <div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
           <span class="inline-flex items-center gap-1.5 truncate">
-            <NuxtLink
+            <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="link-subtle font-mono text-sm font-medium text-fg truncate"
+              class="text-sm truncate"
+              block
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
               {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
-            </NuxtLink>
+            </LinkBase>
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span
                 class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
@@ -79,13 +80,9 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
                 <p class="text-xs text-fg-muted">
                   <i18n-t keypath="compare.no_dependency.tooltip_description" tag="span">
                     <template #link>
-                      <a
-                        href="https://e18e.dev/docs/replacements/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-accent hover:underline"
-                        >{{ $t('compare.no_dependency.e18e_community') }}</a
-                      >
+                      <LinkBase to="https://e18e.dev/docs/replacements/">{{
+                        $t('compare.no_dependency.e18e_community')
+                      }}</LinkBase>
                     </template>
                   </i18n-t>
                 </p>