fix(i18n): various rtl and arabic fixes (#760)

skaldebane · web-flow · commit 52cd1da60257 · 2026-02-06T14:01:35.000Z
diff --git a/app/components/Compare/FacetCard.vue b/app/components/Compare/FacetCard.vue
@@ -131,7 +131,9 @@ function getShortName(header: string): string {
                 :datetime="value.display"
                 date-style="medium"
               />
-              <template v-else>{{ value.display }}</template>
+              <template v-else>
+                <span dir="auto">{{ value.display }}</span>
+              </template>
             </span>
           </template>
         </span>
diff --git a/app/components/Compare/FacetRow.vue b/app/components/Compare/FacetRow.vue
@@ -135,7 +135,9 @@ function isCellLoading(index: number): boolean {
           >
             <!-- Date values use DateTime component for i18n and user settings -->
             <DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />
-            <template v-else>{{ value.display }}</template>
+            <template v-else>
+              <span dir="auto">{{ value.display }}</span>
+            </template>
           </span>
         </TooltipApp>
         <span
@@ -146,7 +148,9 @@ function isCellLoading(index: number): boolean {
         >
           <!-- Date values use DateTime component for i18n and user settings -->
           <DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />
-          <template v-else>{{ value.display }}</template>
+          <template v-else>
+            <span dir="auto">{{ value.display }}</span>
+          </template>
         </span>
       </template>
     </div>
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
@@ -108,6 +108,7 @@ function handleDisconnect() {
 
       <div
         class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
+        dir="ltr"
       >
         <span class="text-fg-subtle">$</span>
         <span class="text-fg-subtle ms-2">pnpm npmx-connector</span>
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
@@ -48,6 +48,7 @@ const pkgDescription = useMarkdown(() => ({
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
           :data-result-index="index"
+          dir="ltr"
           >{{ result.package.name }}</NuxtLink
         >
         <span
diff --git a/app/components/Package/Compatibility.vue b/app/components/Package/Compatibility.vue
@@ -48,7 +48,7 @@ const sortedEngines = computed(() => {
           />
           {{ getName(engine) }}
         </dt>
-        <dd class="font-mono text-sm text-fg text-end" :title="version">
+        <dd class="font-mono text-sm text-fg text-end" :title="version" dir="ltr">
           {{ version }}
         </dd>
       </div>
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
@@ -84,10 +84,11 @@ const sortedOptionalDependencies = computed(() => {
           <NuxtLink
             :to="packageRoute(dep)"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
+            dir="ltr"
           >
             {{ dep }}
           </NuxtLink>
-          <span class="flex items-center gap-1 max-w-[40%]">
+          <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
             <span
               v-if="outdatedDeps[dep]"
               class="shrink-0"
@@ -167,6 +168,7 @@ const sortedOptionalDependencies = computed(() => {
             <NuxtLink
               :to="packageRoute(peer.name)"
               class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
+              dir="ltr"
             >
               {{ peer.name }}
             </NuxtLink>
@@ -182,6 +184,7 @@ const sortedOptionalDependencies = computed(() => {
             :to="packageRoute(peer.name, peer.version)"
             class="font-mono text-xs text-fg-subtle max-w-[40%] truncate"
             :title="peer.version"
+            dir="ltr"
           >
             {{ peer.version }}
           </NuxtLink>
@@ -226,13 +229,15 @@ const sortedOptionalDependencies = computed(() => {
           <NuxtLink
             :to="packageRoute(dep)"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
+            dir="ltr"
           >
             {{ dep }}
           </NuxtLink>
           <NuxtLink
             :to="packageRoute(dep, version)"
             class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
             :title="version"
+            dir="ltr"
           >
             {{ version }}
           </NuxtLink>
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
@@ -190,10 +190,13 @@ watch(
               params: { username: maintainer.name },
             }"
             class="link-subtle font-mono text-sm shrink-0"
+            dir="ltr"
           >
             ~{{ maintainer.name }}
           </NuxtLink>
-          <span v-else class="font-mono text-sm text-fg-muted">{{ maintainer.email }}</span>
+          <span v-else class="font-mono text-sm text-fg-muted" dir="ltr">{{
+            maintainer.email
+          }}</span>
 
           <!-- Access source badges -->
           <span
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
@@ -53,14 +53,15 @@ const allMaintainersText = computed(() => {
       <NuxtLink
         :to="packageUrl"
         class="font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200"
+        dir="ltr"
       >
         {{ pkg.name }}
       </NuxtLink>
     </td>
 
     <!-- Version -->
     <td v-if="isColumnVisible('version')" class="py-2 px-3 font-mono text-xs text-fg-subtle">
-      {{ pkg.version }}
+      <span dir="ltr">{{ pkg.version }}</span>
     </td>
 
     <!-- Description -->
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
@@ -378,7 +378,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
                     aria-hidden="true"
                   />
-                  {{ row.primaryVersion.version }}
+                  <span dir="ltr">
+                    {{ row.primaryVersion.version }}
+                  </span>
                 </NuxtLink>
               </div>
               <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
@@ -437,7 +439,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   class="i-carbon-warning-hex w-3 h-3 shrink-0"
                   aria-hidden="true"
                 />
-                {{ v.version }}
+                <span dir="ltr">
+                  {{ v.version }}
+                </span>
               </NuxtLink>
               <div class="flex items-center gap-2 shrink-0">
                 <DateTime
@@ -542,7 +546,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   class="i-carbon-warning-hex w-3 h-3 shrink-0"
                   aria-hidden="true"
                 />
-                {{ row.primaryVersion.version }}
+                <span dir="ltr">
+                  {{ row.primaryVersion.version }}
+                </span>
               </NuxtLink>
               <div class="flex items-center gap-2 shrink-0 pe-2">
                 <DateTime
@@ -618,7 +624,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                         class="i-carbon-warning-hex w-3 h-3 shrink-0"
                         aria-hidden="true"
                       />
-                      {{ group.versions[0]?.version }}
+                      <span dir="ltr">
+                        {{ group.versions[0]?.version }}
+                      </span>
                     </NuxtLink>
                   </div>
                   <div class="flex items-center gap-2 shrink-0 pe-2">
@@ -679,7 +687,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                         class="i-carbon-warning-hex w-3 h-3 shrink-0"
                         aria-hidden="true"
                       />
-                      {{ group.versions[0]?.version }}
+                      <span dir="ltr">
+                        {{ group.versions[0]?.version }}
+                      </span>
                     </NuxtLink>
                   </div>
                   <div class="flex items-center gap-2 shrink-0 pe-2">
@@ -736,7 +746,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                         class="i-carbon-warning-hex w-3 h-3 shrink-0"
                         aria-hidden="true"
                       />
-                      {{ v.version }}
+                      <span dir="ltr">
+                        {{ v.version }}
+                      </span>
                     </NuxtLink>
                     <div class="flex items-center gap-2 shrink-0 pe-2">
                       <DateTime
diff --git a/app/components/PaginationControls.vue b/app/components/PaginationControls.vue
@@ -200,7 +200,7 @@ function handlePageSizeChange(event: Event) {
           :aria-label="$t('filters.pagination.previous')"
           @click="goPrev"
         >
-          <span class="i-carbon-chevron-left w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon-chevron-left rtl-flip w-4 h-4" aria-hidden="true" />
         </button>
 
         <!-- Page numbers -->
@@ -230,7 +230,7 @@ function handlePageSizeChange(event: Event) {
           :aria-label="$t('filters.pagination.next')"
           @click="goNext"
         >
-          <span class="i-carbon-chevron-right w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon-chevron-right rtl-flip w-4 h-4" aria-hidden="true" />
         </button>
       </nav>
     </div>
diff --git a/app/components/ReadmeTocDropdown.vue b/app/components/ReadmeTocDropdown.vue
@@ -198,6 +198,7 @@ function handleKeydown(event: KeyboardEvent) {
               activeId === node.id ? 'text-fg font-medium' : 'text-fg-muted',
               highlightedIndex === getIndex(node.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
             ]"
+            dir="auto"
             @click="select(node.id)"
             @mouseenter="highlightedIndex = getIndex(node.id)"
           >
@@ -214,6 +215,7 @@ function handleKeydown(event: KeyboardEvent) {
                 activeId === child.id ? 'text-fg font-medium' : 'text-fg-subtle',
                 highlightedIndex === getIndex(child.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
               ]"
+              dir="auto"
               @click="select(child.id)"
               @mouseenter="highlightedIndex = getIndex(child.id)"
             >
@@ -233,6 +235,7 @@ function handleKeydown(event: KeyboardEvent) {
                   ? 'bg-bg-elevated'
                   : 'hover:bg-bg-elevated',
               ]"
+              dir="auto"
               @click="select(grandchild.id)"
               @mouseenter="highlightedIndex = getIndex(grandchild.id)"
             >
diff --git a/app/components/SearchSuggestionCard.vue b/app/components/SearchSuggestionCard.vue
@@ -31,6 +31,7 @@ defineProps<{
         <div class="flex items-center gap-2">
           <span
             class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors"
+            dir="ltr"
           >
             {{ type === 'user' ? '~' : '@' }}{{ name }}
           </span>
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
@@ -476,7 +476,7 @@ watch(
       @click="isOpen = !isOpen"
       @keydown="handleButtonKeydown"
     >
-      <span>{{ currentVersion }}</span>
+      <span dir="ltr">{{ currentVersion }}</span>
       <span
         v-if="currentVersion === latestVersion"
         class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium"
@@ -558,7 +558,9 @@ watch(
               class="flex-1 truncate hover:text-fg transition-colors"
               @click="isOpen = false"
             >
-              {{ group.primaryVersion.version }}
+              <span dir="ltr">
+                {{ group.primaryVersion.version }}
+              </span>
             </NuxtLink>
 
             <!-- Tags -->
@@ -597,7 +599,7 @@ watch(
                 ]"
                 @click="isOpen = false"
               >
-                <span class="truncate">{{ v.version }}</span>
+                <span class="truncate" dir="ltr">{{ v.version }}</span>
                 <span v-if="v.tags?.length" class="flex items-center gap-1 shrink-0">
                   <span
                     v-for="tag in v.tags"
diff --git a/app/pages/about.vue b/app/pages/about.vue
@@ -223,6 +223,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 />
                 <span
                   class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
+                  dir="ltr"
                 >
                   @{{ contributor.login }}
                 </span>
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
@@ -336,13 +336,16 @@ defineOgImageComponent('Default', {
             v{{ version }}
           </span>
           <span class="text-fg-subtle shrink-0">/</span>
-          <span class="font-mono text-sm text-fg-muted shrink-0">code</span>
+          <span class="font-mono text-sm text-fg-muted shrink-0">{{
+            $t('package.links.code')
+          }}</span>
         </div>
 
         <!-- Breadcrumb navigation -->
         <nav
           :aria-label="$t('code.file_path')"
           class="flex items-center gap-1 font-mono text-sm overflow-x-auto"
+          dir="ltr"
         >
           <NuxtLink
             v-if="filePath"
@@ -390,7 +393,7 @@ defineOgImageComponent('Default', {
     </div>
 
     <!-- Main content: file tree + file viewer -->
-    <div v-else-if="fileTree" class="flex flex-1">
+    <div v-else-if="fileTree" class="flex flex-1" dir="ltr">
       <!-- File tree sidebar - sticky with internal scroll -->
       <aside
         class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
@@ -436,7 +439,7 @@ defineOgImageComponent('Default', {
                 </button>
               </div>
               <div class="flex items-center gap-3 text-sm">
-                <span class="text-fg-muted">{{
+                <span class="text-fg-muted" dir="auto">{{
                   $t('code.lines', { count: fileContent.lines })
                 }}</span>
                 <span v-if="currentNode?.size" class="text-fg-subtle">{{
diff --git a/app/pages/package-docs/[...path].vue b/app/pages/package-docs/[...path].vue
@@ -158,7 +158,7 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
       </div>
     </header>
 
-    <div class="flex">
+    <div class="flex" dir="ltr">
       <!-- Sidebar TOC -->
       <aside
         v-if="docsData?.toc && !showEmptyState"
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
@@ -515,6 +515,7 @@ onKeyStroke(
             <h1
               class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
               :title="pkg.name"
+              dir="ltr"
             >
               <NuxtLink
                 v-if="orgName"
@@ -553,17 +554,18 @@ onKeyStroke(
           >
             <!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
             <template v-if="requestedVersion && resolvedVersion !== requestedVersion">
-              <span class="font-mono text-fg-muted text-sm">{{ requestedVersion }}</span>
+              <span class="font-mono text-fg-muted text-sm" dir="ltr">{{ requestedVersion }}</span>
               <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
             </template>
 
             <NuxtLink
               v-if="requestedVersion && resolvedVersion !== requestedVersion"
               :to="packageRoute(pkg.name, resolvedVersion)"
               :title="$t('package.view_permalink')"
+              dir="ltr"
               >{{ resolvedVersion }}</NuxtLink
             >
-            <span v-else>v{{ resolvedVersion }}</span>
+            <span dir="ltr" v-else>v{{ resolvedVersion }}</span>
 
             <template v-if="hasProvenance(displayVersion) && provenanceBadgeMounted">
               <TooltipApp
@@ -945,7 +947,7 @@ onKeyStroke(
             </dt>
             <dd class="font-mono text-sm text-fg">
               <!-- Package size (greyed out) -->
-              <span class="text-fg-muted">
+              <span class="text-fg-muted" dir="ltr">
                 <span v-if="displayVersion?.dist?.unpackedSize">
                   {{ formatBytes(displayVersion.dist.unpackedSize) }}
                 </span>
@@ -965,7 +967,7 @@ onKeyStroke(
                     aria-hidden="true"
                   />
                 </span>
-                <span v-else-if="installSize?.totalSize">
+                <span v-else-if="installSize?.totalSize" dir="ltr">
                   {{ formatBytes(installSize.totalSize) }}
                 </span>
                 <span v-else class="text-fg-subtle">-</span>
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
diff --git a/lunaria/files/ar-EG.json b/lunaria/files/ar-EG.json

Original file line number	Diff line number	Diff line change
`@@ -108,6 +108,7 @@ function handleDisconnect() {`
`108`	`108`
`109`	`109`	`<div`
`110`	`110`	`class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"`
	`111`	`+ dir="ltr"`
`111`	`112`	`>`
`112`	`113`	`<span class="text-fg-subtle">$</span>`
`113`	`114`	`<span class="text-fg-subtle ms-2">pnpm npmx-connector</span>`
Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,7 @@ const pkgDescription = useMarkdown(() => ({`
`48`	`48`	`:prefetch-on="prefetch ? 'visibility' : 'interaction'"`
`49`	`49`	`class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"`
`50`	`50`	`:data-result-index="index"`
	`51`	`+ dir="ltr"`
`51`	`52`	`>{{ result.package.name }}</NuxtLink`
`52`	`53`	`>`
`53`	`54`	`<span`