Skip to content

Commit 989bb50

Browse files
userquinuserquin
authored
feat: add RTL support to [...package] page (#365)
1 parent aa05c32 commit 989bb50

1 file changed

Lines changed: 42 additions & 42 deletions

File tree

‎app/pages/[...package].vue‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -183,22 +183,22 @@ const repositoryUrl = computed(() => {
183183
const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
184184
185185
const PROVIDER_ICONS: Record<string, string> = {
186-
github: 'i-carbon-logo-github',
187-
gitlab: 'i-simple-icons-gitlab',
188-
bitbucket: 'i-simple-icons-bitbucket',
189-
codeberg: 'i-simple-icons-codeberg',
190-
gitea: 'i-simple-icons-gitea',
191-
forgejo: 'i-simple-icons-forgejo',
192-
gitee: 'i-simple-icons-gitee',
193-
sourcehut: 'i-simple-icons-sourcehut',
194-
tangled: 'i-custom-tangled',
195-
radicle: 'i-carbon-network-3', // Radicle is a P2P network, using network icon
186+
github: 'i-carbon:logo-github',
187+
gitlab: 'i-simple-icons:gitlab',
188+
bitbucket: 'i-simple-icons:bitbucket',
189+
codeberg: 'i-simple-icons:codeberg',
190+
gitea: 'i-simple-icons:gitea',
191+
forgejo: 'i-simple-icons:forgejo',
192+
gitee: 'i-simple-icons:gitee',
193+
sourcehut: 'i-simple-icons:sourcehut',
194+
tangled: 'i-custom:tangled',
195+
radicle: 'i-carbon:network-3', // Radicle is a P2P network, using network icon
196196
}
197197
198198
const repoProviderIcon = computed(() => {
199199
const provider = repoRef.value?.provider
200-
if (!provider) return 'i-carbon-logo-github'
201-
return PROVIDER_ICONS[provider] ?? 'i-carbon-code'
200+
if (!provider) return 'i-carbon:logo-github'
201+
return PROVIDER_ICONS[provider] ?? 'i-carbon:code'
202202
})
203203
204204
const homepageUrl = computed(() => {
@@ -507,7 +507,7 @@ defineOgImageComponent('Package', {
507507
<!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
508508
<template v-if="resolvedVersion !== requestedVersion">
509509
<span class="font-mono text-fg-muted text-sm">{{ requestedVersion }}</span>
510-
<span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
510+
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
511511
</template>
512512

513513
<NuxtLink
@@ -527,7 +527,7 @@ defineOgImageComponent('Package', {
527527
:title="$t('package.verified_provenance')"
528528
>
529529
<span
530-
class="i-solar-shield-check-outline w-3.5 h-3.5 shrink-0"
530+
class="i-solar:shield-check-outline w-3.5 h-3.5 shrink-0"
531531
aria-hidden="true"
532532
/>
533533
</a>
@@ -548,10 +548,10 @@ defineOgImageComponent('Package', {
548548
v-if="displayVersion"
549549
:package-name="pkg.name"
550550
:version="displayVersion.version"
551-
class="self-baseline ml-1 sm:ml-2"
551+
class="self-baseline ms-1 sm:ms-2"
552552
/>
553553
<template #fallback>
554-
<ul class="flex items-center gap-1.5 self-baseline ml-1 sm:ml-2">
554+
<ul class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
555555
<li class="skeleton w-8 h-5 rounded" />
556556
<li class="skeleton w-12 h-5 rounded" />
557557
</ul>
@@ -562,15 +562,15 @@ defineOgImageComponent('Package', {
562562
<nav
563563
v-if="displayVersion"
564564
:aria-label="$t('package.navigation')"
565-
class="hidden sm:flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ml-auto self-center"
565+
class="hidden sm:flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
566566
>
567567
<NuxtLink
568568
v-if="docsLink"
569569
:to="docsLink"
570570
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
571571
aria-keyshortcuts="d"
572572
>
573-
<span class="i-carbon-document w-3 h-3" aria-hidden="true" />
573+
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
574574
{{ $t('package.links.docs') }}
575575
<kbd
576576
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
@@ -587,7 +587,7 @@ defineOgImageComponent('Package', {
587587
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
588588
aria-keyshortcuts="."
589589
>
590-
<span class="i-carbon-code w-3 h-3" aria-hidden="true" />
590+
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
591591
{{ $t('package.links.code') }}
592592
<kbd
593593
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
@@ -614,7 +614,7 @@ defineOgImageComponent('Package', {
614614
<!-- Fade overlay with show more button - only when collapsed and overflowing -->
615615
<div
616616
v-if="pkg.description && descriptionOverflows && !descriptionExpanded"
617-
class="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-bg via-bg/90 to-transparent flex items-end justify-end"
617+
class="absolute bottom-0 inside-is-0 inside-ie-0 h-10 bg-gradient-to-t from-bg via-bg/90 to-transparent flex items-end justify-end"
618618
>
619619
<button
620620
type="button"
@@ -650,7 +650,7 @@ defineOgImageComponent('Package', {
650650
rel="noopener noreferrer"
651651
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
652652
>
653-
<span class="w-4 h-4 i-carbon-star" aria-hidden="true" />
653+
<span class="w-4 h-4 i-carbon:star" aria-hidden="true" />
654654
{{ formatCompactNumber(stars, { decimals: 1 }) }}
655655
</a>
656656
</li>
@@ -661,7 +661,7 @@ defineOgImageComponent('Package', {
661661
rel="noopener noreferrer"
662662
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
663663
>
664-
<span class="i-carbon-fork w-4 h-4" aria-hidden="true" />
664+
<span class="i-carbon:fork w-4 h-4" aria-hidden="true" />
665665
{{ formatCompactNumber(forks, { decimals: 1 }) }}
666666
</a>
667667
</li>
@@ -672,7 +672,7 @@ defineOgImageComponent('Package', {
672672
rel="noopener noreferrer"
673673
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
674674
>
675-
<span class="i-carbon-link w-4 h-4" aria-hidden="true" />
675+
<span class="i-carbon:link w-4 h-4" aria-hidden="true" />
676676
{{ $t('package.links.homepage') }}
677677
</a>
678678
</li>
@@ -683,7 +683,7 @@ defineOgImageComponent('Package', {
683683
rel="noopener noreferrer"
684684
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
685685
>
686-
<span class="i-carbon-warning w-4 h-4" aria-hidden="true" />
686+
<span class="i-carbon:warning w-4 h-4" aria-hidden="true" />
687687
{{ $t('package.links.issues') }}
688688
</a>
689689
</li>
@@ -695,7 +695,7 @@ defineOgImageComponent('Package', {
695695
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
696696
:title="$t('common.view_on_npm')"
697697
>
698-
<span class="i-carbon-logo-npm w-4 h-4" aria-hidden="true" />
698+
<span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
699699
npm
700700
</a>
701701
</li>
@@ -707,7 +707,7 @@ defineOgImageComponent('Package', {
707707
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
708708
:title="$t('badges.jsr.title')"
709709
>
710-
<span class="i-simple-icons-jsr w-4 h-4" aria-hidden="true" />
710+
<span class="i-simple-icons:jsr w-4 h-4" aria-hidden="true" />
711711
{{ $t('package.links.jsr') }}
712712
</a>
713713
</li>
@@ -718,7 +718,7 @@ defineOgImageComponent('Package', {
718718
rel="noopener noreferrer"
719719
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
720720
>
721-
<span class="i-carbon-favorite w-4 h-4" aria-hidden="true" />
721+
<span class="i-carbon:favorite w-4 h-4" aria-hidden="true" />
722722
{{ $t('package.links.fund') }}
723723
</a>
724724
</li>
@@ -728,7 +728,7 @@ defineOgImageComponent('Package', {
728728
:to="docsLink"
729729
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
730730
>
731-
<span class="i-carbon-document w-4 h-4" aria-hidden="true" />
731+
<span class="i-carbon:document w-4 h-4" aria-hidden="true" />
732732
{{ $t('package.links.docs') }}
733733
</NuxtLink>
734734
</li>
@@ -740,7 +740,7 @@ defineOgImageComponent('Package', {
740740
}"
741741
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
742742
>
743-
<span class="i-carbon-code w-4 h-4" aria-hidden="true" />
743+
<span class="i-carbon:code w-4 h-4" aria-hidden="true" />
744744
{{ $t('package.links.code') }}
745745
</NuxtLink>
746746
</li>
@@ -796,7 +796,7 @@ defineOgImageComponent('Package', {
796796
class="inline-flex items-center gap-1 text-fg-subtle"
797797
>
798798
<span
799-
class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
799+
class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
800800
aria-hidden="true"
801801
/>
802802
</span>
@@ -815,7 +815,7 @@ defineOgImageComponent('Package', {
815815
class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
816816
:title="$t('package.stats.view_dependency_graph')"
817817
>
818-
<span class="i-carbon-network-3 w-3.5 h-3.5 inline-block" aria-hidden="true" />
818+
<span class="i-carbon:network-3 w-3.5 h-3.5 inline-block" aria-hidden="true" />
819819
<span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
820820
</a>
821821

@@ -828,7 +828,7 @@ defineOgImageComponent('Package', {
828828
:title="$t('package.stats.inspect_dependency_tree')"
829829
>
830830
<span
831-
class="i-solar-eye-scan-outline w-3.5 h-3.5 inline-block"
831+
class="i-solar:eye-scan-outline w-3.5 h-3.5 inline-block"
832832
aria-hidden="true"
833833
/>
834834
<span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
@@ -840,7 +840,7 @@ defineOgImageComponent('Package', {
840840
<dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
841841
{{ $t('package.stats.install_size') }}
842842
<span
843-
class="i-carbon-information w-3 h-3 text-fg-subtle"
843+
class="i-carbon:information w-3 h-3 text-fg-subtle"
844844
aria-hidden="true"
845845
:title="sizeTooltip"
846846
/>
@@ -862,7 +862,7 @@ defineOgImageComponent('Package', {
862862
class="inline-flex items-center gap-1 text-fg-subtle"
863863
>
864864
<span
865-
class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
865+
class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
866866
aria-hidden="true"
867867
/>
868868
</span>
@@ -885,14 +885,14 @@ defineOgImageComponent('Package', {
885885
class="inline-flex items-center gap-1 text-fg-subtle"
886886
>
887887
<span
888-
class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
888+
class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
889889
aria-hidden="true"
890890
/>
891891
</span>
892892
<span v-else-if="vulnTreeStatus === 'success'">
893893
<span v-if="hasVulnerabilities" class="text-amber-500">{{ vulnCount }}</span>
894894
<span v-else class="inline-flex items-center gap-1 text-fg-muted">
895-
<span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
895+
<span class="i-carbon:checkmark w-3 h-3" aria-hidden="true" />
896896
0
897897
</span>
898898
</span>
@@ -1006,7 +1006,7 @@ defineOgImageComponent('Package', {
10061006
>
10071007
{{ $t('package.get_started.title') }}
10081008
<span
1009-
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
1009+
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
10101010
aria-hidden="true"
10111011
/>
10121012
</a>
@@ -1089,7 +1089,7 @@ defineOgImageComponent('Package', {
10891089
class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
10901090
:title="$t('package.get_started.view_types', { package: typesPackageName })"
10911091
>
1092-
<span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
1092+
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
10931093
<span class="sr-only">View {{ typesPackageName }}</span>
10941094
</NuxtLink>
10951095
</div>
@@ -1173,7 +1173,7 @@ defineOgImageComponent('Package', {
11731173
class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
11741174
:title="`View ${createPackageInfo.packageName}`"
11751175
>
1176-
<span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
1176+
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
11771177
<span class="sr-only">View {{ createPackageInfo.packageName }}</span>
11781178
</NuxtLink>
11791179
</div>
@@ -1207,7 +1207,7 @@ defineOgImageComponent('Package', {
12071207
>
12081208
{{ $t('package.readme.title') }}
12091209
<span
1210-
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
1210+
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
12111211
aria-hidden="true"
12121212
/>
12131213
</a>
@@ -1254,7 +1254,7 @@ defineOgImageComponent('Package', {
12541254
>
12551255
{{ $t('package.keywords_title') }}
12561256
<span
1257-
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
1257+
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
12581258
aria-hidden="true"
12591259
/>
12601260
</a>
@@ -1295,7 +1295,7 @@ defineOgImageComponent('Package', {
12951295
>
12961296
{{ $t('package.compatibility') }}
12971297
<span
1298-
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
1298+
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
12991299
aria-hidden="true"
13001300
/>
13011301
</a>

0 commit comments

Comments
 (0)