Skip to content

Commit 0e086e7

Browse files
garthdwgarthdw
committed
feat: update all sidebar sections to be collapsible sections
Move top level sections into their own component. # Conflicts: # app/components/Package/Maintainers.vue # app/pages/package/[...package].vue
1 parent 2ba9247 commit 0e086e7

7 files changed

Lines changed: 64 additions & 90 deletions

File tree

‎app/components/CollapsibleSection.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ interface Props {
66
isLoading?: boolean
77
headingLevel?: `h${number}`
88
id: string
9+
icon?: string
910
}
1011
1112
const props = withDefaults(defineProps<Props>(), {
@@ -107,6 +108,7 @@ useHead({
107108
:href="`#${id}`"
108109
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
109110
>
111+
<span v-if="icon" :class="icon" aria-hidden="true" />
110112
{{ title }}
111113
<span
112114
class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"

‎app/components/Package/Compatibility.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
const props = defineProps<{
3+
engines?: {
4+
node?: string
5+
npm?: string
6+
}
7+
}>()
8+
</script>
9+
<template>
10+
<CollapsibleSection
11+
v-if="engines && (engines.node || engines.npm)"
12+
:title="$t('package.compatibility')"
13+
id="compatibility"
14+
>
15+
<dl class="space-y-2">
16+
<div v-if="engines.node" class="flex justify-between gap-4 py-1">
17+
<dt class="text-fg-muted text-sm shrink-0">node</dt>
18+
<dd class="font-mono text-sm text-fg text-end" :title="engines.node">
19+
{{ engines.node }}
20+
</dd>
21+
</div>
22+
<div v-if="engines.npm" class="flex justify-between gap-4 py-1">
23+
<dt class="text-fg-muted text-sm shrink-0">npm</dt>
24+
<dd class="font-mono text-sm text-fg text-end" :title="engines.npm">
25+
{{ engines.npm }}
26+
</dd>
27+
</div>
28+
</dl>
29+
</CollapsibleSection>
30+
</template>

‎app/components/Package/InstallScripts.vue‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,11 @@ const isExpanded = shallowRef(false)
1818
</script>
1919

2020
<template>
21-
<section>
22-
<h2
23-
id="install-scripts-heading"
24-
class="text-xs text-fg-subtle uppercase tracking-wider mb-3 flex items-center gap-2"
25-
>
26-
<span class="i-carbon:warning-alt w-3 h-3 text-yellow-500" aria-hidden="true" />
27-
{{ $t('package.install_scripts.title') }}
28-
</h2>
29-
21+
<CollapsibleSection
22+
:title="$t('package.install_scripts.title')"
23+
id="installScripts"
24+
icon="i-carbon:warning-alt w-3 h-3 text-yellow-500"
25+
>
3026
<!-- Script list: name as label, content below -->
3127
<dl class="space-y-2 m-0">
3228
<div v-for="scriptName in installScripts.scripts" :key="scriptName">
@@ -112,5 +108,5 @@ const isExpanded = shallowRef(false)
112108
</li>
113109
</ul>
114110
</div>
115-
</section>
111+
</CollapsibleSection>
116112
</template>

‎app/components/Package/Keywords.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script setup lang="ts">
2+
const props = defineProps<{
3+
keywords?: string[]
4+
}>()
5+
</script>
6+
<template>
7+
<CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
8+
<ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
9+
<li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
10+
<NuxtLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }" class="tag">
11+
{{ keyword }}
12+
</NuxtLink>
13+
</li>
14+
</ul>
15+
</CollapsibleSection>
16+
</template>

‎app/components/Package/Maintainers.vue‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -168,19 +168,11 @@ watch(
168168
</script>
169169

170170
<template>
171-
<section id="maintainers" v-if="maintainers?.length" class="scroll-mt-20">
172-
<h2 id="maintainers-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
173-
<a
174-
href="#maintainers"
175-
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
176-
>
177-
{{ $t('package.maintainers.title') }}
178-
<span
179-
class="i-carbon-link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
180-
aria-hidden="true"
181-
/>
182-
</a>
183-
</h2>
171+
<CollapsibleSection
172+
v-if="maintainers?.length"
173+
id="maintainers"
174+
:title="$t('package.maintainers.title')"
175+
>
184176
<ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">
185177
<li
186178
v-for="maintainer in visibleMaintainers"
@@ -293,5 +285,5 @@ watch(
293285
{{ $t('package.maintainers.add_owner') }}
294286
</button>
295287
</div>
296-
</section>
288+
</CollapsibleSection>
297289
</template>

‎app/components/Package/SkillsCard.vue‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ const skillsModal = useModal('skills-modal')
1111
</script>
1212

1313
<template>
14-
<section v-if="skills.length" id="skills" class="scroll-mt-20">
15-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
16-
{{ $t('package.skills.title') }}
17-
</h2>
14+
<CollapsibleSection v-if="skills.length" :title="$t('package.skills.title')" id="skills">
1815
<button
1916
type="button"
2017
class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
@@ -25,5 +22,5 @@ const skillsModal = useModal('skills-modal')
2522
$t('package.skills.skills_available', { count: skills.length }, skills.length)
2623
}}</span>
2724
</button>
28-
</section>
25+
</CollapsibleSection>
2926
</template>

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

Lines changed: 2 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -987,30 +987,7 @@ defineOgImageComponent('Package', {
987987
</ClientOnly>
988988

989989
<!-- Keywords -->
990-
<section id="keywords" v-if="displayVersion?.keywords?.length" class="scroll-mt-20">
991-
<h2
992-
id="keywords-heading"
993-
class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
994-
>
995-
<a
996-
href="#keywords"
997-
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
998-
>
999-
{{ $t('package.keywords_title') }}
1000-
<span
1001-
class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
1002-
aria-hidden="true"
1003-
/>
1004-
</a>
1005-
</h2>
1006-
<ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
1007-
<li v-for="keyword in displayVersion.keywords.slice(0, 15)" :key="keyword">
1008-
<NuxtLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }" class="tag">
1009-
{{ keyword }}
1010-
</NuxtLink>
1011-
</li>
1012-
</ul>
1013-
</section>
990+
<PackageKeywords :keywords="displayVersion?.keywords" />
1014991

1015992
<!-- Agent Skills -->
1016993
<ClientOnly>
@@ -1031,43 +1008,7 @@ defineOgImageComponent('Package', {
10311008
:links="readmeData.playgroundLinks"
10321009
/>
10331010

1034-
<section
1035-
id="compatibility"
1036-
v-if="
1037-
displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)
1038-
"
1039-
class="scroll-mt-20"
1040-
>
1041-
<h2
1042-
id="compatibility-heading"
1043-
class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
1044-
>
1045-
<a
1046-
href="#compatibility"
1047-
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
1048-
>
1049-
{{ $t('package.compatibility') }}
1050-
<span
1051-
class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
1052-
aria-hidden="true"
1053-
/>
1054-
</a>
1055-
</h2>
1056-
<dl class="space-y-2">
1057-
<div v-if="displayVersion.engines.node" class="flex justify-between gap-4 py-1">
1058-
<dt class="text-fg-muted text-sm shrink-0">node</dt>
1059-
<dd class="font-mono text-sm text-fg text-end" :title="displayVersion.engines.node">
1060-
{{ displayVersion.engines.node }}
1061-
</dd>
1062-
</div>
1063-
<div v-if="displayVersion.engines.npm" class="flex justify-between gap-4 py-1">
1064-
<dt class="text-fg-muted text-sm shrink-0">npm</dt>
1065-
<dd class="font-mono text-sm text-fg text-end" :title="displayVersion.engines.npm">
1066-
{{ displayVersion.engines.npm }}
1067-
</dd>
1068-
</div>
1069-
</dl>
1070-
</section>
1011+
<PackageCompatibility :engines="displayVersion?.engines" />
10711012

10721013
<!-- Versions (grouped by release channel) -->
10731014
<PackageVersions

0 commit comments

Comments
 (0)