# Obrazki OG w Eleventy

Filtr asynchroniczny, który zwraca adres obrazka w szablonie.

## Gdzie to wpiąć

Eleventy obsługuje filtry asynchroniczne, więc adres obrazka możesz pobrać wprost w szablonie. Wbudowany cache wtyczki `eleventy-fetch` sprawia, że przy kolejnym buildzie nie ruszasz API w ogóle.

`.eleventy.js`

```js
const EleventyFetch = require('@11ty/eleventy-fetch');

module.exports = function (eleventyConfig) {
  eleventyConfig.addAsyncFilter('ogImage', async (title, author) => {
    const response = await EleventyFetch('https://shareglint.com/v1/images?wait=true', {
      duration: '1y',           // same post = same image
      type: 'json',
      fetchOptions: {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${process.env.SHAREGLINT_KEY}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          template: 'blog-og',
          modifications: { title, author, site: 'yourblog.com' },
        }),
      },
    });

    return response.url;
  });
};

// In the template:
// <meta property="og:image" content="{{ title | ogImage(author) }}">
```

## Pułapka

`eleventy-fetch` cache’uje po adresie URL, a nie po treści żądania. Przy metodzie POST dołóż tytuł do klucza cache (np. w parametrze zapytania), inaczej wszystkie wpisy dostaną ten sam obrazek.

## 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.