Skip to content

Commit 78cd3c0

Browse files
valebearzottivalebearzotti
committed
upd styles
1 parent a1aba2f commit 78cd3c0

File tree

2 files changed

+927
-136
lines changed

2 files changed

+927
-136
lines changed

‎apps/website/app/api/og/[...path]/route.tsx‎

Lines changed: 104 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { getBaseUrl } from "@/lib/base-url";
77

88
const OG_WIDTH = 1200;
99
const OG_HEIGHT = 630;
10-
const LOGO_WIDTH = 300;
1110

1211
const geistRegular = fetch(
1312
new URL(
@@ -116,7 +115,9 @@ function resolveOgContent(
116115
if (!meta) {
117116
return {
118117
ok: false,
119-
response: new Response("Documentation page not found", { status: 404 }),
118+
response: new Response("Documentation page not found", {
119+
status: 404,
120+
}),
120121
};
121122
}
122123

@@ -135,10 +136,11 @@ function resolveOgContent(
135136
return {
136137
ok: true,
137138
content: {
138-
title: "Examples & templates",
139-
description: "Explore examples and templates to get started with xmcp.",
139+
title: "Shaping the future of MCP tooling",
140+
description:
141+
"xmcp now supports building compatible UI resources and tools with the OpenAI Apps SDK, out of the box.",
140142
summary: undefined,
141-
date: undefined,
143+
date: "2025-12-11",
142144
},
143145
};
144146
}
@@ -174,128 +176,118 @@ export async function GET(
174176
const { title, description, summary, date } = result.content;
175177

176178
return new ImageResponse(
177-
(
179+
<div
180+
tw={`h-[${OG_HEIGHT}px] w-[${OG_WIDTH}px] flex bg-black relative overflow-hidden`}
181+
style={{
182+
padding: "64px",
183+
boxShadow: "0 0 250px 8px rgba(0, 0, 0, 0.80) inset",
184+
}}
185+
>
186+
{/* Background image */}
187+
<img
188+
src={`${baseUrl}/og/bg.png`}
189+
alt="Background"
190+
width={OG_WIDTH}
191+
height={OG_HEIGHT}
192+
tw={`absolute top-0 left-0 w-[${OG_WIDTH}px] h-[${OG_HEIGHT}px] object-cover`}
193+
style={{ mixBlendMode: "plus-lighter" }}
194+
/>
195+
{/* Noise overlay */}
196+
<img
197+
src={`${baseUrl}/og/noise.png`}
198+
alt="Noise"
199+
width={OG_WIDTH}
200+
height={OG_HEIGHT}
201+
tw={`absolute top-0 left-0 w-[${OG_WIDTH}px] h-[${OG_HEIGHT}px] object-cover opacity-40`}
202+
style={{ mixBlendMode: "overlay" }}
203+
/>
204+
{/* Logo - top right */}
178205
<div
179-
tw={`h-[${OG_HEIGHT}px] w-[${OG_WIDTH}px] flex flex-row bg-black relative overflow-hidden`}
206+
style={{
207+
position: "absolute",
208+
top: "64px",
209+
right: "64px",
210+
display: "flex",
211+
}}
180212
>
181-
{/* Background image */}
182-
<img
183-
src={`${baseUrl}/og/bg.png`}
184-
alt="Background"
185-
width={OG_WIDTH}
186-
height={OG_HEIGHT}
187-
tw={`absolute top-0 left-0 w-[${OG_WIDTH}px] h-[${OG_HEIGHT}px] object-cover`}
188-
style={{ mixBlendMode: "plus-lighter" }}
189-
/>
190-
{/* Noise overlay */}
191-
<img
192-
src={`${baseUrl}/og/noise.png`}
193-
alt="Noise"
194-
width={OG_WIDTH}
195-
height={OG_HEIGHT}
196-
tw={`absolute top-0 left-0 w-[${OG_WIDTH}px] h-[${OG_HEIGHT}px] object-cover opacity-40`}
197-
style={{ mixBlendMode: "overlay" }}
198-
/>
199-
{/* Left section - Logo */}
213+
<XmcpLogo />
214+
</div>
215+
{/* Date tag - top left */}
216+
{date && (
200217
<div
201-
tw="flex items-start justify-start relative p-10"
202218
style={{
203-
flex: "0 0 25%",
204-
width: `${LOGO_WIDTH}px`,
205-
height: `${OG_HEIGHT}px`,
206-
overflow: "hidden",
219+
position: "absolute",
220+
top: "64px",
221+
left: "64px",
222+
display: "flex",
223+
alignItems: "center",
224+
padding: "4px 8px",
225+
border: "1px dashed #525252",
226+
backgroundColor: "rgba(245, 245, 245, 0.07)",
227+
color: "#A8A8A8",
228+
fontFamily: "Geist",
229+
fontStyle: "normal",
230+
fontSize: "24px",
231+
fontWeight: 500,
232+
lineHeight: "100%",
233+
letterSpacing: "1.92px",
234+
textTransform: "uppercase",
207235
}}
208236
>
209-
{/* Blur background */}
210-
<img
211-
src={`${baseUrl}/og/blur.png`}
212-
alt=""
213-
width={LOGO_WIDTH}
214-
height={OG_HEIGHT}
215-
style={{
216-
position: "absolute",
217-
top: 0,
218-
left: 0,
219-
width: `${LOGO_WIDTH}px`,
220-
height: `${OG_HEIGHT}px`,
221-
objectFit: "cover",
222-
opacity: 0.8,
223-
}}
224-
/>
225-
{/* Right border gradient */}
226-
<div
227-
style={{
228-
position: "absolute",
229-
top: 0,
230-
right: 0,
231-
width: "1px",
232-
height: "100%",
233-
background:
234-
"linear-gradient(180deg, rgba(92, 92, 92, 0.00) 0%, #5C5C5C 37.99%, rgba(92, 92, 92, 0.00) 100%)",
235-
}}
236-
/>
237-
<XmcpLogo />
237+
{formatDate(date)}
238238
</div>
239-
{/* Right section - Dynamic content */}
240-
<div
241-
tw="h-full flex flex-col items-start justify-center relative"
242-
style={{ flex: "0 0 75%", padding: "80px 128px 80px 64px" }}
239+
)}
240+
{/* Text content - bottom left */}
241+
<div
242+
style={{
243+
position: "absolute",
244+
bottom: "64px",
245+
left: "64px",
246+
right: "64px",
247+
display: "flex",
248+
flexDirection: "column",
249+
alignItems: "flex-start",
250+
justifyContent: "flex-end",
251+
}}
252+
>
253+
<h1
254+
style={{
255+
display: "flex",
256+
color: "white",
257+
margin: 0,
258+
marginBottom: "16px",
259+
fontFamily: "Geist",
260+
fontSize: "74px",
261+
fontWeight: 400,
262+
lineHeight: "110%",
263+
letterSpacing: "-1.04px",
264+
textShadow: "0 0 52px rgba(255, 255, 255, 0.60)",
265+
textWrap: "balance",
266+
}}
243267
>
244-
{/* Date tag */}
245-
{date && (
246-
<div
247-
style={{
248-
display: "flex",
249-
alignItems: "center",
250-
marginBottom: "24px",
251-
padding: "4px 8px",
252-
fontSize: "16px",
253-
textTransform: "uppercase",
254-
border: "1px dashed #525252",
255-
backgroundColor: "rgba(245, 245, 245, 0.07)",
256-
color: "#fafafa",
257-
fontFamily: "Geist",
258-
}}
259-
>
260-
{formatDate(date)}
261-
</div>
262-
)}
263-
<h1
264-
tw="text-white m-0 mb-6"
268+
{title}
269+
</h1>
270+
{(summary || description) && (
271+
<p
272+
key={summary ?? description}
265273
style={{
274+
display: "flex",
275+
margin: 0,
266276
fontFamily: "Geist",
267-
fontSize: "52px",
277+
fontSize: "32px",
268278
fontWeight: 400,
269-
lineHeight: "110%",
270-
letterSpacing: "-1.04px",
271-
textShadow: "0 0 52px rgba(255, 255, 255, 0.60)",
279+
color: "#A8A8A8",
280+
lineHeight: "120%",
281+
letterSpacing: "0.26px",
282+
textShadow: "0 0 40px rgba(0, 0, 0, 0.50)",
272283
textWrap: "balance",
273284
}}
274285
>
275-
{title}
276-
</h1>
277-
{(summary || description) && (
278-
<p
279-
key={summary ?? description}
280-
tw="m-0"
281-
style={{
282-
fontFamily: "Geist",
283-
fontSize: "26px",
284-
fontWeight: 400,
285-
color: "#A8A8A8",
286-
lineHeight: "120%",
287-
letterSpacing: "0.26px",
288-
textShadow: "0 0 40px rgba(0, 0, 0, 0.50)",
289-
textWrap: "balance",
290-
maxWidth: "85%",
291-
}}
292-
>
293-
{summary ?? description}
294-
</p>
295-
)}
296-
</div>
286+
{summary ?? description}
287+
</p>
288+
)}
297289
</div>
298-
),
290+
</div>,
299291
{
300292
width: OG_WIDTH,
301293
height: OG_HEIGHT,

0 commit comments

Comments
 (0)