feat(www): add OG image generation for blog posts by taras · Pull Request #1120 · thefrontside/effection

taras · 2026-02-19T06:37:59Z

Motivation

Social media platforms (Twitter, LinkedIn, Facebook, etc.) don't support SVG images in Open Graph og:image meta tags. Our blog posts use SVG featured images that render beautifully on the blog but appear broken or missing when shared on social media.

This PR adds build-time PNG generation from SVG featured images so social previews work correctly.

Approach

PNG generation script: Uses Resvg WASM to render SVGs to 1200×630 PNGs (standard OG dimensions)
Effection structured concurrency: Uses bounded parallelism (4 concurrent) for efficient batch processing
Animation stripping: Removes CSS animations from animated SVGs to show "final state" where all content is visible
Light mode forcing: Uses cascade override injection (!important rules at end of SVG) to ensure consistent light mode colors regardless of system theme
TTF fonts committed: Inter and JetBrains Mono (OFL licensed) since Resvg WASM doesn't support WOFF2

Build & Deploy Flow

┌─────────────────────────────────────────────────────────────────────────────┐
│                            GitHub Actions CI                                 │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  1. Generate OG Images                                                      │
│     ┌──────────────────┐                                                    │
│     │ deno task        │     ┌─────────┐      ┌─────────┐                   │
│     │ generate-og-     │────▶│  SVG    │─────▶│  PNG    │                   │
│     │ images           │     │ (blog)  │      │ (1200×  │                   │
│     └──────────────────┘     └─────────┘      │  630)   │                   │
│            │                                   └─────────┘                   │
│            │ Resvg WASM                             │                        │
│            │ • Strip animations                     │                        │
│            │ • Force light mode                     │                        │
│            │ • Embed TTF fonts                      │                        │
│            ▼                                        ▼                        │
│  2. Start Dev Server                                                        │
│     ┌──────────────────┐                                                    │
│     │ deno task dev    │  serves both SVG and PNG via assetsRoute("blog")   │
│     │ localhost:8000   │                                                    │
│     └──────────────────┘                                                    │
│            │                                                                │
│            ▼                                                                │
│  3. Staticalize                                                             │
│     ┌──────────────────┐     ┌─────────────────────────────────────────┐    │
│     │ staticalize      │────▶│ Crawls sitemap.xml                      │    │
│     │ --site localhost │     │ For each page:                          │    │
│     │ --output built/  │     │   • Downloads HTML                      │    │
│     │ --base effection │     │   • Parses [content] attributes         │    │
│     │   .deno.dev      │     │   • Finds og:image meta tag URL         │    │
│     └──────────────────┘     │   • Downloads referenced PNG ◀────────┐ │    │
│            │                 │   • Rewrites URL to production base   │ │    │
│            │                 └───────────────────────────────────────┼─┘    │
│            │                                                         │      │
│            │                 <meta property="og:image"               │      │
│            │                   content="http://localhost:8000/       │      │
│            │                     blog/.../image.png">────────────────┘      │
│            ▼                                                                │
│  4. Deploy to Deno Deploy                                                   │
│     ┌──────────────────┐                                                    │
│     │ built/           │  Contains HTML + PNG files                         │
│     │ ├── blog/        │  og:image URLs rewritten to                        │
│     │ │   └── post/    │  https://effection.deno.dev/blog/.../image.png     │
│     │ │       └── .png │                                                    │
│     │ └── ...          │                                                    │
│     └──────────────────┘                                                    │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

Result

When a blog post is shared on social media, the platform fetches the og:image URL and displays the PNG thumbnail instead of showing a broken image or generic fallback.

Generate PNG thumbnails from SVG featured images for Open Graph meta tags. Social media platforms don't support SVG for og:image, so we render PNGs at build time using Resvg WASM. Key features: - Strip CSS animations to show final visible state - Force light mode for consistent social previews - Cascade override injection for reliable text colors - Bounded concurrency (4 parallel) using Effection - TTF fonts committed (Inter, JetBrains Mono) for Resvg compatibility The PNGs are generated during CI before staticalize runs, and staticalize automatically discovers them via og:image meta tag content URLs.

pkg-pr-new · 2026-02-19T06:38:34Z

Open in StackBlitz

npm i https://pkg.pr.new/thefrontside/effection@1120

commit: e0bfd7a

The code is self-documenting; inline comments were redundant. Reduces file from ~230 lines to ~170 lines.

cowboyd

I'd try lazy generation first. It will be a less invasive change, and it means the website will work the same in local context as everywhere (no need to have a separate task at build time)

It also means that if generation isn't working, it will be caught during dev time before CI even runs

cowboyd · 2026-02-19T17:21:21Z

If there is principle here to extract, it is that what makes staticalize work is that the there is no build, only capture. The server is the build.

