Playwright で OGP 画像を生成する

ブログ記事のインポートをしたかったはずなのに json parser を作る yak shaving が楽しい。
次は Scheme のインタプリタを作りたくなってきた。危ない。

さて、表題のとおりブログの OGP 画像を Playwright で生成するようにした。
このサイトは Next.js で作って、GitHub Pages でホスティングしている。
ソースコードはここにある。

ブログ記事のタイトルと slug から OGP 画像を生成している。

import { chromium } from 'playwright';
import { getHtml } from './getHtml';

type Params = {
  title: string;
  slug: string;
};

export const takeScreenshot = async ({ title, slug }: Params) => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: 1200, height: 630 },
  });
  const page = await context.newPage();
  const html = getHtml({ title });
  await page.setContent(html, { waitUntil: 'load' });
  await page.screenshot({
    path: `public/og-images/${slug}.png`,
    fullPage: true,
  });
  await browser.close();
};

await page.setContent(html, { waitUntil: 'load' }); の load を指定するのが味噌。
また、setContent に渡す html 内で画像を使う場合はデータ URL に base64 エンコードされた画像を渡す必要がある。
setContent には文字列を渡しているだけなためファイルパスでは Playwright は画像を特定できない。
後は html と css を書いたら完成。
これくらいの用途だと Playwright でも Puppeteer でも変わらないね。

まだまだサイトに実装しないといけないことが盛り沢山なのでがんばるぞい