Skip to content

Commit d9c6631

Browse files
ShroXdShroXd
committed
feat: tweaks font and weight
1 parent 52f29a6 commit d9c6631

File tree

1 file changed

+51
-138
lines changed

1 file changed

+51
-138
lines changed

‎app/components/OgImage/ShareCard.vue‎

Lines changed: 51 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -98,108 +98,69 @@ const repoSlug = computed(() => {
9898
return truncate(`${ref.owner}/${ref.repo}`, 26)
9999
})
100100
101-
// Card: 1280×520 (2.46:1) — same ratio as 640×260, doubled for sharpness.
102-
// Single-column layout: accent bar + full-width content.
103-
// Typography hierarchy (two weights only):
104-
// 500 — primary values: package name, weekly DL, bottom stats
105-
// 300 — secondary: version, description, tags, footer text
106-
// 400 — labels only (18px uppercase tracked)
107-
const BOTTOM_ROW_H = 132
101+
const fontSans = "'Geist', ui-sans-serif, sans-serif"
102+
const fontMono = "'Geist Mono', ui-monospace, monospace"
108103
</script>
109104

110105
<template>
111-
<!--
112-
Rendered at 1280×520 (2.46:1).
113-
Flat single-column layout — no left/right panel split.
114-
Top row: package identity (left) + weekly downloads (right) on one baseline.
115-
Bottom row: all stats unified in a single row.
116-
-->
106+
<!-- Rendered at 1280×520 (2.46:1). -->
117107
<div
118108
class="h-full w-full flex flex-col"
119109
:style="{
120110
backgroundColor: t.bg,
121111
color: t.text,
122-
fontFamily: '\'Geist Mono\', ui-monospace, monospace',
112+
fontFamily: fontSans,
123113
}"
124114
>
125115
<!-- ── Main content ─────────────────────────────────────────────── -->
126116
<div class="flex flex-row flex-1 overflow-hidden">
127117
<!-- Content column -->
128118
<div class="flex flex-col flex-1 overflow-hidden justify-between">
129119
<!-- Top content -->
130-
<div class="flex flex-col" style="padding: 32px 40px 0 32px">
120+
<div class="flex flex-col pt-8 pr-10 pl-8">
131121
<!-- Top row: name+version+latest ← → downloads — single baseline -->
132-
<div class="flex flex-row items-baseline justify-between" style="margin-bottom: 16px">
122+
<div class="flex flex-row items-baseline justify-between mb-4">
133123
<!-- Left: name · version · latest -->
134124
<div class="flex flex-row items-baseline flex-wrap gap-[16px]">
135125
<span
136-
:style="{
137-
fontSize: '48px',
138-
fontWeight: 500,
139-
lineHeight: '1',
140-
letterSpacing: '-1px',
141-
}"
126+
class="text-[48px] font-medium leading-none tracking-[-1px]"
127+
:style="{ fontFamily: fontMono }"
142128
>
143129
{{ truncate(name, 24) }}
144130
</span>
145131
<span
146-
:style="{
147-
fontSize: '26px',
148-
fontWeight: 300,
149-
color: t.textMuted,
150-
lineHeight: '1',
151-
}"
152-
>v{{ version }}</span
132+
class="text-[26px] font-light leading-none"
133+
:style="{ color: t.textMuted, fontFamily: fontMono }"
153134
>
135+
v{{ version }}
136+
</span>
154137
<span
155138
v-if="isLatest"
156-
class="flex items-center"
139+
class="flex items-center text-[20px] font-normal py-1 px-[14px] rounded-[20px] leading-[1.5] tracking-[0.04em]"
157140
:style="{
158-
fontSize: '20px',
159-
fontWeight: 400,
160-
padding: '4px 14px',
161-
borderRadius: '20px',
162141
border: `1px solid ${withAlpha(primaryColor, 0.25)}`,
163-
color: withAlpha(primaryColor, 0.7),
164-
lineHeight: '1.5',
165-
letterSpacing: '0.04em',
142+
color: withAlpha(primaryColor, 0.9),
166143
}"
167144
>latest</span
168145
>
169146
</div>
170147

171148
<!-- Right: weekly downloads — flat, single line -->
172-
<div class="flex flex-row items-baseline flex-shrink-0" style="gap: 10px">
173-
<span
174-
:style="{
175-
fontSize: '40px',
176-
fontWeight: 500,
177-
color: t.text,
178-
lineHeight: '1',
179-
letterSpacing: '-1.5px',
180-
}"
181-
>{{ formatNum(weeklyDownloads) }}</span
182-
>
149+
<div class="flex flex-row items-baseline flex-shrink-0 gap-[10px]">
183150
<span
184-
:style="{
185-
fontSize: '20px',
186-
fontWeight: 300,
187-
color: t.textSubtle,
188-
}"
189-
>weekly</span
151+
class="text-[40px] font-medium leading-none tracking-[-1.5px]"
152+
:style="{ color: t.text, fontFamily: fontMono }"
190153
>
154+
{{ formatNum(weeklyDownloads) }}
155+
</span>
156+
<span class="text-[22px] font-light" :style="{ color: t.textMuted }">weekly</span>
191157
</div>
192158
</div>
193159

