diff options
author | sptaule <lecas83@gmail.com> | 2022-01-26 14:44:47 +0100 |
---|---|---|
committer | sptaule <lecas83@gmail.com> | 2022-01-26 14:44:47 +0100 |
commit | e0977c983abff89ac3a9e37f616399dc0b6c61c7 (patch) | |
tree | 51aec127e129ad291063d745904bbe43d906a44d /templates/partials/doc | |
parent | ee4d6a01e16ac53fa3e48340a47455281d5f6bc0 (diff) | |
download | garagehq.deuxfleurs.fr-e0977c983abff89ac3a9e37f616399dc0b6c61c7.tar.gz garagehq.deuxfleurs.fr-e0977c983abff89ac3a9e37f616399dc0b6c61c7.zip |
Fix doc links & added noJS support for the doc
Diffstat (limited to 'templates/partials/doc')
-rw-r--r-- | templates/partials/doc/global_toc.html | 34 | ||||
-rw-r--r-- | templates/partials/doc/page_toc.html | 33 | ||||
-rw-r--r-- | templates/partials/doc/pagination.html | 76 | ||||
-rw-r--r-- | templates/partials/doc/toc_script.html | 55 |
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 |