Replace build-time PNG generation with on-demand rendering via Revolution plugin. PNGs are now generated when requested and cached using the Web Cache API. Changes: - Add www/plugins/og-image.ts - intercepts /blog/**/*.png requests - Use @effectionx/fs for Effection-native file operations - Remove www/scripts/generate-og-images.ts build script - Remove generate-og-images task from deno.json - Remove CI step for pre-generating images Benefits: - Server IS the build (cowboyd's principle) - Same behavior locally and in production - Issues caught during dev before CI runs - No separate build step needed

The PNG is generated on-demand by the og-image plugin, so we check if the source SVG exists instead of the output PNG.

- Use @effectionx/fetch instead of native fetch for WASM download - Make route detection generic (check if SVG exists instead of /blog/ prefix) - Make transformSvg stateless using reduce pipeline - Add documentation comment explaining transformSvg purpose - Make stripAnimations use local variable instead of reassigning parameter

cowboyd · 2026-03-05T20:40:45Z

+    console.error(`OG image generation failed for ${pathname}:`, error);
+    return yield* serveFallback(request, options.basedir);


I'm not sure if this should be recoverable. It means we found an svg that should be rendered off of the png but that it failed, which means that there is a bug in our site.

cowboyd · 2026-03-05T20:47:00Z

      let AppHtml = yield* useAppHtml({
        title: `${post.title} | Blog | Effection`,
        description: post.description,
+        ogImage: post.ogImage ? `/blog/${id}/${post.ogImage}` : undefined,


this is where the fallback should go, not a const. This is detecting that there is actually no image associated with the blog post.

cowboyd · 2026-03-05T20:49:37Z

+      // Compute OG image path: if SVG exists, the PNG will be generated on-demand
+      // Note: blog-post-route.tsx prepends /blog/{id}/ to this value
+      let ogImage: string | undefined;
+      if (frontmatter.image?.endsWith(".svg")) {
+        let svgFullPath = `${directory}${id}/${frontmatter.image}`;
+        if (existsSync(svgFullPath)) {
+          ogImage = frontmatter.image.replace(/\.svg$/, ".png");
+        }
+      }
+


This bleeds the plugin logic into the blog post, while at the same time duplicating it. not good.

The plugin should transform the html and do the check there. You could probably generate it at that point to, so the plugin is not an *http() plugin, but an *html().

cowboyd · 2026-04-16T14:56:11Z

This has been implemented.

deno-deploy bot deployed to Preview February 19, 2026 06:40 View deployment

style: fix trailing whitespace in blog.ts

2e57b1a

deno-deploy bot deployed to Preview February 19, 2026 06:43 View deployment

chore: simplify generate-og-images by removing verbose comments

3286e05

The code is self-documenting; inline comments were redundant. Reduces file from ~230 lines to ~170 lines.

deno-deploy bot deployed to Preview February 19, 2026 06:47 View deployment

cowboyd reviewed Feb 19, 2026

View reviewed changes

deno-deploy bot deployed to Preview February 20, 2026 02:51 View deployment

fix: use SVG existence check for ogImage, not PNG

a9b3c3a

The PNG is generated on-demand by the og-image plugin, so we check if the source SVG exists instead of the output PNG.

deno-deploy bot deployed to Preview February 20, 2026 02:55 View deployment

deno-deploy bot deployed to Preview February 20, 2026 03:07 View deployment

taras mentioned this pull request Feb 20, 2026

Add: Server-Is-The-Build Policy thefrontside/effectionx#168

Merged

cowboyd requested changes Mar 5, 2026

View reviewed changes

cowboyd closed this Apr 16, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(www): add OG image generation for blog posts#1120

feat(www): add OG image generation for blog posts#1120
taras wants to merge 6 commits intov4from
blog-og-thumbnails

taras commented Feb 19, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Feb 19, 2026 •

edited

Loading

Uh oh!

cowboyd left a comment

Uh oh!

cowboyd commented Feb 19, 2026

Uh oh!

cowboyd Mar 5, 2026

Uh oh!

cowboyd Mar 5, 2026

Uh oh!

cowboyd Mar 5, 2026

Uh oh!

cowboyd commented Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		console.error(`OG image generation failed for ${pathname}:`, error);
		return yield* serveFallback(request, options.basedir);

Conversation

taras commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Approach

Build & Deploy Flow

Result

Uh oh!

pkg-pr-new bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cowboyd left a comment

Choose a reason for hiding this comment

Uh oh!

cowboyd commented Feb 19, 2026

Uh oh!

cowboyd Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

cowboyd Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

cowboyd Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

cowboyd commented Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

taras commented Feb 19, 2026 •

edited

Loading

pkg-pr-new bot commented Feb 19, 2026 •

edited

Loading