Add tabset and update dependencies (#16)

* Use asciidoctor/tabs and update other packages

Author: simonhkswan

.github/workflows/ci.yaml

@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 10
+          node-version: 14
           cache: npm
       - run: |
           npm install
@@ -35,7 +35,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 10
+          node-version: 14
           cache: npm
       - run: |
           npm install
@@ -51,7 +51,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 10
+          node-version: 14
           cache: npm
       - run: |
           npm install

.gitignore

@@ -1,3 +1,3 @@
 /build/
-/node_modules/
+**/node_modules/**
 /public/

antora-ui.yml

@@ -1,9 +1,10 @@
 ---
 sources:
-  - path: '@djencks/tabset-block-ui'
   - path: ./
 css:
   - site.css
+  - target: vendor/tabs
+    require: '@asciidoctor/tabs/dist/css/tabs.css'
 js:
   - target: site
     contents: '+([0-9])-*.js'
@@ -13,6 +14,9 @@ js:
     require: bootstrap/dist/js/bootstrap.bundle.js
   - target: vendor/tippy
     require: tippy.js/dist/tippy.umd.min.js
+  - target: vendor/tabs
+    require: '@asciidoctor/tabs/dist/js/tabs.js'
+
 bundle-name: ui
 preview: true
 ...

asciinema-macro/.eslintrc

@@ -0,0 +1,19 @@
+{
+  "extends": "standard",
+  "rules": {
+    "arrow-parens": ["error", "always"],
+    "comma-dangle": ["error", {
+      "arrays": "always-multiline",
+      "objects": "always-multiline",
+      "imports": "always-multiline",
+      "exports": "always-multiline"
+    }],
+    "max-len": ["error", {
+      "code": 120,
+      "ignoreStrings": true,
+      "ignoreUrls": true,
+      "ignoreTemplateLiterals": true
+    }],
+    "spaced-comment": "off"
+  }
+}

asciinema-macro/lib/asciinema-macro.js

@@ -0,0 +1,42 @@
+
+const createDiv = function (target, attrs) {
+  const theme = attrs.theme ? attrs.theme : 'solarized-light'
+  const autoplay = attrs.autoplay ? attrs.autoplay : 'true'
+  const loop = attrs.loop ? attrs.loop : 'true'
+  const asciiDiv = `<div id="${target}" class="openblock"></div>`
+  const props = `{loop: ${loop}, theme: '${theme}', autoplay: ${autoplay}, controls: false}`
+  const asciiScript = `AsciinemaPlayer.create('./_images/${target}.cast', document.getElementById('${target}'), ${props});`
+  return `${asciiDiv}<script>${asciiScript}</script>`
+}
+
+const asciinemaMacro = function () {
+  const self = this
+
+  self.named('asciinema')
+  self.positionalAttributes(['theme', 'autoplay', 'loop'])
+
+  self.process(function (parent, target, attrs) {
+    const html = createDiv(target, attrs)
+    return self.createBlock(parent, 'pass', html, attrs, {})
+  })
+}
+
+module.exports.register = function (registry) {
+  function doRegister (registry) {
+    if (typeof registry.blockMacro === 'function') {
+      registry.blockMacro(asciinemaMacro)
+    } else {
+      console.warn('no \'blockMacro\' method on alleged registry')
+    }
+  }
+
+  if (typeof registry.register === 'function') {
+    registry.register(function () {
+      registry = this
+      doRegister(registry)
+    })
+  } else {
+    doRegister(registry)
+  }
+  return registry
+}

asciinema-macro/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@simonhkswan/asciinema-macro",
+  "version": "0.2.0",
+  "description": "Asciidoctor asciinema macro extension",
+  "main": "lib/asciinema-macro.js",
+  "files": [
+    "lib/*.js"
+  ],
+  "scripts": {
+    "lint": "eslint lib/*.js",
+    "lint-fix": "eslint lib/*.js --fix"
+  },
+  "devDependencies": {
+    "@antora/content-classifier": "^3.0.3",
+    "@asciidoctor/core": "^2.2.0",
+    "chai": "~4.2",
+    "chai-cheerio": "~1.0",
+    "chai-fs": "~2.0",
+    "chai-spies": "~1.0",
+    "cheerio": "1.0.0-rc.3",
+    "dirty-chai": "~2.0",
+    "eslint": "~6.7",
+    "eslint-config-standard": "~14.1",
+    "eslint-plugin-import": "~2.19",
+    "eslint-plugin-node": "~10.0",
+    "eslint-plugin-promise": "~4.2",
+    "eslint-plugin-standard": "~4.0",
+    "prettier-eslint-cli": "~5.0"
+  },
+  "keywords": [
+    "asciidoctor",
+    "asciinema",
+    "javascript",
+    "extension"
+  ],
+  "author": "Simon Swan (https://github.com/simonhkswan)",
+  "license": "MIT"
+}

gulp.d/tasks/build-preview-pages.js

@@ -6,7 +6,7 @@ Error.call = (self, ...args) => {
   return Object.assign(self, { message: err.message, stack: err.stack })
 }
 
-const asciidoctor = require('asciidoctor.js')()
+const Asciidoctor = require('@asciidoctor/core')()
 const fs = require('fs-extra')
 const handlebars = require('handlebars')
 const merge = require('merge-stream')
@@ -27,7 +27,21 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
       merge(compileLayouts(src), registerPartials(src), registerHelpers(src), copyImages(previewSrc, previewDest))
     ),
   ])
-    .then(([baseUiModel, { layouts }]) => [{ ...baseUiModel, env: process.env }, layouts])
+    .then(([baseUiModel, { layouts }]) => {
+      const extensions = ((baseUiModel.asciidoc || {}).extensions || []).map((request) => {
+        ASCIIDOC_ATTRIBUTES[request.replace(/^@|\.js$/, '').replace(/[/]/g, '-') + '-loaded'] = ''
+        const extension = require(request)
+        extension.register(Asciidoctor.Extensions)
+        return extension
+      })
+      const asciidoc = { extensions }
+      for (const component of baseUiModel.site.components) {
+        for (const version of component.versions || []) version.asciidoc = asciidoc
+      }
+      baseUiModel = { ...baseUiModel, env: process.env }
+      delete baseUiModel.asciidoc
+      return [baseUiModel, layouts]
+    })
     .then(([baseUiModel, layouts]) =>
       vfs
         .src('**/*.adoc', { base: previewSrc, cwd: previewSrc })
@@ -42,7 +56,7 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
             if (file.stem === '404') {
               uiModel.page = { layout: '404', title: 'Page Not Found' }
             } else {
-              const doc = asciidoctor.load(file.contents, { safe: 'safe', attributes: ASCIIDOC_ATTRIBUTES })
+              const doc = Asciidoctor.load(file.contents, { safe: 'safe', attributes: ASCIIDOC_ATTRIBUTES })
               uiModel.page.attributes = Object.entries(doc.getAttributes())
                 .filter(([name, val]) => name.startsWith('page-'))
                 .reduce((accum, [name, val]) => {
@@ -110,7 +124,7 @@ function compileLayouts (src) {
 
 function copyImages (src, dest) {
   return vfs
-    .src('**/*.{png,svg}', { base: src, cwd: src })
+    .src('**/*.{png,svg,cast}', { base: src, cwd: src })
     .pipe(vfs.dest(dest))
     .pipe(map((file, enc, next) => next()))
 }