Merge branch 'main' into package-card-rtl

Author: userquin

.github/workflows/autofix.yml

@@ -42,7 +42,8 @@ jobs:
       - name: 🏃 Update component test snapshots
         run: pnpm test:nuxt -u
 
-      - name: 🖥️ Update browser test snapshots
-        run: pnpm test:browser --update-snapshots
+      # TODO: re-enable when we have snapshots in browser tests
+      # - name: 🖥️ Update browser test snapshots
+      #   run: pnpm test:browser --update-snapshots
 
       - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27

CONTRIBUTING.md

@@ -189,6 +189,18 @@ import { hasProtocol } from 'ufo'
 | Constants        | SCREAMING_SNAKE_CASE     | `NPM_REGISTRY`, `ALLOWED_TAGS` |
 | Types/Interfaces | PascalCase               | `NpmSearchResponse`            |
 
+> [!TIP]
+> Exports in `app/composables/`, `app/utils/`, and `server/utils/` are auto-imported by Nuxt. To prevent [knip](https://knip.dev/) from flagging them as unused, add a `@public` JSDoc annotation:
+>
+> ```typescript
+> /**
+>  * @public
+>  */
+> export function myAutoImportedFunction() {
+>   // ...
+> }
+> ```
+
 ### Vue components
 
 - Use Composition API with `<script setup lang="ts">`
@@ -230,7 +242,7 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
 ### Approach
 
 - All user-facing strings should use translation keys via `$t()` in templates and script
-- Translation files live in `i18n/locales/` (e.g., `en-US.json`)
+- Translation files live in [`i18n/locales/`](i18n/locales) (e.g., `en-US.json`)
 - We use the `no_prefix` strategy (no `/en-US/` or `/fr-FR/` in URLs)
 - Locale preference is stored in cookies and respected on subsequent visits
 

app/app.vue

@@ -15,6 +15,10 @@ useHead({
   },
 })
 
