Skip to content

Commit 2375046

Browse files
ShroXdShroXd
committed
refactor: refactor the single char variable name
1 parent 12a1e57 commit 2375046

File tree

2 files changed

+55
-58
lines changed

2 files changed

+55
-58
lines changed

‎app/components/OgImage/ShareCard.vue‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const props = withDefaults(
1111
{ theme: 'dark' },
1212
)
1313
14-
const t = computed(() => SHARE_CARD_THEMES[props.theme])
14+
const theme = computed(() => SHARE_CARD_THEMES[props.theme])
1515
const primaryColor = computed(() => {
1616
const id = props.color as AccentColorId | undefined
1717
if (id && id in ACCENT_COLOR_TOKENS) {
@@ -50,7 +50,9 @@ const version = computed(() => resolvedVersion.value ?? pkg.value?.['dist-tags']
5050
const isLatest = computed(() => pkg.value?.['dist-tags']?.latest === version.value)
5151
const description = computed(() => pkg.value?.description ?? '')
5252
const license = computed(() => pkg.value?.license ?? '')
53-
const hasTypes = computed(() => Boolean(displayVersion.value?.types || displayVersion.value?.typings))
53+
const hasTypes = computed(() =>
54+
Boolean(displayVersion.value?.types || displayVersion.value?.typings),
55+
)
5456
const moduleFormat = computed(() => (displayVersion.value?.type === 'module' ? 'ESM' : 'CJS'))
5557
const depsCount = computed(() => Object.keys(displayVersion.value?.dependencies ?? {}).length)
5658
const unpackedSize = computed(() => displayVersion.value?.dist?.unpackedSize ?? 0)
@@ -68,11 +70,12 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
6870

6971
<template>
7072
<!-- Rendered at 1280×520 (2.46:1). -->
73+
<!-- Icons inlined as SVG: satori cannot render CSS mask-image/background-image icons (i-lucide-*) -->
7174
<div
7275
class="h-full w-full flex flex-col"
7376
:style="{
74-
backgroundColor: t.bg,
75-
color: t.text,
77+
backgroundColor: theme.bg,
78+
color: theme.text,
7679
fontFamily: fontSans,
7780
}"
7881
>
@@ -94,7 +97,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
9497
</span>
9598
<span
9699
class="text-[26px] font-light leading-none"
97-
:style="{ color: t.textMuted, fontFamily: fontMono }"
100+
:style="{ color: theme.textMuted, fontFamily: fontMono }"
98101
>
99102
v{{ version }}
100103
</span>
@@ -113,18 +116,18 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
113116
<div class="flex flex-row items-baseline flex-shrink-0 gap-[10px]">
114117
<span
115118
class="text-[40px] font-medium leading-none tracking-[-1.5px]"
116-
:style="{ color: t.text, fontFamily: fontMono }"
119+
:style="{ color: theme.text, fontFamily: fontMono }"
117120
>
118121
{{ compactFormatter.format(weeklyDownloads) }}
119122
</span>
120-
<span class="text-[22px] font-light" :style="{ color: t.textMuted }">weekly</span>
123+
<span class="text-[22px] font-light" :style="{ color: theme.textMuted }">weekly</span>
121124
</div>
122125
</div>
123126

124127
<!-- Description -->
125128
<div
126129
class="text-[22px] font-light leading-[1.6] mb-5"
127-
:style="{ color: t.textMuted, fontFamily: fontSans }"
130+
:style="{ color: theme.textMuted, fontFamily: fontSans }"
128131
>
129132
{{ truncate(description || 'No description.', 440) }}
130133
</div>
@@ -135,34 +138,34 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
135138
v-if="hasTypes"
136139
class="flex items-center text-[20px] font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
137140
:style="{
138-
border: `1px solid ${t.borderMuted}`,
139-
color: t.textSubtle,
141+
border: `1px solid ${theme.borderMuted}`,
142+
color: theme.textSubtle,
140143
}"
141144
>Types</span
142145
>
143146
<span
144147
class="flex items-center text-[20px] font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
145148
:style="{
146-
border: `1px solid ${t.borderMuted}`,
147-
color: t.textSubtle,
149+
border: `1px solid ${theme.borderMuted}`,
150+
color: theme.textSubtle,
148151
}"
149152
>{{ moduleFormat }}</span
150153
>
151154
<span
152155
v-if="license"
153156
class="flex items-center text-[20px] font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
154157
:style="{
155-
border: `1px solid ${t.borderMuted}`,
156-
color: t.textSubtle,
158+
border: `1px solid ${theme.borderMuted}`,
159+
color: theme.textSubtle,
157160
}"
158161
>{{ license }}</span
159162
>
160163
<span
161164
v-if="repoSlug"
162165
class="flex items-center text-[20px] font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
163166
:style="{
164-
border: `1px solid ${t.borderFaint}`,
165-
color: t.textFaint,
167+
border: `1px solid ${theme.borderFaint}`,
168+
color: theme.textFaint,
166169
fontFamily: fontMono,
167170
}"
168171
>{{ repoSlug }}</span
@@ -180,7 +183,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
180183
height="20"
181184
viewBox="0 0 24 24"
182185
fill="none"
183-
:stroke="t.textSubtle"
186+
:stroke="theme.textSubtle"
184187
stroke-width="2"
185188
stroke-linecap="round"
186189
stroke-linejoin="round"
@@ -191,7 +194,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
191194
</svg>
192195
<span
193196
class="text-[24px] font-normal leading-none tracking-[-0.3px]"
194-
:style="{ color: t.textMuted }"
197+
:style="{ color: theme.textMuted }"
195198
>{{ compactFormatter.format(stars) }}</span
196199
>
197200
</div>
@@ -203,7 +206,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
203206
height="20"
204207
viewBox="0 0 24 24"
205208
fill="none"
206-
:stroke="t.textSubtle"
209+
:stroke="theme.textSubtle"
207210
stroke-width="2"
208211
stroke-linecap="round"
209212
stroke-linejoin="round"
@@ -215,7 +218,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
215218
</svg>
216219
<span
217220
class="text-[24px] font-normal leading-none tracking-[-0.3px]"
218-
:style="{ color: t.textMuted }"
221+
:style="{ color: theme.textMuted }"
219222
>{{ compactFormatter.format(forks) }}</span
220223
>
221224
</div>
@@ -227,7 +230,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
227230
height="20"
228231
viewBox="0 0 24 24"
229232
fill="none"
230-
:stroke="t.textSubtle"
233+
:stroke="theme.textSubtle"
231234
stroke-width="2"
232235
stroke-linecap="round"
233236
stroke-linejoin="round"
@@ -239,7 +242,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
239242
</svg>
240243
<span
241244
class="text-[24px] font-normal leading-none tracking-[-0.3px]"
242-
:style="{ color: t.textMuted }"
245+
:style="{ color: theme.textMuted }"
243246
>{{ bytesFormatter.format(unpackedSize) }}</span
244247
>
245248
</div>
@@ -251,7 +254,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
251254
height="20"
252255
viewBox="0 0 24 24"
253256
fill="none"
254-
:stroke="t.textSubtle"
257+
:stroke="theme.textSubtle"
255258
stroke-width="2"
256259
stroke-linecap="round"
257260
stroke-linejoin="round"
@@ -261,7 +264,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
261264
</svg>
262265
<span
263266
class="text-[24px] font-normal leading-none tracking-[-0.3px]"
264-
:style="{ color: t.textMuted }"
267+
:style="{ color: theme.textMuted }"
265268
>{{ depsCount }}</span
266269
>
267270
</div>
@@ -273,7 +276,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
273276
height="20"
274277
viewBox="0 0 24 24"
275278
fill="none"
276-
:stroke="t.textSubtle"
279+
:stroke="theme.textSubtle"
277280
stroke-width="2"
278281
stroke-linecap="round"
279282
stroke-linejoin="round"
@@ -284,7 +287,7 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
284287
</svg>
285288
<span
286289
class="text-[24px] font-normal leading-none tracking-[-0.3px]"
287-
:style="{ color: t.textMuted }"
290+
:style="{ color: theme.textMuted }"
288291
>{{ formatDate(publishedAt) }}</span
289292
>
290293
</div>
@@ -297,20 +300,23 @@ const fontMono = "'Geist Mono', ui-monospace, monospace"
297300
<div
298301
class="flex flex-row items-center justify-between flex-shrink-0 py-4 pr-10 pl-8"
299302
:style="{
300-
borderTop: `1px solid ${t.border}`,
301-
backgroundColor: t.bg,
303+
borderTop: `1px solid ${theme.border}`,
304+
backgroundColor: theme.bg,
302305
}"
303306
>
304307
<div
305308
class="flex flex-row items-center text-[22px] font-light"
306309
:style="{ fontFamily: fontMono }"
307310
>
308311
<span class="font-medium -ml-1" :style="{ color: primaryColor }">.</span>/npmx
309-
<span class="ml-3 font-light" :style="{ color: t.textSubtle, fontFamily: fontSans }"
312+
<span class="ml-3 font-light" :style="{ color: theme.textSubtle, fontFamily: fontSans }"
310313
>· npm package explorer</span
311314
>
312315
</div>
313-
<span class="text-[20px] font-light" :style="{ color: t.textSubtle, fontFamily: fontMono }">
316+
<span
317+
class="text-[20px] font-light"
318+
:style="{ color: theme.textSubtle, fontFamily: fontMono }"
319+
>
314320
npmx.dev/package/{{ name }}
315321
</span>
316322
</div>

