Obrazki OG w
Astro

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

---
// 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>

Bez pakietu

To samo jednym zwykłym wywołaniem HTTP — bez instalowania zależności.

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