Documentation

Open Graph Images

This theme generates OG images on Cloudflare Workers thanks to the cf-workers-og package by Jilles Soeters (GitHub: @jillesme).

Soeters' package uses @resvg/resvg-wasm with patched versions of satori and yoga-layout to perform its magic.

Although this is a new package it is very well-written by an experienced developer who works in a technical role at Cloudflare.

The image Response returned by the library includes Cache-Control headers so Cloudflare will cache them for a long time and minimize requests to the Worker.

Customizing Fonts

Web Fonts

AstroFlareOG uses the Astro Font Provider API to load and optimize web fonts for use in HTML and CSS.

The theme uses the Atkinson family of variable fonts obtained from Fontsource.

Key files:

astro.config.ts — see fonts configuration
Layout.astro — renders <Font /> components from astro:assets
global.css — TailwindCSS theme registration of sans and mono fonts

The Font Provider API has built-in support for a number of popular providers including Adobe, Bunny, Fontsource, Google, NPM, etc., plus the local src/assets/ directory.

Open Graph Image Fonts

Satori does not support variable fonts nor the WOFF2 format so a different font solution is necessary for OG image templates.

Currently supported formats: *.woff, *.ttf, *.otf

cf-workers-og supports loading supported font formats from Custom Sources and Google Fonts.

AstroFlareOG uses a Custom Source: supported non-variable *.woff versions of fonts from the Atkinson family are in the public/fonts/ directory family for use in OG image templates.

@/lib/og/fonts.ts exports a loadLocalFont() utility that fetches the fonts via Cloudflare ASSETS binding.

The @/pages/og.png.ts and @/pages/blog/[slug]/og.png.ts routes where the fonts are loaded, the OG image template is imported, and cf-workers-og is invoked to generate the image response.

Refer to cf-workers-og repo for more on Google Fonts:

jillesme/cf-workers-og (GitHub Repo — See README)
example worker (GitHub Repo — example code)

Customizing Image Templates

See @/lib/og/*-template.ts files for the functions that generate the OG image templates as HTML templates.

cf-workers-og also supports rendering React JSX for Astro projects that use React components.

There are many restrictions to observe with resvg and satori.

Notable restrictions include inline styles, flexbox for layout, and a limited set of supported CSS properties and HTML elements.

Refer to project documentation and README's: