tiptap/docs/utilities/opengraph-images/index.js

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)
  },
}