Skip to content

Commit 1f632c6

Browse files
adibarraadibarra
committed
add 5 thumbnail-optimized OG variants (v21-v25) with huge text and minimal details
1 parent 0ab91f9 commit 1f632c6

7 files changed

Lines changed: 421 additions & 3 deletions

File tree

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ import { renderOgImage as v17 } from '@/app/blog/[slug]/og-variants/v17-slide-co
2323
import { renderOgImage as v18 } from '@/app/blog/[slug]/og-variants/v18-slide-hybrid';
2424
import { renderOgImage as v19 } from '@/app/blog/[slug]/og-variants/v19-slide-keynote';
2525
import { renderOgImage as v20 } from '@/app/blog/[slug]/og-variants/v20-slide-full';
26+
import { renderOgImage as v21 } from '@/app/blog/[slug]/og-variants/v21-compact-bold';
27+
import { renderOgImage as v22 } from '@/app/blog/[slug]/og-variants/v22-gold-title-bar';
28+
import { renderOgImage as v23 } from '@/app/blog/[slug]/og-variants/v23-bold-circuit';
29+
import { renderOgImage as v24 } from '@/app/blog/[slug]/og-variants/v24-gold-split-bold';
30+
import { renderOgImage as v25 } from '@/app/blog/[slug]/og-variants/v25-gold-accent-stripe';
2631

