davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2import { joinURL } from 'ufo'
3
4const props = withDefaults(
5 defineProps<{
6 name: string
7 version: string
8 primaryColor?: string
9 }>(),
10 {
11 primaryColor: '#60a5fa',
12 },
13)
14
15const { name, version, primaryColor } = toRefs(props)
16
17const {
18 data: resolvedVersion,
19 status: versionStatus,
20 error: versionError,
21} = await useResolvedVersion(name, version)
22
23if (
24 versionStatus.value === 'error' &&
25 versionError.value?.statusCode &&
26 versionError.value.statusCode >= 400 &&
27 versionError.value.statusCode < 500
28) {
29 throw createError({
30 statusCode: 404,
31 })
32}
33
34const { data: downloads, refresh: refreshDownloads } = usePackageDownloads(name, 'last-week')
35const { data: pkg, refresh: refreshPkg } = usePackage(
36 name,
37 () => resolvedVersion.value ?? version.value,
38)
39const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
40
41const repositoryUrl = computed(() => {
42 const repo = displayVersion.value?.repository
43 if (!repo?.url) return null
44 let url = normalizeGitUrl(repo.url)
45 // append `repository.directory` for monorepo packages
46 if (repo.directory) {
47 url = joinURL(`${url}/tree/HEAD`, repo.directory)
48 }
49 return url
50})
51
52const { data: likes, refresh: refreshLikes } = useFetch(() => `/api/social/likes/${name.value}`, {
53 default: () => ({ totalLikes: 0, userHasLiked: false }),
54})
55
56const { stars, refresh: refreshRepoMeta } = useRepoMeta(repositoryUrl)
57
58const formattedStars = computed(() =>
59 stars.value > 0
60 ? Intl.NumberFormat('en', {
61 notation: 'compact',
62 maximumFractionDigits: 1,
63 }).format(stars.value)
64 : '',
65)
66
67const MAX_LOGO_SYMBOLS = 40
68
69const titleTruncated = computed(() => {
70 return name.value.length > MAX_LOGO_SYMBOLS
71 ? `${name.value.slice(0, MAX_LOGO_SYMBOLS - 1)}…`
72 : name.value
73})
74
75// Dynamic font sizing based on name length
76// OG images are 1200px wide, with 64px padding on each side = 1072px content width
77// The original size (8xl) can fit 19 characters (2 logo characters + 17 name characters)
78const titleScale = computed(() => {
79 const len = titleTruncated.value.length + 2
80 return Math.min(Math.floor((19 / len) * 100) / 100, 1)
81})
82
83try {
84 await refreshPkg()
85 await Promise.all([refreshRepoMeta(), refreshDownloads(), refreshLikes()])
86} catch (err) {
87 console.warn('[og-image-package] Failed to load data server-side:', err)
88 throw createError({
89 statusCode: 404,
90 })
91}
92</script>
93
94<template>
95 <div
96 class="h-full w-full flex flex-col justify-center px-20 bg-[#050505] text-[#fafafa] relative overflow-hidden"
97 style="font-family: 'Geist Mono', sans-serif"
98 >
99 <div class="relative z-10 flex flex-col gap-6">
100 <!-- Package name -->
101 <div class="flex items-start gap-4">
102 <div
103 class="flex items-center justify-center w-16 h-16 p-3.5 rounded-xl shadow-lg bg-gradient-to-tr from-[#3b82f6]"
104 :style="{ backgroundColor: primaryColor }"
105 >
106 <svg
107 width="36"
108 height="36"
109 viewBox="0 0 24 24"
110 fill="none"
111 stroke="white"
112 stroke-width="2.5"
113 stroke-linecap="round"
114 stroke-linejoin="round"
115 >
116 <path d="m7.5 4.27 9 5.15" />
117 <path
118 d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
119 />
120 <path d="m3.3 7 8.7 5 8.7-5" />
121 <path d="M12 22V12" />
122 </svg>
123 </div>
124
125 <h1
126 class="font-bold text-8xl origin-cl tracking-tighter text-nowrap whitespace-nowrap flex flex-nowrap"
127 :style="{ transform: `scale(${titleScale})` }"
128 >
129 <span
130 :style="{ color: primaryColor }"
131 class="opacity-80 tracking-[-0.1em]"
132 style="margin-left: -0.5rem; margin-right: 1rem"
133 >./</span
134 >{{ titleTruncated }}
135 </h1>
136 </div>
137
138 <!-- Version -->
139 <div class="flex items-center gap-5 text-3xl font-light text-[#a3a3a3]">
140 <span
141 class="px-3 py-1 me-2 rounded-lg border font-bold opacity-90"
142 :style="{
143 color: primaryColor,
144 backgroundColor: primaryColor + '10',
145 borderColor: primaryColor + '30',
146 boxShadow: `0 0 20px ${primaryColor}25`,
147 }"
148 >
149 {{ resolvedVersion ?? version }}
150 </span>
151
152 <!-- Downloads (if any) -->
153 <span v-if="downloads" class="flex items-center gap-2 tracking-tight">
154 <svg
155 width="30"
156 height="30"
157 viewBox="0 0 24 24"
158 fill="none"
159 :stroke="primaryColor"
160 stroke-width="2"
161 stroke-linecap="round"
162 stroke-linejoin="round"
163 class="opacity-90"
164 >
165 <circle cx="12" cy="12" r="10" class="opacity-60" />
166 <path d="M12 8v8m-3-3l3 3 3-3" />
167 </svg>
168 <span>{{ $n(downloads.downloads) }}/wk</span>
169 </span>
170
171 <!-- License (if any) -->
172 <span v-if="pkg?.license" class="flex items-center gap-2" data-testid="license">
173 <svg
174 viewBox="0 0 32 32"
175 :fill="primaryColor"
176 xmlns="http://www.w3.org/2000/svg"
177 height="32"
178 width="32"
179 class="opacity-90"
180 >
181 <path
182 d="M21.7166 12.57C20.5503 10.631 18.4257 9.33301 15.9997 9.33301C12.3197 9.33301 9.33301 12.3197 9.33301 15.9997C9.33301 19.6797 12.3197 22.6663 15.9997 22.6663C18.4257 22.6663 20.5503 21.3683 21.7166 19.4294L19.4302 18.0586C18.7307 19.2218 17.4566 19.9997 15.9997 19.9997C13.7897 19.9997 11.9997 18.2097 11.9997 15.9997C11.9997 13.7897 13.7897 11.9997 15.9997 11.9997C17.457 11.9997 18.7318 12.7782 19.431 13.9421L21.7166 12.57Z"
183 />
184 <path
185 fill-rule="evenodd"
186 clip-rule="evenodd"
187 d="M15.5247 2.66602C22.8847 2.66602 28.8581 8.63932 28.8581 15.9993C28.8581 23.3593 22.8847 29.3327 15.5247 29.3327C8.16471 29.3327 2.19141 23.3593 2.19141 15.9993C2.19141 8.63932 8.16471 2.66602 15.5247 2.66602ZM4.85807 15.9993C4.85807 10.106 9.63135 5.33268 15.5247 5.33268C21.4181 5.33268 26.1914 10.106 26.1914 15.9993C26.1914 21.8927 21.4181 26.666 15.5247 26.666C9.63135 26.666 4.85807 21.8927 4.85807 15.9993Z"
188 class="opacity-60"
189 />
190 </svg>
191 <span>
192 {{ pkg.license }}
193 </span>
194 </span>
195
196 <!-- Stars (if any) -->
197 <span
198 v-if="formattedStars"
199 class="flex items-center gap-2 tracking-tight"
200 data-testid="stars"
201 >
202 <svg
203 xmlns="http://www.w3.org/2000/svg"
204 viewBox="0 0 32 32"
205 width="32px"
206 height="32px"
207 class="opacity-60"
208 >
209 <path
210 :fill="primaryColor"
211 d="m16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1zM16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z"
212 />
213 </svg>
214 <span>
215 {{ formattedStars }}
216 </span>
217 </span>
218
219 <!-- Likes (if any) -->
220 <span
221 v-if="likes.totalLikes > 0"
222 class="flex items-center gap-2 tracking-tight"
223 data-testid="likes"
224 >
225 <svg
226 width="32"
227 height="32"
228 viewBox="0 0 32 32"
229 fill="none"
230 xmlns="http://www.w3.org/2000/svg"
231 class="opacity-90"
232 >
233 <path
234 d="M19.3057 25.8317L18.011 27.0837C17.7626 27.3691 17.4562 27.5983 17.1124 27.7561C16.7685 27.914 16.3951 27.9969 16.0167 27.9993C15.6384 28.0017 15.2639 27.9235 14.918 27.77C14.5722 27.6165 14.263 27.3912 14.011 27.1091L6.66699 19.9997C4.66699 17.9997 2.66699 15.7331 2.66699 12.6664C2.66702 11.1827 3.11712 9.73384 3.95784 8.51128C4.79856 7.28872 5.99035 6.34994 7.3758 5.81893C8.76126 5.28792 10.2752 5.18965 11.7177 5.53712C13.1602 5.88459 14.4633 6.66143 15.455 7.76506C15.5248 7.83975 15.6093 7.89929 15.7031 7.93999C15.7969 7.9807 15.8981 8.00171 16.0003 8.00171C16.1026 8.00171 16.2038 7.9807 16.2976 7.93999C16.3914 7.89929 16.4758 7.83975 16.5457 7.76506C17.5342 6.65426 18.8377 5.87088 20.2825 5.5192C21.7273 5.16751 23.245 5.26419 24.6335 5.79637C26.022 6.32856 27.2155 7.271 28.0551 8.49826C28.8948 9.72553 29.3407 11.1794 29.3337 12.6664C29.3332 13.3393 29.2349 14.0085 29.0417 14.6531"
235 :stroke="primaryColor"
236 stroke-width="2.66667"
237 stroke-linecap="round"
238 stroke-linejoin="round"
239 class="opacity-60"
240 />
241 <path
242 d="M20 20H24M28 20H24M24 16L24 20M24 24L24 20"
243 :stroke="primaryColor"
244 stroke-width="2.66667"
245 stroke-linecap="round"
246 stroke-linejoin="round"
247 />
248 </svg>
249 <span>
250 {{ likes.totalLikes }}
251 </span>
252 </span>
253 </div>
254 </div>
255
256 <div
257 class="absolute -top-32 -inset-ie-32 w-[550px] h-[550px] rounded-full blur-3xl"
258 :style="{ backgroundColor: primaryColor + '10' }"
259 />
260 </div>
261</template>