Add OG images for speakers, resources, schedule, and CoC pages

Author: hasparus

src/app/conf/2025/code-of-conduct/opengraph-image.tsx

@@ -0,0 +1,10 @@
+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: "Code of Conduct",
+})

src/app/conf/2025/components/og-images/conference-opengraph-image-header.tsx

@@ -4,6 +4,8 @@ import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon"
 import { GraphQLLogo } from "../graphql-conf-logo-link"
 import { colors, fonts, RIGHT_COLUMN_WIDTH_PX } from "./speaker-opengraph-image"
 
+export const OG_IMAGE_HEADER_HEIGHT = 154
+
 export function ConferenceOpengraphImageHeader({
   year,
   date,
@@ -33,7 +35,7 @@ export function ConferenceOpengraphImageHeader({
           borderRight: `2px solid ${colors.neu600}`,
           padding: "2.5rem",
           paddingRight: "4rem",
-          height: "154px",
+          height: OG_IMAGE_HEADER_HEIGHT,
         }}
       >
         <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>

src/app/conf/2025/components/og-images/generic-opengraph-image.tsx

@@ -1,6 +1,8 @@
 import { colors, fonts } from "./speaker-opengraph-image"
-import { ConferenceOpengraphImageHeader } from "./conference-opengraph-image-header"
-import { normalizeProtocolRelativeUrl } from "./normalize-protocol-relative-url"
+import {
+  ConferenceOpengraphImageHeader,
+  OG_IMAGE_HEADER_HEIGHT,
+} from "./conference-opengraph-image-header"
 
 import graphqlLogoStripes from "./graphql-logo-stripes.png"
 
@@ -19,11 +21,14 @@ export function GenericOpengraphImage({
   pageTitle,
   ...rest
 }: GenericOpengraphImageProps) {
+  const basePath = process.env.VERCEL_URL || process.env.__NEXT_PRIVATE_ORIGIN
+  const height = 630
+
   return (
     <article
       style={{
         display: "flex",
-        height: "630px",
+        height,
         width: "1200px",
         flexDirection: "column",
         overflow: "hidden",
@@ -45,7 +50,7 @@ export function GenericOpengraphImage({
           display: "flex",
           flex: 1,
           flexDirection: "column",
-          justifyContent: "end",
+          justifyContent: "flex-end",
           padding: "2.5rem",
           position: "relative",
         }}
@@ -62,8 +67,9 @@ export function GenericOpengraphImage({
           {pageTitle}
         </h1>
         <img
-          src={graphqlLogoStripes.src}
-          style={{ position: "absolute", right: 0, bottom: -4 }}
+          src={`${basePath}${graphqlLogoStripes.src}`}
+          style={{ position: "absolute", right: 0, bottom: -5 }}
+          height={height - OG_IMAGE_HEADER_HEIGHT}
         />
       </div>
     </article>

src/app/conf/2025/resources/opengraph-image.tsx

@@ -0,0 +1,10 @@
+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: "Resources",
+})

src/app/conf/2025/schedule/opengraph-image.tsx

@@ -0,0 +1,10 @@
+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: "Schedule",
+})

src/app/conf/2025/speakers/opengraph-image.tsx

@@ -0,0 +1,10 @@
+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: "Speakers",
+})