Now with Dynamic Open Graph Images!

Inspired by GitHub's pretty sweet post about their Open Graph images framework, I decided to try to build something similar for my site (at a smaller scale, obviously!). I wanted to build this for my blog ever since I saw the folks at Vercel do it.

I used Puppeteer to take a screenshot of a very simple HTML template, hooked it into my website's deployment pipeline, and voilà: dynamic OG images!

There's still some tweaks I wanna make to the template to make it nicer, but it's looking clean!

I wrote generator code that gets executed as part of my next export process, this is the full script:

import chromium from "chrome-aws-lambda";
import format from "date-fns/format";
import fs from "fs";
import path from "path";
import posts from "./posts";

export async function generate({ outDir }) {
  const browser = await chromium.puppeteer.launch({
    args: chromium.args,
    executablePath: await chromium.executablePath,
    headless: true,
  });

  const page = await browser.newPage();

  // Open the HTML template as a data URI
  await page.goto(
    `data:text/html;charset=UTF-8,${encodeURIComponent(TEMPLATE)}`,
    { waitUntil: "networkidle0" }
  );

  // Wait until the document is fully rendered
  await page.evaluateHandle("document.fonts.ready");

  // Set the viewport size to match
  await page.setViewport({
    width: 1200,
    height: 632,
    // Netlify build machines do not have a
    // retina display, apparently xD
    deviceScaleFactor: process.env.NETLIFY ? 1 : 2,
  });

  const ogImagesDir = path.resolve(outDir, OG_IMAGES_PATH);

  // iterate over each post
  for (const post of posts) {
    const info = {
      title: post.title,
      date: format(post.date, "dddd, MMMM Do, YYYY"),
    };

    await page.evaluate((info) => {
      const titleElement = document.querySelector("#title");
      const dateElement = document.querySelector("#date");
      titleElement.innerHTML = info.title;
      dateElement.innerHTML = info.date;
    }, info);

    await page.screenshot({
      path: `${ogImagesDir}/${post.id}.png`,
      type: "png",
      clip: { x: 0, y: 0, width: 1200, height: 632 },
    });
  }

  // Wrap it up
  await browser.close();
}

This code heavily inspired by vercel/og-image's code.