Docinfo Extension Example

Purpose: Inject Open Graph <meta> tags in the document <head> to control how the page appears when shared on social media. The tags are generated dynamically from the document title and optional description and og-image attributes.

sample-article-doc.adoc

= Introduction to Asciidoctor.js
:description: Learn how to convert AsciiDoc documents to HTML using Asciidoctor.js.
:og-image: https://example.com/images/asciidoctorjs-preview.png

== Getting Started

Asciidoctor.js is a JavaScript implementation of Asciidoctor.

OpenGraphDocinfoProcessor

open-graph-docinfo-processor.js

export default function (registry) {
  registry.docinfoProcessor(function () {
    this.atLocation('head')
    this.process(function (doc) {
      const title = doc.getDocumentTitle()
      const description = doc.getAttribute('description', '')
      const image = doc.getAttribute('og-image', '')
      const tags = [`<meta property="og:title" content="${title}">`]
      if (description) tags.push(`<meta property="og:description" content="${description}">`)
      if (image) tags.push(`<meta property="og:image" content="${image}">`)
      return tags.join('\n')
    })
  })
}

Usage

import { Extensions, convertFile } from '@asciidoctor/core'
import registerOpenGraphDocinfoProcessor from './open-graph-docinfo-processor.js'

const registry = Extensions.create()
registerOpenGraphDocinfoProcessor(registry)

await convertFile('sample-article-doc.adoc', { to_file: false, extension_registry: registry })
// The <head> now contains:
// <meta property="og:title" content="Introduction to Asciidoctor.js">
// <meta property="og:description" content="Learn how to convert AsciiDoc documents to HTML using Asciidoctor.js.">
// <meta property="og:image" content="https://example.com/images/asciidoctorjs-preview.png">