194160
<!-- Description -->
195161
<div
196-
:style="{
197-
fontSize: '22px',
198-
fontWeight: 300,
199-
color: t.textMuted,
200-
lineHeight: '1.6',
201-
marginBottom: '20px',
202-
}"
162+
class="text-[22px] font-light leading-[1.6] mb-5"
163+
:style="{ color: t.textMuted, fontFamily: fontSans }"
203164
>
204165
{{ truncate(description || 'No description.', 440) }}
205166
</div>
@@ -208,73 +169,48 @@ const BOTTOM_ROW_H = 132
208169
<div class="flex flex-row flex-wrap gap-[16px]">
209170
<span
210171
v-if="hasTypes"
211-
class="flex items-center"
172+
class="flex items-center text-[20px] font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
212173
:style="{
213-
fontSize: '20px',
214-
fontWeight: 300,
215-
padding: '4px 14px',
216-
borderRadius: '6px',
217174
border: `1px solid ${withAlpha(t.border, 0.6)}`,
218175
color: t.textSubtle,
219-
lineHeight: '1.6',
220176
}"
221177
>Types</span
222178
>
223179
<span
224-
class="flex items-center"
180+
class="flex items-center text-[20px] font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
225181
:style="{
226-
fontSize: '20px',
227-
fontWeight: 300,
228-
padding: '4px 14px',
229-
borderRadius: '6px',
230182
border: `1px solid ${withAlpha(t.border, 0.6)}`,
231183
color: t.textSubtle,
232-
lineHeight: '1.6',
233184
}"
234185
>{{ moduleFormat }}</span
235186
>
236187
<span
237188
v-if="license"
238-
class="flex items-center"
189+
class="flex items-center text-[20px] font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
239190
:style="{
240-
fontSize: '20px',
241-
fontWeight: 300,
242-
padding: '4px 14px',
243-
borderRadius: '6px',
244191
border: `1px solid ${withAlpha(t.border, 0.6)}`,
245192
color: t.textSubtle,
246-
lineHeight: '1.6',
247193
}"
248194
>{{ license }}</span
249195
>
250196
<span
251197
v-if="repoSlug"
252-
class="flex items-center"
198+
class="flex items-center text-[20px] font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
253199
:style="{
254-
fontSize: '20px',
255-
fontWeight: 300,
256-
padding: '4px 14px',
257-
borderRadius: '6px',
258200
border: `1px solid ${withAlpha(t.border, 0.5)}`,
259201
color: withAlpha(t.textSubtle, 0.8),
260-
lineHeight: '1.6',
202+
fontFamily: fontMono,
261203
}"
262204
>{{ repoSlug }}</span
263205
>
264206
</div>
265207
</div>
266208

267209
<!-- Bottom unified stats row -->
268-
<div
269-
class="flex flex-col justify-center flex-shrink-0"
270-
:style="{
271-
height: `${BOTTOM_ROW_H}px`,
272-
padding: '0 40px 0 32px',
273-
}"
274-
>
210+
<div class="flex flex-col justify-center flex-shrink-0 h-[132px] pr-10 pl-8">
275211
<div class="flex flex-row items-center gap-[42px]">
276212
<!-- Stars -->
277-
<div v-if="stars > 0" class="flex flex-row items-center gap-[8px]">
213+
<div v-if="stars > 0" class="flex flex-row items-center gap-2">
278214
<svg
279215
width="20"
280216
height="20"
@@ -290,19 +226,14 @@ const BOTTOM_ROW_H = 132
290226
/>
291227
</svg>
292228
<span
293-
:style="{
294-
fontSize: '24px',
295-
fontWeight: 400,
296-
color: t.textMuted,
297-
lineHeight: '1',
298-
letterSpacing: '-0.3px',
299-
}"
229+
class="text-[24px] font-normal leading-none tracking-[-0.3px]"
230+
:style="{ color: t.textMuted }"
300231
>{{ formatNum(stars) }}</span
301232
>
302233
</div>
303234

