upgrade Asciidoctor Tabs; persist tab selection across pages

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

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::[]

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;
 }
 

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