# Obrazki OG w SvelteKit

Adres obrazka pobierz w load, wstaw w svelte:head.

## Gdzie to wpiąć

Funkcja `load` w pliku `+page.server.ts` wykonuje się wyłącznie na serwerze, więc klucz nigdy nie trafia do przeglądarki. Wynik wchodzi do danych strony i renderuje się w `<svelte:head>`.

`src/routes/blog/[slug]/+page.server.ts`

```ts
import { SHAREGLINT_KEY } from '$env/static/private';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const post = await getPost(params.slug);

  const res = await fetch('https://shareglint.com/v1/images?wait=true', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${SHAREGLINT_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      template: 'blog-og',
      modifications: { title: post.title, author: post.author, site: 'yourblog.com' },
    }),
  });

  const { url: ogImage } = await res.json();

  return { post, ogImage };
};
```

## Pułapka

Import z `$env/static/private` jest sprawdzany przy budowaniu — jeśli spróbujesz użyć go w `+page.ts` (uniwersalnym), SvelteKit przerwie build. To zamierzone i ratuje przed wyciekiem klucza.

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