opengraph-image.tsx92 lines · main

1	import { ImageResponse } from 'next/og';
2
3	export const runtime = 'edge';
4	export const alt = 'briven docs — reactive postgres, worldwide, fully portable';
5	export const size = { width: 1200, height: 630 };
6	export const contentType = 'image/png';
7
8	/**
9	* Dynamic OG image for docs.briven.tech. Same identity as the marketing
10	* site OG, but copy positions this as docs.
11	*/
12	export default function OgImage() {
13	return new ImageResponse(
14	(
15	<div
16	style={{
17	height: '100%',
18	width: '100%',
19	display: 'flex',
20	flexDirection: 'column',
21	justifyContent: 'space-between',
22	backgroundColor: '#0a0b0d',
23	padding: '64px',
24	color: '#f1f5f9',
25	fontFamily: 'system-ui, sans-serif',
26	}}
27	>
28	<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
29	<div
30	style={{
31	width: '48px',
32	height: '48px',
33	borderRadius: '8px',
34	backgroundColor: '#5b8def',
35	display: 'flex',
36	alignItems: 'center',
37	justifyContent: 'center',
38	color: '#0a0b0d',
39	fontSize: '32px',
40	fontWeight: 700,
41	}}
42	>
43	b
44	</div>
45	<span style={{ fontSize: '28px', fontWeight: 500 }}>
46	briven <span style={{ color: '#94a3b8' }}>· docs</span>
47	</span>
48	</div>
49
50	<div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
51	<h1
52	style={{
53	margin: 0,
54	fontSize: '72px',
55	fontWeight: 500,
56	lineHeight: 1.05,
57	letterSpacing: '-0.03em',
58	}}
59	>
60	developer docs.
61	</h1>
62	<p
63	style={{
64	margin: 0,
65	fontSize: '28px',
66	color: '#94a3b8',
67	lineHeight: 1.4,
68	maxWidth: '1000px',
69	}}
70	>
71	quickstart · schema dsl · examples · functions · http api · migration guides ·
72	self-host · cli · changelog.
73	</p>
74	</div>
75
76	<div
77	style={{
78	display: 'flex',
79	alignItems: 'center',
80	justifyContent: 'space-between',
81	fontSize: '22px',
82	color: '#64748b',
83	}}
84	>
85	<span>docs.briven.tech</span>
86	<span>open-core · agpl-3.0</span>
87	</div>
88	</div>
89	),
90	{ ...size },
91	);
92	}