From b1ea6315459a274b1d969e1183dc66107204f774 Mon Sep 17 00:00:00 2001
From: Juan-Pablo Scaletti <juanpablo@jpscaletti.com>
Date: Wed, 7 Aug 2024 08:10:00 -0500
Subject: [PATCH] Update docs theme

---
 docs/components/Copyright.jinja             |   4 +-
 docs/components/ui/Popover/DemoResult.jinja |   2 +-
 docs/static/theme.css                       | 109 ++++++++++++++------
 docs/theme/ExampleTabs.jinja                |   5 +-
 docs/theme/Header.jinja                     |   4 +-
 docs/theme/NavMobile.jinja                  |   2 +-
 docs/theme/NavTop.jinja                     |   2 +-
 docs/theme/TocPage.jinja                    |   8 +-
 docs/theme/TocPage.js                       |  98 +++++++++++++-----
 9 files changed, 167 insertions(+), 67 deletions(-)

diff --git a/docs/components/Copyright.jinja b/docs/components/Copyright.jinja
index 99cc4e3..473b66b 100644
--- a/docs/components/Copyright.jinja
+++ b/docs/components/Copyright.jinja
@@ -1,4 +1,4 @@
 <div {{ attrs.render(class="copy") }}>
-  Website content copyright &copy; <a href="https://jpscaletti.com">Juan-Pablo Scaletti</a>.
-  JinjaX and its documentation are licensed under the MIT license.
+  <p>Website &copy; <a href="https://jpscaletti.com">Juan-Pablo Scaletti</a>.</p>
+  <p>JinjaX and the documentation text licensed under the MIT license.</p>
 </div>
\ No newline at end of file
diff --git a/docs/components/ui/Popover/DemoResult.jinja b/docs/components/ui/Popover/DemoResult.jinja
index 0bf47cb..a0b73e8 100644
--- a/docs/components/ui/Popover/DemoResult.jinja
+++ b/docs/components/ui/Popover/DemoResult.jinja
@@ -9,7 +9,7 @@
   <PopButton id="pop-demo-btn" target="pop-demo-pop">Open popover</PopButton>
 
   <Popover id="pop-demo-pop" anchor="pop-demo-btn" anchor-to="bottom">
-    <h1>Edit Dimensions</h1>
+    <h1 data-outline-skip=>Edit Dimensions</h1>
     <fieldset class="space-y-2">
       <label>
         <span>Width</span>
