benword.com

Jekyll blog at https://benword.com.

Each post needs a 2400x1260 OG image saved to /img/ and referenced in the post’s frontmatter.

Naming convention

Image filename matches the post’s permalink frontmatter field:

/img/social-{permalink}.png

Prerequisites

The Jekyll site must be running locally:

bundle exec jekyll serve

Steps

Get the post’s title and excerpt from its frontmatter.
Run the following commands to generate the screenshot using agent-browser via npx. The viewport must be 2400x1260 and the container scaled 2x to produce a retina-resolution image:

npx agent-browser close
npx agent-browser set viewport 2400 1260
npx agent-browser open "http://localhost:4000/og-preview.html?title={url-encoded-title}&description={url-encoded-excerpt}"
npx agent-browser eval "document.querySelector('.og-container').style.transform='scale(2)'; document.querySelector('.og-container').style.transformOrigin='top left'; document.body.style.margin='0'; document.body.style.alignItems='flex-start'; document.body.style.justifyContent='flex-start';"
npx agent-browser screenshot ".og-container" /Users/ben/Sites/benword.github.io/img/social-{permalink}.png

Add the image field to the post’s frontmatter:

image: /img/social-{permalink}.png

Example

For a post with:

permalink: know-when-your-branch-is-stale-with-a-custom-starship-prompt
title: "Know When Your Branch Is Stale with a Custom Starship Prompt"
excerpt: Add a custom Starship prompt module to show how many commits your branch is behind origin/main.

npx agent-browser close
npx agent-browser set viewport 2400 1260
npx agent-browser open "http://localhost:4000/og-preview.html?title=Know+When+Your+Branch+Is+Stale+with+a+Custom+Starship+Prompt&description=Add+a+custom+Starship+prompt+module+to+show+how+many+commits+your+branch+is+behind+origin/main."
npx agent-browser eval "document.querySelector('.og-container').style.transform='scale(2)'; document.querySelector('.og-container').style.transformOrigin='top left'; document.body.style.margin='0'; document.body.style.alignItems='flex-start'; document.body.style.justifyContent='flex-start';"
npx agent-browser screenshot ".og-container" /Users/ben/Sites/benword.github.io/img/social-know-when-your-branch-is-stale-with-a-custom-starship-prompt.png

Then in the post frontmatter:

image: /img/social-know-when-your-branch-is-stale-with-a-custom-starship-prompt.png

Verify dimensions

The output image should always be 2400x1260: