Automatic OpenGraph Images for Lume

og_images.tmpl.tsx

import { render } from "https://deno.land/x/resvg_wasm@0.2.0/mod.ts";
import { Page, PageData } from "lume/core.ts";
import satori, { SatoriOptions } from "npm:satori";

/* We never want our beautiful PNGs to have a layout :-) */
export const layout = undefined;

/* Load fonts. We can't use variable fonts unfortunately. */
const inter = await Deno.readFile("./src/fonts/Inter-Regular.ttf");
const interBold = await Deno.readFile("./src/fonts/Inter-Bold.ttf");

const options: SatoriOptions = {
  // debug: true,
  width: 1200,
  height: 627,
  fonts: [
    {
      name: "Inter",
      data: inter,
      weight: 400,
      style: "normal",
    },
    {
      name: "Inter",
      data: interBold,
      weight: 700,
      style: "normal",
    },
  ],
};

interface PageWithTitle extends Page {
  data: {
    title?: string;
    subtitle?: string;
  };
}

async function svgForPost(page: PageWithTitle) {
  return await satori(
    <div
      style={{
        display: "flex",
        height: "100%",
        width: "100%",
        padding: 60,

        flexDirection: "column",

        backgroundImage: "linear-gradient(to bottom, #222, #333)",
        color: "rgba(255, 255, 255, 0.8)",
        textShadow: "5px 5px 5px rgba(0, 0, 0, 0.5)",
      }}
    >
      <div style={{ fontSize: 60, fontWeight: 700 }}>hmans.co</div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          flexGrow: 1,
          justifyContent: "flex-end",
        }}
      >
        <div style={{ color: "hotpink", fontSize: 90, fontWeight: 700 }}>
          {page.data.title}
        </div>
        <div style={{ fontSize: 60, fontWeight: 700 }}>
          {page.data.subtitle}
        </div>
      </div>
    </div>,

    options
  );
}

export default async function* ({ search }: PageData) {
  for (const page of search.pages("type=post") as PageWithTitle[]) {
    const svg = await svgForPost(page);

    yield {
      url: `${page.dest.path}.png`,
      content: await render(svg),
    };
  }
}