Screenshot Thumbnails

Previously: Trying pagefind, Adventures in Eleventy

One of the difficulties I described in Adventures with Eleventy is having to find a catchy thumbnail for each post. Part of the problem is that I wanted it to look a certain way and another part is that I wanted images that were appropriately licensed. That's why I've largely not had thumbnails for any posts since the most recent reboot in May 2023.

However, I wanted to start pushing my posts out to twitter (and now bluesky) and the lack of a thumbnail was bugging me. A simple solution would be to just automatically take a screenshot of the post and use that as the thumbnail.

At first, I thought I'd use Simon Willison's shot-scraper, but I didn't want to install puppeteer and a whole separate browser just to take screenshots.

But because I recently switched back to Firefox after many years, I decided to try out it's screenshot capabilities. Turns out they're pretty great! The only caveat is that you can't have Firefox open and take a screenshot at the same time-- unless you use a different profile. So I went to about:profiles and made profile called screenshot. Now I can take screenshots from the command-line:

# Usage: firefox -P <profile> --screenshot <output> <url>
firefox -P screenshot --screenshot metaist.png "https://metaist.com/"

According to ChatGPT, the ideal OpenGraph thumbnail should be 1200x630. Using ImageMagick, I decided to also crop the top banner to focus on the main text.

# Usage: convert <input> -gravity north -crop 1200x630+0+100 +repage <output>
convert metaist.png -gravity north -crop 1200x630+0+100 +repage metaist.png

I put it all together using bun and docopt.

#!/usr/bin/env bun

import { $ } from "bun";
import { docopt } from "docopt";
import { resolve } from "bun:path";
import { unlinkSync } from "node:fs";

const doc = `\
Take cropped screenshots of URLs using Firefox.

Usage: ./screenshots.js
  [--help] [--version] [--debug]
  [--force] [--crop=<size>]
  [<slug>...]

Options:
  -h, --help        show this message and exit
  --version         show program version and exit
  --debug           show debug messages

  -f, --force       delete existing screenshot
  --crop=<size>     crop dimensions [default: 1200x630+0+100]
  <slug>            blog slug to screenshot
`;

/** Convert a slug to a local URL. */
const slug2url = (slug) =>
  `http://localhost:8080/blog/${slug.slice(0, 4)}/${slug.slice(
    5,
    7
  )}/${slug.slice(11)}.html`;

/** Return an absolute path to an image. */
const slug2img = (slug) => resolve(`./content/static/img/${slug}.png`);

/** Take a screenshot of a URL and save it to a path. */
const screenshot = async (url, path) =>
  $`firefox -P screenshot --screenshot ${path} ${url}`;

/** Crop an image. */
const crop = async (path, size = "1200x630+0+100") =>
  $`convert ${path} -gravity north -crop ${size} +repage ${path}`;

/** Get list of slugs from a file.  */
const getSlugs = async (path) =>
  (await Bun.file(path).text()).split("\n").reduce((result, line) => {
    line = line.trim();
    if (line && !line.startsWith("#")) result.push(line);
    return result;
  }, []);

/**
 * Return a valid javascript variable name from a docopt flag.
 * @param {string} name variable name
 */
function optvar(name) {
  let result = name.toLowerCase();
  const special = { "-": "stdin", "--": "__" };
  if (special[result]) return special[result];
  // special cases handled

  result = result.replace(/--/, "");
  if (result[0] === "-") result = result.slice(1);
  // leading hyphens removed

  result = result.replaceAll("-", "_").replaceAll("<", "").replaceAll(">", "");
  // hyphens become underscore; angle brackets removed

  return result;
}

/** Parse docopt vars into a javascript-friendly format. */
function parse_docopt(args) {
  const result = {};
  for (const [key, val] of Object.entries(args)) result[optvar(key)] = val;
  return result;
}

/** Main entry point. */
async function main() {
  const args = parse_docopt(docopt(doc, { version: "0.1.0" }));
  if (!args.slug.length) args.slug = await getSlugs("./screenshots.txt");
  console.log(`Found: ${args.slug.length}`);

  if (!args.crop) args.crop = "1200x630+0+100";
  if (args.crop.toLowerCase() === "none") args.crop = "";
  if (args.debug) console.log(args);

  for (var i = 0; i < args.slug.length; i++) {
    const slug = args.slug[i];
    const url = slug2url(slug);
    const img = slug2img(slug);

    if (await Bun.file(img).exists()) {
      console.log(`[found] ${img}`);
      if (!args.force) continue;

      console.log(`[delete] ${img}`);
      unlinkSync(img);
    }

    console.log(`[shot] ${url}`);
    await screenshot(url, img);

    if (args.crop) {
      let exists = false;
      while (!exists) {
        if (args.debug) console.log(".");
        await Bun.sleep(500);
        exists = await Bun.file(img).exists();
      }

      console.log(`[crop] ${img}`);
      await crop(img, args.crop);
    }
  }
}

main();