integrate Asciidoctor Tabs

Author: mojavelinux

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

@@ -59,7 +59,21 @@ module.exports =
           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.call(Asciidoctor.Extensions)
+            return extension
+          })
+          const asciidoc = { extensions }
+          for (const component of Object.values(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, iconDefs = new Map()]) =>
           vfs
             .src('**/*.adoc', { base: previewSrc, cwd: previewSrc })
@@ -171,7 +185,6 @@ module.exports =
 function loadSampleUiModel (src) {
   return fs.readFile(ospath.join(src, 'ui-model.yml'), 'utf8').then((contents) => {
     const uiModel = yaml.safeLoad(contents)
-    uiModel.env = process.env
     if (process.env.DEPLOY_PRIME_URL) uiModel.site.url = process.env.DEPLOY_PRIME_URL
     Object.entries(uiModel.site.components).forEach(([name, component]) => {
       component.name = name

package.json

@@ -21,6 +21,7 @@
     "@fortawesome/free-solid-svg-icons": "~5.13",
     "@octokit/rest": "~18.0",
     "@asciidoctor/core": "~2.2",
+    "@asciidoctor/tabs": "1.0.0-beta.3",
     "autoprefixer": "~9.8",
     "browser-pack-flat": "~3.4",
     "browserify": "~16.5",

preview-src/index.adoc

@@ -117,82 +117,17 @@ This section provides information on the server resources across the cluster.
 
 Installation will vary based on your operation system.
 
-// NOTE this HTML is generated by the tabs-block extension; never type this in a document directly!
-++++
-<div class="tabset is-loading">
-<div class="ulist tabs">
-<ul>
-<li>
-<p><a id="tabset1_ubuntu"></a>Ubuntu</p>
-</li>
-<li>
-<p><a id="tabset1_red-hat"></a>Red Hat</p>
-</li>
-<li>
-<p><a id="tabset1_debian"></a>Debian</p>
-</li>
-<li>
-<p><a id="tabset1_test1"></a>Test1</p>
-</li>
-<li>
-<p><a id="tabset1_test2"></a>Test2</p>
-</li>
-<li>
-<p><a id="tabset1_test3"></a>Test3</p>
-</li>
-<li>
-<p><a id="tabset1_test4"></a>Test4</p>
-</li>
-<li>
-<p><a id="tabset1_test5"></a>Test5</p>
-</li>
-</ul>
-</div>
-<div class="content">
-<div class="tab-pane is-active" aria-labelledby="tabset1_ubuntu">
-<div class="paragraph">
-<p>Content for Ubuntu tab.</p>
-</div>
-</div>
-<div class="tab-pane" aria-labelledby="tabset1_red-hat">
-<div class="paragraph">
-<p>Content for Red Hat tab.</p>
-</div>
-</div>
-<div class="tab-pane" aria-labelledby="tabset1_debian">
-<div class="paragraph">
-<p>Content for Debian tab.</p>
-</div>
-</div>
-<div class="tab-pane" aria-labelledby="tabset1_test1">
-<div class="paragraph">
-<p>Content for test 1 tab.</p>
-</div>
-</div>
-<div class="tab-pane" aria-labelledby="tabset1_test2">
-<div class="paragraph">
-<p>Content for test 2 tab.</p>
-</div>
-</div>
-<div class="tab-pane" aria-labelledby="tabset1_test3">
-<div class="paragraph">
-<p>Content for test 3 tab.</p>
-</div>
-</div>
-<div class="tab-pane" aria-labelledby="tabset1_test4">
-<div class="paragraph">
-<p>Content for test 4 tab.</p>
-</div>
-</div>
-<div class="tab-pane" aria-labelledby="tabset1_test5">
-<div class="paragraph">
-<p>Content for test 5 tab.</p>
-</div>
-</div>
-</div>
-</div>
-++++
-
+[tabs]
+====
+Ubuntu:: Content for Ubuntu tab.
+Red Hat:: Content for Red Hat tab.
+Debian:: Content for Debian tab.
+Test1:: Content for test 1 tab. 
+Test2:: Content for test 2 tab. 
+Test3:: Content for test 3 tab. 
+Test4:: Content for test 4 tab. 
+Test5:: Content for test 5 tab. 
+====
 
 == Admonition Blocks
 

preview-src/ui-model.yml

@@ -173,3 +173,6 @@ page:
     content: Liber Recusabo
     url: '#'
     urlType: 'internal'
+asciidoc:
+  extensions:
+  - '@asciidoctor/tabs'

src/css/site.css

@@ -14,6 +14,7 @@
 @import "toolbar.css";
 @import "labels.css";
 @import "doc.css";
+@import "@asciidoctor/tabs";
 @import "pagination.css";
 @import "swagger-ui.css";
 @import "home.css";

src/js/05-tabset.js

@@ -0,0 +1 @@
+require("@asciidoctor/tabs")

src/js/vendor/tabs.bundle.js

@@ -11,6 +11,7 @@
 {{> terminal}}
 </template>
 <script id="site-script" src="{{{uiRootPath}}}/js/site.js"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/tabs.js"></script>
 {{#with page.attributes.content-scripts}}
 {{{this}}}
 {{/with}}