Merge pull request #4204 from code-yeongyu/hotfix/og-static-deploy-fix
fix(web): switch OG to static PNG to unblock Cloudflare deploy
This commit is contained in:
YeonGyu-Kim
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@@ -1,167 +0,0 @@
|
||||
import { ImageResponse } from "next/og"
|
||||
|
||||
export const alt = "oh-my-openagent — The Best Agent Harness"
|
||||
export const size = { width: 1200, height: 630 }
|
||||
export const contentType = "image/png"
|
||||
|
||||
async function loadGoogleFont(family: string, weight: number): Promise<ArrayBuffer> {
|
||||
const url = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@${weight}&display=swap`
|
||||
const css = await (await fetch(url)).text()
|
||||
const match = css.match(/src: url\((.+?)\) format\('(?:opentype|truetype)'\)/)
|
||||
if (!match?.[1]) throw new Error(`Font URL not found for ${family} ${weight}`)
|
||||
const fontResponse = await fetch(match[1])
|
||||
return fontResponse.arrayBuffer()
|
||||
}
|
||||
|
||||
export default async function OpenGraphImage(): Promise<ImageResponse> {
|
||||
const [geistBold, geistRegular, geistMonoMedium] = await Promise.all([
|
||||
loadGoogleFont("Geist", 700),
|
||||
loadGoogleFont("Geist", 400),
|
||||
loadGoogleFont("Geist Mono", 500),
|
||||
])
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
background: "#0a0a0a",
|
||||
padding: "64px 80px",
|
||||
position: "relative",
|
||||
fontFamily: "Geist",
|
||||
}}
|
||||
>
|
||||
{/* Dotted grid background: flexbox-only, no grid */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
backgroundImage: "radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)",
|
||||
backgroundSize: "32px 32px",
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Top-left: brand wordmark */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 14,
|
||||
height: 14,
|
||||
background: "#00d4ff",
|
||||
borderRadius: 2,
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: 24,
|
||||
fontWeight: 500,
|
||||
color: "#00d4ff",
|
||||
letterSpacing: "-0.01em",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
oh-my-openagent
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center stack: headline + subtitle */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 28,
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 88,
|
||||
fontWeight: 700,
|
||||
color: "#ededed",
|
||||
letterSpacing: "-0.04em",
|
||||
lineHeight: 1.0,
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<span style={{ display: "flex" }}>The Best Agent</span>
|
||||
<span style={{ display: "flex", color: "#00d4ff", marginLeft: 24 }}>Harness</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 32,
|
||||
fontWeight: 400,
|
||||
color: "#a1a1a1",
|
||||
lineHeight: 1.4,
|
||||
maxWidth: 900,
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
Sisyphus orchestrates the team. Type ultrawork. Done.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom row: install command + cursor */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
padding: "12px 20px",
|
||||
background: "rgba(255,255,255,0.04)",
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
borderRadius: 9999,
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: 22,
|
||||
color: "#d4d4d8",
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "#00d4ff", display: "flex" }}>$</span>
|
||||
<span style={{ display: "flex" }}>bunx oh-my-openagent install</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: 36,
|
||||
color: "#00d4ff",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
▌
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
...size,
|
||||
fonts: [
|
||||
{ name: "Geist", data: geistRegular, weight: 400, style: "normal" },
|
||||
{ name: "Geist", data: geistBold, weight: 700, style: "normal" },
|
||||
{ name: "Geist Mono", data: geistMonoMedium, weight: 500, style: "normal" },
|
||||
],
|
||||
},
|
||||
)
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@@ -1,167 +0,0 @@
|
||||
import { ImageResponse } from "next/og"
|
||||
|
||||
export const alt = "oh-my-openagent — The Best Agent Harness (Twitter)"
|
||||
export const size = { width: 1200, height: 630 }
|
||||
export const contentType = "image/png"
|
||||
|
||||
async function loadGoogleFont(family: string, weight: number): Promise<ArrayBuffer> {
|
||||
const url = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@${weight}&display=swap`
|
||||
const css = await (await fetch(url)).text()
|
||||
const match = css.match(/src: url\((.+?)\) format\('(?:opentype|truetype)'\)/)
|
||||
if (!match?.[1]) throw new Error(`Font URL not found for ${family} ${weight}`)
|
||||
const fontResponse = await fetch(match[1])
|
||||
return fontResponse.arrayBuffer()
|
||||
}
|
||||
|
||||
export default async function TwitterImage(): Promise<ImageResponse> {
|
||||
const [geistBold, geistRegular, geistMonoMedium] = await Promise.all([
|
||||
loadGoogleFont("Geist", 700),
|
||||
loadGoogleFont("Geist", 400),
|
||||
loadGoogleFont("Geist Mono", 500),
|
||||
])
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
background: "#0a0a0a",
|
||||
padding: "64px 80px",
|
||||
position: "relative",
|
||||
fontFamily: "Geist",
|
||||
}}
|
||||
>
|
||||
{/* Dotted grid background: flexbox-only, no grid */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
backgroundImage: "radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)",
|
||||
backgroundSize: "32px 32px",
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Top-left: brand wordmark */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 14,
|
||||
height: 14,
|
||||
background: "#00d4ff",
|
||||
borderRadius: 2,
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: 24,
|
||||
fontWeight: 500,
|
||||
color: "#00d4ff",
|
||||
letterSpacing: "-0.01em",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
oh-my-openagent
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center stack: headline + subtitle */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 28,
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 88,
|
||||
fontWeight: 700,
|
||||
color: "#ededed",
|
||||
letterSpacing: "-0.04em",
|
||||
lineHeight: 1.0,
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<span style={{ display: "flex" }}>The Best Agent</span>
|
||||
<span style={{ display: "flex", color: "#00d4ff", marginLeft: 24 }}>Harness</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 32,
|
||||
fontWeight: 400,
|
||||
color: "#a1a1a1",
|
||||
lineHeight: 1.4,
|
||||
maxWidth: 900,
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
Sisyphus orchestrates the team. Type ultrawork. Done.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom row: install command + cursor */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
padding: "12px 20px",
|
||||
background: "rgba(255,255,255,0.04)",
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
borderRadius: 9999,
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: 22,
|
||||
color: "#d4d4d8",
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "#00d4ff", display: "flex" }}>$</span>
|
||||
<span style={{ display: "flex" }}>bunx oh-my-openagent install</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: 36,
|
||||
color: "#00d4ff",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
▌
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
...size,
|
||||
fonts: [
|
||||
{ name: "Geist", data: geistRegular, weight: 400, style: "normal" },
|
||||
{ name: "Geist", data: geistBold, weight: 700, style: "normal" },
|
||||
{ name: "Geist Mono", data: geistMonoMedium, weight: 500, style: "normal" },
|
||||
],
|
||||
},
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user