Merge branch 'main' into feat/like-comparaison

Author: Sukiiu

.github/workflows/ci.yml

@@ -33,10 +33,14 @@ jobs:
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
-        # pnpm cache skipped deliberately as the project is not actually installed here
+        with:
+          cache: true
+
+      - name: 📦 Install dependencies (root only, no scripts)
+        run: pnpm install --filter . --ignore-scripts
 
       - name: 🔠 Lint project
-        run: node scripts/lint.ts
+        run: pnpm lint
 
   types:
     name: 💪 Type check

.github/workflows/semantic-pull-requests.yml

@@ -26,6 +26,7 @@ jobs:
             a11y
             deps
             docs
+            cli
             i18n
             ui
           subjectPattern: ^(?![A-Z]).+$

.oxlintrc.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://unpkg.com/oxlint/configuration_schema.json",
   "plugins": ["unicorn", "typescript", "oxc", "vue", "vitest"],
+  "jsPlugins": ["@e18e/eslint-plugin"],
   "categories": {
     "correctness": "error",
     "suspicious": "warn",
@@ -11,8 +12,27 @@
     "no-await-in-loop": "off",
     "unicorn/no-array-sort": "off",
     "no-restricted-globals": "error",
-    "typescript/consistent-type-imports": "error"
+    "typescript/consistent-type-imports": "error",
+    "e18e/prefer-array-from-map": "error",
+    "e18e/prefer-timer-args": "error",
+    "e18e/prefer-date-now": "error",
+    "e18e/prefer-regex-test": "error",
+    "e18e/prefer-array-some": "error"
   },