304235
<!-- Forks -->
305-
<div v-if="forks > 0" class="flex flex-row items-center" style="gap: 8px">
236+
<div v-if="forks > 0" class="flex flex-row items-center gap-2">
306237
<svg
307238
width="20"
308239
height="20"
@@ -319,19 +250,14 @@ const BOTTOM_ROW_H = 132
319250
<path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9m6 3v3" />
320251
</svg>
321252
<span
322-
:style="{
323-
fontSize: '24px',
324-
fontWeight: 400,
325-
color: t.textMuted,
326-
lineHeight: '1',
327-
letterSpacing: '-0.3px',
328-
}"
253+
class="text-[24px] font-normal leading-none tracking-[-0.3px]"
254+
:style="{ color: t.textMuted }"
329255
>{{ formatNum(forks) }}</span
330256
>
331257
</div>
332258

333259
<!-- Install Size -->
334-
<div class="flex flex-row items-center" style="gap: 8px">
260+
<div class="flex flex-row items-center gap-2">
335261
<svg
336262
width="20"
337263
height="20"
@@ -348,19 +274,14 @@ const BOTTOM_ROW_H = 132
348274
<path d="M3.29 7L12 12l8.71-5M7.5 4.27l9 5.15" />
349275
</svg>
350276
<span
351-
:style="{
352-
fontSize: '24px',
353-
fontWeight: 400,
354-
color: t.textMuted,
355-
lineHeight: '1',
356-
letterSpacing: '-0.3px',
357-
}"
277+
class="text-[24px] font-normal leading-none tracking-[-0.3px]"
278+
:style="{ color: t.textMuted }"
358279
>{{ formatBytes(unpackedSize) }}</span
359280
>
360281
</div>
361282

362283
<!-- Dependencies -->
363-
<div class="flex flex-row items-center" style="gap: 8px">
284+
<div class="flex flex-row items-center gap-2">
364285
<svg
365286
width="20"
366287
height="20"
@@ -375,19 +296,14 @@ const BOTTOM_ROW_H = 132
375296
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
376297
</svg>
377298
<span
378-
:style="{
379-
fontSize: '24px',
380-
fontWeight: 400,
381-
color: t.textMuted,
382-
lineHeight: '1',
383-
letterSpacing: '-0.3px',
384-
}"
299+
class="text-[24px] font-normal leading-none tracking-[-0.3px]"
300+
:style="{ color: t.textMuted }"
385301
>{{ depsCount }}</span
386302
>
387303
</div>
388304

389305
<!-- Published -->
390-
<div v-if="publishedAt" class="flex flex-row items-center" style="gap: 8px">
306+
<div v-if="publishedAt" class="flex flex-row items-center gap-2">
391307
<svg
392308
width="20"
393309
height="20"
@@ -403,13 +319,8 @@ const BOTTOM_ROW_H = 132
403319
<path d="M3 10h18" />
404320
</svg>
405321
<span
406-
:style="{
407-
fontSize: '24px',
408-
fontWeight: 400,
409-
color: t.textMuted,
410-
lineHeight: '1',
411-
letterSpacing: '-0.3px',
412-
}"
322+
class="text-[24px] font-normal leading-none tracking-[-0.3px]"
323+
:style="{ color: t.textMuted }"
413324
>{{ formatDate(publishedAt) }}</span
414325
>
415326
</div>
@@ -420,20 +331,22 @@ const BOTTOM_ROW_H = 132
420331

421332
<!-- ── Footer ────────────────────────────────────────────────────── -->
422333
<div
423-
class="flex flex-row items-center justify-between flex-shrink-0"
334+
class="flex flex-row items-center justify-between flex-shrink-0 py-4 pr-10 pl-8"
424335
:style="{
425-
padding: '16px 40px 16px 32px',
426336
borderTop: `1px solid ${t.border}`,
427337
backgroundColor: t.bg,
428338
}"
429339
>
430-
<div class="flex flex-row items-center" :style="{ fontSize: '22px', fontWeight: 300 }">
431-
<span :style="{ color: primaryColor, fontWeight: 500, marginLeft: '-4px' }">.</span>/npmx
432-
<span :style="{ color: t.textSubtle, marginLeft: '12px', fontWeight: 300 }"
340+
<div
341+
class="flex flex-row items-center text-[22px] font-light"
342+
:style="{ fontFamily: fontMono }"
343+
>
344+
<span class="font-medium -ml-1" :style="{ color: primaryColor }">.</span>/npmx
345+
<span class="ml-3 font-light" :style="{ color: t.textSubtle, fontFamily: fontSans }"
433346
>· npm package explorer</span
434347
>
435348
</div>
436-
<span :style="{ fontSize: '20px', fontWeight: 300, color: t.textSubtle }">
349+
<span class="text-[20px] font-light" :style="{ color: t.textSubtle, fontFamily: fontMono }">
437350
npmx.dev/package/{{ name }}
438351
</span>
439352
</div>

0 commit comments

Comments
 (0)