Skip to content

Commit 94a14d3

Browse files
Flo0806Flo0806
committed
fix: new placement for chips and tabs
1 parent aee3bae commit 94a14d3

1 file changed

Lines changed: 50 additions & 73 deletions

File tree

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

Lines changed: 50 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -376,8 +376,8 @@ function handleClick(event: MouseEvent) {
376376
<!-- Package header -->
377377
<header class="area-header border-b border-border">
378378
<div class="mb-4">
379-
<!-- Package name and version -->
380-
<div class="flex items-baseline gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
379+
<!-- Row 1: Package name + Docs/Code nav -->
380+
<div class="flex items-start justify-between gap-4 mb-1.5 sm:mb-2">
381381
<h1
382382
class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
383383
:title="pkg.name"
@@ -390,9 +390,52 @@ function handleClick(event: MouseEvent) {
390390
><span v-if="orgName">/</span
391391
>{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
392392
</h1>
393-
<span
393+
394+
<!-- Internal navigation: Docs + Code -->
395+
<nav
394396
v-if="displayVersion"
395-
class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"
397+
:aria-label="$t('package.navigation')"
398+
class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0"
399+
>
400+
<NuxtLink
401+
v-if="docsLink"
402+
:to="docsLink"
403+
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"
404+
aria-keyshortcuts="d"
405+
>
406+
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
407+
{{ $t('package.links.docs') }}
408+
<kbd
409+
class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
410+
aria-hidden="true"
411+
>
412+
d
413+
</kbd>
414+
</NuxtLink>
415+
<NuxtLink
416+
:to="{
417+
name: 'code',
418+
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
419+
}"
420+
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"
421+
aria-keyshortcuts="."
422+
>
423+
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
424+
{{ $t('package.links.code') }}
425+
<kbd
426+
class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
427+
aria-hidden="true"
428+
>
429+
.
430+
</kbd>
431+
</NuxtLink>
432+
</nav>
433+
</div>
434+
435+
<!-- Row 2: Version + Badges -->
436+
<div v-if="displayVersion" class="flex items-center gap-2 sm:gap-3 flex-wrap mb-3">
437+
<span
438+
class="inline-flex items-center gap-1.5 font-mono text-base sm:text-lg text-fg-muted"
396439
>
397440
<!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
398441
<template v-if="resolvedVersion !== requestedVersion">
@@ -420,6 +463,7 @@ function handleClick(event: MouseEvent) {
420463
class="i-solar:shield-check-outline w-3.5 h-3.5 shrink-0"
421464
aria-hidden="true"
422465
/>
466+
<span class="sr-only">{{ $t('package.verified_provenance') }}</span>
423467
</a>
424468
<span
425469
v-if="
@@ -434,59 +478,14 @@ function handleClick(event: MouseEvent) {
434478

435479
<!-- Package metrics (module format, types) -->
436480
<ClientOnly>
437-
<PackageMetricsBadges
438-
v-if="displayVersion"
439-
:package-name="pkg.name"
440-
:version="displayVersion.version"
441-
class="self-baseline ms-1 sm:ms-2"
442-
/>
481+
<PackageMetricsBadges :package-name="pkg.name" :version="displayVersion.version" />
443482
<template #fallback>
444-
<ul class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
483+
<ul class="flex items-center gap-1.5">
445484
<li class="skeleton w-8 h-5 rounded" />
446485
<li class="skeleton w-12 h-5 rounded" />
447486
</ul>
448487
</template>
449488
</ClientOnly>
450-
451-
<!-- Internal navigation: Docs + Code (hidden on mobile, shown in external links instead) -->
452-
<nav
453-
v-if="displayVersion"
454-
:aria-label="$t('package.navigation')"
455-
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"
456-
>
457-
<NuxtLink
458-
v-if="docsLink"
459-
:to="docsLink"
460-
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"
461-
aria-keyshortcuts="d"
462-
>
463-
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
464-
{{ $t('package.links.docs') }}
465-
<kbd
466-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
467-
aria-hidden="true"
468-
>
469-
d
470-
</kbd>
471-
</NuxtLink>
472-
<NuxtLink
473-
:to="{
474-
name: 'code',
475-
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
476-
}"
477-
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"
478-
aria-keyshortcuts="."
479-
>
480-
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
481-
{{ $t('package.links.code') }}
482-
<kbd
483-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
484-
aria-hidden="true"
485-
>
486-
.
487-
</kbd>
488-
</NuxtLink>
489-
</nav>
490489
</div>
491490

492491
<!-- Description container with min-height to prevent CLS -->
@@ -594,28 +593,6 @@ function handleClick(event: MouseEvent) {
594593
{{ $t('package.links.fund') }}
595594
</a>
596595
</li>
597-
<!-- Mobile-only: Docs + Code links -->
598-
<li v-if="docsLink && displayVersion" class="sm:hidden">
599-
<NuxtLink
600-
:to="docsLink"
601-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
602-
>
603-
<span class="i-carbon:document w-4 h-4" aria-hidden="true" />
604-
{{ $t('package.links.docs') }}
605-
</NuxtLink>
606-
</li>
607-
<li v-if="displayVersion" class="sm:hidden">
608-
<NuxtLink
609-
:to="{
610-
name: 'code',
611-
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
612-
}"
613-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
614-
>
615-
<span class="i-carbon:code w-4 h-4" aria-hidden="true" />
616-
{{ $t('package.links.code') }}
617-
</NuxtLink>
618-
</li>
619596
</ul>
620597
</div>
621598

0 commit comments

Comments
 (0)