docs: set up @asciidoctor/tabs in UI bundle

Author: alandefreitas

docs/modules/ROOT/pages/install.adoc

@@ -1,4 +1,5 @@
 = Install
+:tabs-sync-option:
 
 [#mrdocs-binaries]
 == Binary Packages
@@ -8,10 +9,10 @@ Most users should use these packages.
 
 mrdocs-releases::[]
 
-[#mrdocs-source-script]
-== Python Bootstrap Script
+[#mrdocs-bootstrap-script]
+== Bootstrap Script
 
-The Python bootstrap script available in the repository provides an alternative way to install MrDocs and its
+The bootstrap script available in the repository provides an alternative way to install MrDocs and its
 dependencies from source. Just run the script from the root of the MrDocs repository:
 
 [source,bash]
@@ -34,16 +35,7 @@ python -c "$(Invoke-WebRequest -Uri 'https://raw.githubusercontent.com/cppallian
 ----
 --
 
-Linux::
-+
---
-[source,bash]
-----
-python3 -c "$(curl -fsSL https://raw.githubusercontent.com/cppalliance/mrdocs/refs/heads/develop/bootstrap.py)"
-----
---
-
-macOS::
+Unix Variants::
 +
 --
 [source,bash]
@@ -53,6 +45,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.
@@ -75,16 +68,7 @@ python -c "$(Invoke-WebRequest -Uri 'https://raw.githubusercontent.com/cppallian
 ----
 --
 
-Linux::
-+
---
-[source,bash]
-----
-python3 -c "$(curl -fsSL https://raw.githubusercontent.com/cppalliance/mrdocs/refs/heads/develop/bootstrap.py)" --non-interactive
-----
---
-
-macOS::
+Unix Variants::
 +
 --
 [source,bash]
@@ -100,7 +84,7 @@ This approach is recommended for developers, advanced users, or those integratin
 into larger projects.
 
 [#mrdocs-source]
-== Install from Source
+== Manually Install from Source
 
 The following instructions assume we are at a parent directory that's going to contain both the MrDocs and the third-party dependencies directories.
 

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">