Skip to content

Commit dbed4e6

Browse files
danielroedanielroe
committed
fix: use npm logo icon, hide label on mobile
1 parent 00171b3 commit dbed4e6

1 file changed

Lines changed: 67 additions & 66 deletions

File tree

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

Lines changed: 67 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -282,80 +282,81 @@ defineOgImageComponent('Package', {
282282
<!-- Package header -->
283283
<header class="mb-8 pb-8 border-b border-border">
284284
<div class="mb-4">
285-
<div class="flex flex-row justify-between">
286-
<!-- Package name and version -->
287-
<div class="flex items-start gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
288-
<h1
289-
class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
290-
:title="pkg.name"
291-
>
292-
<NuxtLink
293-
v-if="orgName"
294-
:to="{ name: 'org', params: { org: orgName } }"
295-
class="text-fg-muted hover:text-fg transition-colors duration-200"
296-
>@{{ orgName }}</NuxtLink
297-
><span v-if="orgName">/</span
298-
>{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
299-
</h1>
300-
<a
301-
v-if="displayVersion"
302-
:href="
303-
hasProvenance(displayVersion)
304-
? `https://www.npmjs.com/package/${pkg.name}/v/${displayVersion.version}#provenance`
305-
: undefined
306-
"
307-
:target="hasProvenance(displayVersion) ? '_blank' : undefined"
308-
:rel="hasProvenance(displayVersion) ? 'noopener noreferrer' : undefined"
309-
class="inline-flex items-center gap-1.5 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md transition-colors duration-200 max-w-full shrink-0"
310-
:class="
311-
hasProvenance(displayVersion)
312-
? 'hover:border-border-hover cursor-pointer'
313-
: 'cursor-default'
285+
<!-- Package name and version -->
286+
<div class="flex items-center gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
287+
<h1
288+
class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
289+
:title="pkg.name"
290+
>
291+
<NuxtLink
292+
v-if="orgName"
293+
:to="{ name: 'org', params: { org: orgName } }"
294+
class="text-fg-muted hover:text-fg transition-colors duration-200"
295+
>@{{ orgName }}</NuxtLink
296+
><span v-if="orgName">/</span
297+
>{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
298+
</h1>
299+
<a
300+
v-if="displayVersion"
301+
:href="
302+
hasProvenance(displayVersion)
303+
? `https://www.npmjs.com/package/${pkg.name}/v/${displayVersion.version}#provenance`
304+
: undefined
305+
"
306+
:target="hasProvenance(displayVersion) ? '_blank' : undefined"
307+
:rel="hasProvenance(displayVersion) ? 'noopener noreferrer' : undefined"
308+
class="inline-flex items-center gap-1.5 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md transition-colors duration-200 max-w-full shrink-0"
309+
:class="
310+
hasProvenance(displayVersion)
311+
? 'hover:border-border-hover cursor-pointer'
312+
: 'cursor-default'
313+
"
314+
:title="`v${displayVersion.version}`"
315+
>
316+
<span class="truncate max-w-24 sm:max-w-32 md:max-w-48">
317+
v{{ displayVersion.version }}
318+
</span>
319+
<span
320+
v-if="
321+
requestedVersion &&
322+
latestVersion &&
323+
displayVersion.version !== latestVersion.version
314324
"
315-
:title="`v${displayVersion.version}`"
325+
class="text-fg-subtle shrink-0"
326+
>(not latest)</span
316327
>
317-
<span class="truncate max-w-24 sm:max-w-32 md:max-w-48">
318-
v{{ displayVersion.version }}
319-
</span>
320-
<span
321-
v-if="
322-
requestedVersion &&
323-
latestVersion &&
324-
displayVersion.version !== latestVersion.version
325-
"
326-
class="text-fg-subtle shrink-0"
327-
>(not latest)</span
328-
>
329-
<span
330-
v-if="hasProvenance(displayVersion)"
331-
class="i-solar-shield-check-outline w-4 h-4 text-fg-muted shrink-0"
332-
aria-label="Verified provenance"
333-
/>
334-
</a>
328+
<span
329+
v-if="hasProvenance(displayVersion)"
330+
class="i-solar-shield-check-outline w-4 h-4 text-fg-muted shrink-0"
331+
aria-label="Verified provenance"
332+
/>
333+
</a>
334+
335+
<!-- Package metrics (module format, types) -->
336+
<ClientOnly>
337+
<PackageMetricsBadges
338+
v-if="displayVersion"
339+
:package-name="pkg.name"
340+
:version="displayVersion.version"
341+
/>
342+
<template #fallback>
343+
<ul class="flex items-center gap-1.5">
344+
<li class="skeleton w-8 h-5 rounded" />
345+
<li class="skeleton w-12 h-5 rounded" />
346+
</ul>
347+
</template>
348+
</ClientOnly>
335349

336-
<!-- Package metrics (module format, types) -->
337-
<ClientOnly>
338-
<PackageMetricsBadges
339-
v-if="displayVersion"
340-
:package-name="pkg.name"
341-
:version="displayVersion.version"
342-
/>
343-
<template #fallback>
344-
<ul class="flex items-center gap-1.5">
345-
<li class="skeleton w-8 h-5 rounded" />
346-
<li class="skeleton w-12 h-5 rounded" />
347-
</ul>
348-
</template>
349-
</ClientOnly>
350-
</div>
351350
<a
352351
:href="`https://www.npmjs.com/package/${pkg.name}`"
353352
target="_blank"
354353
rel="noopener noreferrer"
355-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
354+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0"
355+
title="View on npm"
356356
>
357-
<span class="i-carbon-cube w-4 h-4" aria-hidden="true" />
358-
npm
357+
<span class="i-carbon-logo-npm w-4 h-4" aria-hidden="true" />
358+
<span class="hidden sm:inline">npm</span>
359+
<span class="sr-only sm:hidden">View on npm</span>
359360
</a>
360361
</div>
361362

0 commit comments

Comments
 (0)