Software Engineering Student. Learning, Building, Thinking.
Demonstration of Markdown syntax and styling when writing content.
Another example post on the new blog.
Lorem ipsum dolor sit amet
Example post on the new blog.
Yet another example post with a longer title to test styling of the blog post layout.
I'm a software engineering student passionate about building thoughtful, well-crafted digital experiences. I write about what I'm learning, what I'm building, and the ideas shaping how I think about software and design.
This is my corner of the web — a place to share, reflect, and grow.
Thoughts on software, design, and the web.
2026-04-20
Demonstration of Markdown syntax and styling when writing content.
2026-04-17
Another example post on the new blog.
2026-04-17
Lorem ipsum dolor sit amet
2026-04-16
Example post on the new blog.
2026-04-12
Yet another example post with a longer title to test styling of the blog post layout.
Customizing AstroFlareOG's Open Graph Image Templates
This theme generates OG images on Cloudflare Workers thanks to the cf-workers-og package by Jilles Soeters (GitHub: @jillesme).
Soeters' package uses @resvg/resvg-wasm with patched versions of satori and yoga-layout to perform its magic.
The image Response returned by the library includes Cache-Control headers so Cloudflare will cache them for a long time and minimize requests to the Worker.
AstroFlareOG uses the Astro Font Provider API to load and optimize web fonts for use in HTML and CSS. The theme uses the Atkinson family of variable fonts obtained from Fontsource.
Key files:
astro.config.ts — see fonts configurationLayout.astro — renders <Font /> componentsglobal.css — TailwindCSS theme registrationThe Font Provider API has built-in support for Adobe, Bunny, Fontsource, Google, NPM, etc., plus the local src/assets/ directory.
Satori does not support variable fonts nor the WOFF2 format so a different font solution is necessary for OG image templates. Currently supported formats: *.woff, *.ttf, *.otf
cf-workers-og supports loading supported font formats from Custom Sources and Google Fonts. AstroFlareOG uses a Custom Source: supported non-variable *.woff versions of fonts from the Atkinson family are in the public/fonts/ directory.
@/lib/og/fonts.ts exports a loadLocalFont() utility that fetches the fonts via Cloudflare ASSETS binding.
Refer to cf-workers-og repo for more on Google Fonts:
See @/lib/og/*-template.ts files for the functions that generate the OG image templates as HTML templates. cf-workers-og also supports rendering React JSX for Astro projects that use React components.
There are many restrictions to observe with resvg and satori. Notable restrictions include inline styles, flexbox for layout, and a limited set of supported CSS properties and HTML elements.
Refer to project documentation: