Merge remote-tracking branch 'origin/main' into test/mock-connector

Author: danielroe

.github/workflows/mirror-tangled.yml

@@ -13,6 +13,7 @@ permissions:
 jobs:
   mirror:
     name: 🕸️ Mirror to Tangled
+    if: ${{ github.repository == 'npmx-dev/npmx.dev' }}
     runs-on: ubuntu-24.04-arm
 
     steps:

.gitignore

@@ -39,6 +39,7 @@ test-results/
 
 # generated files
 shared/types/lexicons
+file-tree-sprite.svg
 
 **/__screenshots__/**
 

.oxfmtignore

@@ -116,7 +116,7 @@ npmx.dev supports npm permalinks – just replace `npmjs.com` with `npmx.dev
 | `npmjs.com/org/nuxt`            | [`npmx.dev/org/nuxt`](https://npmx.dev/org/nuxt)                       |
 
 > [!TIP]
-> Want automatic redirects? Try the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension) (Chrome only for now).
+> Want automatic redirects? Try the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension) (Chrome only for now) or the separate [npmx-redirect extension](https://github.com/iaverages/npmx-redirect) for [Chrome](https://chromewebstore.google.com/detail/lbhjgfgpnlihfmobnohoipeljollhlnb) / [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/npmx-redirect/).
 
 #### Not yet supported
 
@@ -159,6 +159,7 @@ We welcome contributions – please do feel free to explore the project and
 - [nxjt](https://nxjt.netlify.app) – npmx Jump To: Quickly navigate to npmx common webpages.
 - [npmx-weekly](https://npmx-weekly.trueberryless.org/) – A weekly newsletter for the npmx ecosystem. Add your own content via suggestions in the weekly PR on [GitHub](https://github.com/trueberryless-org/npmx-weekly/pulls?q=is%3Aopen+is%3Apr+label%3A%22%F0%9F%95%94+weekly+post%22).
 - [npmx-digest](https://npmx-digest.trueberryless.org/) – An automated news aggregation website that summarizes npmx activity from GitHub and Bluesky every 8 hours.
+- [npmx-redirect](https://github.com/iaverages/npmx-redirect) – Browser extension that automatically redirects npmjs.com URLs to npmx.dev.
 
 If you're building something cool, let us know! 🙏
 

README.md

@@ -23,6 +23,9 @@ const showModal = () => modalRef.value?.showModal?.()
           <LinkBase :to="{ name: 'privacy' }">
             {{ $t('privacy_policy.title') }}
           </LinkBase>
+          <LinkBase :to="{ name: 'accessibility' }">
+            {{ $t('a11y.footer_title') }}
+          </LinkBase>
           <button
             type="button"
             class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"

app/components/AppFooter.vue

@@ -64,6 +64,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         external: false,
         iconClass: 'i-carbon:security',
       },
+      {
+        name: 'Accessibility',
+        label: $t('a11y.title'),
+        to: { name: 'accessibility' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-carbon:accessibility-alt',
+      },
     ],
   },
   {
@@ -172,7 +180,7 @@ onKeyStroke(
     for (const link of desktopLinks.value) {
       if (link.to && link.keyshortcut && isKeyWithoutModifiers(e, link.keyshortcut)) {
         e.preventDefault()
-        navigateTo(link.to.name)
+        navigateTo(link.to)
         break
       }
     }

app/components/AppHeader.vue

@@ -24,6 +24,7 @@ defineProps<{
       font-size="420"
       font-weight="500"
       text-anchor="middle"
+      style="user-select: none"
     >
       <tspan>/</tspan>
     </text>

app/components/AppLogo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
-import { getFileIcon } from '~/utils/file-icons'
+import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'
 
 const props = defineProps<{
   tree: PackageFileTree[]
@@ -80,8 +80,15 @@ const bytesFormatter = useBytesFormatter()
               :to="getCodeRoute(parentPath || undefined)"
               class="py-2 px-4 font-mono text-sm w-full"
               no-underline
-              classicon="i-carbon:folder text-yellow-600"
             >
+              <svg
+                class="size-[1em] me-1 shrink-0 text-yellow-600"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <use :href="`/file-tree-sprite.svg#${ADDITIONAL_ICONS['folder']}`" />
+              </svg>
               <span class="w-full flex justify-self-stretch items-center gap-2"> .. </span>
             </LinkBase>
           </td>
@@ -98,12 +105,18 @@ const bytesFormatter = useBytesFormatter()
               :to="getCodeRoute(node.path)"
               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)
-              "
             >
+              <svg
+                class="size-[1em] me-1 shrink-0"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+                :class="node.type === 'directory' ? 'text-yellow-600' : undefined"
+                aria-hidden="true"
+              >
+                <use
+                  :href="`/file-tree-sprite.svg#${node.type === 'directory' ? ADDITIONAL_ICONS['folder'] : getFileIcon(node.name)}`"
+                />
+              </svg>
               <span class="w-full flex justify-self-stretch items-center gap-2">
                 <span class="flex-1">{{ node.name }}</span>
                 <span

app/components/Code/DirectoryListing.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
-import { getFileIcon } from '~/utils/file-icons'
+import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'
 
 const props = defineProps<{
   tree: PackageFileTree[]
@@ -57,14 +57,17 @@ watch(
           @click="toggleDir(node.path)"
           :classicon="isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
         >
-          <span
-            class="w-4 h-4 shrink-0"
-            :class="
-              isExpanded(node.path)
-                ? 'i-carbon:folder-open text-yellow-500'
-                : 'i-carbon:folder text-yellow-600'
-            "
-          />
+          <svg
+            class="size-[1em] me-1 shrink-0"
+            :class="isExpanded(node.path) ? 'text-yellow-500' : 'text-yellow-600'"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <use
+              :href="`/file-tree-sprite.svg#${isExpanded(node.path) ? ADDITIONAL_ICONS['folder-open'] : ADDITIONAL_ICONS['folder']}`"
+            />
+          </svg>
           <span class="truncate">{{ node.name }}</span>
         </ButtonBase>
         <CodeFileTree
@@ -86,8 +89,15 @@ watch(
           class="w-full justify-start! rounded-none! border-none!"
           block
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
-          :classicon="getFileIcon(node.name)"
         >
+          <svg
+            class="size-[1em] me-1 shrink-0"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <use :href="`/file-tree-sprite.svg#${getFileIcon(node.name)}`" />
+          </svg>
           <span class="truncate">{{ node.name }}</span>
         </LinkBase>
       </template>

app/components/Code/FileTree.vue

@@ -101,14 +101,14 @@ function getShortName(header: string): string {
 
         <!-- Package name -->
         <span
-          class="relative font-mono text-xs text-fg-muted truncate flex-shrink min-w-0"
+          class="relative font-mono text-xs text-fg-muted truncate flex-shrink-0"
           :title="headers[index]"
         >
           {{ getShortName(headers[index] ?? '') }}
         </span>
 
         <!-- Value -->
-        <span class="relative flex-shrink-0">
+        <span class="relative min-w-0 text-end">
           <!-- Loading state -->
           <template v-if="isCellLoading(index)">
             <span