From 084b75f62a39a4cbe079283c3c3f397a43730c7e Mon Sep 17 00:00:00 2001 From: mfahampshire Date: Wed, 3 Jul 2024 17:52:27 +0200 Subject: [PATCH] theme changes to docs --- documentation/docs/book.toml | 17 +- documentation/docs/theme/css/chrome.css | 2 - documentation/docs/theme/css/variables.css | 2 +- documentation/docs/theme/index.hbs | 75 +-- documentation/docs/theme/pagetoc.css | 104 ++- documentation/docs/theme/pagetoc.js | 114 ++-- documentation/docs/themes/css/chrome.css | 608 ++++++++++++++++++ documentation/docs/themes/css/general.css | 234 +++++++ documentation/docs/themes/css/variables.css | 287 +++++++++ .../docs/{theme => themes}/custom.css | 11 +- documentation/docs/themes/index.hbs | 359 +++++++++++ .../{theme => themes}/mdbook-admonish.css | 0 documentation/docs/themes/pagetoc.css | 47 ++ documentation/docs/themes/pagetoc.css.bak | 67 ++ documentation/docs/themes/pagetoc.js | 68 ++ documentation/docs/themes/pagetoc.js.bak | 68 ++ 16 files changed, 1887 insertions(+), 176 deletions(-) create mode 100644 documentation/docs/themes/css/chrome.css create mode 100644 documentation/docs/themes/css/general.css create mode 100644 documentation/docs/themes/css/variables.css rename documentation/docs/{theme => themes}/custom.css (93%) create mode 100644 documentation/docs/themes/index.hbs rename documentation/docs/{theme => themes}/mdbook-admonish.css (100%) create mode 100644 documentation/docs/themes/pagetoc.css create mode 100644 documentation/docs/themes/pagetoc.css.bak create mode 100644 documentation/docs/themes/pagetoc.js create mode 100644 documentation/docs/themes/pagetoc.js.bak diff --git a/documentation/docs/book.toml b/documentation/docs/book.toml index e0a4dadf8e..f7fde9f8b7 100644 --- a/documentation/docs/book.toml +++ b/documentation/docs/book.toml @@ -16,11 +16,11 @@ edition = "2018" [preprocessor.theme] pagetoc = true sidebar-width = "280px" -content-max-width = "70%" -content-main-margin-left = "5%" -content-main-margin-right = "5%" +content-max-width = "80%" root-font-size = "70%" -# DO NOT CHANGE or you might overwrite the custom hbs file +# if you need to change anything in the index.hbs file you need to turn this to `false`, rebuild the book, +# probably remove the additional `comment` that gets appended to the header, and then change this back to `true`. +# this is because of a bug in the `mdbook-theme` plugin turn-off = true [preprocessor.admonish] @@ -67,15 +67,14 @@ curly-quotes = true copy-fonts = true no-section-label = false additional-css = [ - "./theme/custom.css", - "./theme/mdbook-admonish.css", - "./theme/pagetoc.css", + "./themes/custom.css", + "./themes/mdbook-admonish.css", + "./themes/pagetoc.css", ] -additional-js = ["./theme/pagetoc.js"] +additional-js = ["./themes/pagetoc.js"] git-repository-url = "https://github.com/nymtech/nym/documentation/" git-repository-icon = "fa-github" input-404 = "not-found.md" -cname = "nymtech.net" [output.html.fold] enable = true # whether or not to enable section folding diff --git a/documentation/docs/theme/css/chrome.css b/documentation/docs/theme/css/chrome.css index e16262342c..687d5e46b9 100644 --- a/documentation/docs/theme/css/chrome.css +++ b/documentation/docs/theme/css/chrome.css @@ -98,8 +98,6 @@ a > .hljs { } .menu-title { - position: absolute; - left: 50%; display: inline-block; font-weight: 200; font-size: 2.4rem; diff --git a/documentation/docs/theme/css/variables.css b/documentation/docs/theme/css/variables.css index 93de90cb02..51b94cfc5a 100644 --- a/documentation/docs/theme/css/variables.css +++ b/documentation/docs/theme/css/variables.css @@ -6,7 +6,7 @@ --sidebar-resize-indicator-width: 8px; --sidebar-resize-indicator-space: 2px; --page-padding: 15px; - --content-max-width: 70%; + --content-max-width: 80%; --menu-bar-height: 40px; --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */ diff --git a/documentation/docs/theme/index.hbs b/documentation/docs/theme/index.hbs index 2e92241177..9c5b8b9ef6 100644 --- a/documentation/docs/theme/index.hbs +++ b/documentation/docs/theme/index.hbs @@ -47,6 +47,11 @@ {{#each additional_css}} {{/each}} + + {{#if mathjax_support}} + + + {{/if}}
@@ -144,48 +149,26 @@ - - - - - - - + {{#if search_enabled}} + + {{/if}}
-

{{ book_title }}

+

{{ book_title }}

- {{#if search_enabled}} - - {{/if}} {{#if print_enable}} @@ -229,16 +212,10 @@
-
-
- -
-
+ {comment}
{{{ content }}} -
-
+ + diff --git a/documentation/docs/theme/mdbook-admonish.css b/documentation/docs/themes/mdbook-admonish.css similarity index 100% rename from documentation/docs/theme/mdbook-admonish.css rename to documentation/docs/themes/mdbook-admonish.css diff --git a/documentation/docs/themes/pagetoc.css b/documentation/docs/themes/pagetoc.css new file mode 100644 index 0000000000..a68e5b8e21 --- /dev/null +++ b/documentation/docs/themes/pagetoc.css @@ -0,0 +1,47 @@ +/* src: https://github.com/JorelAli/mdBook-pagetoc */ + +@media only screen and (max-width:1439px) { + .sidetoc { + display: none; + } +} + +@media only screen and (min-width:1440px) { + main { + position: relative; + } + .sidetoc { + margin-left: auto; + margin-right: auto; + /* left: calc(90% + (var(--content-min-width))/4 - 110px); */ + left: 101%; + position: absolute; + font-size: var(--pagetoc-fontsize); + } + .pagetoc { + position: fixed; + width: var(--pagetoc-width); + } + .pagetoc a { + border-left: 1px solid var(--sidebar-bg); + /* color: var(--fg); */ + /* color: var(--sidebar-fg); */ + color: var(--links); + display: block; + padding-bottom: 5px; + padding-top: 5px; + padding-left: 10px; + text-align: left; + text-decoration: none; + font-weight: normal; + background: var(--sidebar-bg); + } + .pagetoc a:hover, + .pagetoc a.active { + background: var(--sidebar-bg); + /* color: var(--sidebar-fg); */ + color: var(--sidebar-active); + font-weight: bold; + font-size: var(--pagetoc-fontsize); + } +} diff --git a/documentation/docs/themes/pagetoc.css.bak b/documentation/docs/themes/pagetoc.css.bak new file mode 100644 index 0000000000..49ce3ca842 --- /dev/null +++ b/documentation/docs/themes/pagetoc.css.bak @@ -0,0 +1,67 @@ +@media only screen and (max-width:1439px) { + .sidetoc { + display: none; + } +} + +@media only screen and (min-width:1440px) { + main { + position: relative; + } + + .sidetoc { + margin-left: auto; + margin-right: auto; + left: calc(100% + (var(--content-max-width))/4 - 140px); + position: absolute; + } + + .pagetoc { + position: fixed; + width: 200px; + height: calc(100vh - var(--menu-bar-height) - 0.67em * 4); + overflow: auto; + } + + .pagetoc a { + border-left: 1px solid var(--sidebar-bg); + color: var(--fg) !important; + display: block; + padding-bottom: 5px; + padding-top: 5px; + padding-left: 10px; + text-align: left; + text-decoration: none; + } + + .pagetoc a:hover, + .pagetoc a.active { + background: var(--sidebar-bg); + color: var(--sidebar-fg) !important; + } + + .pagetoc .active { + background: var(--sidebar-bg); + color: var(--sidebar-fg); + } + + .pagetoc .pagetoc-H2 { + padding-left: 20px; + } + + .pagetoc .pagetoc-H3 { + padding-left: 40px; + } + + .pagetoc .pagetoc-H4 { + padding-left: 60px; + } + + .pagetoc .pagetoc-H5 { + display: none; + } + + .pagetoc .pagetoc-H6 { + display: none; + } +} diff --git a/documentation/docs/themes/pagetoc.js b/documentation/docs/themes/pagetoc.js new file mode 100644 index 0000000000..b11052427e --- /dev/null +++ b/documentation/docs/themes/pagetoc.js @@ -0,0 +1,68 @@ +// src: https://github.com/JorelAli/mdBook-pagetoc + +// Un-active everything when you click it +Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.addEventHandler("click", function() { + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.classList.remove("active"); + }); + el.classList.add("active"); + }); +}); + +var updateFunction = function() { + + var id; + var elements = document.getElementsByClassName("header"); + Array.prototype.forEach.call(elements, function(el, i) { + if (window.pageYOffset >= el.offsetTop) { + id = el; + } + }); + + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + el.classList.remove("active"); + }); + + Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) { + if (id.href.localeCompare(el.href) == 0) { + el.classList.add("active"); + } + }); +}; + +// Populate sidebar on load +window.addEventListener('load', function() { + var pagetoc = document.getElementsByClassName("pagetoc")[0]; + var elements = document.getElementsByClassName("header"); + Array.prototype.forEach.call(elements, function(el, i) { + var link = document.createElement("a"); + + // Indent shows hierarchy + var indent = ""; + switch (el.parentElement.tagName) { + case "H2": + indent = "20px"; + break; + case "H3": + indent = "40px"; + break; + case "H4": + indent = "60px"; + break; + default: + break; + } + + link.appendChild(document.createTextNode(el.text)); + link.style.paddingLeft = indent; + link.href = el.href; + pagetoc.appendChild(link); + }); + updateFunction.call(); +}); + + + +// Handle active elements on scroll +window.addEventListener("scroll", updateFunction); diff --git a/documentation/docs/themes/pagetoc.js.bak b/documentation/docs/themes/pagetoc.js.bak new file mode 100644 index 0000000000..d56df558fb --- /dev/null +++ b/documentation/docs/themes/pagetoc.js.bak @@ -0,0 +1,68 @@ + +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); +});