Improvements to documentation

2023-09-10 14:29:49 +03:00
parent 81d986a413
commit 5a7ed4d4fe
14 changed files with 607 additions and 100 deletions
--- a/guide/public/assets/code.css
+++ b/guide/public/assets/code.css
@@ -22,7 +22,6 @@ span.linenos.special { color: #000000; background-color: #ffffc0; padding-left:
 .cs { color: #a2a2a2; font-style: italic } /* Comment.Special */
 .gd { color: #777777 } /* Generic.Deleted */
 .ge { color: #777777 } /* Generic.Emph */
-.ges { color: #777777 } /* Generic.EmphStrong */
 .gr { color: #777777 } /* Generic.Error */
 .gh { color: #777777 } /* Generic.Heading */
 .gi { color: #777777 } /* Generic.Inserted */
--- a/guide/public/assets/docs.js
+++ b/guide/public/assets/docs.js
@@ -2,6 +2,9 @@ let burger;
 let menu;
 let menuLinks;
 let menuGroups;
+let anchors;
+let lastUpdated = 0;
+let updateFrequency = 300;
 function trigger(el, eventType) {
    if (typeof eventType === "string" && typeof el[eventType] === "function") {
        el[eventType]();
@@ -44,6 +47,30 @@ function hasActiveLink(element) {
    }
    return false;
 }
+function scrollHandler(e) {
+    let now = Date.now();
+    if (now - lastUpdated < updateFrequency) return;
+    
+    let closestAnchor = null;
+    let closestDistance = Infinity;
+
+    if (!anchors) { return; }
+
+    anchors.forEach(anchor => {
+        const rect = anchor.getBoundingClientRect();
+        const distance = Math.abs(rect.top);
+
+        if (distance < closestDistance) {
+            closestDistance = distance;
+            closestAnchor = anchor;
+        }
+    });
+
+    if (closestAnchor) {
+        history.replaceState(null, null, "#" + closestAnchor.id);
+	lastUpdated = now;
+    }
+}
 function initBurger() {
    if (!burger || !menu) {
        return;
@@ -110,6 +137,10 @@ function initSearch() {
        );
    });
 }
+function refreshAnchors() {
+    anchors = document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]");
+};
+
 function setMenuLinkActive(href) {
    burger.classList.remove("is-active");
    menu.classList.remove("is-active");
@@ -149,6 +180,7 @@ function init() {
    refreshMenu();
    refreshMenuLinks();
    refreshMenuGroups();
+    refreshAnchors();
    initBurger();
    initMenuGroups();
    initDetails();
@@ -162,3 +194,4 @@ function afterSwap(e) {
 }
 document.addEventListener("DOMContentLoaded", init);
 document.body.addEventListener("htmx:afterSwap", afterSwap);
+document.addEventListener("scroll", scrollHandler);
--- a/guide/public/assets/style.css
+++ b/guide/public/assets/style.css
@@ -272,7 +272,7 @@ th {

 html {
  background-color: white;
-  font-size: 18px;
+  font-size: 24px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-width: 300px;
@@ -12652,37 +12652,39 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
  .menu hr {
    background-color: var(--menu-divider); }
  .menu .is-anchor {
-    font-size: 0.85em; }
+    font-size: 0.75em; }
    .menu .is-anchor a::before {
      content: '# ';
      color: var(--menu-contrast); }
  .menu .menu-label {
    margin-bottom: 1rem; }
-  .menu li.is-group > a::after {
-    content: '';
-    position: relative;
-    top: -2px;
-    left: 8px;
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border-left: 8px solid var(--menu-contrast);
-    border-top: 5.33333px solid transparent;
-    border-bottom: 5.33333px solid transparent;
-    transform: rotate(90deg); }
-  .menu li.is-group > a ~ .menu-list {
-    transition: all .15s ease-in-out;
-    transform: scaleY(1);
-    transform-origin: top;
-    overflow: hidden;
-    opacity: 1;
-    margin: 0; }
-  .menu li.is-group > a:not(.is-open)::after {
-    transform: rotate(0deg); }
-  .menu li.is-group > a:not(.is-open) ~ .menu-list {
-    transform: scaleY(0);
-    opacity: 0;
-    font-size: 0; }
+  .menu li.is-group > a {
+    font-size: 0.85rem; }
+    .menu li.is-group > a::after {
+      content: '';
+      position: relative;
+      top: -2px;
+      left: 8px;
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border-left: 8px solid var(--menu-contrast);
+      border-top: 5.33333px solid transparent;
+      border-bottom: 5.33333px solid transparent;
+      transform: rotate(90deg); }
+    .menu li.is-group > a ~ .menu-list {
+      transition: all .15s ease-in-out;
+      transform: scaleY(1);
+      transform-origin: top;
+      overflow: hidden;
+      opacity: 1;
+      margin: 0; }
+    .menu li.is-group > a:not(.is-open)::after {
+      transform: rotate(0deg); }
+    .menu li.is-group > a:not(.is-open) ~ .menu-list {
+      transform: scaleY(0);
+      opacity: 0;
+      font-size: 0; }
  .menu ~ main {
    margin-left: 360px; }
  .menu .anchor-list {
@@ -12702,6 +12704,16 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
  .burger {
    display: block; } }

+.menu-list li ul {
+  margin: 0;
+  padding-left: 0; }
+
+.menu-list ul li:not(.is-anchor) {
+  margin-left: 0.75em; }
+
+.menu-list .menu-list li a {
+  font-size: 0.85em; }
+
 code {
  color: #4a4a4a; }

@@ -12718,6 +12730,12 @@ a[target=_blank]::after {
  content: "⇗";
  margin-left: 0.25em; }

+a > code {
+  border-bottom: 1px solid #ff0d68; }
+  a > code:hover {
+    background-color: #ff0d68;
+    color: white; }
+
 h1 a.anchor,
 h2 a.anchor,
 h3 a.anchor,
@@ -12768,6 +12786,10 @@ p + p {
  article {
    margin-left: 0; } }

+@media screen and (min-width: 1216px) {
+  .section {
+    padding: 3rem 0rem; } }
+
 .footer {
  margin-bottom: 4rem; }
  .footer a[target=_blank]::after {
@@ -12998,6 +13020,51 @@ h3 + .code-block {
 .tabs .tab-content {
  display: none; }

+.table-of-contents {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  max-width: 500px;
+  padding: 1rem 2rem;
+  background-color: #fafafa;
+  box-shadow: 0 0 2px rgba(63, 63, 68, 0.5); }
+  @media (prefers-color-scheme: dark) {
+    .table-of-contents {
+      background-color: #0a0a0a;
+      box-shadow: 0 0 2px rgba(191, 191, 191, 0.5); } }
+  .table-of-contents .table-of-contents-item {
+    display: block;
+    margin-bottom: 0.5rem;
+    text-decoration: none; }
+    .table-of-contents .table-of-contents-item:hover {
+      text-decoration: underline;
+      color: #ff0d68; }
+      .table-of-contents .table-of-contents-item:hover strong, .table-of-contents .table-of-contents-item:hover small {
+        color: #ff0d68; }
+    .table-of-contents .table-of-contents-item strong {
+      color: #121212;
+      font-size: 1.15em;
+      display: block;
+      line-height: 1rem;
+      margin-top: 0.75rem; }
+    .table-of-contents .table-of-contents-item small {
+      color: #7a7a7a;
+      font-size: 0.85em; }
+    @media (prefers-color-scheme: dark) {
+      .table-of-contents .table-of-contents-item strong {
+        color: #dbdbdb; } }
+  @media (max-width: 768px) {
+    .table-of-contents {
+      position: static;
+      max-width: calc(100vw - 2rem); }
+      .table-of-contents .table-of-contents-item {
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: start; }
+        .table-of-contents .table-of-contents-item strong {
+          display: inline;
+          margin: 0 0 0 0.75rem; } }
 footer .level,
 footer .level .level-right,
 footer .level .level-left {