feat: for kids open graph

Author: yoannfleurydev

src/lib/events.ts

@@ -273,7 +273,9 @@ export function shouldShowProspectus(
   );
 }
 
-export function getEventDisplayDate(event: CollectionEntry<"events">) {
+export function getEventDisplayDate(
+  event: CollectionEntry<"events"> | CollectionEntry<"forKidsEvent">,
+) {
   const DRAFT_STATUSES: Array<CollectionEntry<"events">["data"]["status"]> = [
     "published-without-date",
     "draft",

src/pages/fr/events/for-kids/[id]/assets/[__image].[__type].ts

@@ -0,0 +1,8 @@
+import { apiImageEndpoint } from "@/generated-assets/api";
+import type { APIRoute } from "astro";
+
+export const prerender = false;
+
+export const GET: APIRoute = apiImageEndpoint(
+  import.meta.glob("./_*.tsx", { eager: true }),
+);

src/pages/fr/events/for-kids/[id]/assets/_og-image.tsx

@@ -0,0 +1,70 @@
+import { Frame } from "@/generated-assets/components/Frame";
+import {
+  getAstroImageBase64,
+  type AssetImageConfig,
+} from "@/generated-assets/image";
+import { BgImage } from "@/generated-assets/components/BgImage";
+import { COLORS } from "@/generated-assets/theme";
+
+import { getEventDisplayDate } from "@/lib/events";
+import { getEventData } from "./_utils";
+import { LogoForKids } from "@/components/LogoForKids";
+
+export const config: AssetImageConfig = {
+  width: 1920,
+  height: 1080,
+};
+
+export default async function ({ params }: { params: { id: string } }) {
+  const event = await getEventData(params.id);
+  const postCover = await getAstroImageBase64(event.data.image.media);
+  return (
+    <Frame {...config} style={{ padding: 128 }}>
+      <BgImage src={postCover} width={config.width} height={config.height} />
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 128,
+          width: "100%",
+          justifyContent: "center",
+          zIndex: 100,
+        }}
+      >
+        <LogoForKids style={{ width: 169 * 3, height: 36 * 3 }} />
+
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 20,
+          }}
+        >
+          <div
+            style={{
+              fontSize: 132,
+              fontWeight: 500,
+              marginLeft: -6, // Visual alignment
+            }}
+          >
+            {getEventDisplayDate(event)}
+          </div>
+          <div
+            style={{
+              display: "flex",
+              fontSize: 80,
+              fontWeight: 500,
+              color: COLORS.primary,
+              marginTop: -16,
+              marginLeft: -2, // Visual alignment
+            }}
+          >
+            {event.data._computed.city?.data.name},{" "}
+            {event.data._computed.country?.data.name}
+          </div>
+        </div>
+      </div>
+    </Frame>
+  );
+}

src/pages/fr/events/for-kids/[id]/assets/_utils.ts

@@ -0,0 +1,49 @@
+import { NotFoundAssetError } from "@/generated-assets/api";
+import { getEntry, type CollectionEntry } from "astro:content";
+
+export async function forKidsEventWithComputed<
+  Event extends CollectionEntry<"forKidsEvent">,
+>(event: Event) {
+  const city = await getEntry("cities", event.data.city.id);
+
+  const country = city
+    ? await getEntry("countries", city.data.country.id)
+    : undefined;
+
+  const talks = (
+    event.data.workshops
+      ? await Promise.all(
+          (event.data.workshops ?? []).map(async (item) => {
+            if (!item.id) {
+              return;
+            }
+            return await getEntry("forKidsWorkshop", item.id);
+          }),
+        )
+      : []
+  ).filter((i) => !!i);
+
+  return {
+    ...event,
+    data: {
+      ...event.data,
+      _computed: {
+        name: `${city?.data.name}, ${country?.data.name}, ${event.data.date.getFullYear()}`,
+        city,
+        country,
+        talks,
+      },
+    },
+  };
+}
+
+export const getEventData = async (id: string) => {
+  const event = await getEntry("forKidsEvent", id);
+  if (!event) {
+    throw new NotFoundAssetError();
+  }
+
+  return forKidsEventWithComputed({
+    ...event,
+  });
+};