-
{{> header}}
@@ -192,7 +191,12 @@
- {{{ content }}}
+
+ {{{ content }}}
diff --git a/docs/theme/page-toc.css b/docs/theme/page-toc.css
new file mode 100644
index 0000000000..dacd61a09b
--- /dev/null
+++ b/docs/theme/page-toc.css
@@ -0,0 +1,79 @@
+@media only screen and (max-width: 1674px) {
+ .sidetoc {
+ display: none;
+ }
+}
+
+@media only screen and (min-width: 1675px) {
+ main {
+ position: relative;
+ }
+ .sidetoc {
+ margin-left: auto;
+ margin-right: auto;
+ left: calc(100% + (var(--content-max-width)) / 3 - 160px);
+ position: absolute;
+ }
+ .pagetoc {
+ position: fixed;
+ top: 64px;
+ width: 220px;
+ height: calc(100vh - var(--menu-bar-height) - 0.67em * 4);
+ padding-top: 80px;
+ margin-right: 16px;
+ padding-bottom: 40px;
+ overflow: auto;
+ }
+ .pagetoc > :last-child {
+ margin-bottom: 64px;
+ }
+ .pagetoc a {
+ width: fit-content;
+ font-size: 1.4rem;
+ border-left: 1px solid var(--sidebar-bg);
+ color: var(--fg) !important;
+ display: block;
+ padding: 2px;
+ margin: 8px 0 8px 12px;
+ text-align: left;
+ text-decoration: underline;
+ text-decoration-color: hsl(0, 0%, 0%, 0.1);
+ }
+ .pagetoc a:hover {
+ text-decoration-color: hsl(0, 0%, 0%, 0.5);
+ }
+ .pagetoc a.active {
+ background-color: var(--sidebar-active-bg);
+ color: var(--sidebar-active) !important;
+ text-decoration-color: hsl(219, 93%, 42%, 0.1);
+ }
+ .pagetoc a.active:hover {
+ text-decoration-color: hsl(219, 93%, 42%, 0.8);
+ }
+ .pagetoc .active {
+ background: var(--sidebar-bg);
+ color: var(--sidebar-fg);
+ }
+ .pagetoc .pagetoc-H1 {
+ display: none;
+ }
+ .pagetoc .pagetoc-H3 {
+ margin-left: 24px;
+ }
+ .pagetoc .pagetoc-H4 {
+ margin-left: 42px;
+ }
+ .pagetoc .pagetoc-H5 {
+ display: none;
+ }
+ .pagetoc .pagetoc-H6 {
+ display: none;
+ }
+ .toc-title {
+ margin: 0;
+ margin-bottom: 12px;
+ padding-left: 12px;
+ font-size: 1.4rem;
+ color: #000;
+ }
+}
diff --git a/docs/theme/page-toc.js b/docs/theme/page-toc.js
new file mode 100644
index 0000000000..62af2e7dc4
--- /dev/null
+++ b/docs/theme/page-toc.js
@@ -0,0 +1,73 @@
+let scrollTimeout;
+
+const listenActive = () => {
+ const elems = document.querySelector(".pagetoc").children;
+ [...elems].forEach((el) => {
+ el.addEventListener("click", (event) => {
+ clearTimeout(scrollTimeout);
+ [...elems].forEach((el) => el.classList.remove("active"));
+ el.classList.add("active");
+ // Prevent scroll updates for a short period
+ scrollTimeout = setTimeout(() => {
+ scrollTimeout = null;
+ }, 100); // Adjust timing as needed
+ });
+ });
+};
+
+const getPagetoc = () =>
+ document.querySelector(".pagetoc") || autoCreatePagetoc();
+
+const autoCreatePagetoc = () => {
+ const main = document.querySelector("#content > main");
+ const content = Object.assign(document.createElement("div"), {
+ className: "content-wrap",
+ });
+ content.append(...main.childNodes);
+ main.prepend(content);
+ main.insertAdjacentHTML(
+ "afterbegin",
+ '
',
+ );
+ return document.querySelector(".pagetoc");
+};
+const updateFunction = () => {
+ if (scrollTimeout) return; // Skip updates if within the cooldown period from a click
+ const headers = [...document.getElementsByClassName("header")];
+ const scrolledY = window.scrollY;
+ let lastHeader = null;
+
+ // Find the last header that is above the current scroll position
+ for (let i = headers.length - 1; i >= 0; i--) {
+ if (scrolledY >= headers[i].offsetTop) {
+ lastHeader = headers[i];
+ break;
+ }
+ }
+
+ const pagetocLinks = [...document.querySelector(".pagetoc").children];
+ pagetocLinks.forEach((link) => link.classList.remove("active"));
+
+ if (lastHeader) {
+ const activeLink = pagetocLinks.find(
+ (link) => lastHeader.href === link.href,
+ );
+ if (activeLink) activeLink.classList.add("active");
+ }
+};
+
+window.addEventListener("load", () => {
+ const pagetoc = getPagetoc();
+ const headers = [...document.getElementsByClassName("header")];
+ headers.forEach((header) => {
+ const link = Object.assign(document.createElement("a"), {
+ textContent: header.text,
+ href: header.href,
+ className: `pagetoc-${header.parentElement.tagName}`,
+ });
+ pagetoc.appendChild(link);
+ });
+ updateFunction();
+ listenActive();
+ window.addEventListener("scroll", updateFunction);
+});