astro-selfie

Astro integration to generate page screenshots to show as Open Graph images.

I use this extension on my website and my link previews on Twitter look like this:

Inspired by Simon Willison's website.

Install

npm install --save-dev astro-selfie

Usage

1. Set up integration

Add this integration to astro.config.mjs:

import {defineConfig} from 'astro/config';
+ import selfie from 'astro-selfie';

export default defineConfig({
+    integrations: [
+        // Make sure `astro-selfie` only runs locally
+        !process.env['CI'] && !process.env['VERCEL'] && selfie()
+    ].filter(Boolean)
});

This integration is meant to be used locally for statically built websites for several reasons:

1. Websites deployed to Vercel don't have access to headless Chrome due to platform limitations.
2. Open graph images aren't probably useful in continuous integration.
3. Taking screenshots is not quick.

2. Add meta tags

Then, add a <meta> tag to each page that points to a screenshot of itself.

---
import {selfieUrl} from 'astro-selfie';

const screenshotUrl = selfieUrl(Astro);
---

<meta property="og:image" content={screenshotUrl.href} />

3. Customize styles (optional)

Selfie adds a data-astro-selfie attribute to body when taking a screenshot. You can use that data attribute to change any styles in CSS to make sure page looks good.

For example:

body[data-astro-selfie] .container {
	padding: 32px 64px;
}

4. Generate screenshots

Run a build command to take screenshots of all pages and store them in public/og directory.

npx astro build

Once screenshots are generated, commit them to version control and deploy.

API

selfie()

Returns an Astro integration that takes page screenshots.

selfieUrl(astro): URL

Returns a URL to the screenshot of the current page.

astro

Type: AstroGlobal

Global Astro object.