2732
const variants: Record<string, (meta: any) => ImageResponse> = {
2833
v1,
@@ -45,6 +50,11 @@ const variants: Record<string, (meta: any) => ImageResponse> = {
4550
v18,
4651
v19,
4752
v20,
53+
v21,
54+
v22,
55+
v23,
56+
v24,
57+
v25,
4858
};
4959

5060
export async function GET(request: NextRequest) {

‎packages/app/src/app/blog/[slug]/og-variants/v21-compact-bold.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* V21: Compact Bold — Huge title, brand top-left, date bottom-right.
3+
* Nothing else. Maximum readability at small render sizes.
4+
*/
5+
import { ImageResponse } from 'next/og';
6+
7+
import type { BlogPostMeta } from '@/lib/blog';
8+
9+
export const size = { width: 1200, height: 630 };
10+
11+
const GOLD = '#F7B041';
12+
const BLUE = '#0B86D1';
13+
const BG = '#131416';
14+
15+
export function renderOgImage(meta: BlogPostMeta) {
16+
const titleSize = meta.title.length > 50 ? 56 : meta.title.length > 30 ? 68 : 80;
17+
18+
return new ImageResponse(
19+
<div
20+
style={{
21+
display: 'flex',
22+
flexDirection: 'column',
23+
justifyContent: 'space-between',
24+
width: '100%',
25+
height: '100%',
26+
backgroundColor: BG,
27+
color: '#FFFFFF',
28+
padding: '50px 65px',
29+
}}
30+
>
31+
{/* Brand */}
32+
<div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
33+
<span style={{ fontSize: 32, fontWeight: 800, color: BLUE }}>semi</span>
34+
<span style={{ fontSize: 32, fontWeight: 800, color: GOLD }}>analysis</span>
35+
</div>
36+
37+
{/* Title — the hero */}
38+
<div style={{ fontSize: titleSize, fontWeight: 800, lineHeight: 1.1, color: '#FFFFFF' }}>
39+
{meta.title}
40+
</div>
41+
42+
{/* Minimal footer */}
43+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
44+
<span style={{ fontSize: 28, color: GOLD, fontWeight: 600 }}>InferenceX Blog</span>
45+
<span style={{ fontSize: 24, color: '#656B72' }}>
46+
{new Date(meta.date + 'T00:00:00Z').toLocaleDateString('en-US', {
47+
month: 'short',
48+
day: 'numeric',
49+
year: 'numeric',
50+
timeZone: 'UTC',
51+
})}
52+
</span>
53+
</div>
54+
</div>,
55+
size,
56+
);
57+
}

‎packages/app/src/app/blog/[slug]/og-variants/v22-gold-title-bar.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/**
2+
* V22: Gold Title Bar — Thick gold bar at top with brand in dark text,
3+
* huge white title on charcoal below. Two clear zones, both legible at any size.
4+
*/
5+
import { ImageResponse } from 'next/og';
6+
7+
import type { BlogPostMeta } from '@/lib/blog';
8+
9+
export const size = { width: 1200, height: 630 };
10+
11+
const GOLD = '#F7B041';
12+
const BLUE = '#0B86D1';
13+
const CHARCOAL = '#454646';
14+
15+
export function renderOgImage(meta: BlogPostMeta) {
16+
const titleSize = meta.title.length > 50 ? 54 : meta.title.length > 30 ? 66 : 78;
17+
18+
return new ImageResponse(
19+
<div
20+
style={{
21+
display: 'flex',
22+
flexDirection: 'column',
23+
width: '100%',
24+
height: '100%',
25+
backgroundColor: CHARCOAL,
26+
overflow: 'hidden',
27+
}}
28+
>
29+
{/* Gold top bar */}
30+
<div
31+
style={{
32+
display: 'flex',
33+
width: '100%',
34+
height: 100,
35+
backgroundColor: GOLD,
36+
alignItems: 'center',
37+
justifyContent: 'space-between',
38+
padding: '0 55px',
39+
}}
40+
>
41+
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
42+
<span style={{ fontSize: 34, fontWeight: 800, color: BLUE }}>semi</span>
43+
<span style={{ fontSize: 34, fontWeight: 800, color: '#444647' }}>analysis</span>
44+
</div>
45+
<span style={{ fontSize: 26, fontWeight: 600, color: '#444647' }}>InferenceX Blog</span>
46+
</div>
47+
48+
{/* Title area */}
49+
<div
50+
style={{
51+
display: 'flex',
52+
flexDirection: 'column',
53+
justifyContent: 'center',
54+
flex: 1,
55+
padding: '0 55px',
56+
gap: 20,
57+
}}
58+
>
59+
<div style={{ fontSize: titleSize, fontWeight: 800, lineHeight: 1.1, color: '#FFFFFF' }}>
60+
{meta.title}
61+
</div>
62+
<div style={{ fontSize: 28, color: '#999EA4' }}>{meta.author}</div>
63+
</div>
64+
65+
{/* Thin gold bottom line */}
66+
<div style={{ display: 'flex', width: '100%', height: 8, backgroundColor: GOLD }} />
67+
</div>,
68+
size,
69+
);
70+
}

‎packages/app/src/app/blog/[slug]/og-variants/v23-bold-circuit.tsx‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/**
2+
* V23: Bold Circuit — Thick, chunky circuit blocks (visible at 400px wide).
3+
* Only 6-8 large blocks, not dozens of tiny ones. Gold accent blocks stand out.
4+
* Huge centered title.
5+
*/
6+
import { ImageResponse } from 'next/og';
7+
8+
import type { BlogPostMeta } from '@/lib/blog';
9+
10+
export const size = { width: 1200, height: 630 };
11+
12+
const GOLD = '#F7B041';
13+
const BLUE = '#0B86D1';
14+
const BG = '#131416';
15+
const TEAL = '#3A7A7A';
16+
17+
export function renderOgImage(meta: BlogPostMeta) {
18+
const titleSize = meta.title.length > 50 ? 54 : meta.title.length > 30 ? 66 : 78;
19+
20+
return new ImageResponse(
21+
<div
22+
style={{
23+
display: 'flex',
24+
flexDirection: 'column',
25+
justifyContent: 'space-between',
26+
width: '100%',
27+
height: '100%',
28+
backgroundColor: BG,
29+
color: '#FFFFFF',
30+
padding: '50px 60px',
31+
position: 'relative',
32+
overflow: 'hidden',
33+
}}
34+
>
35+
{/* Bold circuit blocks — few, large, thick borders */}
36+
<div
37+
style={{
38+
position: 'absolute',
39+
right: -30,
40+
top: -30,
41+
width: 200,
42+
height: 180,
43+
border: `4px solid ${TEAL}35`,
44+
borderRadius: 8,
45+
display: 'flex',
46+
}}
47+
/>
48+
<div
49+
style={{
50+
position: 'absolute',
51+
right: 140,
52+
top: 20,
53+
width: 140,
54+
height: 120,
55+
border: `4px solid ${GOLD}40`,
56+
borderRadius: 8,
57+
display: 'flex',
58+
}}
59+
/>
60+
<div
61+
style={{
62+
position: 'absolute',
63+
left: -40,
64+
bottom: -40,
65+
width: 220,
66+
height: 200,
67+
border: `4px solid ${TEAL}30`,
68+
borderRadius: 8,
69+
display: 'flex',
70+
}}
71+
/>
72+
<div
73+
style={{
74+
position: 'absolute',
75+
left: 150,
76+
bottom: 10,
77+
width: 160,
78+
height: 130,
79+
border: `4px solid ${GOLD}35`,
80+
borderRadius: 8,
81+
display: 'flex',
82+
}}
83+
/>
84+
{/* Thick trace lines */}
85+
<div
86+
style={{
87+
position: 'absolute',
88+
right: 100,
89+
top: 150,
90+
width: 4,
91+
height: 120,
92+
backgroundColor: `${TEAL}25`,
93+
display: 'flex',
94+
}}
95+
/>
96+
<div
97+
style={{
98+
position: 'absolute',
99+
left: 130,
100+
bottom: 180,
101+
width: 120,
102+
height: 4,
103+
backgroundColor: `${TEAL}20`,
104+
display: 'flex',
105+
}}
106+
/>
107+
108+
{/* Brand */}
109+
<div style={{ display: 'flex', alignItems: 'center', gap: 5, zIndex: 1 }}>
110+
<span style={{ fontSize: 30, fontWeight: 800, color: BLUE }}>semi</span>
111+
<span style={{ fontSize: 30, fontWeight: 800, color: GOLD }}>analysis</span>
112+
</div>
113+
114+
{/* Title */}
115+
<div style={{ fontSize: titleSize, fontWeight: 800, lineHeight: 1.1, zIndex: 1 }}>
116+
{meta.title}
117+
</div>
118+
119+
{/* Footer */}
120+
<div
121+
style={{
122+
display: 'flex',
123+
justifyContent: 'space-between',
124+
alignItems: 'center',
125+
zIndex: 1,
126+
}}
127+
>
128+
<span style={{ fontSize: 26, color: GOLD, fontWeight: 600 }}>InferenceX Blog</span>
129+
<span style={{ fontSize: 22, color: '#656B72' }}>{meta.author}</span>
130+
</div>
131+
</div>,
132+
size,
133+
);
134+
}

‎packages/app/src/app/blog/[slug]/og-variants/v24-gold-split-bold.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/**
2+
* V24: Gold Split Bold — Left 30% gold with brand stacked vertically,
3+
* right 70% dark with massive title. Both zones survive at 360px render.
4+
* No fine details, just color blocks and big text.
5+
*/
6+
import { ImageResponse } from 'next/og';
7+
8+
import type { BlogPostMeta } from '@/lib/blog';
9+
10+
export const size = { width: 1200, height: 630 };
11+
12+
const GOLD = '#F7B041';
13+
const BLUE = '#0B86D1';
14+
const BG = '#131416';
15+
16+
export function renderOgImage(meta: BlogPostMeta) {
17+
const titleSize = meta.title.length > 50 ? 52 : meta.title.length > 30 ? 64 : 76;
18+
19+
return new ImageResponse(
20+
<div style={{ display: 'flex', width: '100%', height: '100%', overflow: 'hidden' }}>
21+
{/* Left gold panel */}
22+
<div
23+
style={{
24+
display: 'flex',
25+
flexDirection: 'column',
26+
justifyContent: 'space-between',
27+
width: 340,
28+
height: '100%',
29+
backgroundColor: GOLD,
30+
padding: '50px 40px',
31+
}}
32+
>
33+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
34+
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
35+
<span style={{ fontSize: 36, fontWeight: 800, color: BLUE }}>semi</span>
36+
<span style={{ fontSize: 36, fontWeight: 800, color: '#444647' }}>analysis</span>
37+
</div>
38+
<span style={{ fontSize: 24, color: '#5D5E5F', fontWeight: 600 }}>InferenceX Blog</span>
39+
</div>
40+
41+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
42+
<span style={{ fontSize: 22, color: '#5D5E5F' }}>{meta.author}</span>
43+
<span style={{ fontSize: 20, color: '#6D6E6F' }}>
44+
{new Date(meta.date + 'T00:00:00Z').toLocaleDateString('en-US', {
45+
month: 'short',
46+
year: 'numeric',
47+
timeZone: 'UTC',
48+
})}
49+
</span>
50+
</div>
51+
</div>
52+
53+
{/* Right dark panel */}
54+
<div
55+
style={{
56+
display: 'flex',
57+
flexDirection: 'column',
58+
justifyContent: 'center',
59+
flex: 1,
60+
backgroundColor: BG,
61+
padding: '50px 55px',
62+
}}
63+
>
64+
<div style={{ fontSize: titleSize, fontWeight: 800, lineHeight: 1.1, color: '#FFFFFF' }}>
65+
{meta.title}
66+
</div>
67+
</div>
68+
</div>,
69+
size,
70+
);
71+
}

0 commit comments

Comments
 (0)