+  "overrides": [
+    {
+      "files": [
+        "server/**/*",
+        "cli/**/*",
+        "scripts/**/*",
+        "modules/**/*",
+        "app/components/OgImage/*"
+      ],
+      "rules": {
+        "no-console": "off"
+      }
+    }
+  ],
   "ignorePatterns": [
     ".output/**",
     ".data/**",

CONTRIBUTING.md

@@ -340,12 +340,12 @@ To add a new locale:
 5. If the language is `right-to-left`, add `dir: 'rtl'` (see `ar-EG` in config for example)
 6. If the language requires special pluralization rules, add a `pluralRule` callback (see `ar-EG` or `ru-RU` in config for examples)
 
-Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info.
+Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization#custom-pluralization) and [Plural Rules](https://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Determining-Plural-Categories) for more info.
 
 ### Update translation
 
 We track the current progress of translations with [Lunaria](https://lunaria.dev/) on this site: https://i18n.npmx.dev/
-If you see any outdated translations in your language, feel free to update the keys to match then English version.
+If you see any outdated translations in your language, feel free to update the keys to match the English version.
 
 In order to make sure you have everything up-to-date, you can run:
 
@@ -408,13 +408,51 @@ See how `es`, `es-ES`, and `es-419` are configured in [config/i18n.ts](./config/
    <p>{{ $t('greeting', { name: userName }) }}</p>
    ```
 
+4. Don't concatenate string messages in the Vue templates, some languages can have different word order. Use placeholders instead.
+
+   **Bad:**
+
+   ```vue
+   <p>{{ $t('hello') }} {{ userName }}</p>
+   ```
+
+   **Good:**
+
+   ```vue
+   <p>{{ $t('greeting', { name: userName }) }}</p>
+   ```
+
+   **Complex content:**
+
+   If you need to include HTML or components inside the translation, use [`i18n-t`](https://vue-i18n.intlify.dev/guide/advanced/component.html) component. This is especially useful when the order of elements might change between languages.
+
+   ```json
+   {
+     "agreement": "I accept the {terms} and {privacy}.",
+     "terms_link": "Terms of Service",
+     "privacy_policy": "Privacy Policy"
+   }
+   ```
+
+   ```vue
+   <i18n-t keypath="agreement" tag="p">
+     <template #terms>
+       <NuxtLink to="/terms">{{ $t('terms_link') }}</NuxtLink>
+     </template>
+     <template #privacy>
+       <strong>{{ $t('privacy_policy') }}</strong>
+     </template>
+   </i18n-t>
+   ```
+
 ### Translation key conventions
 
 - Use dot notation for hierarchy: `section.subsection.key`
 - Keep keys descriptive but concise
 - Group related keys together
 - Use `common.*` for shared strings (loading, retry, close, etc.)
 - Use component-specific prefixes: `package.card.*`, `settings.*`, `nav.*`
+- Do not use dashes (`-`) in translation keys; always use underscore (`_`): e.g., `privacy_policy` instead of `privacy-policy`
 
 ### Using i18n-ally (recommended)
 

app/app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Directions } from '@nuxtjs/i18n'
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, onKeyDown, onKeyUp } from '@vueuse/core'
 import { isEditableElement } from '~/utils/input'
 
 const route = useRoute()
@@ -47,16 +47,12 @@ if (import.meta.server) {
   setJsonLd(createWebSiteSchema())
 }
 
-// Global keyboard shortcut:
-// "/" focuses search or navigates to search page
-// "?" highlights all keyboard shortcut elements
-function handleGlobalKeydown(e: KeyboardEvent) {
-  if (isEditableElement(e.target)) return
-
-  if (isKeyWithoutModifiers(e, '/')) {
+onKeyDown(
+  '/',
+  e => {
+    if (isEditableElement(e.target)) return
     e.preventDefault()
 
-    // Try to find and focus search input on current page
     const searchInput = document.querySelector<HTMLInputElement>(
       'input[type="search"], input[name="q"]',
     )
@@ -67,18 +63,29 @@ function handleGlobalKeydown(e: KeyboardEvent) {
     }
 
     router.push('/search')
-  }
+  },
+  { dedupe: true },
+)
 
-  // For "?" we check the key property directly since it's usually combined with shift
-  if (e.key === '?') {
+onKeyDown(
+  '?',
+  e => {
+    if (isEditableElement(e.target)) return
     e.preventDefault()
     showKbdHints.value = true
-  }
-}
+  },
+  { dedupe: true },
+)
 
-function handleGlobalKeyup() {
-  showKbdHints.value = false
-}
+onKeyUp(
+  '?',
+  e => {
+    if (isEditableElement(e.target)) return
+    e.preventDefault()
+    showKbdHints.value = false
+  },
+  { dedupe: true },
+)
 
 // Light dismiss fallback for browsers that don't support closedby="any" (Safari + old Chrome/Firefox)
 // https://codepen.io/paramagicdev/pen/gbYompq
@@ -99,9 +106,6 @@ function handleModalLightDismiss(e: MouseEvent) {
 }
 
 if (import.meta.client) {
-  useEventListener(document, 'keydown', handleGlobalKeydown)
-  useEventListener(document, 'keyup', handleGlobalKeyup)
-
   // Feature check for native light dismiss support via closedby="any"
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
   const supportsClosedBy =

app/assets/main.css

@@ -155,6 +155,7 @@ html {
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
+  scrollbar-gutter: stable;
 }
 
 /*
@@ -229,6 +230,10 @@ select:focus-visible {
 }
 
 /* Scrollbar styling */
+* {
+  scrollbar-color: var(--border) var(--bg);
+}
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -244,14 +249,13 @@ select:focus-visible {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #404040;
+  background: var(--border-hover);
 }
 
 /* Scrollbar styling for Firefox */
 @supports not selector(::-webkit-scrollbar) {
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--border) var(--bg);
   }
 }
 

app/components/AppFooter.vue

@@ -18,6 +18,12 @@ const isHome = computed(() => route.name === 'index')
           <NuxtLink to="/about" class="link-subtle font-mono text-xs flex items-center">
             {{ $t('footer.about') }}
           </NuxtLink>
+          <NuxtLink
+            to="/privacy"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1 lowercase"
+          >
+            {{ $t('privacy_policy.title') }}
+          </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"

app/components/AppHeader.vue

@@ -109,7 +109,7 @@ onKeyStroke(
           to="/"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded"
+          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
         >
           <AppLogo class="w-8 h-8 rounded-lg" />
           <span>npmx</span>
@@ -185,19 +185,14 @@ onKeyStroke(
           <HeaderAccountMenu />
         </div>
 
-        <!-- Mobile: Menu button (always visible, toggles menu) -->
+        <!-- Mobile: Menu button (always visible, click to open menu) -->
         <button
           type="button"
           class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
-          :aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
-          :aria-expanded="showMobileMenu"
-          @click="showMobileMenu = !showMobileMenu"
+          :aria-label="$t('nav.open_menu')"
+          @click="showMobileMenu = true"
         >
-          <span
-            class="w-6 h-6 inline-block"
-            :class="showMobileMenu ? 'i-carbon:close' : 'i-carbon:menu'"
-            aria-hidden="true"
-          />
+          <span class="w-6 h-6 inline-block i-carbon:menu" aria-hidden="true" />
         </button>
       </div>
     </nav>

app/components/AppLogo.vue

@@ -15,7 +15,7 @@ defineProps<{
   >
     <title>{{ $t('alt_logo') }}</title>
     <rect fill="var(--bg)" width="512" height="512" rx="64" />
-    <rect fill="var(--fg)" x="110" y="310" width="60" height="60" />
+    <rect fill="currentColor" x="110" y="310" width="60" height="60" />
     <text
       fill="var(--accent)"
       x="320"

app/components/CollapsibleSection.vue

@@ -125,10 +125,10 @@ useHead({
 
     <div
       :id="contentId"
-      class="grid ms-6 transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
+      class="grid ms-6 grid-rows-[1fr] transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
       :inert="!isOpen"
     >
-      <div class="min-h-0 min-w-0 p-1">
+      <div class="min-h-0 min-w-0">
         <slot />
       </div>
     </div>