‎shared/utils/constants.ts‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ export interface AccentColorToken {
9797
dark: { oklch: string; hex: string }
9898
}
9999

100+
// todo(atriiy): This is duplicated with ACCENT_COLORS, will be refactored later
100101
export const ACCENT_COLOR_TOKENS = {
101102
sky: {
102103
light: { oklch: 'oklch(0.53 0.16 247.27)', hex: '#006fc2' },
@@ -154,39 +155,29 @@ export const BACKGROUND_THEME_TOKENS = {
154155
/**
155156
* Static theme tokens for the share card OG image.
156157
* Must use hex/rgb — satori (the OG image renderer) does not support oklch.
157-
* Background is not included here — use BACKGROUND_THEME_TOKENS for the card bg.
158-
* Values are hex equivalents of the corresponding CSS custom properties:
159-
* border → --border
160-
* borderMuted → --border at 60% opacity
161-
* borderFaint → --border at 50% opacity
162-
* divider → --border-subtle
163-
* text → --fg
164-
* textMuted → --fg-muted
165-
* textSubtle → --fg-subtle
166-
* textFaint → --fg-subtle at 80% opacity
167158
*/
168159
export const SHARE_CARD_THEMES = {
169160
dark: {
170-
bg: '#101010', // --bg: oklch(0.171 0 0)
171-
border: '#262626', // --border: oklch(0.269 0 0)
172-
borderMuted: '#26262699', // --border @ 60%
173-
borderFaint: '#26262680', // --border @ 50%
174-
divider: '#1f1f1f', // --border-subtle: oklch(0.239 0 0)
175-
text: '#f9f9f9', // --fg: oklch(0.982 0 0)
176-
textMuted: '#adadad', // --fg-muted: oklch(0.749 0 0)
177-
textSubtle: '#969696', // --fg-subtle: oklch(0.673 0 0)
178-
textFaint: '#969696cc', // --fg-subtle @ 80%
161+
bg: '#101010',
162+
border: '#262626',
163+
borderMuted: '#26262699',
164+
borderFaint: '#26262680',
165+
divider: '#1f1f1f',
166+
text: '#f9f9f9',
167+
textMuted: '#adadad',
168+
textSubtle: '#969696',
169+
textFaint: '#969696cc',
179170
},
180171
light: {
181-
bg: '#ffffff', // --bg: oklch(1 0 0)
182-
border: '#cecece', // --border: oklch(0.8514 0 0)
183-
borderMuted: '#cecece99', // --border @ 60%
184-
borderFaint: '#cecece80', // --border @ 50%
185-
divider: '#e5e5e5', // --border-subtle: oklch(0.922 0 0)
186-
text: '#0a0a0a', // --fg: oklch(0.146 0 0)
187-
textMuted: '#474747', // --fg-muted: oklch(0.398 0 0)
188-
textSubtle: '#5d5d5d', // --fg-subtle: oklch(0.48 0 0)
189-
textFaint: '#5d5d5dcc', // --fg-subtle @ 80%
172+
bg: '#ffffff',
173+
border: '#cecece',
174+
borderMuted: '#cecece99',
175+
borderFaint: '#cecece80',
176+
divider: '#e5e5e5',
177+
text: '#0a0a0a',
178+
textMuted: '#474747',
179+
textSubtle: '#5d5d5d',
180+
textFaint: '#5d5d5dcc',
190181
},
191182
} as const satisfies Record<'light' | 'dark', Record<string, string>>
192183

0 commit comments

Comments
 (0)