Skip to content

Commit b6fcd9a

Browse files
ShroXdShroXd
committed
fix: tweaks image size
1 parent 2c22d83 commit b6fcd9a

File tree

3 files changed

+39
-54
lines changed

3 files changed

+39
-54
lines changed

‎app/components/OgImage/ShareCard.vue‎

Lines changed: 37 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,6 @@ try {
113113
/* decorative — omit on failure */
114114
}
115115
116-
117116
// Derived
118117
const version = computed(() => resolvedVersion.value ?? pkg.value?.['dist-tags']?.latest ?? '')
119118
const isLatest = computed(() => pkg.value?.['dist-tags']?.latest === version.value)
@@ -144,11 +143,11 @@ const weekRange = computed(() => {
144143
return `${fmt(start)} – ${fmt(end)}`
145144
})
146145
147-
// Sparkline — right panel is 400px, 24px padding each side → 352px content, 74px tall
146+
// Sparkline — right panel is 400px, 28px padding each side → 344px content, 90px tall
148147
const sparklinePoints = computed(() => {
149148
if (sparklineValues.length < 2) return ''
150-
const W = 352,
151-
H = 74,
149+
const W = 344,
150+
H = 90,
152151
P = 3
153152
const max = Math.max(...sparklineValues)
154153
const min = Math.min(...sparklineValues)
@@ -165,16 +164,16 @@ const sparklinePoints = computed(() => {
165164
// Area fill: close the polyline at the bottom corners
166165
const sparklineAreaPoints = computed(() => {
167166
if (!sparklinePoints.value) return ''
168-
const W = 352,
169-
H = 74,
167+
const W = 344,
168+
H = 90,
170169
P = 3
171170
return `${sparklinePoints.value} ${(W - P).toFixed(1)},${H} ${P},${H}`
172171
})
173172
</script>
174173

175174
<template>
176175
<!--
177-
Rendered at 1400×480 (1× display). Tailwind for layout; inline :style for
176+
Rendered at 1200×630 (1× display). Tailwind for layout; inline :style for
178177
dynamic theme colours / pixel values only.
179178
-->
180179
<div
@@ -193,31 +192,17 @@ const sparklineAreaPoints = computed(() => {
193192
<!-- Left panel — justify-between pushes meta stats to bottom -->
194193
<div
195194
class="flex flex-col flex-1 justify-between relative"
196-
style="padding: 22px 36px 20px 32px"
195+
style="padding: 32px 40px 28px 36px"
197196
>
198-
<!-- Glow blob (decorative, top-right of left panel) -->
199-
<div
200-
class="absolute"
201-
:style="{
202-
top: '-110px',
203-
right: '-56px',
204-
width: '360px',
205-
height: '360px',
206-
borderRadius: '50%',
207-
backgroundColor: withAlpha(primaryColor, 0.1),
208-
filter: 'blur(56px)',
209-
}"
210-
/>
211-
212197
<!-- TOP GROUP: name + description + chips -->
213198
<div class="flex flex-col" style="gap: 0">
214199
<!-- Name · version · latest badge -->
215-
<div class="flex flex-row items-center flex-wrap" style="gap: 14px; margin-bottom: 16px">
216-
<span :style="{ fontSize: '46px', fontWeight: 700, lineHeight: '1' }">
217-
<span :style="{ color: primaryColor, opacity: 0.75 }">./</span
218-
>{{ truncate(name, 32) }}
200+
<div class="flex flex-row items-end flex-wrap gap-[14px]" style="margin-bottom: 20px">
201+
<span :style="{ fontSize: '54px', fontWeight: 700, lineHeight: '1' }">
202+
<span :style="{ color: primaryColor, opacity: 0.75, marginRight: '-12px' }">.</span
203+
>/{{ truncate(name, 32) }}
219204
</span>
220-
<span :style="{ fontSize: '22px', color: t.textMuted, lineHeight: '1' }"
205+
<span :style="{ fontSize: '26px', color: t.textMuted, lineHeight: '1' }"
221206
>v{{ version }}</span
222207
>
223208
<span
@@ -242,14 +227,14 @@ const sparklineAreaPoints = computed(() => {
242227
fontSize: '18px',
243228
color: t.textMuted,
244229
lineHeight: '1.55',
245-
marginBottom: '16px',
230+
marginBottom: '22px',
246231
}"
247232
>
248233
{{ truncate(description || 'No description.', 400) }}
249234
</div>
250235

251236
<!-- Tag chips -->
252-
<div class="flex flex-row flex-wrap" style="gap: 7px">
237+
<div class="flex flex-row flex-wrap gap-[12px]">
253238
<span
254239
v-if="hasTypes"
255240
class="flex items-center"
@@ -261,7 +246,7 @@ const sparklineAreaPoints = computed(() => {
261246
color: t.textMuted,
262247
lineHeight: '1.6',
263248
}"
264-
>✓ TypeScript</span
249+
>TypeScript</span
265250
>
266251
<span
267252
class="flex items-center"
@@ -308,9 +293,9 @@ const sparklineAreaPoints = computed(() => {
308293
<div class="flex flex-col">
309294
<div
310295
class="w-full"
311-
:style="{ height: '1px', backgroundColor: t.divider, marginBottom: '14px' }"
296+
:style="{ height: '1px', backgroundColor: t.divider, marginBottom: '18px' }"
312297
/>
313-
<div class="flex flex-row" style="gap: 32px">
298+
<div class="flex flex-row" style="gap: 36px">
314299
<div class="flex flex-col" style="gap: 4px">
315300
<span
316301
:style="{
@@ -322,7 +307,7 @@ const sparklineAreaPoints = computed(() => {
322307
}"
323308
>Install Size</span
324309
>
325-
<span :style="{ fontSize: '22px', fontWeight: 600, color: t.text }">{{
310+
<span :style="{ fontSize: '26px', fontWeight: 600, color: t.text }">{{
326311
formatBytes(unpackedSize)
327312
}}</span>
328313
</div>
@@ -337,7 +322,7 @@ const sparklineAreaPoints = computed(() => {
337322
}"
338323
>Dependencies</span
339324
>
340-
<span :style="{ fontSize: '22px', fontWeight: 600, color: t.text }">{{
325+
<span :style="{ fontSize: '26px', fontWeight: 600, color: t.text }">{{
341326
depsCount
342327
}}</span>
343328
</div>
@@ -352,7 +337,7 @@ const sparklineAreaPoints = computed(() => {
352337
}"
353338
>Published</span
354339
>
355-
<span :style="{ fontSize: '22px', fontWeight: 600, color: t.text }">{{
340+
<span :style="{ fontSize: '26px', fontWeight: 600, color: t.text }">{{
356341
formatDate(publishedAt)
357342
}}</span>
358343
</div>
@@ -366,37 +351,37 @@ const sparklineAreaPoints = computed(() => {
366351
<!-- Right stats panel (400px) -->
367352
<div class="flex flex-col flex-shrink-0" style="width: 400px">
368353
<!-- Weekly Downloads (takes all remaining space above) -->
369-
<div class="flex flex-col flex-1 justify-center" style="padding: 16px 24px 14px">
354+
<div class="flex flex-col flex-1 justify-center" style="padding: 28px 28px 20px">
370355
<span
371356
:style="{
372357
fontSize: '11px',
373358
fontWeight: 600,
374359
textTransform: 'uppercase',
375360
letterSpacing: '0.1em',
376361
color: t.textSubtle,
377-
marginBottom: '6px',
362+
marginBottom: '8px',
378363
}"
379364
>Weekly DL</span
380365
>
381366
<span
382367
:style="{
383-
fontSize: '52px',
368+
fontSize: '64px',
384369
fontWeight: 700,
385370
color: t.text,
386371
lineHeight: '1',
387-
marginBottom: '6px',
372+
marginBottom: '8px',
388373
}"
389374
>{{ formatNum(weeklyDownloads) }}</span
390375
>
391-
<span :style="{ fontSize: '13px', color: t.textSubtle, marginBottom: '12px' }">{{
376+
<span :style="{ fontSize: '13px', color: t.textSubtle, marginBottom: '16px' }">{{
392377
weekRange
393378
}}</span>
394379
<!-- Sparkline with area fill -->
395380
<svg
396381
v-if="sparklinePoints"
397-
width="352"
398-
height="74"
399-
viewBox="0 0 352 74"
382+
width="344"
383+
height="90"
384+
viewBox="0 0 344 90"
400385
style="display: block"
401386
>
402387
<polyline
@@ -419,21 +404,21 @@ const sparklineAreaPoints = computed(() => {
419404
<div :style="{ height: '1px', backgroundColor: t.divider }" />
420405

421406
<!-- GitHub Stars + Forks side by side (fixed height) -->
422-
<div class="flex flex-row flex-shrink-0" style="height: 120px">
407+
<div class="flex flex-row flex-shrink-0" style="height: 150px">
423408
<!-- Stars -->
424-
<div class="flex flex-col flex-1 justify-center" style="padding: 12px 20px">
409+
<div class="flex flex-col flex-1 justify-center" style="padding: 16px 24px">
425410
<span
426411
:style="{
427412
fontSize: '11px',
428413
fontWeight: 600,
429414
textTransform: 'uppercase',
430415
letterSpacing: '0.1em',
431416
color: t.textSubtle,
432-
marginBottom: '6px',
417+
marginBottom: '8px',
433418
}"
434419
>Stars</span
435420
>
436-
<span :style="{ fontSize: '36px', fontWeight: 700, color: t.text, lineHeight: '1' }">{{
421+
<span :style="{ fontSize: '44px', fontWeight: 700, color: t.text, lineHeight: '1' }">{{
437422
stars > 0 ? formatNum(stars) : '—'
438423
}}</span>
439424
</div>
@@ -442,19 +427,19 @@ const sparklineAreaPoints = computed(() => {
442427
<div class="flex-shrink-0" :style="{ width: '1px', backgroundColor: t.divider }" />
443428

444429
<!-- Forks -->
445-
<div class="flex flex-col flex-1 justify-center" style="padding: 12px 20px">
430+
<div class="flex flex-col flex-1 justify-center" style="padding: 16px 24px">
446431
<span
447432
:style="{
448433
fontSize: '11px',
449434
fontWeight: 600,
450435
textTransform: 'uppercase',
451436
letterSpacing: '0.1em',
452437
color: t.textSubtle,
453-
marginBottom: '6px',
438+
marginBottom: '8px',
454439
}"
455440
>Forks</span
456441
>
457-
<span :style="{ fontSize: '36px', fontWeight: 700, color: t.text, lineHeight: '1' }">{{
442+
<span :style="{ fontSize: '44px', fontWeight: 700, color: t.text, lineHeight: '1' }">{{
458443
forks > 0 ? formatNum(forks) : '—'
459444
}}</span>
460445
</div>
@@ -466,13 +451,13 @@ const sparklineAreaPoints = computed(() => {
466451
<div
467452
class="flex flex-row items-center justify-between flex-shrink-0"
468453
:style="{
469-
padding: '10px 36px 10px 34px',
454+
padding: '14px 40px 14px 38px',
470455
borderTop: `1px solid ${t.border}`,
471456
backgroundColor: t.footerBg,
472457
}"
473458
>
474459
<div class="flex flex-row items-center" :style="{ fontSize: '16px' }">
475-
<span :style="{ color: primaryColor, fontWeight: 700 }">./npmx</span>
460+
<span :style="{ color: primaryColor, fontWeight: 700 }">.</span>/npmx
476461
<span :style="{ color: t.textSubtle, marginLeft: '7px' }">· npm package explorer</span>
477462
</div>
478463
<span :style="{ fontSize: '14px', color: t.textSubtle }">npmx.dev/package/{{ name }}</span>

‎app/components/Package/ShareModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ async function downloadCard() {
7575
<template>
7676
<Modal :modal-title="`share ${packageName}`" id="share-modal" class="sm:max-w-3xl">
7777
<!-- Card preview -->
78-
<div class="bg-bg-elevated rounded-lg mb-4 overflow-hidden" style="aspect-ratio: 1200/420">
78+
<div class="bg-bg-elevated rounded-lg mb-4 overflow-hidden" style="aspect-ratio: 1200/630">
7979
<!-- Loading skeleton -->
8080
<div
8181
v-if="!imgLoaded && !imgError"

‎app/pages/share-card/[[org]]/[name].vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const primaryColor = ACCENT_HEX[theme][color]
4242
defineOgImageComponent(
4343
'ShareCard',
4444
{ name: packageName, theme, primaryColor },
45-
{ width: 1400, height: 480 },
45+
{ width: 1200, height: 630 },
4646
)
4747
4848
onMounted(() => {

0 commit comments

Comments
 (0)