feat(web): dynamic OG + Twitter card images via next/og
app/opengraph-image.tsx (new): - next/og ImageResponse, 1200x630 PNG - Dark #0a0a0a background + cyan #00d4ff brand wordmark + headline + install command pill + terminal cursor - Google Fonts loadGoogleFont helper for Geist 400/700 + Geist Mono 500 (runtime fetch, Cloudflare Workers compatible) - Cache-Control: public, immutable, max-age=31536000 app/twitter-image.tsx (new): - Same shape as OG with Twitter-card alt text - Inherits twitter:card=summary_large_image from layout app/layout.tsx: - metadata.alternates.languages: explicit canonical URLs for en/ko/ ja/zh so search engines pick up hreflang - metadata.openGraph.alternateLocale: ko_KR, ja_JP, zh_CN - Drop manual openGraph.images / twitter.images: file-based metadata convention now auto-emits og:image:width, og:image:height, og:image:type, twitter:image:width, twitter:image:height - metadata.robots: max-image-preview=large, max-snippet=-1 (richer SERP previews) Verified: curl /opengraph-image returns 200, content-type image/png, 1200x630 PNG body. All 4 hreflang links present in <head>.
This commit is contained in:
YeonGyu-Kim
@@ -1,4 +1,5 @@
|
||||
import type { Metadata } from "next"
|
||||
import type { JSX, ReactNode } from "react"
|
||||
import { GeistSans } from "geist/font/sans"
|
||||
import { GeistMono } from "geist/font/mono"
|
||||
import Script from "next/script"
|
||||
@@ -32,21 +33,31 @@ export const metadata: Metadata = {
|
||||
],
|
||||
authors: [{ name: "Yeongyu Kim", url: "https://github.com/code-yeongyu" }],
|
||||
creator: "Yeongyu Kim",
|
||||
alternates: {
|
||||
canonical: "/",
|
||||
languages: {
|
||||
en: "/",
|
||||
ko: "/ko",
|
||||
ja: "/ja",
|
||||
zh: "/zh",
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "en_US",
|
||||
alternateLocale: ["ko_KR", "ja_JP", "zh_CN"],
|
||||
url: primarySiteUrl,
|
||||
siteName: "Oh My OpenAgent",
|
||||
title: "Oh My OpenAgent — The Best Agent Harness",
|
||||
description:
|
||||
"Meet Sisyphus: The batteries-included agent that codes like you. Multi-model orchestration, Team Mode, background agents, 54+ lifecycle hooks.",
|
||||
images: [{ url: "/images/hero.webp", width: 1024, height: 683, alt: "Oh My OpenAgent" }],
|
||||
// og:image is supplied by app/opengraph-image.tsx via Next.js file-based metadata convention.
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Oh My OpenAgent — The Best Agent Harness",
|
||||
description: "Meet Sisyphus: The batteries-included agent that codes like you.",
|
||||
images: ["/images/hero.webp"],
|
||||
// twitter:image is supplied by app/twitter-image.tsx via the file-based convention.
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
@@ -54,6 +65,8 @@ export const metadata: Metadata = {
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
"max-image-preview": "large",
|
||||
"max-snippet": -1,
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -82,7 +95,7 @@ const jsonLd = {
|
||||
const gaMeasurementId = "G-S0QJFKT46Q"
|
||||
const gaTrackedDomain = "ohmyopenagent.com"
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
export default function RootLayout({ children }: { readonly children: ReactNode }): JSX.Element {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
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" },
|
||||
],
|
||||
},
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
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