Merge remote-tracking branch 'origin/main' into feat/org-packages-fancy

Author: danielroe

.github/workflows/autofix.yml

@@ -17,9 +17,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - run: corepack enable
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: lts/*
           cache: 'pnpm'

.github/workflows/ci.yml

@@ -19,9 +19,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - run: corepack enable
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: lts/*
           cache: pnpm
@@ -36,9 +36,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - run: corepack enable
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: lts/*
           cache: pnpm
@@ -64,9 +64,9 @@ jobs:
       image: mcr.microsoft.com/playwright:v1.57.0-noble
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - run: corepack enable
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: lts/*
           cache: pnpm
@@ -81,9 +81,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - run: corepack enable
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: lts/*
           cache: pnpm
@@ -103,9 +103,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - run: corepack enable
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: lts/*
           cache: pnpm

.github/workflows/lunaria.yml

@@ -22,14 +22,14 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           # Necessary for Lunaria to work properly
           # Makes the action clone the entire git history
           fetch-depth: 0
 
       - run: corepack enable
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: lts/*
           cache: pnpm

.github/workflows/provenance.yml

@@ -16,7 +16,7 @@ jobs:
   check-provenance:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           fetch-depth: 0
       - name: Check provenance downgrades

CONTRIBUTING.md

@@ -220,20 +220,70 @@ const props = defineProps<{
 
 Ideally, extract utilities into separate files so they can be unit tested. 🙏
 
+## RTL Support
+
+We support `right-to-left` languages, we need to make sure that the UI is working correctly in both directions.
+
+Simple approach used by most websites of relying on direction set in HTML element does not work because direction for various items, such as timeline, does not always match direction set in HTML.
+
+We've added some `UnoCSS` utilities styles to help you with that:
+
+- Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin.
+- Do not use `rtl-` classes, such as `rtl-left-0`.
+- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`.
+- For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
+- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
+- If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.
+
 ## Localization (i18n)
 
 npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization. We aim to make the UI accessible to users in their preferred language.
 
 ### Approach
 
 - All user-facing strings should use translation keys via `$t()` in templates and script
-- Translation files live in `i18n/locales/` (e.g., `en.json`)
-- We use the `no_prefix` strategy (no `/en/` or `/fr/` in URLs)
+- Translation files live in `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
 
+### Adding a new locale
+
+We are using localization using country variants (ISO-6391) via [multiple translation files](https://i18n.nuxtjs.org/docs/guide/lazy-load-translations#multiple-files-lazy-loading) to avoid repeating every key per country.
+
+The [config/i18n.ts](./config/i18n.ts) configuration file will be used to register the new locale:
+
+- `countryLocaleVariants` object will be used to register the country variants
+- `locales` object will be used to link the supported locales (country and single one)
+- `buildLocales` function will build the target locales
+
+To register a new locale:
+
+- for a single country, your JSON file should include the language and the country in the name (for example, `pl-PL.json`) and register the info at `locales` object
+- for multiple country variants, you need to add the default language JSON file (for example for Spanish, `es.json`) and one of the country variants (for example for Spanish for Spain, `es-ES.json`); register the language at `countryLocaleVariants` object adding the country variants with the JSON country file and register the language at `locales` object using the language JSON file (check how we register `es`, `es-ES` and `es-419` in [config/i18n.ts](./config/i18n.ts))
+
+The country file should contain will contain only the translations that differ from the language JSON file, Vue I18n will merge the messages for us.
+
+To add a new locale:
+
+1. Add a new file at [locales](./i18n/locales) folder with the language code as the filename.
+2. Copy [en](./i18n/locales/en.json) and translate the strings
+3. Add the language to the `locales` array in [config/i18n.ts](./config/i18n.ts), below `en` and `ar`:
+   - If your language has multiple country variants, add the generic one for language only (only if there are a lot of common entries, you can always add it as a new one)
+     - Add all country variants in [country variants object](./config/i18n.ts)
+     - Add all country variants files with empty `messages` object: `{}`
+     - Translate the strings in the generic language file
+     - Later, when anyone wants to add the corresponding translations for the country variant, just override any entry in the corresponding file: you can see an example with `es` variants.
+   - If the generic language already exists:
+     - If the translation doesn't differ from the generic language, then add the corresponding translations in the corresponding file
+     - If the translation differs from the generic language, then add the corresponding translations in the corresponding file and remove it from the country variants entry
+4. If the language is `right-to-left`, add `dir` option with `rtl` value, for example, for [ar](./config/i18n.ts)
+5. If the language requires special pluralization rules, add `pluralRule` callback option, for example, for [ar](./config/i18n.ts)
+
+Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info.
+
 ### Adding translations
 
-1. Add your translation key to `i18n/locales/en.json` first (English is the source of truth)
+1. Add your translation key to `i18n/locales/en.json` first (American English is the source of truth)
 2. Use the key in your component:
 
    ```vue
@@ -279,22 +329,6 @@ We recommend the [i18n-ally](https://marketplace.visualstudio.com/items?itemName
 
 The extension is included in our workspace recommendations, so VSCode should prompt you to install it.
 
-### Adding a new locale
-
-1. Create a new JSON file in `i18n/locales/` (e.g., `fr.json`)
-2. Add the locale to `nuxt.config.ts`:
-
-   ```typescript
-   i18n: {
-     locales: [
-       { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
-       { code: 'fr', language: 'fr-FR', name: 'Francais', file: 'fr.json' },
-     ],
-   }
-   ```
-
-3. Translate all keys from `en.json`
-
 ### Formatting with locale
 
 When formatting numbers or dates that should respect the user's locale, pass the locale:

app/assets/main.css

@@ -80,6 +80,10 @@ html {
   }
 }
 
+html[dir='rtl'] .rtl-flip {
+  transform: scale(-1, 1);
+}
+
 body {
   margin: 0;
   background-color: var(--bg);

app/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="border-t border-border mt-auto" :aria-label="$t('footer.site_footer')">
+  <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>

app/components/AppHeader.vue

@@ -30,7 +30,8 @@ const debouncedNavigate = debounce(async () => {
     name: 'search',
     query: query ? { q: query } : undefined,
   })
-  searchQuery.value = ''
+  // allow time for the navigation to occur before resetting searchQuery
+  setTimeout(() => (searchQuery.value = ''), 1000)
 }, 100)
 
 async function handleSearchInput() {
@@ -50,10 +51,7 @@ onKeyStroke(',', e => {
 </script>
 
 <template>
-  <header
-    :aria-label="$t('header.site_header')"
-    class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border"
-  >
+  <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 -->
       <div class="flex-shrink-0">
@@ -73,13 +71,7 @@ onKeyStroke(',', e => {
       <div class="flex-1 flex items-center justify-center gap-4 sm:gap-6">
         <!-- Search bar (shown on all pages except home and search) -->
         <search v-if="showSearchBar" class="hidden sm:block flex-1 max-w-md">
-          <form
-            role="search"
-            method="GET"
-            action="/search"
-            class="relative"
-            @submit.prevent="handleSearchInput"
-          >
+          <form method="GET" action="/search" class="relative" @submit.prevent="handleSearchInput">
             <label for="header-search" class="sr-only">
               {{ $t('search.label') }}
             </label>

app/components/PackageMaintainers.vue

@@ -18,10 +18,25 @@ const {
 const showAddOwner = shallowRef(false)
 const newOwnerUsername = shallowRef('')
 const isAdding = shallowRef(false)
+const showAllMaintainers = shallowRef(false)
+
+const DEFAULT_VISIBLE_MAINTAINERS = 5
 
 // Show admin controls when connected (let npm CLI handle permission errors)
 const canManageOwners = computed(() => isConnected.value)
 
+// Computed for visible maintainers with show more/fewer support
+const visibleMaintainers = computed(() => {
+  if (canManageOwners.value || showAllMaintainers.value) {
+    return maintainerAccess.value
+  }
+  return maintainerAccess.value.slice(0, DEFAULT_VISIBLE_MAINTAINERS)
+})
+
+const hiddenMaintainersCount = computed(() =>
+  Math.max(0, maintainerAccess.value.length - DEFAULT_VISIBLE_MAINTAINERS),
+)
+
 // Extract org name from scoped package
 const orgName = computed(() => {
   if (!props.packageName.startsWith('@')) return null
@@ -173,14 +188,17 @@ watch(
     </h2>
     <ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">
       <li
-        v-for="maintainer in maintainerAccess.slice(0, canManageOwners ? undefined : 5)"
+        v-for="maintainer in visibleMaintainers"
         :key="maintainer.name ?? maintainer.email"
         class="flex items-center justify-between gap-2"
       >
         <div class="flex items-center gap-2 min-w-0">
           <NuxtLink
             v-if="maintainer.name"
-            :to="{ name: '~username', params: { username: maintainer.name } }"
+            :to="{
+              name: '~username',
+              params: { username: maintainer.name },
+            }"
             class="link-subtle font-mono text-sm shrink-0"
           >
             @{{ maintainer.name }}
@@ -192,7 +210,11 @@ watch(
             v-if="isConnected && maintainer.accessVia?.length && !isLoadingAccess"
             class="text-xs text-fg-subtle truncate"
           >
-            {{ $t('package.maintainers.via', { teams: maintainer.accessVia.join(', ') }) }}
+            {{
+              $t('package.maintainers.via', {
+                teams: maintainer.accessVia.join(', '),
+              })
+            }}
           </span>
           <span
             v-if="canManageOwners && maintainer.name === npmUser"
@@ -206,14 +228,34 @@ watch(
           v-if="canManageOwners && maintainer.name && maintainer.name !== npmUser"
           type="button"
           class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-          :aria-label="$t('package.maintainers.remove_owner', { name: maintainer.name })"
+          :aria-label="
+            $t('package.maintainers.remove_owner', {
+              name: maintainer.name,
+            })
+          "
           @click="handleRemoveOwner(maintainer.name)"
         >
           <span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
         </button>
       </li>
     </ul>
 
+    <!-- Show more/less toggle (only when not managing and there are hidden maintainers) -->
+    <button
+      v-if="!canManageOwners && hiddenMaintainersCount > 0"
+      type="button"
+      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+      @click="showAllMaintainers = !showAllMaintainers"
+    >
+      {{
+        showAllMaintainers
+          ? $t('package.maintainers.show_less')
+          : $t('package.maintainers.show_more', {
+              count: hiddenMaintainersCount,
+            })
+      }}
+    </button>
+
     <!-- Add owner form (only when can manage) -->
     <div v-if="canManageOwners" class="mt-3">
       <div v-if="showAddOwner">