docs: refactor the open graph image generation

docs/utilities/opengraph-images/index.js

@@ -0,0 +1,140 @@
+const fs = require('fs')
+const path = require('path')
+const { createCanvas, registerFont, loadImage } = require('canvas')
+
+const multilineText = function (
+  ctx,
+  text,
+  x,
+  y,
+  maxWidth,
+  lineHeight,
+  start = 'top',
+) {
+  const words = text.split(' ')
+
+  let numberOfLines = 1
+
+  if (start === 'bottom') {
+    let currentLine = ''
+
+    for (let index = 0; index < words.length; index += 1) {
+      const temporaryLine = `${currentLine + words[index]} `
+      const temporaryWidth = ctx.measureText(temporaryLine).width
+
+      if (temporaryWidth > maxWidth && index > 0) {
+        numberOfLines += 1
+        currentLine = `${words[index]} `
+      } else {
+        currentLine = temporaryLine
+      }
+    }
+
+    const textHeight = numberOfLines * lineHeight
+    y = ctx.canvas.height - y - textHeight
+  }
+
+  let currentLine = ''
+
+  for (let index = 0; index < words.length; index += 1) {
+    const testLine = `${currentLine + words[index]} `
+    const metrics = ctx.measureText(testLine)
+    const testWidth = metrics.width
+
+    if (testWidth > maxWidth && index > 0) {
+      ctx.fillText(currentLine, x, y)
+      currentLine = `${words[index]} `
+      y += lineHeight
+    } else {
+      currentLine = testLine
+    }
+  }
+
+  ctx.fillText(currentLine, x, y)
+}
+
+const calculateReadingTime = function (text) {
+  const wordsPerMinute = 200
+  const textLength = text.split(' ').length
+
+  if (textLength > 0) {
+    const value = Math.ceil(textLength / wordsPerMinute)
+
+    if (value === 1) {
+      return `${value} minute`
+    }
+
+    return `${value} minutes`
+  }
+}
+
+const width = 1200
+const height = 720
+const border = 50
+
+registerFont('fonts/Inter-Regular.otf', { family: 'InterRegular' })
+registerFont('fonts/Inter-Bold.otf', { family: 'InterBold' })
+
+function writeImageFile(canvas, output) {
+  const buffer = canvas.toBuffer('image/png')
+  const directory = output.substring(0, output.lastIndexOf('/'))
+
+  fs.mkdir(directory, { recursive: true }, error => {
+    if (error) {
+      throw error
+    }
+
+    fs.writeFileSync(output, buffer)
+  })
+}
+
+module.exports = {
+  async createDefaultOpenGraphImage(text, output) {
+    // canvas
+    const canvas = createCanvas(width, height)
+    const ctx = canvas.getContext('2d')
+    ctx.fillStyle = '#ffffff'
+    ctx.fillRect(0, 0, width, height)
+
+    // logo
+    const image = await loadImage(path.resolve(__dirname, 'logo.png'))
+    ctx.drawImage(image, border, border)
+
+    // title
+    const lineHeight = 110
+    ctx.textBaseline = 'top'
+    ctx.fillStyle = '#000000'
+    ctx.font = '70pt InterBold'
+    multilineText(ctx, text, border, border, width - 7 * border, lineHeight, 'bottom')
+
+    writeImageFile(canvas, output)
+  },
+  async createSpecificOpenGraphImage(text, content = '', output) {
+    const readingTime = calculateReadingTime(content)
+
+    // canvas
+    const canvas = createCanvas(width, height)
+    const ctx = canvas.getContext('2d')
+    ctx.fillStyle = '#ffffff'
+    ctx.fillRect(0, 0, width, height)
+
+    // logo
+    const image = await loadImage(path.resolve(__dirname, 'logo.png'))
+    ctx.drawImage(image, border, border)
+
+    // title
+    const lineHeight = 90
+    ctx.textBaseline = 'top'
+    ctx.fillStyle = '#000000'
+    ctx.font = '60pt InterBold'
+    multilineText(ctx, text, border, border + 80, width - 5 * border, lineHeight, 'bottom')
+
+    // reading time
+    ctx.textBaseline = 'bottom'
+    ctx.fillStyle = '#666666'
+    ctx.font = '32pt InterRegular'
+    ctx.fillText(readingTime, border, height - border)
+
+    writeImageFile(canvas, output)
+  },
+}