refactor(LinkBase/ButtonBase): add inline prop & rename size prop for buttons and links

.github/workflows/mirror-tangled.yml

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

.gitignore

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

.oxfmtignore

@@ -0,0 +1,2 @@
+# Docus MDC content - formatter breaks component syntax
+docs/content/**/*.md

CONTRIBUTING.md

@@ -789,10 +789,8 @@ Format: `type(scope): description`
 - `fix(i18n): update French translations`
 - `chore(deps): update vite to v6`
 
-Where front end changes are made, please include before and after screenshots in your pull request description.
-
 > [!NOTE]
-> Use lowercase letters in your pull request title. Individual commit messages within your PR don't need to follow this format since they'll be squashed.
+> 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.
 
 ### PR descriptions
 

README.md

@@ -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) 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/).
+> Want automatic redirects? Try the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension) (Chrome only for now).
 
 #### Not yet supported
 
@@ -159,7 +159,6 @@ 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! 🙏
 

app/app.vue

@@ -121,9 +121,9 @@ if (import.meta.client) {
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <NuxtPwaAssets />
-    <LinkBase to="#main-content" variant="button-primary" class="skip-link">{{
-      $t('common.skip_link')
-    }}</LinkBase>
+    <LinkBase to="#main-content" type="button" class="skip-link" size="sm">
+      {{ $t('common.skip_link') }}
+    </LinkBase>
 
     <AppHeader :show-logo="!isHomepage" />
 

app/components/AppFooter.vue

@@ -17,15 +17,12 @@ const showModal = () => modalRef.value?.showModal?.()
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
-          <LinkBase :to="{ name: 'about' }">
+          <LinkBase :to="{ name: 'about' }" size="xs">
             {{ $t('footer.about') }}
           </LinkBase>
-          <LinkBase :to="{ name: 'privacy' }">
+          <LinkBase :to="{ name: 'privacy' }" size="xs">
             {{ $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"
@@ -35,6 +32,7 @@ const showModal = () => modalRef.value?.showModal?.()
             {{ $t('footer.keyboard_shortcuts') }}
           </button>
 
+          <!-- Keyboard Shortcuts Modal -->
           <Modal
             ref="modalRef"
             :modalTitle="$t('footer.keyboard_shortcuts')"
@@ -92,16 +90,16 @@ const showModal = () => modalRef.value?.showModal?.()
               </li>
             </ul>
           </Modal>
-          <LinkBase to="https://docs.npmx.dev">
+          <LinkBase to="https://docs.npmx.dev" size="xs">
             {{ $t('footer.docs') }}
           </LinkBase>
-          <LinkBase to="https://repo.npmx.dev">
+          <LinkBase to="https://repo.npmx.dev" size="xs">
             {{ $t('footer.source') }}
           </LinkBase>
-          <LinkBase to="https://social.npmx.dev">
+          <LinkBase to="https://social.npmx.dev" size="xs">
             {{ $t('footer.social') }}
           </LinkBase>
-          <LinkBase to="https://chat.npmx.dev">
+          <LinkBase to="https://chat.npmx.dev" size="xs">
             {{ $t('footer.chat') }}
           </LinkBase>
         </div>

app/components/AppHeader.vue

@@ -64,14 +64,6 @@ 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',
-      },
     ],
   },
   {
@@ -265,9 +257,10 @@ onKeyStroke(
           v-for="link in desktopLinks"
           :key="link.name"
           class="border-none"
-          variant="button-secondary"
+          type="button"
           :to="link.to"
           :aria-keyshortcuts="link.keyshortcut"
+          size="sm"
         >
           {{ link.label }}
         </LinkBase>

app/components/AppLogo.vue

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

app/components/BuildEnvironment.vue

@@ -24,14 +24,15 @@ const buildTime = computed(() => new Date(buildInfo.value.time))
     <LinkBase
       v-if="buildInfo.env === 'release'"
       :to="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
+      size="sm"
     >
       v{{ buildInfo.version }}
     </LinkBase>
     <span v-else class="tracking-wider">{{ buildInfo.env }}</span>
 
     <template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
       <span>&middot;</span>
-      <LinkBase :to="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`">
+      <LinkBase :to="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`" size="xs">
         {{ buildInfo.shortCommit }}
       </LinkBase>
     </template>

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 { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'
+import { getFileIcon } from '~/utils/file-icons'
 
 const props = defineProps<{
   tree: PackageFileTree[]
@@ -80,15 +80,8 @@ 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>
@@ -105,18 +98,12 @@ 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/FileTree.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
-import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'
+import { getFileIcon } from '~/utils/file-icons'
 
 const props = defineProps<{
   tree: PackageFileTree[]
@@ -57,17 +57,14 @@ watch(
           @click="toggleDir(node.path)"
           :classicon="isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
         >
-          <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="w-4 h-4 shrink-0"
+            :class="
+              isExpanded(node.path)
+                ? 'i-carbon:folder-open text-yellow-500'
+                : 'i-carbon:folder text-yellow-600'
+            "
+          />
           <span class="truncate">{{ node.name }}</span>
         </ButtonBase>
         <CodeFileTree
@@ -83,21 +80,15 @@ watch(
       <!-- File -->
       <template v-else>
         <LinkBase
-          variant="button-secondary"
+          type="button"
           :to="getFileRoute(node.path)"
           :aria-current="currentPath === node.path"
           class="w-full justify-start! rounded-none! border-none!"
-          block
+          :inline="false"
+          size="sm"
           :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/Viewer.vue

@@ -57,32 +57,6 @@ watch(
   },
   { immediate: true },
 )
-
-// Use Nuxt's `navigateTo` for the rendered import links
-function handleImportLinkNavigate() {
-  if (!codeRef.value) return
-
-  const anchors = codeRef.value.querySelectorAll<HTMLAnchorElement>('a.import-link')
-  anchors.forEach(anchor => {
-    // NOTE: We do not need to remove previous listeners because we re-create the entire HTML content on each html update
-    anchor.addEventListener('click', event => {
-      if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return
-      const href = anchor.getAttribute('href')
-      if (href) {
-        event.preventDefault()
-        navigateTo(href)
-      }
-    })
-  })
-}
-
-watch(
-  () => props.html,
-  () => {
-    nextTick(handleImportLinkNavigate)
-  },
-  { immediate: true },
-)
 </script>
 
 <template>

app/components/CollapsibleSection.vue

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

app/components/Compare/ComparisonGrid.vue

@@ -42,8 +42,9 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
           <span class="inline-flex items-center gap-1.5 truncate">
             <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="text-sm truncate"
-              block
+              class="truncate"
+              :inline="false"
+              size="sm"
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
               {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
@@ -80,9 +81,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>
-                      <LinkBase to="https://e18e.dev/docs/replacements/">{{
-                        $t('compare.no_dependency.e18e_community')
-                      }}</LinkBase>
+                      <LinkBase to="https://e18e.dev/docs/replacements/" size="xs">
+                        {{ $t('compare.no_dependency.e18e_community') }}
+                      </LinkBase>
                     </template>
                   </i18n-t>
                 </p>

app/components/Compare/FacetCard.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-0"
+          class="relative font-mono text-xs text-fg-muted truncate flex-shrink min-w-0"
           :title="headers[index]"
         >
           {{ getShortName(headers[index] ?? '') }}
         </span>
 
         <!-- Value -->
-        <span class="relative min-w-0 text-end">
+        <span class="relative flex-shrink-0">
           <!-- Loading state -->
           <template v-if="isCellLoading(index)">
             <span

app/components/Compare/LineChart.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TrendsChart from '../Package/TrendsChart.vue'
+import DownloadAnalytics from '../Package/DownloadAnalytics.vue'
 
 const { packages } = defineProps<{
   packages: string[]
@@ -8,6 +8,6 @@ const { packages } = defineProps<{
 
 <template>
   <div class="font-mono">
-    <TrendsChart :package-names="packages" :in-modal="false" show-facet-selector />
+    <DownloadAnalytics :package-names="packages" :in-modal="false" />
   </div>
 </template>

app/components/Compare/PackageSelector.vue

@@ -89,8 +89,6 @@ function handleKeydown(e: KeyboardEvent) {
     } else if (hasMatchInPackages) {
       addPackage(inputValueTrim)
     }
-  } else if (e.key === 'Escape') {
-    inputValue.value = ''
   }
 }
 
@@ -187,7 +185,7 @@ function handleFocus() {
             :aria-label="$t('compare.no_dependency.add_column')"
             @click="addPackage(NO_DEPENDENCY_ID)"
           >
-            <span class="text-sm text-accent italic flex items-center gap-2">
+            <span class="text-sm text-accent italic flex items-center gap-2 block">
               <span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
               {{ $t('compare.no_dependency.typeahead_title') }}
             </span>
@@ -206,10 +204,7 @@ function handleFocus() {
             @click="addPackage(result.name)"
           >
             <span class="font-mono text-sm text-fg block">{{ result.name }}</span>
-            <span
-              v-if="result.description"
-              class="text-xs text-fg-muted truncate mt-0.5 w-full block"
-            >
+            <span v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
               {{ result.description }}
             </span>
           </ButtonBase>