Skip to content

Commit 152ddb3

Browse files
danielroedanielroe
committed
feat: add some external links to useful sites
1 parent d213371 commit 152ddb3

3 files changed

Lines changed: 123 additions & 52 deletions

File tree

‎app/app.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -320,8 +320,17 @@ button {
320320
padding-left: 1.5rem;
321321
}
322322
323+
.readme-content ul {
324+
list-style-type: disc;
325+
}
326+
327+
.readme-content ol {
328+
list-style-type: decimal;
329+
}
330+
323331
.readme-content li {
324332
margin-bottom: 0.5rem;
333+
display: list-item;
325334
}
326335
327336
.readme-content li::marker {
@@ -478,6 +487,20 @@ p > span > code,
478487
view-transition-name: search-box;
479488
}
480489
490+
/* Safari search input fixes */
491+
input[type="search"] {
492+
-webkit-appearance: none;
493+
appearance: none;
494+
}
495+
496+
input[type="search"]::-webkit-search-decoration,
497+
input[type="search"]::-webkit-search-cancel-button,
498+
input[type="search"]::-webkit-search-results-button,
499+
input[type="search"]::-webkit-search-results-decoration {
500+
-webkit-appearance: none;
501+
appearance: none;
502+
}
503+
481504
/* View transition for logo (hero -> header) */
482505
.hero-logo,
483506
.header-logo {

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

Lines changed: 97 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -223,56 +223,55 @@ defineOgImageComponent('Package', {
223223
>
224224
<!-- Package header -->
225225
<header class="mb-8 pb-8 border-b border-border">
226-
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
227-
<div class="flex-1 min-w-0">
228-
<h1 class="font-mono text-2xl sm:text-3xl font-medium mb-2">
226+
<div class="mb-4">
227+
<!-- Package name and version -->
228+
<div class="flex items-center gap-3 mb-2 flex-wrap">
229+
<h1 class="font-mono text-2xl sm:text-3xl font-medium">
229230
{{ pkg.name }}
230231
</h1>
231-
<!-- Fixed height description container to prevent CLS -->
232+
<span
233+
v-if="displayVersion"
234+
class="shrink-0 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md"
235+
>
236+
v{{ displayVersion.version }}
237+
<span
238+
v-if="requestedVersion && latestVersion && displayVersion.version !== latestVersion.version"
239+
class="text-fg-subtle"
240+
>(not latest)</span>
241+
</span>
242+
</div>
243+
<!-- Fixed height description container to prevent CLS -->
244+
<div
245+
ref="descriptionRef"
246+
class="relative max-w-2xl min-h-[4.5rem]"
247+
>
248+
<p
249+
v-if="pkg.description"
250+
class="text-fg-muted text-base m-0 overflow-hidden"
251+
:class="descriptionExpanded ? '' : 'max-h-[4.5rem]'"
252+
>
253+
<MarkdownText :text="pkg.description" />
254+
</p>
255+
<p
256+
v-else
257+
class="text-fg-subtle text-base m-0 italic"
258+
>
259+
No description provided
260+
</p>
261+
<!-- Fade overlay with show more button - only when collapsed and overflowing -->
232262
<div
233-
ref="descriptionRef"
234-
class="relative max-w-2xl min-h-[4.5rem]"
263+
v-if="pkg.description && descriptionOverflows && !descriptionExpanded"
264+
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"
235265
>
236-
<p
237-
v-if="pkg.description"
238-
class="text-fg-muted text-base m-0 overflow-hidden"
239-
:class="descriptionExpanded ? '' : 'max-h-[4.5rem]'"
240-
>
241-
<MarkdownText :text="pkg.description" />
242-
</p>
243-
<p
244-
v-else
245-
class="text-fg-subtle text-base m-0 italic"
246-
>
247-
No description provided
248-
</p>
249-
<!-- Fade overlay with show more button - only when collapsed and overflowing -->
250-
<div
251-
v-if="pkg.description && descriptionOverflows && !descriptionExpanded"
252-
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"
266+
<button
267+
type="button"
268+
class="font-mono text-xs text-fg-muted hover:text-fg bg-bg px-1 transition-colors duration-200"
269+
@click="descriptionExpanded = true"
253270
>
254-
<button
255-
type="button"
256-
class="font-mono text-xs text-fg-muted hover:text-fg bg-bg px-1 transition-colors duration-200"
257-
@click="descriptionExpanded = true"
258-
>
259-
show more
260-
</button>
261-
</div>
271+
show more
272+
</button>
262273
</div>
263274
</div>
264-
265-
<!-- Version badge -->
266-
<span
267-
v-if="displayVersion"
268-
class="shrink-0 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md"
269-
>
270-
v{{ displayVersion.version }}
271-
<span
272-
v-if="requestedVersion && latestVersion && displayVersion.version !== latestVersion.version"
273-
class="text-fg-subtle"
274-
>(not latest)</span>
275-
</span>
276275
</div>
277276

278277
<!-- Stats grid -->
@@ -347,6 +346,7 @@ defineOgImageComponent('Package', {
347346
<li v-if="repositoryUrl">
348347
<a
349348
:href="repositoryUrl"
349+
target="_blank"
350350
rel="noopener noreferrer"
351351
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
352352
>
@@ -357,6 +357,7 @@ defineOgImageComponent('Package', {
357357
<li v-if="homepageUrl">
358358
<a
359359
:href="homepageUrl"
360+
target="_blank"
360361
rel="noopener noreferrer"
361362
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
362363
>
@@ -367,6 +368,7 @@ defineOgImageComponent('Package', {
367368
<li v-if="displayVersion?.bugs?.url">
368369
<a
369370
:href="displayVersion.bugs.url"
371+
target="_blank"
370372
rel="noopener noreferrer"
371373
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
372374
>
@@ -377,13 +379,47 @@ defineOgImageComponent('Package', {
377379
<li>
378380
<a
379381
:href="`https://www.npmjs.com/package/${pkg.name}`"
382+
target="_blank"
380383
rel="noopener noreferrer"
381384
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
382385
>
383386
<span class="i-carbon-cube w-4 h-4" />
384387
npm
385388
</a>
386389
</li>
390+
<li>
391+
<a
392+
:href="`https://socket.dev/npm/package/${pkg.name}/overview/${displayVersion?.version ?? 'latest'}`"
393+
target="_blank"
394+
rel="noopener noreferrer"
395+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
396+
>
397+
<span class="i-carbon-security w-4 h-4" />
398+
security
399+
</a>
400+
</li>
401+
<li>
402+
<a
403+
:href="`https://npm.chart.dev/${pkg.name}`"
404+
target="_blank"
405+
rel="noopener noreferrer"
406+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
407+
>
408+
<span class="i-carbon-chart-line w-4 h-4" />
409+
trends
410+
</a>
411+
</li>
412+
<li>
413+
<a
414+
:href="`https://pkg-size.dev/${pkg.name}`"
415+
target="_blank"
416+
rel="noopener noreferrer"
417+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
418+
>
419+
<span class="i-carbon-data-volume w-4 h-4" />
420+
size
421+
</a>
422+
</li>
387423
</ul>
388424
</nav>
389425
</header>
@@ -591,12 +627,24 @@ defineOgImageComponent('Package', {
591627
v-if="sortedDependencies.length > 0"
592628
aria-labelledby="dependencies-heading"
593629
>
594-
<h2
595-
id="dependencies-heading"
596-
class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
597-
>
598-
Dependencies ({{ sortedDependencies.length }})
599-
</h2>
630+
<div class="flex items-center justify-between mb-3">
631+
<h2
632+
id="dependencies-heading"
633+
class="text-xs text-fg-subtle uppercase tracking-wider"
634+
>
635+
Dependencies ({{ sortedDependencies.length }})
636+
</h2>
637+
<a
638+
:href="`https://npmgraph.js.org/?q=${pkg.name}`"
639+
target="_blank"
640+
rel="noopener noreferrer"
641+
class="link-subtle"
642+
aria-label="View dependency graph"
643+
title="View dependency graph"
644+
>
645+
<span class="i-carbon-network-3 w-4 h-4 inline-block" />
646+
</a>
647+
</div>
600648
<ul class="space-y-1 list-none m-0 p-0">
601649
<li
602650
v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"

‎app/pages/search.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ defineOgImageComponent('Default', {
210210
</script>
211211

212212
<template>
213-
<main class="container py-8 sm:py-12">
213+
<main class="container py-8 sm:py-12 overflow-x-hidden">
214214
<header class="mb-8">
215215
<h1 class="font-mono text-2xl sm:text-3xl font-medium mb-6">
216216
search
@@ -248,7 +248,7 @@ defineOgImageComponent('Default', {
248248
name="q"
249249
placeholder="search packages..."
250250
autocomplete="off"
251-
class="w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-300 focus:(border-border-hover outline-none)"
251+
class="w-full max-w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-300 focus:(border-border-hover outline-none) appearance-none"
252252
@focus="isSearchFocused = true"
253253
@blur="isSearchFocused = false"
254254
>
@@ -317,7 +317,7 @@ defineOgImageComponent('Default', {
317317
class="block focus:outline-none decoration-none"
318318
>
319319
<header class="flex items-start justify-between gap-4 mb-2">
320-
<h2 class="font-mono text-base font-medium text-fg group-hover:text-fg transition-colors duration-200">
320+
<h2 class="font-mono text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all">
321321
{{ result.package.name }}
322322
</h2>
323323
<span

0 commit comments

Comments
 (0)