forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: display entire description for each package
+3
-49
+3
-49
app/pages/[...package].vue
+3
-49
app/pages/[...package].vue
···
310
310
return packageAnalysis.value.createPackage
311
311
})
312
312
313
-
// Expandable description
314
-
const descriptionExpanded = ref(false)
315
-
const descriptionRef = useTemplateRef('descriptionRef')
316
-
const descriptionOverflows = ref(false)
317
-
318
-
// Check if description overflows on mount/update
319
-
function checkDescriptionOverflow() {
320
-
if (descriptionRef.value) {
321
-
const paragraph = descriptionRef.value.querySelector('p')
322
-
if (paragraph) {
323
-
// Compare scrollHeight to the fixed container height (3 lines ~= 72px)
324
-
descriptionOverflows.value = paragraph.scrollHeight > 72
325
-
}
326
-
}
327
-
}
328
-
329
-
watch(
330
-
() => pkg.value?.description,
331
-
() => {
332
-
descriptionExpanded.value = false
333
-
nextTick(checkDescriptionOverflow)
334
-
},
335
-
)
336
-
337
-
onMounted(() => {
338
-
nextTick(checkDescriptionOverflow)
339
-
})
340
-
341
313
// Canonical URL for this package page
342
314
const canonicalUrl = computed(() => {
343
315
const base = `https://npmx.dev/${packageName.value}`
···
517
489
</nav>
518
490
</div>
519
491
520
-
<!-- Fixed height description container to prevent CLS -->
521
-
<div ref="descriptionRef" class="relative max-w-2xl min-h-[4.5rem]">
522
-
<p
523
-
v-if="pkg.description"
524
-
class="text-fg-muted text-base m-0 overflow-hidden"
525
-
:class="descriptionExpanded ? '' : 'max-h-[4.5rem]'"
526
-
>
492
+
<!-- Description container with min-height to prevent CLS -->
493
+
<div class="max-w-2xl min-h-[4.5rem]">
494
+
<p v-if="pkg.description" class="text-fg-muted text-base m-0">
527
495
<MarkdownText :text="pkg.description" />
528
496
</p>
529
497
<p v-else class="text-fg-subtle text-base m-0 italic">
530
498
{{ $t('package.no_description') }}
531
499
</p>
532
-
<!-- Fade overlay with show more button - only when collapsed and overflowing -->
533
-
<div
534
-
v-if="pkg.description && descriptionOverflows && !descriptionExpanded"
535
-
class="absolute bottom-0 inset-is-0 inset-ie-0 h-10 bg-gradient-to-t from-bg via-bg/90 to-transparent flex items-end justify-end"
536
-
>
537
-
<button
538
-
type="button"
539
-
class="font-mono text-xs text-fg-muted hover:text-fg bg-bg px-1 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
540
-
:aria-label="$t('package.show_full_description')"
541
-
@click="descriptionExpanded = true"
542
-
>
543
-
{{ $t('common.show_more') }}
544
-
</button>
545
-
</div>
546
500
</div>
547
501
548
502
<!-- External links -->