feat: upgrade docsify runtime to v5

Author: Aaron8052

index.html

@@ -77,7 +77,7 @@
     <link id="prism-light-theme" rel="stylesheet" href="lib/css/prism-light.css">
     <link id="prism-dark-theme" rel="stylesheet" href="lib/css/prism-dark.css">
     <link rel="stylesheet" href="lib/css/docsify-tabs.css">
-    <link rel="stylesheet" href="lib/css/docs-app.css?v=59">
+    <link rel="stylesheet" href="lib/css/docs-app.css?v=60">
     <link rel="stylesheet" href="lib/components/last-modified.css?v=1">
 
     <script>
@@ -210,7 +210,6 @@
         },
         maxLevel: 0,
         subMaxLevel: 0,
-        topMargin: 76,
         notFoundPage: {
             '/': '/404',
             '/en/': '/en/404'
@@ -255,7 +254,7 @@
 
 <script src="lib/docsify.min.js"></script>
 <script src="lib/navigation-scope.js?v=2"></script>
-<script src="lib/navigation.js?v=56"></script>
+<script src="lib/navigation.js?v=60"></script>
 <script src="lib/footer-hook.js"></script>
 <script src="lib/markdown-components.js?v=1"></script>
 <script src="lib/components/last-modified.js?v=2"></script>

lib/css/docs-app.css

@@ -1,5 +1,6 @@
 :root {
     --docs-header-height: 64px;
+    --scroll-padding-top: calc(var(--docs-header-height) + 1rem);
     --docs-sidebar-width: 19rem;
     --docs-accent: #2c9cff;
     --docs-accent-strong: #147fd6;
@@ -154,7 +155,7 @@
 }
 
 html {
-    scroll-padding-top: calc(var(--docs-header-height) + 1rem);
+    scroll-padding-top: var(--scroll-padding-top);
 }
 
 body {
@@ -174,6 +175,29 @@ body,
     outline-offset: 2px;
 }
 
+#skip-to-content {
+    position: fixed;
+    z-index: 1000;
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+    padding: 0.65rem 1rem;
+    border: 0;
+    border-radius: 0 0 var(--docs-radius) var(--docs-radius);
+    background: var(--docs-accent-strong);
+    color: #ffffff;
+    font: 650 0.875rem/1.35 var(--base-font-family);
+    transform: translate(-50%, calc(-100% - 0.5rem));
+    transition: transform var(--duration-fast) var(--ease-out);
+}
+
+#skip-to-content:focus-visible {
+    transform: translate(-50%, 0);
+}
+
+.search .kbd-group {
+    display: none !important;
+}
+
 .docs-header {
     position: fixed;
     z-index: 100;

lib/docsify.min.js

@@ -819,6 +819,15 @@
     }
 
     function setupResponsiveTableCells() {
+        document.querySelectorAll('.markdown-section table').forEach(function (table) {
+            if (table.parentElement && table.parentElement.classList.contains('table-wrapper')) return;
+
+            var wrapper = document.createElement('div');
+            wrapper.className = 'table-wrapper';
+            table.parentNode.insertBefore(wrapper, table);
+            wrapper.appendChild(table);
+        });
+
         document.querySelectorAll('.markdown-section .table-wrapper td').forEach(function (cell) {
             if (directChild(cell, '.responsive-table-value')) return;
             var value = document.createElement('div');
@@ -1320,13 +1329,31 @@
         if (breadcrumb) heading.insertAdjacentElement('beforebegin', breadcrumb);
     }
 
+    function usesDocsifyV5SidebarState(sidebar) {
+        return Boolean(
+            sidebar &&
+            window.Docsify &&
+            /^5\./.test(String(window.Docsify.version || ''))
+        );
+    }
+
     function syncSidebarToggleState() {
         var toggle = document.querySelector('.docs-header > .sidebar-toggle');
         if (!toggle) return;
         var mobile = window.matchMedia('(max-width: 47.99em)').matches;
-        var expanded = mobile
-            ? document.body.classList.contains('close')
-            : !document.body.classList.contains('close');
+        var sidebar = document.querySelector('.sidebar');
+        var usesV5State = usesDocsifyV5SidebarState(sidebar);
+        var expanded;
+
+        if (usesV5State) {
+            expanded = sidebar.classList.contains('show');
+            document.body.classList.toggle('close', mobile ? expanded : !expanded);
+        } else {
+            expanded = mobile
+                ? document.body.classList.contains('close')
+                : !document.body.classList.contains('close');
+        }
+
         toggle.setAttribute('aria-expanded', String(expanded));
         toggle.setAttribute('aria-label', uiText(expanded ? 'sidebar_hide' : 'sidebar_show'));
         toggle.title = toggle.getAttribute('aria-label');
@@ -1581,9 +1608,26 @@
         var header = document.querySelector('.docs-header');
         var brand = document.getElementById('docs-brand');
         var toggle = document.querySelector('.sidebar-toggle');
+        var sidebar = document.querySelector('.sidebar');
         if (!header || !brand || !toggle) return;
 
         if (toggle.parentElement !== header) header.insertBefore(toggle, brand);
+        if (
+            usesDocsifyV5SidebarState(sidebar) &&
+            window.matchMedia('(max-width: 47.99em)').matches &&
+            toggle.dataset.docsV5MobileInitialized !== 'true'
+        ) {
+            toggle.dataset.docsV5MobileInitialized = 'true';
+            sidebar.classList.remove('show');
+            document.querySelectorAll('body > *:not(main, script), main > .content').forEach(function (element) {
+                element.removeAttribute('inert');
+            });
+            var innerToggle = toggle.querySelector('[aria-controls="__sidebar"]');
+            if (innerToggle) {
+                innerToggle.setAttribute('aria-expanded', 'false');
+                innerToggle.setAttribute('aria-label', uiText('sidebar_show'));
+            }
+        }
         if (!toggle.dataset.docsHeaderToggle) {
             toggle.dataset.docsHeaderToggle = 'true';
             toggle.addEventListener('click', function () {
@@ -1594,6 +1638,17 @@
                 setupPageOutlinePanel();
             });
         }
+        if (
+            usesDocsifyV5SidebarState(sidebar) &&
+            sidebar.dataset.docsSidebarStateBound !== 'true'
+        ) {
+            sidebar.dataset.docsSidebarStateBound = 'true';
+            sidebar.addEventListener('click', function (event) {
+                if (event.target.closest && event.target.closest('a')) {
+                    window.setTimeout(syncSidebarToggleState, 0);
+                }
+            });
+        }
         syncSidebarToggleState();
     }