diff --git a/docs/static/theme.css b/docs/static/theme.css
index c28925e..8dad4aa 100644
--- a/docs/static/theme.css
+++ b/docs/static/theme.css
@@ -1019,6 +1019,8 @@ h6:hover a.headerlink {
   }
   & .copy {
     margin-right: auto;
+    text-align: left;
+    padding: 0 16px;
   }
   & .built-with {
     height: 100%;
@@ -1138,12 +1140,12 @@ h6:hover a.headerlink {
   width: 100%;
   margin-top: 1rem;
 
-  @media ((min-width: 1024px) and (min-height: 640px)) {
+  /* @media ((min-width: 1024px) and (min-height: 640px)) {
     & {
       position: sticky;
       top: 1rem;
     }
-  }
+  } */
   & .wrapper {
     margin-left: auto;
     margin-right: auto;
@@ -1240,22 +1242,16 @@ h6:hover a.headerlink {
 /* ---------------------------------------------------------------------- */
 
 .cd-nav-local {
-  position: -webkit-sticky;
   position: sticky;
-  top: 0;
+  top: 5rem;
   z-index: 0;
-  width: 20rem;
-  height: calc(100vh - 5.5rem);
+  width: 25rem;
+  height: calc(100vh - 6.5rem);
   margin-right: -1rem;
   overflow: hidden;
   border-left-width: 1px;
   border-color: rgb(228 228 231);
 
-  @media ((min-width: 1024px) and (min-height: 640px)) {
-    & {
-      top: 5rem;
-    }
-  }
   &:is(.dark *) {
     border-color: rgb(82 82 91);
   }
@@ -1267,9 +1263,8 @@ h6:hover a.headerlink {
     -ms-scroll-chaining: none;
     overscroll-behavior: contain;
     scroll-behavior: smooth;
-    border-left-width: 1px;
-    padding: 1rem 0.5rem 1.5rem 0.5rem;
-    font-size: 0.8rem;
+    padding: 1.5rem 0.25rem;
+    font-size: 0.9rem;
     line-height: 1.2;
   }
 }
@@ -1659,6 +1654,7 @@ h6:hover a.headerlink {
   }
 
   & a {
+    position: relative;
     display: flex;
     align-items: center;
     border-radius: 0.25rem;
@@ -1695,36 +1691,85 @@ h6:hover a.headerlink {
 /* ---------------------------------------------------------------------- */
 
 .cd-toc-page {
+  margin-top: -0.25rem;
+
+  & li {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  & li::after {
+    content: "";
+    display: block;
+    position: absolute;
+    inset: 0;
+    background-color: var(--cd-brand-color);
+    border-radius: 0.25rem;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    z-index: -1;
+  }
+
+  & li:has(a.active)::after {
+    opacity: 0.15;
+  }
+
   & a {
     display: flex;
     align-items: center;
-    border-left-width: 1px;
-    border-color: transparent;
-    padding: 0.5rem 0 0.25rem 0.5rem;
     color: rgb(82 82 91);
+    padding: 0.3rem 0 0.3rem 0.5rem;
   }
   & a:is(.dark *) {
     color: rgb(161 161 170);
   }
-  & a:hover {
-    border-color: rgb(63 63 70);
-    color: rgb(0 0 0);
+  & a:hover:not(.active) {
+    & span {
+      text-decoration: underline;
+    }
   }
-  & a:is(.dark *):hover {
-    border-color: rgb(161 161 170);
-    color: rgb(244 244 245);
+
+  & li.indent-0 a {
+    padding-left: 0rem;
+    font-size: smaller;
+    text-transform: uppercase;
+    font-weight: bold;
+    border-bottom-width: 1px;
   }
-  & a.active,
-  & a.active:hover {
-    color: var(--cd-brand-color);
-    border-color: var(--cd-brand-color);
+  & li.indent-1 a {
+    padding-left: 0rem;
+    font-weight: bold;
+  }
+  & li.indent-2 a { padding-left: 1rem; }
+  & li.indent-3 a { padding-left: 1.5rem; }
+  & li.indent-4 a { padding-left: 2rem; }
+  & li.indent-5 a { padding-left: 2.5rem; }
+  & li.indent-6 a { padding-left: 3rem; }
+
+  & li a::before {
+    content: "";
+    display: inline-flex;
+    align-items: center;
+    justify-content: right;
+    line-height: 1;
+    height: 8px;
+    width: 8px;
+    margin: 0 0.5rem 0 0.5rem;
+    flex-grow: 0;
+    flex-shrink: 0;
   }
+  li.indent-2 a::before { content: "○" }
+  li.indent-3 a::before { content: "•" }
+  li.indent-4 a::before { content: "·" }
+  li.indent-5 a::before { content: "⁃" }
+  li.indent-6 a::before { content: "·" }
 
-  & a.indent-1 { margin-left: 0; }
-  & a.indent-2 { margin-left: 0.5rem; }
-  & a.indent-3 { margin-left: 1rem; }
-  & a.indent-4 { margin-left: 1.5rem; }
-  & a.indent-5 { margin-left: 2rem; }
+  & li a.active::before {
+    content: "";
+    border-radius: 3px;
+    background-color: var(--cd-brand-color);
+  }
 }
 
 /* ---------------------------------------------------------------------- */
diff --git a/docs/theme/ExampleTabs.jinja b/docs/theme/ExampleTabs.jinja
index 1b3935b..aabff89 100644
--- a/docs/theme/ExampleTabs.jinja
+++ b/docs/theme/ExampleTabs.jinja
@@ -1,6 +1,9 @@
 {#def prefix, panels={} #}
 
-<div {{ attrs.render(class="cd-example-tabs not-prose", data_component="ExampleTabs") }}>
+<div {{ attrs.render(
+  class="cd-example-tabs not-prose",
+  data_component="ExampleTabs",
+) }}>
   <TabGroup class="example-tabgroup">
     <TabList class="example-tablist" data-md-skip>
       {%- for text in panels.keys() %}
diff --git a/docs/theme/Header.jinja b/docs/theme/Header.jinja
index c8322df..1b719cf 100644
--- a/docs/theme/Header.jinja
+++ b/docs/theme/Header.jinja
@@ -4,12 +4,12 @@
 {% set title = title or page.title %}
 
 <header {{ attrs.render(
-  class="cd-header not-prose",
+  class="cd-header",
   data_component="Header",
 ) }}>
   <div>
     {% if section -%}
-    <p data-md-skip>{{ section }}</p>
+    <div>{{ section }}</div>
     {%- endif %}
     <h1>{{ title | utils.widont }}</h1>
   </div>
diff --git a/docs/theme/NavMobile.jinja b/docs/theme/NavMobile.jinja
index dfe6af9..8c48e32 100644
--- a/docs/theme/NavMobile.jinja
+++ b/docs/theme/NavMobile.jinja
@@ -10,7 +10,7 @@
       target="navMobile"
       action="close"
       title="Close menu"
-      class="cd-toggle-sidebar"
+      class="cd-toggle-sidebar cd-text-button"
     >Close</PopButton>
   </header>
 
diff --git a/docs/theme/NavTop.jinja b/docs/theme/NavTop.jinja
index 7ee0052..f9ecc87 100644
--- a/docs/theme/NavTop.jinja
+++ b/docs/theme/NavTop.jinja
@@ -11,7 +11,7 @@
     <PopButton
       target="navMobile"
       title="Show menu"
-      class="cd-toggle-sidebar"
+      class="cd-toggle-sidebar cd-text-button"
     >Menu</PopButton>
   </div>
 </section>
diff --git a/docs/theme/TocPage.jinja b/docs/theme/TocPage.jinja
index bca5c92..754b624 100644
--- a/docs/theme/TocPage.jinja
+++ b/docs/theme/TocPage.jinja
@@ -2,7 +2,9 @@
 
 {% macro render_sub_items(pages) %}
 {%- for section in pages %}
-  <li><a href="#{{ section.id }}" class="indent-{{ section.level }}">{{ section.name }}</a></li>
+  <li class="indent-{{ section.level }}">
+    <a href="#{{ section.id }}"><span>{{ section.name }}</span></a>
+  </li>
   {% if section.level <= max_depth -%}
     {{ render_sub_items(section.children) }}
   {%- endif %}
@@ -11,7 +13,9 @@
 
 <ul {{ attrs.render(class="cd-toc-page", data_component="TocPage") }}>
 {%- for section in page_toc %}
-  <li><a href="#{{ section.id }}">{{ section.name }}</a></li>
+  <li class="indent-{{ section.level }}">
+    <a href="#{{ section.id }}"><span>{{ section.name }}</span></a>
+  </li>
   {{ render_sub_items(section.children) }}
 {%- endfor %}
 </ul>
diff --git a/docs/theme/TocPage.js b/docs/theme/TocPage.js
index 3ce5e02..77bad1e 100644
--- a/docs/theme/TocPage.js
+++ b/docs/theme/TocPage.js
@@ -1,49 +1,97 @@
 import { on } from "./jxui.js";
 
 const ACTIVE = "active";
-const SEL_TARGET = ".cd-toc-page a";
+const SEL_BACKTOTOP = ".cd-back-to-top"
+const SEL_PAGETOC = ".cd-toc-page"
+const SEL_TARGET = `${SEL_PAGETOC} a`;
 const SEL_ACTIVE = `${SEL_TARGET}.${ACTIVE}`;
-const SEL_SECTIONS = "main.page section[id]";
+const SEL_PAGE = "#main.page";
+const SEL_SECTIONS = `${SEL_PAGE} section[id]`;
+const DESKTOP_THRESHOLD = 1024;
 
 on("click", SEL_TARGET, handleClick);
+on("click", SEL_BACKTOTOP, backToTop);
 
-function handleClick (event, target) {
-  deActivateAll();
-  target.classList.add(ACTIVE);
+function handleClick(event, target) {
+  removeHighlight();
+  setTimeout(function () { updateHighlight(target) }, 10);
 }
 
-/* =========================================================== */
+function updateHighlight (elem) {
+  if (window.innerWidth > DESKTOP_THRESHOLD && !elem?.classList.contains(ACTIVE)) {
+    removeHighlight();
+    if (!elem) return;
+    elem.classList.add(ACTIVE);
+  }
+}
 
-function deActivateAll() {
+function removeHighlight () {
   document.querySelectorAll(SEL_ACTIVE).forEach(function (node) {
     node.classList.remove(ACTIVE);
   });
 }
 
+function resetNavPosition () {
+  var pagetoc = document.querySelector(SEL_TOC);
+  pagetoc?.scroll({ top: 0 });
+}
+
+export function backToTop () {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+  resetNavPosition();
+}
+
 export function scrollSpy() {
-  const labels = {};
-  Array.from(document.querySelectorAll(SEL_TARGET)).forEach(function(aNode){
-    labels[aNode.href.split("#").slice(-1)] = aNode;
-  });
+  const sections = Array.from(document.querySelectorAll(SEL_SECTIONS));
 
-  function observe(entries) {
-    for(const entry of entries) {
-      if (entry.isIntersecting) {
-        const aNode = labels[entry.target.id];
-        if (aNode) {
-          deActivateAll();
-          aNode.classList.add(ACTIVE)
-        }
+  function matchingNavLink(elem) {
+    if (!elem) return;
+    var index = sections.indexOf(elem);
+
+    var match;
+    while (index >= 0 && !match) {
+      var sectionId = sections[index].getAttribute("id");
+      if (sectionId) {
+        match = document.querySelector(`${SEL_PAGETOC} [href="#${sectionId}"]`);
       }
+      index--;
     }
+    return match;
   }
-  const observer = new IntersectionObserver(observe, {rootMargin: "-50% 0px"});
-  const sections = document.querySelectorAll(SEL_SECTIONS);
-  console.log(labels);
-  console.log(sections);
-  for (let i=0; i<sections.length; i++) {
-    observer.observe(sections[i]);
+
+  function belowBottomHalf(i) {
+    return i.boundingClientRect.bottom > (i.rootBounds.bottom + i.rootBounds.top) / 2;
   }
+
+  function prevElem(elem) {
+    var index = sections.indexOf(elem);
+    if (index <= 0) {
+      return null;
+    }
+    return sections[index - 1];
+  }
+
+  const PAGE_LOAD_BUFFER = 1000;
+
+  function navHighlight(entries) {
+    entries.forEach(function (entry) {
+      if (entry.isIntersecting) {
+        updateHighlight(matchingNavLink(entry.target));
+      } else if (entry.time >= PAGE_LOAD_BUFFER && belowBottomHalf(entry)) {
+        updateHighlight(matchingNavLink(prevElem(entry.target)));
+      }
+    });
+  }
+
+  const observer = new IntersectionObserver(navHighlight, {
+    threshold: 0,
+    rootMargin: "0% 0px -95% 0px"
+  });
+
+  sections.forEach(function (elem) {
+    observer.observe(elem);
+  })
+  observer.observe(document.querySelector(SEL_PAGE));
 }
 
 document.addEventListener("DOMContentLoaded", scrollSpy);