Skip to content

Commit 58bf72f

Browse files
adibarraadibarra
committed
OG variants: bump text sizes for thumbnail legibility, replace SemiAnalysis text with logo
1 parent e6d926d commit 58bf72f

26 files changed

Lines changed: 328 additions & 283 deletions

‎packages/app/src/app/api/og-preview/route.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { renderOgImage as v23 } from '@/app/blog/[slug]/og-variants/v23-bold-cir
2929
import { renderOgImage as v24 } from '@/app/blog/[slug]/og-variants/v24-gold-split-bold';
3030
import { renderOgImage as v25 } from '@/app/blog/[slug]/og-variants/v25-gold-accent-stripe';
3131

32-
const variants: Record<string, (meta: any) => ImageResponse> = {
32+
const variants: Record<string, (meta: any) => Promise<ImageResponse>> = {
3333
v1,
3434
v2,
3535
v3,
@@ -74,5 +74,5 @@ export async function GET(request: NextRequest) {
7474
);
7575
}
7676

77-
return render(result.meta);
77+
return await render(result.meta);
7878
}

‎packages/app/src/app/blog/[slug]/og-variants/v1-current.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,18 @@
22
* V1: Current — Plain dark background, no pattern.
33
* Clean and minimal, text-only layout.
44
*/
5+
import { readFile } from 'node:fs/promises';
6+
import { join } from 'node:path';
7+
58
import { ImageResponse } from 'next/og';
69

710
import type { BlogPostMeta } from '@/lib/blog';
811

912
export const size = { width: 1200, height: 630 };
1013

