diff options
Diffstat (limited to 'templates/documentation.html')
| -rw-r--r-- | templates/documentation.html | 245 |
1 files changed, 36 insertions, 209 deletions
diff --git a/templates/documentation.html b/templates/documentation.html index 7145129..f425d6d 100644 --- a/templates/documentation.html +++ b/templates/documentation.html @@ -1,224 +1,51 @@ {% extends 'base.html' %} {% block title %} -{{ config.title }} | {{ page.title }} + {{ config.title }} | {{ page.title }} {% endblock %} {% block content %} -{% set section = get_section(path="documentation/_index.md") %} -<section class="section overflow-x-hidden"> - <div class="grid grid-cols-5"> - - <aside class="col-span-1 h-full bg-gray-100 shadow-inner border-r border-t border-gray-200"> - {% if section.toc %} - <ul> - {% for h1 in section.toc %} - <li> - <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a> - {% if h1.children %} - <ul> - {% for h2 in h1.children %} - <li> - <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a> - </li> - {% endfor %} - </ul> - {% endif %} - </li> - {% endfor %} - </ul> - {% endif %} - </aside> - - <div class="col-span-3"> - <article class="box my-12 px-12"> - <div class="flex flex-col bg-gray-100 rounded-r shadow-sm w-max"> - <div class="flex flex-col border-l-4 border-garage-orange py-2 px-4 relative"> - <h1 class="title leading-10 text-3xl text-garage-orange font-semibold"> - {{ page.title }} - </h1> - {% if page.description %} - <p class="subtitle my-2 text-gray-600 italic text-sm">{{ page.description }}</p> - {% endif %} - </div> - </div> - <div class="page-content max-w-4xl"> - {{ page.content | safe }} - </div> - </article> - </div> - - <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 }}" class="text-gray-700 hover:text-garage-orange">{{ h2.title }}</a> - </li> - {% endfor %} - </ul> - {% endif %} - </li> - {% endfor %} - </ol> - {% endif %} - </aside> - </div> -</section> -{% endblock %} - -{% block pagination %} -{% if page.earlier or page.later or page.lighter or page.heavier %} -<section class="w-full"> - <div class="container py-20"> - <div class="mx-auto max-w-4xl"> - <div class="column is-8"> - <nav class="flex space-x-8 items-center justify-center"> - {% if page.later %} - <div> - <a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800" - href="{{ page.later.permalink }}"> - <span class="icon mr-2"> - <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> - <span>{{ page.later.title }}</span> - </a> + {% set section = get_section(path="documentation/_index.md") %} + <section class="section overflow-x-hidden"> + <div class="grid grid-cols-1 xl:grid-cols-5"> + {% include "partials/doc/global_toc.html" %} + <div class="col-span-3"> + <article class="box my-12 px-12"> + <div class="flex flex-col bg-gray-100 rounded-r shadow-sm w-full xl:w-max"> + <div class="flex flex-col border-l-4 border-garage-orange py-2 px-4 relative"> + <h1 class="title leading-10 text-3xl text-garage-orange font-semibold"> + {{ page.title }} + </h1> + {% if page.description %} + <p class="subtitle my-2 text-gray-600 italic text-sm">{{ page.description }}</p> + {% endif %} + {% if page.reading_time %} + <p + class="subtitle flex items-center space-x-1 my-2 text-gray-600 italic text-sm" + title="{{ page.reading_time }} min reading time"> + <svg class="w-4 h-4" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> + <span>{{ page.reading_time }} min</span> + </p> + {% endif %} + </div> </div> - {% endif %} {% if page.earlier %} - <div> - <a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800" - href="{{ page.earlier.permalink }}"> - {{ page.earlier.title }}<span class="icon ml-2"> - <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 class="page-content max-w-4xl"> + {{ page.content | safe }} </div> - {% endif %} {% if page.heavier %} - <div> - <a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800" - href="{{ page.heavier.permalink }}"> - <span class="icon mr-2"> - <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> - <span>{{ page.heavier.title }}</span> - </a> - </div> - {% endif %} {% if page.lighter %} - <div> - <a class="flex items-center space-x-1 hover:text-garage-orange font-semibold text-gray-800" - href="{{ page.lighter.permalink }}"> - {{ page.lighter.title }}<span class="icon ml-2"> - <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> + </article> </div> + {% include "partials/doc/page_toc.html" %} </div> - </div> -</section> -{% endif %} -{% endblock %} - -{% block comment %} -{% if page.extra.comments and config.extra.commenting.disqus %} -<section class="section"> - <div class="container"> - <div class="columns is-centered"> - <div class="column is-6"> - <div id="disqus_thread"></div> - </div> + <div class="2xl:hidden"> + {% if page.earlier or page.later or page.lighter or page.heavier %} + {% include "partials/doc/pagination.html" %} + {% endif %} </div> - </div> -</section> -{% endif %} + </section> {% endblock %} {% block custom_js %} -{% if page.extra.toc %} -<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); -</script> -{% endif %} - -{% if page.extra.comments and config.extra.commenting.disqus %} -<script> - var disqus_config = function () { - this.page.url = "{{config.base_url | safe}}"; - this.page.identifier = "{{ current_path | safe}}"; - }; - - (function () { - var d = document, s = d.createElement('script'); - s.src = 'https://{{ config.extra.commenting.disqus | safe}}.disqus.com/embed.js'; - s.setAttribute('data-timestamp', +new Date()); - (d.head || d.body).appendChild(s); - })(); -</script> -{% endif %} + {% if page.toc %} + {% include "partials/doc/toc_script.html" %} + {% endif %} {% endblock %}
\ No newline at end of file |