astro-file-endpoint

x-satori - Astro file endpoints example

Preview: https://satori-astro.vercel.app/blog/

This example demonstrates how to use the Astro file-endpoints to generate posts cover image and Open Graph image.

Running example to local

npx degit Zhengqbbb/x-satori/examples/astro-file-endpoint <file_name>

cd <file_name>
npm install

# Development Image Template Model
npm run dev:og

# Development Website
npm run dev
# Build Website
npm run build
# Preview Website
npm run preview

Get-Started

1. Install Dependencies

npm install -D x-satori @resvg/resvg-js jimp

• x-satori - Using Astro file (.astro) as template to generate image SVG.
• @resvg/resvg-js - Convert SVG to PNG.
• jimp - Image optimization, compression, editing, cropping, etc. This example mainly for PNG to JPEG + quality compression.

2. Create utils folder and files

og

.
├── config.ts       # x-satori Configuration file - Provide for index.ts and x-satori dev CLI
├── index.ts        # Provide for Astro file-endpoints
└── Template.astro  # Astro file template - Provide for index.ts and x-satori dev CLI

Tip

Can using x-satori CLI to create dev server to preview and design the template

npm run dev:og

3. Create Astro file-endpoints

The example target is generate dist/og/*.jpeg.
So that touch a file src/pages/og/[slug].jpeg.ts

import type { APIRoute } from 'astro'
import { type CollectionEntry, getCollection } from 'astro:content';
import { getPostImageBuffer } from '../../og';

export async function getStaticPaths() {
 const posts = await getCollection('blog');

   return posts
       .map(post => ({
           params: { slug: post.slug },
           props: { ...post },
       }));
}

export const GET: APIRoute = async ({ props }) =>
   new Response(
       await getPostImageBuffer(props as CollectionEntry<'blog'>),
       {
           headers: { 'Content-Type': 'image/jpeg' },
       },
   )

4. 🤗 That it! Have enjoy - Run npm run build