A plugin that generates images for your documentation pages.
Docusaurus builds statically and lets you add a plugin with a `postBuild` hook. That is the right moment to generate images for every page at once and patch them into the finished HTML.
plugins/og-images.js
module.exports = function ogImagesPlugin() {
return {
name: 'og-images',
async postBuild({ routesPaths, outDir }) {
const fs = require('fs/promises');
const path = require('path');
for (const route of routesPaths) {
const file = path.join(outDir, route, 'index.html');
let html;
try {
html = await fs.readFile(file, 'utf8');
} catch {
continue; // route without its own file
}
const title = html.match(/<title>(.*?)<\/title>/)?.[1] ?? '';
if (!title) continue;
const { url } = await fetch('https://imageapi.dev/v1/images?wait=true', {
method: 'POST',
headers: {
Authorization: `Bearer ${process.env.IMAGE_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
template: 'blog-og',
modifications: { title, site: 'docs.yourproduct.dev' },
}),
}).then((r) => r.json());
await fs.writeFile(
file,
html.replace(/(<meta property="og:image" content=")[^"]*/, `$1${url}`),
);
}
},
};
};Docs sites can run to hundreds of pages. Run this on a plan with the quota to match, and consider generating only for pages people actually link to — the rest will never reach social media anyway.
With ?wait=true the finished image arrives on the same connection — usually in about a second.
{
"id": "img_01m08s3ez1zcv28h335g9923bw",
"status": "completed",
"url": "https://cdn.imageapi.dev/renders/img_01m08s3ez1zcv28h335g9923bw.png",
"duration_ms": 912
}A hundred images a month free, then $9 for two thousand. The same post rendered twice returns the existing URL and uses no quota — so rebuilding your site costs nothing.