chore(extensions): add asciidoctor-tabs (#207)

* Add Asciidoctor extension asciidoctor/asciidoctor-tabs and few example
* Improve the declaration CSS way. We can now use the classic CSS files with @import syntax

gulp.d/tasks/build.js

@@ -12,6 +12,7 @@ const sass = require('gulp-sass')(require('sass'))
 const ospath = require('path')
 const path = ospath.posix
 const postcssUrl = require('postcss-url')
+const postcssImport = require('postcss-import')
 const { Transform } = require('stream')
 const map = (transform) => new Transform({ objectMode: true, transform })
 const through = () => map((file, enc, next) => next(null, file))
@@ -21,11 +22,6 @@ const config = {
     'node_modules/@docsearch/js/dist/umd/index.js',
     'node_modules/asciinema-player/dist/bundle/asciinema-player.min.js',
   ],
-  libsCss: [
-    'node_modules/@docsearch/css/dist/style.css',
-    'node_modules/asciinema-player/dist/bundle/asciinema-player.css',
-    'node_modules/@fortawesome/fontawesome-free/css/all.css',
-  ],
   libsFonts: [
     'node_modules/@fortawesome/fontawesome-free/webfonts/*.{ttf,woff*(2)}',
   ],
@@ -36,9 +32,10 @@ module.exports = (src, dest, preview) => () => {
   const sourcemaps = preview || process.env.SOURCEMAPS === 'true'
   const autoprefixer = require('autoprefixer')
   const postcssPlugins = [require('@csstools/postcss-sass'),
+    postcssImport,
     autoprefixer(),
     postcssUrl({
-      filter: '**/~typeface-*/files/*',
+      filter: new RegExp('^src/stylesheets/[~][^/]*(?:font|face)[^/]*/.*/files/.+[.](?:ttf|woff2?)$'),
       url: (asset) => {
         const relpath = asset.pathname.substr(1)
         const abspath = require.resolve(relpath)
@@ -82,8 +79,8 @@ module.exports = (src, dest, preview) => () => {
    */
   function libCss () {
     const { src } = require('gulp')
-    return src(config.libsCss)
-      .pipe(concat('stylesheets/vendor/libs.css'))
+    return src(['stylesheets/vendor/*.css'], { ...opts, sourcemaps })
+      .pipe(postcss((file) => ({ plugins: postcssPlugins, options: { file } })))
   }
 
   const buffer = require('vinyl-buffer')

package.json

@@ -20,6 +20,7 @@
     "preview:build": "gulp preview:build"
   },
   "devDependencies": {
+    "@asciidoctor/tabs": "^1.0.0-beta.6",
     "@csstools/postcss-sass": "^4.0.0",
     "asciidoctor": "2.2.6",
     "autoprefixer": "~9.7",

preview-src/tabs-sync.adoc

@@ -0,0 +1,41 @@
+= Tabs block with synchronization
+:tabs-sync-option:
+
+Add `:tabs-sync-option:` to the page attribute header to enable synchronization of tabs.
+Source: https://github.com/asciidoctor/asciidoctor-tabs
+
+[tabs]
+====
+Tab A:: Triggers selection of Tab A in other congruent tabsets.
+Tab B:: Triggers selection of Tab B in other congruent tabsets.
+====
+
+...
+
+[tabs]
+====
+Tab A:: Triggers selection of Tab A in other congruent tabsets.
+Tab B:: Triggers selection of Tab B in other congruent tabsets.
+====
+
+
+.Click to see the *source code*
+[%collapsible]
+========
+[source,asciidoc]
+----
+[tabs]
+====
+Tab A:: Triggers selection of Tab A in other congruent tabsets.
+Tab B:: Triggers selection of Tab B in other congruent tabsets.
+====
+
+...
+
+[tabs]
+====
+Tab A:: Triggers selection of Tab A in other congruent tabsets.
+Tab B:: Triggers selection of Tab B in other congruent tabsets.
+====
+----
+========

preview-src/tabs-with-custom-sync-groups.adoc

@@ -0,0 +1,80 @@
+= Tabs block with groups synchronization
+:tabs-sync-option:
+
+Source: https://github.com/asciidoctor/asciidoctor-tabs
+
+[tabs,sync-group-id=group-1]
+====
+Tab A:: Triggers selection of Tab A in second tabset.
+Tab B:: Triggers selection of Tab B in second tabset.
+====
+
+.Click to see the *source code*
+[%collapsible]
+========
+[source,asciidoc]
+----
+[tabs,sync-group-id=group-1]
+====
+Tab A:: Triggers selection of Tab A in second tabset.
+Tab B:: Triggers selection of Tab B in second tabset.
+====
+----
+========
+
+[tabs,sync-group-id=group-1]
+====
+Tab A:: Triggers selection of Tab A in first tabset.
+Tab B:: Triggers selection of Tab B in first tabset.
+====
+
+.Click to see the *source code*
+[%collapsible]
+========
+[source,asciidoc]
+----
+[tabs,sync-group-id=group-1]
+====
+Tab A:: Triggers selection of Tab A in first tabset.
+Tab B:: Triggers selection of Tab B in first tabset.
+====
+----
+========
+
+[tabs,sync-group-id=group-2]
+====
+Tab A:: Triggers selection of Tab A in fourth tabset.
+Tab B:: Triggers selection of Tab B in fourth tabset.
+====
+
+.Click to see the *source code*
+[%collapsible]
+========
+[source,asciidoc]
+----
+[tabs,sync-group-id=group-2]
+====
+Tab A:: Triggers selection of Tab A in fourth tabset.
+Tab B:: Triggers selection of Tab B in fourth tabset.
+====
+----
+========
+
+[tabs,sync-group-id=group-2]
+====
+Tab A:: Triggers selection of Tab A in third tabset.
+Tab B:: Triggers selection of Tab B in third tabset.
+====
+
+.Click to see the *source code*
+[%collapsible]
+========
+[source,asciidoc]
+----
+[tabs,sync-group-id=group-2]
+====
+Tab A:: Triggers selection of Tab A in third tabset.
+Tab B:: Triggers selection of Tab B in third tabset.
+====
+----
+========

preview-src/tabs.adoc

@@ -0,0 +1,45 @@
+= Tabs block
+
+Source: https://github.com/asciidoctor/asciidoctor-tabs
+
+[tabs]
+====
+Tab A:: Contents of Tab A.
+
+Tab B::
++
+Contents of Tab B.
+
+Tab C::
++
+--
+Contents of Tab C.
+
+Contains more than one block.
+--
+====
+
+
+.Click to see the *source code*
+[%collapsible]
+========
+[source,asciidoc]
+----
+[tabs]
+====
+Tab A:: Contents of Tab A.
+
+Tab B::
++
+Contents of Tab B.
+
+Tab C::
++
+--
+Contents of Tab C.
+
+Contains more than one block.
+--
+====
+----
+========

preview-src/ui-model.yml

@@ -137,6 +137,17 @@ page:
       - content: Media
         url: /bonita/dev/media.html
         urlType: internal
+      - content: Tabs
+        items:
+          - content: Tabs
+            url: /bonita/dev/tabs.html
+            urlType: internal
+          - content: Tabs Sync
+            url: /bonita/dev/tabs-sync.html
+            urlType: internal
+          - content: Tabs Sync Groups
+            url: /bonita/dev/tabs-with-custom-sync-groups.html
+            urlType: internal
       - content: Troubleshooting
         url: /bonita/dev/troubleshooting.html
         urlType: internal
@@ -165,3 +176,5 @@ page:
 asciidoc:
   attributes:
     icons: font
+  extensions:
+    - '@asciidoctor/tabs'

src/js/vendor/tabs.bundle.js

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

src/partials/footer-scripts.hbs

@@ -3,6 +3,7 @@
 <script src="{{{uiRootPath}}}/js/vendor/libs.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 <script src="{{{uiRootPath}}}/js/site.js"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/tabs.js" data-sync-storage-key="preferred-tab"></script>
 
 {{!-- DocSearch only available if the search bar is displayed --}}
 {{#if (isSearchBarDisplayed site page)}}

src/stylesheets/vendor/libs.css

@@ -0,0 +1,4 @@
+@import '@docsearch/css/dist/style.css';
+@import 'asciinema-player/dist/bundle/asciinema-player.css';
+@import '@fortawesome/fontawesome-free/css/all.css';
+@import '@asciidoctor/tabs/dist/css/tabs.css';