Skip to content

feat: add RTL support to [...package] page #365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielroe merged 1 commit into from
Jan 29, 2026
Merged

feat: add RTL support to [...package] page #365

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 42 additions & 42 deletions app/pages/[...package].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,22 +183,22 @@ const repositoryUrl = computed(() => {
const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)

const PROVIDER_ICONS: Record<string, string> = {
github: 'i-carbon-logo-github',
gitlab: 'i-simple-icons-gitlab',
bitbucket: 'i-simple-icons-bitbucket',
codeberg: 'i-simple-icons-codeberg',
gitea: 'i-simple-icons-gitea',
forgejo: 'i-simple-icons-forgejo',
gitee: 'i-simple-icons-gitee',
sourcehut: 'i-simple-icons-sourcehut',
tangled: 'i-custom-tangled',
radicle: 'i-carbon-network-3', // Radicle is a P2P network, using network icon
github: 'i-carbon:logo-github',
gitlab: 'i-simple-icons:gitlab',
bitbucket: 'i-simple-icons:bitbucket',
codeberg: 'i-simple-icons:codeberg',
gitea: 'i-simple-icons:gitea',
forgejo: 'i-simple-icons:forgejo',
gitee: 'i-simple-icons:gitee',
sourcehut: 'i-simple-icons:sourcehut',
tangled: 'i-custom:tangled',
radicle: 'i-carbon:network-3', // Radicle is a P2P network, using network icon
}

const repoProviderIcon = computed(() => {
const provider = repoRef.value?.provider
if (!provider) return 'i-carbon-logo-github'
return PROVIDER_ICONS[provider] ?? 'i-carbon-code'
if (!provider) return 'i-carbon:logo-github'
return PROVIDER_ICONS[provider] ?? 'i-carbon:code'
})

const homepageUrl = computed(() => {
Expand Down Expand Up @@ -507,7 +507,7 @@ defineOgImageComponent('Package', {
<!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
<template v-if="resolvedVersion !== requestedVersion">
<span class="font-mono text-fg-muted text-sm">{{ requestedVersion }}</span>
<span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
</template>

<NuxtLink
Expand All @@ -527,7 +527,7 @@ defineOgImageComponent('Package', {
:title="$t('package.verified_provenance')"
>
<span
class="i-solar-shield-check-outline w-3.5 h-3.5 shrink-0"
class="i-solar:shield-check-outline w-3.5 h-3.5 shrink-0"
aria-hidden="true"
/>
</a>
Expand All @@ -548,10 +548,10 @@ defineOgImageComponent('Package', {
v-if="displayVersion"
:package-name="pkg.name"
:version="displayVersion.version"
class="self-baseline ml-1 sm:ml-2"
class="self-baseline ms-1 sm:ms-2"
/>
<template #fallback>
<ul class="flex items-center gap-1.5 self-baseline ml-1 sm:ml-2">
<ul class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
<li class="skeleton w-8 h-5 rounded" />
<li class="skeleton w-12 h-5 rounded" />
</ul>
Expand All @@ -562,15 +562,15 @@ defineOgImageComponent('Package', {
<nav
v-if="displayVersion"
:aria-label="$t('package.navigation')"
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"
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"
>
<NuxtLink
v-if="docsLink"
:to="docsLink"
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"
aria-keyshortcuts="d"
>
<span class="i-carbon-document w-3 h-3" aria-hidden="true" />
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
{{ $t('package.links.docs') }}
<kbd
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
Expand All @@ -587,7 +587,7 @@ defineOgImageComponent('Package', {
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"
aria-keyshortcuts="."
>
<span class="i-carbon-code w-3 h-3" aria-hidden="true" />
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
{{ $t('package.links.code') }}
<kbd
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
Expand All @@ -614,7 +614,7 @@ defineOgImageComponent('Package', {
<!-- Fade overlay with show more button - only when collapsed and overflowing -->
<div
v-if="pkg.description && descriptionOverflows && !descriptionExpanded"
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"
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"
>
<button
type="button"
Expand Down Expand Up @@ -650,7 +650,7 @@ defineOgImageComponent('Package', {
rel="noopener noreferrer"
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
>
<span class="w-4 h-4 i-carbon-star" aria-hidden="true" />
<span class="w-4 h-4 i-carbon:star" aria-hidden="true" />
{{ formatCompactNumber(stars, { decimals: 1 }) }}
</a>
</li>
Expand All @@ -661,7 +661,7 @@ defineOgImageComponent('Package', {
rel="noopener noreferrer"
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
>
<span class="i-carbon-fork w-4 h-4" aria-hidden="true" />
<span class="i-carbon:fork w-4 h-4" aria-hidden="true" />
{{ formatCompactNumber(forks, { decimals: 1 }) }}
</a>
</li>
Expand All @@ -672,7 +672,7 @@ defineOgImageComponent('Package', {
rel="noopener noreferrer"
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
>
<span class="i-carbon-link w-4 h-4" aria-hidden="true" />
<span class="i-carbon:link w-4 h-4" aria-hidden="true" />
{{ $t('package.links.homepage') }}
</a>
</li>
Expand All @@ -683,7 +683,7 @@ defineOgImageComponent('Package', {
rel="noopener noreferrer"
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
>
<span class="i-carbon-warning w-4 h-4" aria-hidden="true" />
<span class="i-carbon:warning w-4 h-4" aria-hidden="true" />
{{ $t('package.links.issues') }}
</a>
</li>
Expand All @@ -695,7 +695,7 @@ defineOgImageComponent('Package', {
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
:title="$t('common.view_on_npm')"
>
<span class="i-carbon-logo-npm w-4 h-4" aria-hidden="true" />
<span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
npm
</a>
</li>
Expand All @@ -707,7 +707,7 @@ defineOgImageComponent('Package', {
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
:title="$t('badges.jsr.title')"
>
<span class="i-simple-icons-jsr w-4 h-4" aria-hidden="true" />
<span class="i-simple-icons:jsr w-4 h-4" aria-hidden="true" />
{{ $t('package.links.jsr') }}
</a>
</li>
Expand All @@ -718,7 +718,7 @@ defineOgImageComponent('Package', {
rel="noopener noreferrer"
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
>
<span class="i-carbon-favorite w-4 h-4" aria-hidden="true" />
<span class="i-carbon:favorite w-4 h-4" aria-hidden="true" />
{{ $t('package.links.fund') }}
</a>
</li>
Expand All @@ -728,7 +728,7 @@ defineOgImageComponent('Package', {
:to="docsLink"
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
>
<span class="i-carbon-document w-4 h-4" aria-hidden="true" />
<span class="i-carbon:document w-4 h-4" aria-hidden="true" />
{{ $t('package.links.docs') }}
</NuxtLink>
</li>
Expand All @@ -740,7 +740,7 @@ defineOgImageComponent('Package', {
}"
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
>
<span class="i-carbon-code w-4 h-4" aria-hidden="true" />
<span class="i-carbon:code w-4 h-4" aria-hidden="true" />
{{ $t('package.links.code') }}
</NuxtLink>
</li>
Expand Down Expand Up @@ -796,7 +796,7 @@ defineOgImageComponent('Package', {
class="inline-flex items-center gap-1 text-fg-subtle"
>
<span
class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
aria-hidden="true"
/>
</span>
Expand All @@ -815,7 +815,7 @@ defineOgImageComponent('Package', {
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"
:title="$t('package.stats.view_dependency_graph')"
>
<span class="i-carbon-network-3 w-3.5 h-3.5 inline-block" aria-hidden="true" />
<span class="i-carbon:network-3 w-3.5 h-3.5 inline-block" aria-hidden="true" />
<span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
</a>

Expand All @@ -828,7 +828,7 @@ defineOgImageComponent('Package', {
:title="$t('package.stats.inspect_dependency_tree')"
>
<span
class="i-solar-eye-scan-outline w-3.5 h-3.5 inline-block"
class="i-solar:eye-scan-outline w-3.5 h-3.5 inline-block"
aria-hidden="true"
/>
<span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
Expand All @@ -840,7 +840,7 @@ defineOgImageComponent('Package', {
<dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
{{ $t('package.stats.install_size') }}
<span
class="i-carbon-information w-3 h-3 text-fg-subtle"
class="i-carbon:information w-3 h-3 text-fg-subtle"
aria-hidden="true"
:title="sizeTooltip"
/>
Expand All @@ -862,7 +862,7 @@ defineOgImageComponent('Package', {
class="inline-flex items-center gap-1 text-fg-subtle"
>
<span
class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
aria-hidden="true"
/>
</span>
Expand All @@ -885,14 +885,14 @@ defineOgImageComponent('Package', {
class="inline-flex items-center gap-1 text-fg-subtle"
>
<span
class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
aria-hidden="true"
/>
</span>
<span v-else-if="vulnTreeStatus === 'success'">
<span v-if="hasVulnerabilities" class="text-amber-500">{{ vulnCount }}</span>
<span v-else class="inline-flex items-center gap-1 text-fg-muted">
<span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
<span class="i-carbon:checkmark w-3 h-3" aria-hidden="true" />
0
</span>
</span>
Expand Down Expand Up @@ -1006,7 +1006,7 @@ defineOgImageComponent('Package', {
>
{{ $t('package.get_started.title') }}
<span
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
aria-hidden="true"
/>
</a>
Expand Down Expand Up @@ -1089,7 +1089,7 @@ defineOgImageComponent('Package', {
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"
:title="$t('package.get_started.view_types', { package: typesPackageName })"
>
<span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
<span class="sr-only">View {{ typesPackageName }}</span>
</NuxtLink>
</div>
Expand Down Expand Up @@ -1173,7 +1173,7 @@ defineOgImageComponent('Package', {
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"
:title="`View ${createPackageInfo.packageName}`"
>
<span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
<span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
<span class="sr-only">View {{ createPackageInfo.packageName }}</span>
</NuxtLink>
</div>
Expand Down Expand Up @@ -1207,7 +1207,7 @@ defineOgImageComponent('Package', {
>
{{ $t('package.readme.title') }}
<span
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
aria-hidden="true"
/>
</a>
Expand Down Expand Up @@ -1254,7 +1254,7 @@ defineOgImageComponent('Package', {
>
{{ $t('package.keywords_title') }}
<span
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
aria-hidden="true"
/>
</a>
Expand Down Expand Up @@ -1295,7 +1295,7 @@ defineOgImageComponent('Package', {
>
{{ $t('package.compatibility') }}
<span
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
aria-hidden="true"
/>
</a>
Expand Down
Loading