+if (import.meta.server) {
+  setJsonLd(createWebSiteSchema())
+}
+
 // Global keyboard shortcut: "/" focuses search or navigates to search page
 function handleGlobalKeydown(e: KeyboardEvent) {
   const target = e.target as HTMLElement

app/assets/main.css

@@ -281,6 +281,9 @@ html.light .shiki span {
   white-space: pre;
   word-break: normal;
   overflow-wrap: normal;
+  /* Makes unicode and ascii art work properly */
+  line-height: 1.25;
+  display: inline-block;
 }
 
 .readme-content ul,

app/components/AccentColorPicker.vue

@@ -5,25 +5,37 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 </script>
 
 <template>
-  <div role="listbox" :aria-label="$t('settings.accent_colors')" class="flex items-center gap-4">
-    <button
+  <fieldset class="flex items-center gap-4">
+    <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
+    <label
       v-for="color in accentColors"
       :key="color.id"
-      type="button"
-      role="option"
-      :aria-selected="selectedAccentColor === color.id"
-      :aria-label="color.name"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring aria-selected:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
       :style="{ backgroundColor: color.value }"
-      @click="setAccentColor(color.id)"
-    />
-    <button
-      type="button"
-      :aria-label="$t('settings.clear_accent')"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
-      @click="setAccentColor(null)"
     >
+      <input
+        type="radio"
+        name="accent-color"
+        class="sr-only"
+        :value="color.id"
+        :checked="selectedAccentColor === color.id"
+        :aria-label="color.name"
+        @change="setAccentColor(color.id)"
+      />
+    </label>
+    <label
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-accent-fallback"
+    >
+      <input
+        type="radio"
+        name="accent-color"
+        class="sr-only"
+        value=""
+        :checked="selectedAccentColor === null"
+        :aria-label="$t('settings.clear_accent')"
+        @change="setAccentColor(null)"
+      />
       <span class="i-carbon-error size-4 text-bg" aria-hidden="true" />
-    </button>
-  </div>
+    </label>
+  </fieldset>
 </template>

app/components/AppFooter.vue

@@ -1,8 +1,10 @@
 <template>
   <footer class="border-t border-border mt-auto">
     <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
-      <div class="flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-4">
-        <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>
+      <div
+        class="flex flex-col sm:flex-row items-center sm:items-baseline justify-between gap-2 sm:gap-4"
+      >
+        <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
         <div class="flex items-center gap-3 sm:gap-6">
           <NuxtLink
             to="/about"
@@ -17,7 +19,7 @@
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.docs') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://repo.npmx.dev"
@@ -26,7 +28,7 @@
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.source') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://social.npmx.dev"
@@ -35,7 +37,7 @@
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.social') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://chat.npmx.dev"
@@ -44,11 +46,11 @@
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.chat') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
         </div>
       </div>
-      <p class="text-xs text-fg-muted text-center sm:text-left m-0">
+      <p class="text-xs text-fg-muted text-center sm:text-start m-0">
         <span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
         <span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>
       </p>

app/components/AppHeader.vue

@@ -52,8 +52,11 @@ onKeyStroke(',', e => {
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
-    <nav :aria-label="$t('nav.main_navigation')" class="container h-14 flex items-center">
-      <!-- Left: Logo -->
+    <nav
+      :aria-label="$t('nav.main_navigation')"
+      class="container h-14 flex items-center justify-start"
+    >
+      <!-- Start: Logo -->
       <div class="flex-shrink-0">
         <NuxtLink
           v-if="showLogo"
@@ -79,7 +82,7 @@ onKeyStroke(',', e => {
             <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
               <div class="search-box relative flex items-center">
                 <span
-                  class="absolute left-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
+                  class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
                 >
                   /
                 </span>
@@ -91,7 +94,7 @@ onKeyStroke(',', e => {
                   name="q"
                   :placeholder="$t('search.placeholder')"
                   v-bind="noCorrect"
-                  class="w-full bg-bg-subtle border border-border rounded-md pl-7 pr-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                  class="w-full bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                   @input="handleSearchInput"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
@@ -115,8 +118,8 @@ onKeyStroke(',', e => {
         </ul>
       </div>
 
-      <!-- Right: User status + GitHub -->
-      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ml-auto sm:ml-0">
+      <!-- End: User status + GitHub -->
+      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0">
         <NuxtLink
           to="/about"
           class="sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"

app/components/CodeDirectoryListing.vue

@@ -70,7 +70,7 @@ function formatBytes(bytes: number): string {
               :to="parentPath ? `${baseUrl}/${parentPath}` : baseUrl"
               class="flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
             >
-              <span class="i-carbon-folder w-4 h-4 text-yellow-600" />
+              <span class="i-carbon:folder w-4 h-4 text-yellow-600" />
               <span>..</span>
             </NuxtLink>
           </td>
@@ -91,13 +91,13 @@ function formatBytes(bytes: number): string {
             >
               <span
                 v-if="node.type === 'directory'"
-                class="i-carbon-folder w-4 h-4 text-yellow-600"
+                class="i-carbon:folder w-4 h-4 text-yellow-600"
               />
               <span v-else class="w-4 h-4" :class="getFileIcon(node.name)" />
               <span>{{ node.name }}</span>
             </NuxtLink>
           </td>
-          <td class="py-2 px-4 text-right font-mono text-xs text-fg-subtle">
+          <td class="py-2 px-4 text-end font-mono text-xs text-fg-subtle">
             <span v-if="node.type === 'file' && node.size">
               {{ formatBytes(node.size) }}
             </span>

app/components/CodeFileTree.vue

@@ -39,21 +39,21 @@ watch(
       <template v-if="node.type === 'directory'">
         <button
           type="button"
-          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-left font-mono text-sm transition-colors hover:bg-bg-muted"
+          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'"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
         >
           <span
             class="w-4 h-4 shrink-0 transition-transform"
-            :class="[isExpanded(node.path) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right']"
+            :class="[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'
+                ? 'i-carbon:folder-open text-yellow-500'
+                : 'i-carbon:folder text-yellow-600'
             "
           />
           <span class="truncate">{{ node.name }}</span>

app/components/CodeMobileTreeDrawer.vue

@@ -27,11 +27,11 @@ watch(isOpen, open => (isLocked.value = open))
   <!-- Toggle button (mobile only) -->
   <button
     type="button"
-    class="md:hidden fixed bottom-4 right-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"
+    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"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
   >
-    <span class="w-5 h-5" :class="isOpen ? 'i-carbon-close' : 'i-carbon-folder'" />
+    <span class="w-5 h-5" :class="isOpen ? 'i-carbon:close' : 'i-carbon:folder'" />
   </button>
 
   <!-- Backdrop -->
@@ -57,19 +57,20 @@ watch(isOpen, open => (isLocked.value = open))
   >
     <aside
       v-if="isOpen"
-      class="md:hidden fixed inset-y-0 left-0 z-50 w-72 bg-bg-subtle border-r border-border overflow-y-auto"
+      class="md:hidden fixed inset-y-0 inset-is-0 z-50 w-72 bg-bg-subtle border-ie border-border overflow-y-auto"
     >
       <div
-        class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-between"
+        class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-start"
       >
         <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"
           :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
         >
-          <span class="i-carbon-close w-5 h-5" />
+          <span class="i-carbon:close w-5 h-5" />
         </button>
       </div>
       <CodeFileTree :tree="tree" :current-path="currentPath" :base-url="baseUrl" />