aboutsummaryrefslogtreecommitdiff
path: root/templates/documentation.html
diff options
context:
space:
mode:
Diffstat (limited to 'templates/documentation.html')
-rw-r--r--templates/documentation.html245
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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 20:46:58 +0000