From 03212fa112a73dcf7cc540331e4b2a3fbf3fd859 Mon Sep 17 00:00:00 2001
From: Dan Allen <dan@opendevise.com>
Date: Mon, 30 Jan 2023 03:38:20 -0700
Subject: [PATCH] upgrade Asciidoctor Tabs; persist tab selection across pages

---
 package-lock.json                             |  8 +-
 package.json                                  |  2 +-
 .../features/authentication/index.adoc        | 76 +++++++++++++++++++
 src/css/vendor/asciidoctor-tabs.css           |  2 +-
 src/partials/footer-scripts.hbs               |  4 +-
 5 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b11ffbe1..b42df0b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "license": "MPL-2.0",
       "devDependencies": {
         "@asciidoctor/core": "~2.2",
-        "@asciidoctor/tabs": "1.0.0-alpha.12",
+        "@asciidoctor/tabs": "1.0.0-beta.3",
         "@fontsource/roboto": "~4.5",
         "@fontsource/roboto-mono": "~4.5",
         "@springio/asciidoctor-extensions": "1.0.0-alpha.8",
@@ -83,9 +83,9 @@
       }
     },
     "node_modules/@asciidoctor/tabs": {
-      "version": "1.0.0-alpha.12",
-      "resolved": "https://registry.npmjs.org/@asciidoctor/tabs/-/tabs-1.0.0-alpha.12.tgz",
-      "integrity": "sha512-YmG9zW8+WX4zz+e2BXNrmrOpAe/WG1p2Qgkihw8yz8n1XaNoRFa8xc2XhWOfKFMhnERIMk1XftpBHVykSAeGhw==",
+      "version": "1.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@asciidoctor/tabs/-/tabs-1.0.0-beta.3.tgz",
+      "integrity": "sha512-Cx6LQCLl703BwuejZZSwBy1s7CuJxD9AVY2mAgE0UDXfPmFsY3Il3JMGQ+1JAwHH0hd7htLEq+yG5EiiLdCJeg==",
       "dev": true,
       "engines": {
         "node": ">=16.0.0"
diff --git a/package.json b/package.json
index 81ff0500..3198ed2e 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   ],
   "devDependencies": {
     "@asciidoctor/core": "~2.2",
-    "@asciidoctor/tabs": "1.0.0-alpha.12",
+    "@asciidoctor/tabs": "1.0.0-beta.3",
     "@fontsource/roboto": "~4.5",
     "@fontsource/roboto-mono": "~4.5",
     "@springio/asciidoctor-extensions": "1.0.0-alpha.8",
diff --git a/preview-src/features/authentication/index.adoc b/preview-src/features/authentication/index.adoc
index ee2a5158..5e0710f5 100644
--- a/preview-src/features/authentication/index.adoc
+++ b/preview-src/features/authentication/index.adoc
@@ -1,4 +1,80 @@
 = Authentication
 :antora-page-url: /features/authentication/index.html
+:tabs-sync-option:
 
 this is about authentication
+
+ifdef::asciidoctor-tabs-loaded[]
+.`FilterChain` Usage Example
+[tabs]
+====
+Java::
++
+[,java]
+----
+public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) {
+    // do something before the rest of the application
+    chain.doFilter(request, response); // invoke the rest of the application
+    // do something after the rest of the application
+}
+----
+
+Kotlin::
++
+[,kotlin]
+----
+fun doFilter(request: ServletRequest, response: ServletResponse, chain: FilterChain) {
+    // do something before the rest of the application
+    chain.doFilter(request, response) // invoke the rest of the application
+    // do something after the rest of the application
+}
+----
+
+Wide Table::
++
+|===
+|Spring Boot 2.x |ClientRegistration
+
+|`spring.security.oauth2.client.registration._[registrationId]_`
+|`registrationId`
+
+|`spring.security.oauth2.client.registration._[registrationId]_.client-id`
+|`clientId`
+
+|`spring.security.oauth2.client.registration._[registrationId]_.client-secret`
+|`clientSecret`
+
+|`spring.security.oauth2.client.registration._[registrationId]_.client-authentication-method`
+|`clientAuthenticationMethod`
+
+|`spring.security.oauth2.client.registration._[registrationId]_.authorization-grant-type`
+|`authorizationGrantType`
+|===
++
+The table should fit within the tab panel and scroll horizontally.
+====
+endif::[]
+ifndef::asciidoctor-tabs-loaded[]
+.`FilterChain` Usage Example
+====
+.Java
+[source,java,role="primary"]
+----
+public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) {
+    // do something before the rest of the application
+    chain.doFilter(request, response); // invoke the rest of the application
+    // do something after the rest of the application
+}
+----
+
+.Kotlin
+[source,kotlin,role="secondary"]
+----
+fun doFilter(request: ServletRequest, response: ServletResponse, chain: FilterChain) {
+    // do something before the rest of the application
+    chain.doFilter(request, response) // invoke the rest of the application
+    // do something after the rest of the application
+}
+----
+====
+endif::[]
diff --git a/src/css/vendor/asciidoctor-tabs.css b/src/css/vendor/asciidoctor-tabs.css
index 920001d8..d8441b55 100644
--- a/src/css/vendor/asciidoctor-tabs.css
+++ b/src/css/vendor/asciidoctor-tabs.css
@@ -44,7 +44,7 @@
   content: none;
 }
 
-.doc .tabs:not(.is-loading) .tablist > ul li {
+.doc .tabs.is-loaded .tablist > ul li {
   transition: background-color 200ms ease-in-out, color 100ms linear;
 }
 
diff --git a/src/partials/footer-scripts.hbs b/src/partials/footer-scripts.hbs
index 5a2bdae5..b08f1526 100644
--- a/src/partials/footer-scripts.hbs
+++ b/src/partials/footer-scripts.hbs
@@ -1,6 +1,6 @@
-<script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
+<script src="{{{uiRootPath}}}/js/site.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
-<script async src="{{{uiRootPath}}}/js/vendor/{{#if (asciidocExtensionRegistered '@asciidoctor/tabs')}}asciidoctor{{else}}spring{{/if}}-tabs.js"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/{{#if (asciidocExtensionRegistered '@asciidoctor/tabs')}}asciidoctor{{else}}spring{{/if}}-tabs.js" data-sync-storage-key="docs:preferred-tab"></script>
 {{#if env.ALGOLIA_API_KEY}}
 <script async id="search-script" src="{{{uiRootPath}}}/js/vendor/docsearch.js"{{#if env.ALGOLIA_APP_ID}} data-app-id="{{env.ALGOLIA_APP_ID}}"{{/if}} data-api-key="{{env.ALGOLIA_API_KEY}}" data-index-name="{{env.ALGOLIA_INDEX_NAME}}" data-stylesheet="{{{uiRootPath}}}/css/vendor/docsearch.css"></script>
 {{/if}}