Skip to content

Instantly share code, notes, and snippets.

@henrypoydar
Last active March 3, 2024 22:55
Show Gist options
  • Save henrypoydar/beb2b50838aceef3822fbbd100a5e582 to your computer and use it in GitHub Desktop.
Save henrypoydar/beb2b50838aceef3822fbbd100a5e582 to your computer and use it in GitHub Desktop.
Using Eleventy and ScreenshotOne for on-the-fly social graph image generation
const ogImageSource = require('./_src/_utilities/ogImageSource.js');
...
<meta property="og:image" content="{% ogImageSource page %}">
...
/* Assumes you've created OG screenshot-ready templates for your posts with using a path suffix, like `/posts/my-blog-post/og/` */
const env = require('../_data/env.js');
const crypto = require('crypto');
module.exports = function ogImageSource({ url }) {
const cacheKey = Math.floor(new Date().getTime() / 1000);
const query = `access_key=${env.screenshotOneApiAccessKey}&url=${encodeURIComponent(`${env.baseUrl}${url}og/`)}&full_page=false&viewport_width=1200&viewport_height=630&device_scale_factor=1&format=jpg&image_quality=30&cache=true&cache_ttl=2592000&cache_key=${cacheKey}&delay=0&timeout=60`;
// Don't choke local development
if (!env.screenshotOneApiAccessKey || !env.screenshotOneApiSecretKey) {
return `https://api.screenshotone.com/take?${query}`;
}
const hmac = crypto.createHmac('sha256', env.screenshotOneApiSecretKey);
hmac.update(query);
return `https://api.screenshotone.com/take?${query}&signature=${hmac.digest('hex')}`;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment