Fix doc links & added noJS support for the doc

4 files changed, 198 insertions, 0 deletions

diff --git a/templates/partials/doc/global_toc.html b/templates/partials/doc/global_toc.html
new file mode 100644
index 0000000..ebad287
--- /dev/null
+++ b/templates/partials/doc/global_toc.html
@@ -0,0 +1,34 @@
+<aside id="global_toc" class="col-span-1 h-max bg-gray-100 shadow-inner border-r border-t border-gray-200">
+    {% if section.subsections %}
+        <ul class="space-y-2 py-0.5 px-6 py-3 list-none">
+        {% for subsec in section.subsections %}
+        {% set h1 = get_section(path=subsec) %}
+            <li class="relative">
+                <a 
+                    href="{{ h1.permalink | safe }}"
+                    class="bg-white border border-garage-orange block p-1 rounded-r rounded-tl font-semibold text-gray-800">
+                    {{ h1.title }}
+                </a>
+                {% if h1.pages %}
+                    <input type="checkbox" id="btn-{{ h1.title | slugify }}" class="deploySubMenu"/>
+                    <label for="btn-{{ h1.title | slugify }}" class="absolute top-0 right-0.5 bg-garage-orange bg-opacity-10 border-l border-garage-orange border-opacity-20 cursor-pointer inline-block px-3 py-1" style="margin-top:0.08rem;">
+                        <svg class="arrow w-6 h-6 text-garage-gray group-hover:text-garage-orange transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+                    </label>
+                    <ul class="subMenu border-l border-garage-orange space-y-0.5">
+                        {% for h2 in h1.pages %}
+                            <li>
+                                <a 
+                                    href="{{ h2.permalink | safe }}"
+                                    class="docPage block pl-2 py-1 border-l-4 rounded-r border-opacity-0 hover:bg-garage-orange hover:bg-opacity-20
+                                    {% if current_path == h2.path %} activePage text-garage-orange font-semibold border-opacity-100 border-garage-orange {% endif %}">
+                                    {{ h2.title }}
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                {% endif %}
+            </li>
+        {% endfor %}
+        </ul>
+    {% endif %}
+</aside>
\ No newline at end of file
diff --git a/templates/partials/doc/page_toc.html b/templates/partials/doc/page_toc.html
new file mode 100644
index 0000000..172e0ce
--- /dev/null
+++ b/templates/partials/doc/page_toc.html
@@ -0,0 +1,33 @@
+<aside class="hidden 2xl:block fixed right-0 bottom-1/2 transform translate-y-1/2 col-span-1 h-auto bg-gray-100 rounded-l-lg shadow-inner">
+    {% if page.toc %}
+        <div class="w-full flex items-center justify-center py-1.5 bg-gray-200 rounded-tl-lg">
+            <span class="uppercase tracking-wide text-xs text-garage-gray">Page content</span>
+        </div>
+        <ol class="text-sm space-y-0.5 py-0.5 px-8 py-3 list-decimal">
+        {% for h1 in page.toc %}
+            <li>
+                <a href="{{ h1.permalink | safe }}" class="font-semibold bg-gradient-to-r from-garage-gray to-garage-orange text-transparent bg-clip-text transition-all hover:text-garage-orange">{{ h1.title }}</a>
+                {% if h1.children %}
+                    <ul class="space-y-0.5 py-0.5">
+                        {% for h2 in h1.children %}
+                            <li>
+                                <a 
+                                    href="{{ h2.permalink | safe }}"
+                                    id="link-{{ h2.id | safe }}"
+                                    class="toc text-gray-700 hover:text-garage-orange">
+                                    {{ h2.title }}
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                {% endif %}
+            </li>
+        {% endfor %}
+        </ol>
+    {% endif %}
+    <div class="bg-gray-100 rounded-bl-lg">
+        {% if page.earlier or page.later or page.lighter or page.heavier %}
+            {% include "partials/doc/pagination.html" %}
+        {% endif %}
+    </div>
+</aside>
\ No newline at end of file
diff --git a/templates/partials/doc/pagination.html b/templates/partials/doc/pagination.html
new file mode 100644
index 0000000..0170a77
--- /dev/null
+++ b/templates/partials/doc/pagination.html
@@ -0,0 +1,76 @@
+<section class="w-full">
+    <div class="container">
+        <div class="mx-auto max-w-4xl">
+            <div class="column is-8">
+                <div class="w-full flex items-center justify-center py-1.5 bg-gray-200">
+                    <span class="uppercase tracking-wide text-xs text-garage-gray">Navigation</span>
+                </div>
+                <nav class="flex space-x-4 items-center justify-center p-4">
+                    {% if page.earlier %}
+                        <div>
+                            <a class="flex items-center space-x-1 hover:text-garage-orange text-garage-gray text-sm bg-white transform hover:scale-110 transition border border-garage-orange p-2.5 rounded-full"
+                                href="{{ page.earlier.permalink }}"
+                                title="{{ page.earlier.title }}">
+                                <span class="icon">
+                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
+                                    </svg>
+                                </span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if page.later %}
+                        <div>
+                            <a class="flex items-center space-x-1 hover:text-garage-orange text-garage-gray text-sm bg-white transform hover:scale-110 transition border border-garage-orange p-2.5 rounded-full"
+                                href="{{ page.later.permalink }}"
+                                title="{{ page.later.title }}">
+                                <span class="icon">
+                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+                                    </svg>
+                                </span>
+                            </a>
+                        </div>
+                    {% endif %}
+                
+                    {% if page.lighter %}
+                        <div>
+                            <a class="flex items-center space-x-1 hover:text-garage-orange text-garage-gray text-sm bg-white transform hover:scale-110 transition border border-garage-orange p-2.5 rounded-full"
+                                href="{{ page.lighter.permalink }}"
+                                title="{{ page.lighter.title }}">
+                                <span class="icon flex space-x-1.5 2xl:inline 2xl:space-x-0">
+                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
+                                    </svg>
+                                    <span class="mt-0.5 2xl:hidden">{{ page.lighter.title }}</span>
+                                </span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if page.heavier %}
+                        <div>
+                            <a class="flex items-center space-x-1 hover:text-garage-orange text-garage-gray text-sm bg-white transform hover:scale-110 transition border border-garage-orange p-2.5 rounded-full"
+                                href="{{ page.heavier.permalink }}"
+                                title="{{ page.heavier.title }}">
+                                <span class="icon flex space-x-1.5 2xl:inline 2xl:space-x-0">
+                                    <span class="mt-0.5 2xl:hidden">{{ page.heavier.title }}</span>
+                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+                                    </svg>
+                                </span>
+                            </a>
+                        </div>
+                    {% endif %}
+                </nav>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/templates/partials/doc/toc_script.html b/templates/partials/doc/toc_script.html
new file mode 100644
index 0000000..a858c94
--- /dev/null
+++ b/templates/partials/doc/toc_script.html
@@ -0,0 +1,55 @@
+<script type="text/javascript">
+
+const menuBarHeight = document.querySelector("nav.navbar").clientHeight;
+const tocItems = document.querySelectorAll(".toc");
+const navSections = new Array(tocItems.length);
+
+tocItems.forEach((el, i) => {
+    let id = el.getAttribute("id").substring(5);
+    navSections[i] = document.getElementById(id);
+})
+
+function isVisible(tocIndex) {
+    const current = navSections[tocIndex];
+    const next = tocIndex < tocItems.length - 1 ? navSections[tocIndex + 1]
+        : document.querySelectorAll("section.section").item(1);
+
+    const c = current.getBoundingClientRect();
+    const n = next.getBoundingClientRect();
+    const h = (window.innerHeight || document.documentElement.clientHeight);
+
+    return (c.top <= h) && (n.top - menuBarHeight >= 0);
+}
+
+function activateIfVisible() {
+    for (b = true, i = 0; i < tocItems.length; i++) {
+        if (b && isVisible(i)) {
+            tocItems[i].classList.add('is-active');
+            b = false;
+        } else
+            tocItems[i].classList.remove('is-active');
+    }
+}
+
+var isTicking = null;
+window.addEventListener('scroll', () => {
+    if (!isTicking) {
+        window.requestAnimationFrame(() => {
+            activateIfVisible();
+            isTicking = false;
+        });
+        isTicking = true;
+    }
+}, false);
+
+// If JS enabled, deploy only the current doc menu
+document.addEventListener("DOMContentLoaded", function() {
+    var menusTriggers = document.getElementsByClassName("deploySubMenu");
+    var activeDocPage = document.getElementsByClassName("activePage")[0];
+    for (var i = 0; i < menusTriggers.length; i++) {
+        menusTriggers[i].checked = true;
+    }
+    activeDocPage.parentElement.parentElement.previousElementSibling.previousElementSibling.checked = false;
+});
+
+</script>
\ No newline at end of file