Economic Indicator Open Graph

src/app/economic-indicators/[section]/opengraph-image.tsx

@@ -0,0 +1,66 @@
+import { ImageResponse } from "next/og";
+import { getEconomicSeries, humanizeSourceName } from "@/lib/api/economy";
+import { SECTIONS } from "../indicators";
+import {
+  buildOgChart,
+  IndicatorOgCard,
+  loadOgFonts,
+  OG_SIZE,
+} from "../og-card";
+
+export const runtime = "nodejs";
+
+export const alt = "Build Canada — Economic Indicators";
+
+export const size = OG_SIZE;
+
+export const contentType = "image/png";
+
+export const revalidate = 3600;
+
+export default async function OpengraphImage({
+  params,
+}: {
+  params: Promise<{ section: string }>;
+}) {
+  const { section: sectionId } = await params;
+  const section = SECTIONS.find((s) => s.id === sectionId);
+
+  const title = section?.title ?? "Economic Indicators";
+  const description =
+    section?.description ??
+    "Are we moving in the right direction? Canadian prosperity, measured against the G7 and OECD.";
+  const featured = section
+    ? section.indicators.find((i) => i.slug === section.featuredSlug)
+    : undefined;
+
+  const response = featured
+    ? await getEconomicSeries(featured.slug).catch(() => null)
+    : null;
+  const chart = response ? buildOgChart(response) : null;
+  const chartHeading = featured?.heading ?? "";
+  const source = response?.meta.source;
+  const footnote = source ? `Source: ${humanizeSourceName(source.name)}` : "";
+
+  const fonts = await loadOgFonts(
+    `${title}${description}${chartHeading}${chart?.latestLabel ?? ""}${footnote}Economic Indicators`,
+  );
+
+  return new ImageResponse(
+    <IndicatorOgCard
+      label="Economic Indicators"
+      title={title}
+      description={description}
+      chartHeading={chartHeading}
+      chart={chart}
+      footnote={footnote}
+    />,
+    {
+      ...size,
+      fonts,
+      headers: {
+        "Cache-Control": "public, max-age=3600, s-maxage=3600",
+      },
+    },
+  );
+}

src/app/economic-indicators/canvas/opengraph-image.tsx

@@ -0,0 +1,71 @@
+import { ImageResponse } from "next/og";
+import { getEconomicSeries } from "@/lib/api/economy";
+import {
+  buildOverlayOgChart,
+  IndicatorOgCard,
+  loadOgFonts,
+  OG_SIZE,
+} from "../og-card";
+
+export const runtime = "nodejs";
+
+export const alt =
+  "Build Canada — Indicator Canvas: overlay economic indicator series";
+
+export const size = OG_SIZE;
+
+export const contentType = "image/png";
+
+export const revalidate = 3600;
+
+const TITLE = "Indicator Canvas";
+const DESCRIPTION =
+  "Overlay up to three economic indicator series and eyeball how they move together.";
+
+// A representative overlay in the canvas feed palette (FEED_COLORS in
+// CanvasClient): growth, housing, and emissions on one normalized chart.
+const FEEDS = [
+  { slug: "gdp-per-capita-ppp", label: "GDP per capita", color: "#c43e3e" },
+  { slug: "real-house-price-index", label: "House prices", color: "#0880b5" },
+  {
+    slug: "co2-emissions-per-capita",
+    label: "CO₂ per capita",
+    color: "#17794d",
+  },
+];
+
+export default async function OpengraphImage() {
+  const responses = await Promise.all(
+    FEEDS.map((feed) =>
+      getEconomicSeries(feed.slug)
+        .then((response) => ({ response, color: feed.color }))
+        .catch(() => null),
+    ),
+  );
+  const loaded = responses.filter((r) => r !== null);
+  const chart = loaded.length > 0 ? buildOverlayOgChart(loaded) : null;
+
+  const legendText = FEEDS.map((f) => f.label).join(" ");
+  const fonts = await loadOgFonts(
+    `${TITLE}${DESCRIPTION}${legendText}Canada, three series overlaid₂`,
+  );
+
+  return new ImageResponse(
+    <IndicatorOgCard
+      label="Economic Indicators"
+      title={TITLE}
+      description={DESCRIPTION}
+      chartHeading="Canada, three series overlaid"
+      chart={chart}
+      legend={FEEDS.map((f) => ({ label: f.label, color: f.color }))}
+      footnote="Each series normalized to its own range"
+    />,
+    {
+      ...size,
+      fonts,
+      headers: {
+        "Cache-Control": "public, max-age=3600, s-maxage=3600",
+      },
+    },
+  );
+}