# Obrazki OG w Astro

`<OgImage>` w nagłówku, każdy adres podpisany podczas builda.

## Gdzie to wpiąć

Integracja podpisuje każdy adres obrazka podczas budowania, bez ani jednego żądania do API — kolekcja tysiąca wpisów buduje się tak szybko jak pusta. Każdy obrazek powstaje przy pierwszej wizycie crawlera i potem siedzi w cache.

`src/pages/blog/[...slug].astro`

```astro
---
// npm i @shareglint/astro
// astro.config.mjs: integrations: [shareglint()] - reads SHAREGLINT_ACCOUNT_ID
// and SHAREGLINT_SIGNING_SECRET; every URL is signed during the build.
import { getCollection } from 'astro:content';
import OgImage from '@shareglint/astro/OgImage.astro';
import Layout from '../../layouts/Base.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({ params: { slug: post.slug }, props: { post } }));
}

const { post } = Astro.props;
---

<Layout title={post.data.title}>
  <OgImage
    slot="head"
    template="blog-og"
    fields={{
      title: post.data.title,
      author: post.data.author,
      date: post.data.pubDate.toISOString().slice(0, 10),
      site: 'yourblog.com',
    }}
  />
  <slot />
</Layout>
```

## Pułapka

Astro nie wkłada `.env` do `process.env`, kiedy czyta `astro.config.mjs`. Wyeksportuj zmienne w powłoce albo w CI, albo przekaż je przez `loadEnv` — inaczej build ostrzeże, a `<OgImage>` nie będzie miał konta, dla którego podpisuje.

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