docs: generate open graph images for all pages

docs/.gitignore

@@ -0,0 +1,2 @@
+static/images/*
+!static/images/.gitkeep

docs/gridsome.server.js

@@ -1,5 +1,45 @@
+const fs = require('fs')
+const { createCanvas, registerFont } = require('canvas')
 const path = require('path')
 const globby = require('globby')
+
+registerFont('fonts/Inter-Regular.otf', { family: 'InterRegular' })
+registerFont('fonts/Inter-Medium.otf', { family: 'InterMedium' })
+
+const wrapText = function (context, text, x, y, maxWidth, lineHeight) {
+  const words = text.split(' ')
+  let line = ''
+
+  for (let n = 0; n < words.length; n += 1) {
+    const testLine = `${line + words[n]} `
+    const metrics = context.measureText(testLine)
+    const testWidth = metrics.width
+    if (testWidth > maxWidth && n > 0) {
+      context.fillText(line, x, y)
+      line = `${words[n]} `
+      y += lineHeight
+    } else {
+      line = testLine
+    }
+  }
+  context.fillText(line, 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 TypeDoc = require('typedoc')
 
 // const packages = globby.sync('../packages/*', { onlyDirectories: true })
@@ -142,4 +182,67 @@ module.exports = function (api) {
           .set(`@tiptap/${name}`, path.resolve(`../packages/${name}/src/index.ts`))
       })
   })
+
+  // Generate OpenGraph images for all pages
+  api.onCreateNode(options => {
+    if (process.env.NODE_ENV !== 'production') {
+      return null
+    }
+
+    if (options?.internal?.typeName !== 'DocPage') {
+      return null
+    }
+
+    const imagePath = `static/images${options.path}`
+    const imageFile = `static/images${options.path}og-image.png`
+
+    // console.log(`Found Post “${options.title}” in ${options.internal.origin} …`)
+
+    const width = 1200
+    const height = 630
+
+    const border = 40
+
+    const canvas = createCanvas(width, height)
+    const context = canvas.getContext('2d')
+
+    // background
+    context.fillStyle = '#000000'
+    context.fillRect(0, 0, width, height)
+
+    // project
+    const project = 'tiptap documentation'
+    context.textBaseline = 'top'
+    context.fillStyle = '#666666'
+    context.font = '32pt InterRegular'
+    context.fillText(project, border, border)
+
+    // title
+    const { title } = options
+    const lineHeight = 96
+    context.textBaseline = 'top'
+    context.fillStyle = '#ffffff'
+    context.font = '58pt InterMedium'
+    wrapText(context, title, border, border + 60 + border, width - border - border, lineHeight)
+
+    // reading time
+    const readingTime = calculateReadingTime(options.content)
+    context.textBaseline = 'bottom'
+    context.fillStyle = '#666666'
+    context.font = '32pt InterRegular'
+    context.fillText(readingTime, border, height - border)
+
+    // store
+    const buffer = canvas.toBuffer('image/png')
+
+    fs.mkdir(imagePath, { recursive: true }, error => {
+      if (error) {
+        throw error
+      }
+
+      fs.writeFileSync(imageFile, buffer)
+
+      // console.log(`OpenGraph image generated (${imageFile}).`)
+    })
+  })
 }

docs/package.json

@@ -12,6 +12,7 @@
     "@gridsome/transformer-json": "^0.2.1",
     "@gridsome/vue-remark": "^0.2.6",
     "@mvasilkov/outdent": "^1.0.4",
+    "canvas": "^2.6.1",
     "collect.js": "^4.28.6",
     "d3": "^6.5.0",
     "globby": "^11.0.0",

docs/src/components/LiveDemo/index.vue

@@ -23,6 +23,8 @@
   </div>
 </template>
 
+<script>
+/*
 <static-query>
 query {
   packages: allPackage {
@@ -34,8 +36,7 @@ query {
   }
 }
 </static-query>
-
-<script>
+*/
 // import collect from 'collect.js'
 import { VueLive } from 'vue-live'
 import CustomLayout from './CustomLayout'

