Organized doc md with metadata & draft for doc template

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