diff --git a/src/app/day/2026/amsterdam/opengraph-image.tsx b/src/app/day/2026/amsterdam/opengraph-image.tsx new file mode 100644 index 0000000000..37daf1f000 --- /dev/null +++ b/src/app/day/2026/amsterdam/opengraph-image.tsx @@ -0,0 +1,12 @@ +import { SimpleOpengraphImage } from "../components/og-images/simple-opengraph-image" +export { + generateStaticParams, + contentType, + size, +} from "../components/og-images/simple-opengraph-image" + +export default SimpleOpengraphImage.bind(null, { + pageTitle: "Amsterdam", + date: "Jun 9-10, 2026", + location: "Tolhuistuin, Amsterdam", +}) diff --git a/src/app/day/2026/bengaluru/opengraph-image.tsx b/src/app/day/2026/bengaluru/opengraph-image.tsx new file mode 100644 index 0000000000..1df325a6f7 --- /dev/null +++ b/src/app/day/2026/bengaluru/opengraph-image.tsx @@ -0,0 +1,12 @@ +import { SimpleOpengraphImage } from "../components/og-images/simple-opengraph-image" +export { + generateStaticParams, + contentType, + size, +} from "../components/og-images/simple-opengraph-image" + +export default SimpleOpengraphImage.bind(null, { + pageTitle: "Bengaluru", + date: "Aug 19-20, 2026", + location: "Conrad Bengaluru, India", +}) diff --git a/src/app/day/2026/components/graphql-day-logo-link.tsx b/src/app/day/2026/components/graphql-day-logo-link.tsx index b7dd449ede..a7c2257cd0 100644 --- a/src/app/day/2026/components/graphql-day-logo-link.tsx +++ b/src/app/day/2026/components/graphql-day-logo-link.tsx @@ -1,7 +1,7 @@ import { clsx } from "clsx" import NextLink from "next/link" -function GraphQLDayLogo(props: React.SVGProps) { +export function GraphQLDayLogo(props: React.SVGProps) { return ( diff --git a/src/app/day/2026/components/og-images/day-opengraph-image-header.tsx b/src/app/day/2026/components/og-images/day-opengraph-image-header.tsx new file mode 100644 index 0000000000..5612a8d7fb --- /dev/null +++ b/src/app/day/2026/components/og-images/day-opengraph-image-header.tsx @@ -0,0 +1,179 @@ +import { CalendarIcon } from "@/app/conf/_design-system/pixelarticons/calendar-icon" +import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon" + +import { GraphQLDayLogo } from "../graphql-day-logo-link" + +export const OG_IMAGE_HEADER_HEIGHT = 154 +export const RIGHT_COLUMN_WIDTH_PX = 476 + +/** + * We can't use CSS variables and Tailwind classes here because we're rendering an image. + * Mirrors src/app/colors.css. + */ +export const colors = { + neu0: "hsl(0 0% 100%)", + neu50: "hsl(75 57% 97%)", + neu100: "hsl(75 15% 95%)", + neu200: "hsl(77 14% 90%)", + neu300: "hsl(76 14% 85%)", + neu400: "hsl(77 14% 80%)", + neu500: "hsl(74 14% 70%)", + neu600: "hsl(76 15% 60%)", + neu700: "hsl(76 15% 40%)", + neu800: "hsl(77 14% 20%)", + neu900: "hsl(75 15% 5%)", + secLighter: "hsl(79 80% 90%)", + priBase: "hsl(319 100% 44.1%)", +} + +export const fonts = { + sans: "'Host Grotesk', var(--font-sans)", + mono: "'Commit Mono', var(--font-mono)", +} + +export function DayOpengraphImageHeader({ + city, + date, + location, +}: { + city: string + date: string + location: string +}) { + return ( +
+
+
+ +
+ GraphQL Day + 2026 +
+
+
+ +
+
+
+ + + {date} + +
+
+ +
+
+ + + {location} + +
+
+
+ + ) +} diff --git a/src/app/day/2026/components/og-images/generic-opengraph-image.tsx b/src/app/day/2026/components/og-images/generic-opengraph-image.tsx new file mode 100644 index 0000000000..933f3ed38f --- /dev/null +++ b/src/app/day/2026/components/og-images/generic-opengraph-image.tsx @@ -0,0 +1,104 @@ +import { readFileSync } from "node:fs" +import { resolve } from "node:path" + +import { + colors, + DayOpengraphImageHeader, + fonts, + OG_IMAGE_HEADER_HEIGHT, +} from "./day-opengraph-image-header" + +const graphqlLogoStripesDataUri = `data:image/png;base64,${readFileSync( + resolve( + process.cwd(), + "src/app/day/2026/components/og-images/graphql-logo-stripes.png", + ), +).toString("base64")}` + +export interface GenericDayOpengraphImageProps + extends React.HTMLAttributes { + pageTitle: string + date: string + location: string +} + +export function GenericDayOpengraphImage({ + pageTitle, + date, + location, + ...rest +}: GenericDayOpengraphImageProps) { + const height = 630 + + return ( +
+ + +
+

+ GraphQL Day + at FOST {pageTitle} +

+
+ Register now +
+ +
+
+ ) +} diff --git a/src/app/day/2026/components/og-images/graphql-logo-stripes.png b/src/app/day/2026/components/og-images/graphql-logo-stripes.png new file mode 100644 index 0000000000..31f190c214 Binary files /dev/null and b/src/app/day/2026/components/og-images/graphql-logo-stripes.png differ diff --git a/src/app/day/2026/components/og-images/simple-opengraph-image.tsx b/src/app/day/2026/components/og-images/simple-opengraph-image.tsx new file mode 100644 index 0000000000..f1b1e5799b --- /dev/null +++ b/src/app/day/2026/components/og-images/simple-opengraph-image.tsx @@ -0,0 +1,41 @@ +import { ImageResponse } from "next/og" + +import { loadFontsForOG } from "@/app/fonts/og/load-fonts-for-og" + +import { GenericDayOpengraphImage } from "./generic-opengraph-image" + +export const contentType = "image/png" +export const size = { + width: 1200, + height: 630, +} + +export function generateStaticParams() { + return [{}] +} + +export async function SimpleOpengraphImage({ + pageTitle, + date, + location, +}: { + pageTitle: string + date: string + location: string +}) { + const fonts = loadFontsForOG() + + return new ImageResponse( + ( + + ), + { + ...size, + fonts: await fonts, + }, + ) +} diff --git a/src/app/day/2026/london/opengraph-image.tsx b/src/app/day/2026/london/opengraph-image.tsx new file mode 100644 index 0000000000..95918e1e46 --- /dev/null +++ b/src/app/day/2026/london/opengraph-image.tsx @@ -0,0 +1,12 @@ +import { SimpleOpengraphImage } from "../components/og-images/simple-opengraph-image" +export { + generateStaticParams, + contentType, + size, +} from "../components/og-images/simple-opengraph-image" + +export default SimpleOpengraphImage.bind(null, { + pageTitle: "London", + date: "Sep 30-Oct 1, 2026", + location: "Convene Sancroft, London", +}) diff --git a/src/app/day/2026/melbourne/opengraph-image.tsx b/src/app/day/2026/melbourne/opengraph-image.tsx new file mode 100644 index 0000000000..761b066efd --- /dev/null +++ b/src/app/day/2026/melbourne/opengraph-image.tsx @@ -0,0 +1,12 @@ +import { SimpleOpengraphImage } from "../components/og-images/simple-opengraph-image" +export { + generateStaticParams, + contentType, + size, +} from "../components/og-images/simple-opengraph-image" + +export default SimpleOpengraphImage.bind(null, { + pageTitle: "Melbourne", + date: "Oct 28-29, 2026", + location: "Melbourne, Australia", +}) diff --git a/src/app/day/2026/nyc/opengraph-image.tsx b/src/app/day/2026/nyc/opengraph-image.tsx new file mode 100644 index 0000000000..6ed5b759da --- /dev/null +++ b/src/app/day/2026/nyc/opengraph-image.tsx @@ -0,0 +1,12 @@ +import { SimpleOpengraphImage } from "../components/og-images/simple-opengraph-image" +export { + generateStaticParams, + contentType, + size, +} from "../components/og-images/simple-opengraph-image" + +export default SimpleOpengraphImage.bind(null, { + pageTitle: "NYC", + date: "May 13-14, 2026", + location: "Convene 360 Madison, New York", +}) diff --git a/src/app/day/2026/paris/opengraph-image.tsx b/src/app/day/2026/paris/opengraph-image.tsx new file mode 100644 index 0000000000..017506f16c --- /dev/null +++ b/src/app/day/2026/paris/opengraph-image.tsx @@ -0,0 +1,12 @@ +import { SimpleOpengraphImage } from "../components/og-images/simple-opengraph-image" +export { + generateStaticParams, + contentType, + size, +} from "../components/og-images/simple-opengraph-image" + +export default SimpleOpengraphImage.bind(null, { + pageTitle: "Paris", + date: "Dec 1-3, 2026", + location: "CNIT Forest, Paris", +}) diff --git a/src/app/day/2026/singapore/opengraph-image.tsx b/src/app/day/2026/singapore/opengraph-image.tsx new file mode 100644 index 0000000000..b94236419b --- /dev/null +++ b/src/app/day/2026/singapore/opengraph-image.tsx @@ -0,0 +1,12 @@ +import { SimpleOpengraphImage } from "../components/og-images/simple-opengraph-image" +export { + generateStaticParams, + contentType, + size, +} from "../components/og-images/simple-opengraph-image" + +export default SimpleOpengraphImage.bind(null, { + pageTitle: "Singapore", + date: "Apr 14-15, 2026", + location: "Singapore", +}) diff --git a/src/app/day/layout.tsx b/src/app/day/layout.tsx index db98b20709..a832d76564 100644 --- a/src/app/day/layout.tsx +++ b/src/app/day/layout.tsx @@ -15,6 +15,9 @@ export const metadata = { absolute: "GraphQL Day", template: "%s | GraphQL Day", }, + openGraph: { + siteName: "GraphQL Day", + }, } satisfies Metadata export default function DayLayout({