docs/src/templates/DocPage/index.vue

@@ -31,7 +31,7 @@ export default {
         },
         {
           property: 'og:image',
-          content: 'https://next.tiptap.dev/og-image.png',
+          content: this.getOpenGraphImage(),
         },
         /* Twitter */
         {
@@ -44,7 +44,7 @@ export default {
         },
         {
           name: 'twitter:image',
-          content: 'https://next.tiptap.dev/og-image.png',
+          content: this.getOpenGraphImage(),
         },
         {
           name: 'twitter:site',
@@ -53,6 +53,15 @@ export default {
       ],
     }
   },
+  methods: {
+    getOpenGraphImage() {
+      const path = this.$route.path.replace(/\/$/, '')
+
+      return path === ''
+        ? 'https://next.tiptap.dev/og-image.png'
+        : `/images${path}/og-image.png`
+    },
+  },
 }
 </script>
 

yarn.lock

@@ -4155,6 +4155,15 @@ caniuse-lite@^1.0.30001165:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz#32955490d2f60290bb186bb754f2981917fa744f"
   integrity sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==
 
+canvas@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.6.1.tgz#0d087dd4d60f5a5a9efa202757270abea8bef89e"
+  integrity sha512-S98rKsPcuhfTcYbtF53UIJhcbgIAK533d1kJKMwsMwAIFgfd58MOyxRud3kktlzWiEkFliaJtvyZCBtud/XVEA==
+  dependencies:
+    nan "^2.14.0"
+    node-pre-gyp "^0.11.0"
+    simple-get "^3.0.3"
+
 case-sensitive-paths-webpack-plugin@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz#23ac613cc9a856e4f88ff8bb73bbb5e989825cf7"
@@ -5740,7 +5749,7 @@ detect-indent@^6.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
   integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
 
-detect-libc@^1.0.3:
+detect-libc@^1.0.2, detect-libc@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
@@ -8090,7 +8099,7 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
-iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24:
+iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -10170,7 +10179,7 @@ mz@^2.5.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.12.1, nan@^2.13.2:
+nan@^2.12.1, nan@^2.13.2, nan@^2.14.0:
   version "2.14.2"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
@@ -10212,6 +10221,15 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+needle@^2.2.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.6.0.tgz#24dbb55f2509e2324b4a99d61f413982013ccdbe"
+  integrity sha512-KKYdza4heMsEfSWD7VPUIz3zX2XDwOyX2d+geb4vrERZMT5RMU6ujjaD+I5Yr54uZxQ2w6XRTAhHBbSCyovZBg==
+  dependencies:
+    debug "^3.2.6"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -10340,6 +10358,22 @@ node-libs-browser@^2.2.1:
     util "^0.11.0"
     vm-browserify "^1.0.1"
 
+node-pre-gyp@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.11.0.tgz#db1f33215272f692cd38f03238e3e9b47c5dd054"
+  integrity sha512-TwWAOZb0j7e9eGaf9esRx3ZcLaE5tQ2lvYy1pb5IAaG1a2e2Kv5Lms1Y4hpj+ciXJRofIxxlt5haeQ/2ANeE0Q==
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
+
 node-releases@^1.1.67:
   version "1.1.67"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
@@ -10487,7 +10521,7 @@ npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
     semver "^5.6.0"
     validate-npm-package-name "^3.0.0"
 
-npm-packlist@^1.4.4:
+npm-packlist@^1.1.6, npm-packlist@^1.4.4:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
   integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
@@ -10519,7 +10553,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.1.2:
+npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.0.2, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -12776,7 +12810,7 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2.6.3:
+rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -12965,7 +12999,7 @@ sass@^1.18.0:
   dependencies:
     chokidar ">=2.0.0 <4.0.0"
 
-sax@~1.2.4:
+sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -14022,7 +14056,7 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
-tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
+tar@^4, tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
   version "4.4.13"
   resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
   integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==