Spike: Investigate node canvas to build open-graph images about website HOT 2 CLOSED

It'll probably require me to use ubuntu, because GHA is already running my build job on ubuntu-latest. I could add a step to install the dependencies:

apt-get install   \
  build-essential \
  libcairo2-dev   \
  libpango1.0-dev \
  libjpeg-dev

I'll also need to hook into Eleventy to run the generation script. I can do this by adding a transform, but there may be a better way to get collections.post at build time.

The format of the og:image should, probably, be:

• 1200*630px, as recommended by Facebook/Meta docs
• 1200*600px, as used by GitHub and Twitter
  • Twitter wants its own special twitter:image. however, it will also fall back to og:image, so we can safely ignore the bird website here.

Depending on how much time this adds to builds, I could also prevent it from building when running serve locally - and just running when it builds for production.

from website.

Maths

There's an element of maths to this; knowing when to truncate the font/insert a line break will require a calculation.

• We know the canvas width and height; these are constants.
• Use of whitespace is important, so there will be some area around the edges of the canvas where text cannot be drawn. This leaves us with a drawable region, which will be represented as integers (sub-pixels cannot exist).
• Since we are using a monospaced font, the glyphs will be exactly n pixels in height, and some ratio of that in width. There is no kerning to consider.
• We will have to floor the number of drawable glyphs, as we cannot have fractions of a drawn character.

const drawableRegionX = canvasWidth - (edgeGap * 2);
const drawableRegionY = canvasHeight - (edgeGap * 2);

let numDrawableGlyphsInX = Math.floor(drawableRegionX / (fontSizeInPx * fontAspectRatio));
let numDrawableGlyphsInY = Math.floor(drawableRegionY / (fontSizeInPx * lineHeight));

The number of characters we can draw in Y is also influenced by the line height. This is a constant. For the purposes of this utility I will implement this in the same way as CSS, that is, a multiplier.

Our font size directly influences the amount of characters we can draw in a single line. If our text data is greater than numDrawableGlyphsInX, we must split the string after numDrawableGlyphsInX characters and begin drawing characters on another line.

However, splitting the string arbitrarily may split between a word, which is less than ideal. We will need to split the string at each space character into an array of words, count the number of words that can be drawn onto a line, and store both the number of lines and words that can be drawn per those lines into an object. Using this object, we can then loop through the word array and draw to the canvas.

from website.