# Obrazki OG w Docusaurus

Wtyczka, która generuje obrazki dla stron dokumentacji.

## Gdzie to wpiąć

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`

```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://shareglint.com/v1/images?wait=true', {
          method: 'POST',
          headers: {
            Authorization: `Bearer ${process.env.SHAREGLINT_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}`),
        );
      }
    },
  };
};
```

## Pułapka

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.

## Ile to kosztuje

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.