Skip to content

Commit adb7fff

Browse files
Flo0806Flo0806
committed
fix: new placement for chips and tabs
1 parent 9e37e73 commit adb7fff

1 file changed

Lines changed: 52 additions & 75 deletions

File tree

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

Lines changed: 52 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -404,8 +404,8 @@ function handleClick(event: MouseEvent) {
404404
<!-- Package header -->
405405
<header class="area-header border-b border-border">
406406
<div class="mb-4">
407-
<!-- Package name and version -->
408-
<div class="flex items-baseline gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
407+
<!-- Row 1: Package name + Docs/Code nav -->
408+
<div class="flex items-start justify-between gap-4 mb-1.5 sm:mb-2">
409409
<h1
410410
class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
411411
:title="pkg.name"
@@ -418,9 +418,52 @@ function handleClick(event: MouseEvent) {
418418
><span v-if="orgName">/</span
419419
>{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
420420
</h1>
421-
<span
421+
422+
<!-- Internal navigation: Docs + Code -->
423+
<nav
422424
v-if="displayVersion"
423-
class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"
425+
:aria-label="$t('package.navigation')"
426+
class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0"
427+
>
428+
<NuxtLink
429+
v-if="docsLink"
430+
:to="docsLink"
431+
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"
432+
aria-keyshortcuts="d"
433+
>
434+
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
435+
{{ $t('package.links.docs') }}
436+
<kbd
437+
class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
438+
aria-hidden="true"
439+
>
440+
d
441+
</kbd>
442+
</NuxtLink>
443+
<NuxtLink
444+
:to="{
445+
name: 'code',
446+
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
447+
}"
448+
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"
449+
aria-keyshortcuts="."
450+
>
451+
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
452+
{{ $t('package.links.code') }}
453+
<kbd
454+
class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
455+
aria-hidden="true"
456+
>
457+
.
458+
</kbd>
459+
</NuxtLink>
460+
</nav>
461+
</div>
462+
463+
<!-- Row 2: Version + Badges -->
464+
<div v-if="displayVersion" class="flex items-center gap-2 sm:gap-3 flex-wrap mb-3">
465+
<span
466+
class="inline-flex items-center gap-1.5 font-mono text-base sm:text-lg text-fg-muted"
424467
>
425468
<!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
426469
<template v-if="resolvedVersion !== requestedVersion">
@@ -448,6 +491,7 @@ function handleClick(event: MouseEvent) {
448491
class="i-solar:shield-check-outline w-3.5 h-3.5 shrink-0"
449492
aria-hidden="true"
450493
/>
494+
<span class="sr-only">{{ $t('package.verified_provenance') }}</span>
451495
</a>
452496
<span
453497
v-if="
@@ -462,63 +506,18 @@ function handleClick(event: MouseEvent) {
462506

463507
<!-- Package metrics (module format, types) -->
464508
<ClientOnly>
465-
<PackageMetricsBadges
466-
v-if="displayVersion"
467-
:package-name="pkg.name"
468-
:version="displayVersion.version"
469-
class="self-baseline ms-1 sm:ms-2"
470-
/>
509+
<PackageMetricsBadges :package-name="pkg.name" :version="displayVersion.version" />
471510
<template #fallback>
472-
<ul class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
511+
<ul class="flex items-center gap-1.5">
473512
<li class="skeleton w-8 h-5 rounded" />
474513
<li class="skeleton w-12 h-5 rounded" />
475514
</ul>
476515
</template>
477516
</ClientOnly>
478-
479-
<!-- Internal navigation: Docs + Code (hidden on mobile, shown in external links instead) -->
480-
<nav
481-
v-if="displayVersion"
482-
:aria-label="$t('package.navigation')"
483-
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"
484-
>
485-
<NuxtLink
486-
v-if="docsLink"
487-
:to="docsLink"
488-
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"
489-
aria-keyshortcuts="d"
490-
>
491-
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
492-
{{ $t('package.links.docs') }}
493-
<kbd
494-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
495-
aria-hidden="true"
496-
>
497-
d
498-
</kbd>
499-
</NuxtLink>
500-
<NuxtLink
501-
:to="{
502-
name: 'code',
503-
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
504-
}"
505-
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"
506-
aria-keyshortcuts="."
507-
>
508-
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
509-
{{ $t('package.links.code') }}
510-
<kbd
511-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
512-
aria-hidden="true"
513-
>
514-
.
515-
</kbd>
516-
</NuxtLink>
517-
</nav>
518517
</div>
519518

520-
<!-- Fixed height description container to prevent CLS -->
521-
<div ref="descriptionRef" class="relative max-w-2xl min-h-[4.5rem]">
519+
<!-- Description container -->
520+
<div ref="descriptionRef" class="relative max-w-2xl">
522521
<p
523522
v-if="pkg.description"
524523
class="text-fg-muted text-base m-0 overflow-hidden"
@@ -640,28 +639,6 @@ function handleClick(event: MouseEvent) {
640639
{{ $t('package.links.fund') }}
641640
</a>
642641
</li>
643-
<!-- Mobile-only: Docs + Code links -->
644-
<li v-if="docsLink && displayVersion" class="sm:hidden">
645-
<NuxtLink
646-
:to="docsLink"
647-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
648-
>
649-
<span class="i-carbon:document w-4 h-4" aria-hidden="true" />
650-
{{ $t('package.links.docs') }}
651-
</NuxtLink>
652-
</li>
653-
<li v-if="displayVersion" class="sm:hidden">
654-
<NuxtLink
655-
:to="{
656-
name: 'code',
657-
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
658-
}"
659-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
660-
>
661-
<span class="i-carbon:code w-4 h-4" aria-hidden="true" />
662-
{{ $t('package.links.code') }}
663-
</NuxtLink>
664-
</li>
665642
</ul>
666643
</div>
667644

0 commit comments

Comments
 (0)