11-
export function renderOgImage(meta: BlogPostMeta) {
12-
const titleSize = meta.title.length > 60 ? 40 : meta.title.length > 40 ? 48 : 56;
14+
export async function renderOgImage(meta: BlogPostMeta) {
15+
const logoSrc = `data:image/png;base64,${(await readFile(join(process.cwd(), 'public/logo.png'))).toString('base64')}`;
16+
const titleSize = meta.title.length > 60 ? 48 : meta.title.length > 40 ? 56 : 64;
1317

1418
return new ImageResponse(
1519
<div
@@ -24,26 +28,26 @@ export function renderOgImage(meta: BlogPostMeta) {
2428
padding: 60,
2529
}}
2630
>
27-
<div style={{ display: 'flex', fontSize: 20, color: '#a1a1aa' }}>
28-
InferenceX Blog — SemiAnalysis
31+
<div style={{ display: 'flex', alignItems: 'center' }}>
32+
<img src={logoSrc} height={32} />
2933
</div>
3034

3135
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
3236
<div style={{ fontSize: titleSize, fontWeight: 700, lineHeight: 1.2 }}>{meta.title}</div>
3337
<div
3438
style={{
35-
fontSize: 22,
39+
fontSize: 28,
3640
color: '#a1a1aa',
3741
lineHeight: 1.4,
38-
maxHeight: 62,
42+
maxHeight: 80,
3943
overflow: 'hidden',
4044
}}
4145
>
42-
{meta.excerpt.length > 140 ? meta.excerpt.slice(0, 140) + '…' : meta.excerpt}
46+
{meta.excerpt.length > 140 ? meta.excerpt.slice(0, 140) + '...' : meta.excerpt}
4347
</div>
4448
</div>
4549

46-
<div style={{ display: 'flex', gap: 24, fontSize: 18, color: '#a1a1aa' }}>
50+
<div style={{ display: 'flex', gap: 24, fontSize: 24, color: '#a1a1aa' }}>
4751
<span>{meta.author}</span>
4852
<span>·</span>
4953
<span>
@@ -64,7 +68,7 @@ export function renderOgImage(meta: BlogPostMeta) {
6468
backgroundColor: '#27272a',
6569
padding: '4px 12px',
6670
borderRadius: 9999,
67-
fontSize: 14,
71+
fontSize: 20,
6872
}}
6973
>
7074
{tag}

‎packages/app/src/app/blog/[slug]/og-variants/v10-border-frame.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
* V10: Border Frame — Circuit blocks form a border/frame around the entire card.
33
* Content centered within. Strong visual identity, most similar to the sitewide OG.
44
*/
5+
import { readFile } from 'node:fs/promises';
6+
import { join } from 'node:path';
7+
58
import { ImageResponse } from 'next/og';
69

710
import type { BlogPostMeta } from '@/lib/blog';
@@ -78,8 +81,9 @@ const rightBlocks = Array.from({ length: 6 }).map((_, i) => ({
7881

7982
const allBlocks = [...topBlocks, ...bottomBlocks, ...leftBlocks, ...rightBlocks];
8083

81-
export function renderOgImage(meta: BlogPostMeta) {
82-
const titleSize = meta.title.length > 60 ? 40 : meta.title.length > 40 ? 48 : 56;
84+
export async function renderOgImage(meta: BlogPostMeta) {
85+
const logoSrc = `data:image/png;base64,${(await readFile(join(process.cwd(), 'public/logo.png'))).toString('base64')}`;
86+
const titleSize = meta.title.length > 60 ? 48 : meta.title.length > 40 ? 56 : 64;
8387

8488
return new ImageResponse(
8589
<div
@@ -191,26 +195,26 @@ export function renderOgImage(meta: BlogPostMeta) {
191195
}}
192196
/>
193197

194-
<div style={{ display: 'flex', fontSize: 20, color: '#a1a1aa', zIndex: 1 }}>
195-
InferenceX Blog — SemiAnalysis
198+
<div style={{ display: 'flex', alignItems: 'center', zIndex: 1 }}>
199+
<img src={logoSrc} height={32} />
196200
</div>
197201

198202
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, zIndex: 1 }}>
199203
<div style={{ fontSize: titleSize, fontWeight: 700, lineHeight: 1.2 }}>{meta.title}</div>
200204
<div
201205
style={{
202-
fontSize: 22,
206+
fontSize: 28,
203207
color: '#a1a1aa',
204208
lineHeight: 1.4,
205-
maxHeight: 62,
209+
maxHeight: 80,
206210
overflow: 'hidden',
207211
}}
208212
>
209-
{meta.excerpt.length > 140 ? meta.excerpt.slice(0, 140) + '…' : meta.excerpt}
213+
{meta.excerpt.length > 140 ? meta.excerpt.slice(0, 140) + '...' : meta.excerpt}
210214
</div>
211215
</div>
212216

213-
<div style={{ display: 'flex', gap: 24, fontSize: 18, color: '#a1a1aa', zIndex: 1 }}>
217+
<div style={{ display: 'flex', gap: 24, fontSize: 24, color: '#a1a1aa', zIndex: 1 }}>
214218
<span>{meta.author}</span>
215219
<span>·</span>
216220
<span>
@@ -231,7 +235,7 @@ export function renderOgImage(meta: BlogPostMeta) {
231235
backgroundColor: '#27272a',
232236
padding: '4px 12px',
233237
borderRadius: 9999,
234-
fontSize: 14,
238+
fontSize: 20,
235239
}}
236240
>
237241
{tag}

‎packages/app/src/app/blog/[slug]/og-variants/v11-brand-corners.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
* using exact brand gold (#F7B041), blue (#0B86D1), teal traces (#2A6B6B–#3A7A7A),
44
* on #131416 background. Gold pill button for tags.
55
*/
6+
import { readFile } from 'node:fs/promises';
7+
import { join } from 'node:path';
8+
69
import { ImageResponse } from 'next/og';
710

811
import type { BlogPostMeta } from '@/lib/blog';
@@ -17,8 +20,9 @@ const TEXT = '#EAEBEC';
1720
const TEXT_MUTED = '#C9CACB';
1821
const TEXT_DIM = '#B4B9BC';
1922

20-
export function renderOgImage(meta: BlogPostMeta) {
21-
const titleSize = meta.title.length > 60 ? 40 : meta.title.length > 40 ? 48 : 56;
23+
export async function renderOgImage(meta: BlogPostMeta) {
24+
const logoSrc = `data:image/png;base64,${(await readFile(join(process.cwd(), 'public/logo.png'))).toString('base64')}`;
25+
const titleSize = meta.title.length > 60 ? 48 : meta.title.length > 40 ? 56 : 64;
2226

2327
return new ImageResponse(
2428
<div
@@ -247,15 +251,10 @@ export function renderOgImage(meta: BlogPostMeta) {
247251
display: 'flex',
248252
alignItems: 'center',
249253
gap: 12,
250-
fontSize: 20,
251-
color: TEXT_DIM,
252254
zIndex: 1,
253255
}}
254256
>
255-
<span style={{ color: BLUE, fontWeight: 700 }}>InferenceX</span>
256-
<span>Blog</span>
257-
<span style={{ color: `${GOLD}80` }}>—</span>
258-
<span>SemiAnalysis</span>
257+
<img src={logoSrc} height={32} />
259258
</div>
260259

261260
{/* Title + excerpt */}
@@ -265,14 +264,14 @@ export function renderOgImage(meta: BlogPostMeta) {
265264
</div>
266265
<div
267266
style={{
268-
fontSize: 22,
267+
fontSize: 28,
269268
color: TEXT_MUTED,
270269
lineHeight: 1.4,
271-
maxHeight: 62,
270+
maxHeight: 80,
272271
overflow: 'hidden',
273272
}}
274273
>
275-
{meta.excerpt.length > 140 ? meta.excerpt.slice(0, 140) + '…' : meta.excerpt}
274+
{meta.excerpt.length > 120 ? meta.excerpt.slice(0, 120) + '…' : meta.excerpt}
276275
</div>
277276
</div>
278277

@@ -281,7 +280,7 @@ export function renderOgImage(meta: BlogPostMeta) {
281280
style={{
282281
display: 'flex',
283282
gap: 20,
284-
fontSize: 17,
283+
fontSize: 24,
285284
color: TEXT_DIM,
286285
alignItems: 'center',
287286
zIndex: 1,
@@ -307,9 +306,9 @@ export function renderOgImage(meta: BlogPostMeta) {
307306
backgroundColor: `${GOLD}18`,
308307
border: `1px solid ${GOLD}30`,
309308
color: GOLD,
310-
padding: '3px 14px',
309+
padding: '4px 16px',
311310
borderRadius: 9999,
312-
fontSize: 13,
311+
fontSize: 20,
313312
}}
314313
>
315314
{tag}

‎packages/app/src/app/blog/[slug]/og-variants/v12-brand-grid.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
* Teal trace tiles (#2A6B6B–#3A7A7A) with gold accent tiles (#F7B041).
44
* Content over gradient overlay. Closest recreation of the sharecard aesthetic.
55
*/
6+
import { readFile } from 'node:fs/promises';
7+
import { join } from 'node:path';
8+
69
import { ImageResponse } from 'next/og';
710

811
import type { BlogPostMeta } from '@/lib/blog';
@@ -41,8 +44,9 @@ function innerColor(type: number): string {
4144
return `${TEAL}${10 + type * 4}`;
4245
}
4346

44-
export function renderOgImage(meta: BlogPostMeta) {
45-
const titleSize = meta.title.length > 60 ? 40 : meta.title.length > 40 ? 48 : 56;
47+
export async function renderOgImage(meta: BlogPostMeta) {
48+
const logoSrc = `data:image/png;base64,${(await readFile(join(process.cwd(), 'public/logo.png'))).toString('base64')}`;
49+
const titleSize = meta.title.length > 60 ? 48 : meta.title.length > 40 ? 56 : 64;
4650

4751
return new ImageResponse(
4852
<div
@@ -110,15 +114,10 @@ export function renderOgImage(meta: BlogPostMeta) {
110114
display: 'flex',
111115
alignItems: 'center',
112116
gap: 12,
113-
fontSize: 20,
114-
color: '#B4B9BC',
115117
zIndex: 1,
116118
}}
117119
>
118-
<span style={{ color: BLUE, fontWeight: 700 }}>InferenceX</span>
119-
<span>Blog</span>
120-
<span style={{ color: `${GOLD}80` }}>—</span>
121-
<span>SemiAnalysis</span>
120+
<img src={logoSrc} height={32} />
122121
</div>
123122

124123
<div style={{ display: 'flex', flexDirection: 'column', gap: 14, zIndex: 1 }}>
@@ -127,22 +126,22 @@ export function renderOgImage(meta: BlogPostMeta) {
127126
</div>
128127
<div
129128
style={{
130-
fontSize: 22,
129+
fontSize: 28,
131130
color: '#C9CACB',
132131
lineHeight: 1.4,
133-
maxHeight: 62,
132+
maxHeight: 80,
134133
overflow: 'hidden',
135134
}}
136135
>
137-
{meta.excerpt.length > 140 ? meta.excerpt.slice(0, 140) + '…' : meta.excerpt}
136+
{meta.excerpt.length > 120 ? meta.excerpt.slice(0, 120) + '…' : meta.excerpt}
138137
</div>
139138
</div>
140139

141140
<div
142141
style={{
143142
display: 'flex',
144143
gap: 20,
145-
fontSize: 17,
144+
fontSize: 24,
146145
color: '#B4B9BC',
147146
alignItems: 'center',
148147
zIndex: 1,
@@ -168,9 +167,9 @@ export function renderOgImage(meta: BlogPostMeta) {
168167
backgroundColor: `${GOLD}18`,
169168
border: `1px solid ${GOLD}30`,
170169
color: GOLD,
171-
padding: '3px 14px',
170+
padding: '4px 16px',
172171
borderRadius: 9999,
173-
fontSize: 13,
172+
fontSize: 20,
174173
}}
175174
>
176175
{tag}

‎packages/app/src/app/blog/[slug]/og-variants/v13-brand-left-panel.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
* V13: Brand Left Panel — Left 1/4 is a dense circuit panel with SemiAnalysis brand colors.
33
* Blue accent bar on border. Gold nodes at intersections. Right 3/4 is content.
44
*/
5+
import { readFile } from 'node:fs/promises';
6+
import { join } from 'node:path';
7+
58
import { ImageResponse } from 'next/og';
69

710
import type { BlogPostMeta } from '@/lib/blog';
@@ -14,8 +17,9 @@ const TEAL = '#3A7A7A';
1417
const BG = '#131416';
1518
const PANEL_BG = '#0F1214';
1619

17-
export function renderOgImage(meta: BlogPostMeta) {
18-
const titleSize = meta.title.length > 60 ? 40 : meta.title.length > 40 ? 48 : 56;
20+
export async function renderOgImage(meta: BlogPostMeta) {
21+
const logoSrc = `data:image/png;base64,${(await readFile(join(process.cwd(), 'public/logo.png'))).toString('base64')}`;
22+
const titleSize = meta.title.length > 60 ? 48 : meta.title.length > 40 ? 56 : 64;
1923

2024
return new ImageResponse(
2125
<div
@@ -185,13 +189,8 @@ export function renderOgImage(meta: BlogPostMeta) {
185189
padding: '48px 55px',
186190
}}
187191
>
188-
<div
189-
style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 19, color: '#B4B9BC' }}
190-
>
191-
<span style={{ color: BLUE, fontWeight: 700 }}>InferenceX</span>
192-
<span>Blog</span>
193-
<span style={{ color: `${GOLD}80` }}>—</span>
194-
<span>SemiAnalysis</span>
192+
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
193+
<img src={logoSrc} height={32} />
195194
</div>
196195

197196
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
@@ -200,19 +199,19 @@ export function renderOgImage(meta: BlogPostMeta) {
200199
</div>
201200
<div
202201
style={{
203-
fontSize: 21,
202+
fontSize: 28,
204203
color: '#C9CACB',
205204
lineHeight: 1.4,
206-
maxHeight: 60,
205+
maxHeight: 80,
207206
overflow: 'hidden',
208207
}}
209208
>
210-
{meta.excerpt.length > 130 ? meta.excerpt.slice(0, 130) + '…' : meta.excerpt}
209+
{meta.excerpt.length > 110 ? meta.excerpt.slice(0, 110) + '…' : meta.excerpt}
211210
</div>
212211
</div>
213212

214213
<div
215-
style={{ display: 'flex', gap: 20, fontSize: 16, color: '#B4B9BC', alignItems: 'center' }}
214+
style={{ display: 'flex', gap: 20, fontSize: 24, color: '#B4B9BC', alignItems: 'center' }}
216215
>
217216
<span>{meta.author}</span>
218217
<span style={{ color: `${GOLD}60` }}>·</span>
@@ -234,9 +233,9 @@ export function renderOgImage(meta: BlogPostMeta) {
234233
backgroundColor: `${GOLD}18`,
235234
border: `1px solid ${GOLD}30`,
236235
color: GOLD,
237-
padding: '3px 12px',
236+
padding: '4px 14px',
238237
borderRadius: 9999,
239-
fontSize: 12,
238+
fontSize: 20,
240239
}}
241240
>
242241
{tag}

0 commit comments

Comments
 (0)