Obrazki OG w
Astro

Gdzie to wpiąć

Astro domyślnie buduje statycznie, więc obrazki powstają raz, podczas builda. Przy pierwszym uruchomieniu zapłacisz za każdy wpis, przy kolejnych cache API oddaje gotowe adresy za darmo.

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

---
import { getCollection } from 'astro:content';
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;

const res = await fetch('https://imageapi.dev/v1/images?wait=true', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${import.meta.env.IMAGE_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    template: 'blog-og',
    modifications: {
      title: post.data.title,
      author: post.data.author,
      date: post.data.pubDate.toISOString(),
      site: 'yourblog.com',
    },
  }),
});

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

<Layout title={post.data.title} ogImage={ogImage}>
  <slot />
</Layout>

Co dostajesz w odpowiedzi

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
}

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.

Inne frameworki