Wtyczka, która generuje obrazki dla stron dokumentacji.
Docusaurus buduje statycznie i pozwala dopisać własną wtyczkę z haczykiem `postBuild`. To dobry moment, żeby wygenerować obrazki dla wszystkich stron naraz i podmienić je w gotowym HTML-u.
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}`),
);
}
},
};
};Dokumentacja potrafi mieć setki stron. Puść to na własnym planie z odpowiednim limitem i rozważ generowanie tylko dla stron, które realnie ktoś linkuje — reszta i tak nigdy nie trafi na social media.
Z ?wait=true czekasz na gotowy obrazek w tym samym połączeniu — zwykle około sekundy.
{
"id": "img_01m08s3ez1zcv28h335g9923bw",
"status": "completed",
"url": "https://cdn.imageapi.dev/renders/img_01m08s3ez1zcv28h335g9923bw.png",
"duration_ms": 912
}Sto obrazków miesięcznie za darmo, potem $9 za dwa tysiące. Ten sam wpis wyrenderowany drugi raz zwraca istniejący adres i nie zużywa limitu — więc przebudowanie strony nic nie kosztuje.