Merge branch 'main' into feat-production-setup

Author: userquin

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/components/PackageDownloadAnalytics.vue

@@ -463,7 +463,7 @@ const config = computed(() => {
   return {
     theme: isDarkMode.value ? 'dark' : 'default',
     chart: {
-      height: isMobile.value ? 850 : 600,
+      height: isMobile.value ? 950 : 600,
       userOptions: {
         buttons: {
           pdf: false,
@@ -508,15 +508,17 @@ const config = computed(() => {
       grid: {
         stroke: colors.value.border,
         labels: {
+          fontSize: isMobile.value ? 24 : 16,
           axis: {
             yLabel: $t('package.downloads.y_axis_label', {
               granularity: $t(`package.downloads.granularity_${selectedGranularity.value}`),
             }),
             xLabel: packageName,
             yLabelOffsetX: 12,
-            fontSize: 24,
+            fontSize: isMobile.value ? 32 : 24,
           },
           xAxisLabels: {
+            show: !isMobile.value,
             values: chartData.value?.dates,
             showOnlyAtModulo: true,
             modulo: 12,
@@ -554,7 +556,7 @@ const config = computed(() => {
         },
       },
       zoom: {
-        maxWidth: 500,
+        maxWidth: isMobile.value ? 350 : 500,
         customFormat:
           displayedGranularity.value !== 'weekly'
             ? undefined

app/components/PackageReplacement.vue

@@ -5,23 +5,27 @@ const props = defineProps<{
   replacement: ModuleReplacement
 }>()
 
-const { t } = useI18n()
-
-const message = computed(() => {
+const message = computed<[string, { replacement?: string; nodeVersion?: string }]>(() => {
   switch (props.replacement.type) {
     case 'native':
-      return t('package.replacement.native', {
-        replacement: props.replacement.replacement,
-        nodeVersion: props.replacement.nodeVersion,
-      })
+      return [
+        'package.replacement.native',
+        {
+          replacement: props.replacement.replacement,
+          nodeVersion: props.replacement.nodeVersion,
+        },
+      ]
     case 'simple':
-      return t('package.replacement.simple', {
-        replacement: props.replacement.replacement,
-      })
+      return [
+        'package.replacement.simple',
+        {
+          replacement: props.replacement.replacement,
+        },
+      ]
     case 'documented':
-      return t('package.replacement.documented')
+      return ['package.replacement.documented', {}]
     case 'none':
-      return t('package.replacement.none')
+      return ['package.replacement.none', {}]
   }
 })
 
@@ -45,7 +49,25 @@ const docPath = computed(() => {
       {{ $t('package.replacement.title') }}
     </h2>
     <p class="text-sm m-0">
-      {{ message }}
+      <i18n-t :keypath="message[0]" scope="global">
+        <template #replacement>
+          {{ message[1].replacement ?? '' }}
+        </template>
+        <template #nodeVersion>
+          {{ message[1].nodeVersion ?? '' }}
+        </template>
+        <template #community>
+          <a
+            href="https://e18e.dev/docs/replacements/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
+          >
+            {{ $t('package.replacement.community') }}
+            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+          </a>
+        </template>
+      </i18n-t>
       <a
         v-if="mdnUrl"
         :href="mdnUrl"

app/components/PackageVersions.vue

@@ -109,7 +109,14 @@ const visibleTagRows = computed(() => {
   const rows = isPackageDeprecated.value
     ? allTagRows.value
     : allTagRows.value.filter(row => !row.primaryVersion.deprecated)
-  return rows.slice(0, MAX_VISIBLE_TAGS)
+  const first = rows.slice(0, MAX_VISIBLE_TAGS)
+  const latestTagRow = rows.find(row => row.tag === 'latest')
+  // Ensure 'latest' tag is always included (at the end) if not already present
+  if (latestTagRow && !first.includes(latestTagRow)) {
+    first.pop()
+    first.push(latestTagRow)
+  }
+  return first
 })
 
 // Hidden tag rows (all other tags) - shown in "Other versions"
@@ -322,7 +329,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
     <div class="space-y-0.5 min-w-0">
       <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
       <div v-for="row in visibleTagRows" :key="row.id">
-        <div class="flex items-center gap-2">
+        <div
+          class="flex items-center gap-2 pe-2"
+          :class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
+        >
           <!-- Expand button (only if there are more versions to show) -->
           <button
             v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
@@ -354,65 +364,67 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <span v-else class="w-4" />
 
           <!-- Version info -->
-          <div class="flex-1 py-1.5 min-w-0">
-            <div class="flex items-center justify-between gap-2">
-              <NuxtLink
-                :to="versionRoute(row.primaryVersion.version)"
-                class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
-                :class="
-                  row.primaryVersion.deprecated
-                    ? 'text-red-400 hover:text-red-300'
-                    : 'text-fg-muted hover:text-fg'
-                "
-                :title="
-                  row.primaryVersion.deprecated
-                    ? $t('package.versions.deprecated_title', {
-                        version: row.primaryVersion.version,
-                      })
-                    : row.primaryVersion.version
-                "
-              >
+          <div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
+            <div>
+              <div>
+                <NuxtLink
+                  :to="versionRoute(row.primaryVersion.version)"
+                  class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
+                  :class="
+                    row.primaryVersion.deprecated
+                      ? 'text-red-400 hover:text-red-300'
+                      : 'text-fg-muted hover:text-fg'
+                  "
+                  :title="
+                    row.primaryVersion.deprecated
+                      ? $t('package.versions.deprecated_title', {
+                          version: row.primaryVersion.version,
+                        })
+                      : row.primaryVersion.version
+                  "
+                >
+                  <span
+                    v-if="row.primaryVersion.deprecated"
+                    class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
+                    aria-hidden="true"
+                  />
+                  {{ row.primaryVersion.version }}
+                </NuxtLink>
+              </div>
+              <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
                 <span
-                  v-if="row.primaryVersion.deprecated"
-                  class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
-                  aria-hidden="true"
-                />
-                {{ row.primaryVersion.version }}
-              </NuxtLink>
-              <div class="flex items-center gap-2 shrink-0">
-                <DateTime
-                  v-if="row.primaryVersion.time"
-                  :datetime="row.primaryVersion.time"
-                  year="numeric"
-                  month="short"
-                  day="numeric"
-                  class="text-xs text-fg-subtle"
-                />
-                <ProvenanceBadge
-                  v-if="row.primaryVersion.hasProvenance"
-                  :package-name="packageName"
-                  :version="row.primaryVersion.version"
-                  compact
-                />
+                  v-for="tag in row.tags"
+                  :key="tag"
+                  class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
+                  :title="tag"
+                >
+                  {{ tag }}
+                </span>
               </div>
             </div>
-            <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
-              <span
-                v-for="tag in row.tags"
-                :key="tag"
-                class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
-                :title="tag"
-              >
-                {{ tag }}
-              </span>
+            <div class="flex items-center gap-2 shrink-0">
+              <DateTime
+                v-if="row.primaryVersion.time"
+                :datetime="row.primaryVersion.time"
+                year="numeric"
+                month="short"
+                day="numeric"
+                class="text-xs text-fg-subtle"
+              />
+              <ProvenanceBadge
+                v-if="row.primaryVersion.hasProvenance"
+                :package-name="packageName"
+                :version="row.primaryVersion.version"
+                compact
+              />
             </div>
           </div>
         </div>
 
         <!-- Expanded versions -->
         <div
           v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
-          class="ms-4 ps-2 border-is border-border space-y-0.5"
+          class="ms-4 ps-2 border-is border-border space-y-0.5 pe-2"
         >
           <div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
             <div class="flex items-center justify-between gap-2">
@@ -542,7 +554,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 />
                 {{ row.primaryVersion.version }}
               </NuxtLink>
-              <div class="flex items-center gap-2 shrink-0">
+              <div class="flex items-center gap-2 shrink-0 pe-2">
                 <DateTime
                   v-if="row.primaryVersion.time"
                   :datetime="row.primaryVersion.time"
@@ -618,7 +630,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       {{ group.versions[0]?.version }}
                     </NuxtLink>
                   </div>
-                  <div class="flex items-center gap-2 shrink-0">
+                  <div class="flex items-center gap-2 shrink-0 pe-2">
                     <DateTime
                       v-if="group.versions[0]?.time"
                       :datetime="group.versions[0]?.time"

app/pages/docs/[...path].vue

@@ -364,8 +364,16 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
   @apply text-badge-orange text-sm;
 }
 
-.docs-content .docs-deprecated p {
-  @apply text-badge-orange text-sm mt-2 mb-0;
+.docs-content .docs-deprecated-message {
+  @apply text-badge-orange text-sm mt-2;
+}
+
+.docs-content .docs-deprecated-message code {
+  @apply bg-badge-orange/20 text-badge-orange;
+}
+
+.docs-content .docs-deprecated-message .docs-link {
+  @apply text-badge-orange;
 }
 
 /* Parameters, Returns, Examples, See Also sections */

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>