diff options
author | sptaule <lecas83@gmail.com> | 2022-01-25 15:27:39 +0100 |
---|---|---|
committer | sptaule <lecas83@gmail.com> | 2022-01-25 15:27:39 +0100 |
commit | ee4d6a01e16ac53fa3e48340a47455281d5f6bc0 (patch) | |
tree | 98d21309e281ea02ed5fe2b12187b211f761f385 /templates | |
parent | ada5e9ac0e6e1e226534a463238b06930ba58b64 (diff) | |
download | garagehq.deuxfleurs.fr-ee4d6a01e16ac53fa3e48340a47455281d5f6bc0.tar.gz garagehq.deuxfleurs.fr-ee4d6a01e16ac53fa3e48340a47455281d5f6bc0.zip |
Organized doc md with metadata & draft for doc template
Diffstat (limited to 'templates')
-rw-r--r-- | templates/documentation.html | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/templates/documentation.html b/templates/documentation.html new file mode 100644 index 0000000..7145129 --- /dev/null +++ b/templates/documentation.html @@ -0,0 +1,224 @@ +{% extends 'base.html' %} + +{% block 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> + </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> + {% 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> + </div> + </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> + </div> +</section> +{% endif %} +{% 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 %} +{% endblock %}
\ No newline at end of file |