Using Eleventy and ScreenshotOne for on-the-fly social graph image generation

eleventy.config.js

const ogImageSource = require('./_src/_utilities/ogImageSource.js');

head.html

...
<meta property="og:image" content="{% ogImageSource page %}">
...

ogImageSource.js

/* 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')}`;
};