Skip to content
days.

Tuesday, March 3

Notes

Sample code for generating OG images with Satori and Resvg:

src/pages/og/[slug].png.ts
import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';
import { getCollection } from 'astro:content';


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


export const GET = async ({ props }) => {
  // Satori requires a font as an ArrayBuffer
  const fontData = await fetch('https://example.com').then(res => res.arrayBuffer());


  const svg = await satori(
    { type: 'div', props: { children: props.title, style: { fontSize: 60 } } },
    { width: 1200, height: 630, fonts: [{ name: 'Inter', data: fontData }] }
  );


  const resvg = new Resvg(svg);
  const pngData = resvg.render().asPng();


  return new Response(pngData, { headers: { 'Content-Type': 'image/png' } });
};

See also astro-og-canvas and astro-opengraph-images. See also the frontmatter of this post for a method of setting the <meta> tags manually.

View full post…

Git Commits

scratch commits 7 ohnsh/scratch

  • 5:58 pm — John Sherrell <dev@ohn.sh>

    Overhaul starlight sidebar and structure.

  • 3:41 pm — John Sherrell <dev@ohn.sh>

    Add running vids.

  • 2:51 pm — John Sherrell <dev@ohn.sh>

    YOLO12 models for demo. From emergentai/yolov12-onnxruntime-web.

  • 2:51 pm — John Sherrell <dev@ohn.sh>

    Daily log starter.

  • 11:49 am — John Sherrell <dev@ohn.sh>

    Keep only one active WebSocket connection at a time in PTZ demo.

  • 11:18 am — John Sherrell <dev@ohn.sh>

    Testing Cloudinary and Mux.

  • 1:52 am — John Sherrell <dev@ohn.sh>

    Add KaTeX support.

ptz-websocket commits 1 ohnsh/ptz-websocket

  • 11:50 am — John Sherrell <dev@ohn.sh>

    New orientation (/ptz/abs) connectors automatically become the active user. And if no active user when a message is received, the sender automatically becomes active.

YouTube