Merge branch 'main' of https://github.com/npmx-dev/npmx.dev into fix/scrollable-versions

Author: DDeenis

CONTRIBUTING.md

@@ -256,31 +256,46 @@ The [config/i18n.ts](./config/i18n.ts) configuration file will be used to regist
 - `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:
+To add 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))
+1. Create a new JSON file in [`i18n/locales/`](./i18n/locales) with the locale code as the filename (e.g., `uk-UA.json`, `de-DE.json`)
+2. Copy [`en.json`](./i18n/locales/en.json) and translate the strings
+3. Add the locale to the `locales` array 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.
+   ```typescript
+   {
+     code: 'uk-UA',        // Must match the filename (without .json)
+     file: 'uk-UA.json',
+     name: 'Українська',   // Native name of the language
+   },
+   ```
 
-To add a new locale:
+4. Copy your translation file to `lunaria/files/` for translation tracking:
+
+   ```bash
+   cp i18n/locales/uk-UA.json lunaria/files/uk-UA.json
+   ```
 
-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)
+   > [!IMPORTANT]
+   > This file must be committed. Lunaria uses git history to track translation progress, so the build will fail if this file is missing.
+
+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.
 
+#### Country variants (advanced)
+
+Most languages only need a single locale file. Country variants are only needed when you want to support regional differences (e.g., `es-ES` for Spain vs `es-419` for Latin America).
+
+If you need country variants:
+
+1. Create a base language file (e.g., `es.json`) with all translations
+2. Create country variant files (e.g., `es-ES.json`, `es-419.json`) with only the differing translations
+3. Register the base language in `locales` and add variants to `countryLocaleVariants`
+
+See how `es`, `es-ES`, and `es-419` are configured in [config/i18n.ts](./config/i18n.ts) for a complete example.
+
 ### Adding translations
 
 1. Add your translation key to `i18n/locales/en.json` first (American English is the source of truth)

app/components/PackageDeprecatedTree.vue

@@ -15,7 +15,7 @@ const isExpanded = shallowRef(false)
 const showAll = shallowRef(false)
 
 const hasDeprecated = computed(
-  () => analysisData.value && analysisData.value.deprecatedPackages.length > 0,
+  () => analysisData.value?.deprecatedPackages && analysisData.value.deprecatedPackages.length > 0,
 )
 
 // Banner color - purple for deprecated

app/pages/settings.vue

@@ -5,10 +5,6 @@ const { locale, locales, setLocale } = useI18n()
 const colorMode = useColorMode()
 const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
 
-const availableLocales = computed(() =>
-  locales.value.map(l => (typeof l === 'string' ? { code: l, name: l } : l)),
-)
-
 // Escape to go back (but not when focused on form elements)
 onKeyStroke('Escape', e => {
   const target = e.target as HTMLElement
@@ -211,7 +207,7 @@ defineOgImageComponent('Default', {
                   class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
                   @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
                 >
-                  <option v-for="loc in availableLocales" :key="loc.code" :value="loc.code">
+                  <option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
                     {{ loc.name }}
                   </option>
                 </select>

config/i18n.ts

@@ -78,22 +78,27 @@ export const countryLocaleVariants: Record<string, (LocaleObjectData & { country
     ],*/
 }
 
-const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
+const locales: (LocaleObjectData | (Omit<LocaleObjectData, 'code'> & { code: string }))[] = [
   {
     code: 'en',
     file: 'en.json',
     name: 'English',
   },
   {
-    code: 'ar-EG',
+    code: 'ar',
     file: 'ar.json',
     name: 'العربية',
     dir: 'rtl',
     pluralRule: (choice: number) => {
       const name = new Intl.PluralRules('ar-EG').select(choice)
       return { zero: 0, one: 1, two: 2, few: 3, many: 4, other: 5 }[name]
     },
-  } satisfies LocaleObjectData,
+  },
+  {
+    code: 'az-AZ',
+    file: 'az.json',
+    name: 'Azərbaycanca',
+  },
   /*{
     code: 'ckb',
     file: 'ckb.json',
@@ -103,7 +108,7 @@ const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
       const name = new Intl.PluralRules('ckb').select(choice)
       return { zero: 0, one: 1, two: 2, few: 3, many: 4, other: 5 }[name]
     },
-  } satisfies LocaleObjectData,
+  },
   {
     code: 'fa-IR',
     file: 'fa-IR.json',
@@ -113,7 +118,7 @@ const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
       const name = new Intl.PluralRules('fa-IR').select(choice)
       return { zero: 0, one: 1, two: 2, few: 3, many: 4, other: 5 }[name]
     },
-  } satisfies LocaleObjectData,
+  },
   {
     code: 'ca',
     file: 'ca.json',
@@ -177,7 +182,18 @@ const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
       const name = new Intl.PluralRules('ru-RU').select(choice)
       return { zero: 2, one: 0, two: 1, few: 1, many: 2, other: 3 }[name]
     },
-  } satisfies LocaleObjectData,
+  },
+  {
+    code: 'uk-UA',
+    file: 'uk-UA.json',
+    name: 'Українська',
+    pluralRule: (choice: number) => {
+      if (choice === 0) return 0
+
+      const name = new Intl.PluralRules('uk-UA').select(choice)
+      return { zero: 0, one: 1, two: 0, few: 2, many: 3, other: 4 }[name]
+    },
+  },
   /*{
       code: 'ru-RU',
       file: 'ru-RU.json',
@@ -187,18 +203,6 @@ const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
         return { zero: 2 /!* not used *!/, one: 0, two: 1 /!* not used *!/, few: 1, many: 2, other: 3 }[name]
       },
     },
-    {
-      code: 'uk-UA',
-      file: 'uk-UA.json',
-      name: 'Українська',
-      pluralRule: (choice: number) => {
-        if (choice === 0)
-          return 0
-
-        const name = new Intl.PluralRules('uk-UA').select(choice)
-        return { zero: 0, one: 1, two: 0 /!* not used *!/, few: 2, many: 3, other: 4 }[name]
-      },
-    },
     {
       code: 'cs-CZ',
       file: 'cs-CZ.json',
@@ -278,6 +282,8 @@ const locales: (Omit<LocaleObjectData, 'code'> & { code: string })[] = [
     },*/
 ]
 
+const lunariaJSONFiles: Record<string, string> = {}
+
 function buildLocales() {
   const useLocales = Object.values(locales).reduce((acc, data) => {
     const locales = countryLocaleVariants[data.code]
@@ -289,10 +295,12 @@ function buildLocales() {
           name: l.name,
           files: [data.file as string, `${l.code}.json`],
         }
+        lunariaJSONFiles[l.code] = l.country ? (data.file as string) : `${l.code}.json`
         delete entry.file
         acc.push(entry)
       })
     } else {
+      lunariaJSONFiles[data.code] = data.file as string
       acc.push(data as LocaleObjectData)
     }
     return acc
@@ -303,6 +311,8 @@ function buildLocales() {
 
 export const currentLocales = buildLocales()
 
+export { lunariaJSONFiles }
+
 export const datetimeFormats = Object.values(currentLocales).reduce((acc, data) => {
   const dateTimeFormats = data.dateTimeFormats
   if (dateTimeFormats) {

docs/content/index.md

@@ -4,12 +4,13 @@ seo:
   description: A fast, modern browser for the npm registry
 ---
 
-## ::u-page-hero
+<!-- prettier-ignore-start -->
 
+::u-page-hero
+---
 title: npmx.dev
 description: A fast, modern browser for the npm registry. Speed first, URL compatible, and simple.
 links:
-
 - label: Get Started
   to: /getting-started/introduction
   color: neutral
@@ -22,11 +23,11 @@ links:
   size: xl
   icon: i-simple-icons-github
   variant: outline
-
 ---
-
 ::
 
+<!-- prettier-ignore-end -->
+
 ::u-page-section{title="What you can do"}
 #features
 :::u-page-feature{icon="i-lucide-search" to="/guide/features" title="Search packages" description="Fast package search with instant results, infinite scroll, and keyboard navigation."}