docs: set up @asciidoctor/tabs in UI bundle

Author: alandefreitas

docs/modules/ROOT/pages/install.adoc

@@ -53,6 +53,7 @@ python -c "$(curl -fsSL https://raw.githubusercontent.com/cppalliance/mrdocs/ref
 --
 ====
 
+
 This method automates the download, configuration, and build steps for MrDocs and all required third-party libraries.
 It is especially useful for developers and for users who prefer a streamlined, interactive setup or need to install
 MrDocs in custom environments.

docs/package-lock.json

@@ -15,6 +15,7 @@
   ],
   "devDependencies": {
     "@asciidoctor/core": "~2.2",
+    "@asciidoctor/tabs": "^1.0.0-beta.6",
     "@fontsource/roboto": "~4.5",
     "@fontsource/roboto-mono": "~4.5",
     "@vscode/gulp-vinyl-zip": "~2.5",
@@ -36,6 +37,7 @@
     "gulp-eslint": "~6.0",
     "gulp-imagemin": "~6.2",
     "gulp-postcss": "~8.0",
+    "gulp-prettier": "^6.0.0",
     "gulp-stylelint": "~13.0",
     "gulp-uglify": "~3.0",
     "gulp-vinyl-zip": "~2.2",
@@ -52,7 +54,6 @@
     "require-from-string": "~2.0",
     "stylelint": "~13.3",
     "stylelint-config-standard": "~20.0",
-    "vinyl-fs": "~3.0",
-    "gulp-prettier": "^6.0.0"
+    "vinyl-fs": "~3.0"
   }
 }

docs/ui/package-lock.json

@@ -124,3 +124,6 @@ page:
       - content: Some Code
         url: '/xyz/5.2/index.html#some-code'
         urlType: internal
+asciidoc:
+  extensions:
+    - '@asciidoctor/tabs'

docs/ui/package.json

@@ -0,0 +1 @@
+@import "@asciidoctor/tabs"

docs/ui/preview-src/ui-model.yml

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

docs/ui/src/css/vendor/tabs.css

@@ -3,3 +3,4 @@
 {{#if env.SITE_SEARCH_PROVIDER}}
 {{> search-scripts}}
 {{/if}}
+<script async src="{{{uiRootPath}}}/js/vendor/tabs.js" data-sync-storage-key="preferred-tab"></script>

docs/ui/src/js/vendor/tabs.bundle.js

@@ -1 +1,2 @@
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
+    <link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/tabs.css">