aboutsummaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorsptaule <lecas83@gmail.com>2022-01-26 14:44:47 +0100
committersptaule <lecas83@gmail.com>2022-01-26 14:44:47 +0100
commite0977c983abff89ac3a9e37f616399dc0b6c61c7 (patch)
tree51aec127e129ad291063d745904bbe43d906a44d /templates
parentee4d6a01e16ac53fa3e48340a47455281d5f6bc0 (diff)
downloadgaragehq.deuxfleurs.fr-e0977c983abff89ac3a9e37f616399dc0b6c61c7.tar.gz
garagehq.deuxfleurs.fr-e0977c983abff89ac3a9e37f616399dc0b6c61c7.zip
Fix doc links & added noJS support for the doc
Diffstat (limited to 'templates')
-rwxr-xr-xtemplates/base.html11
-rwxr-xr-xtemplates/categories/list.html27
-rwxr-xr-xtemplates/categories/single.html76
-rw-r--r--templates/documentation.html245
-rwxr-xr-xtemplates/index.html48
-rwxr-xr-xtemplates/page.html4
-rw-r--r--templates/partials/doc/global_toc.html34
-rw-r--r--templates/partials/doc/page_toc.html33
-rw-r--r--templates/partials/doc/pagination.html76
-rw-r--r--templates/partials/doc/toc_script.html55
-rwxr-xr-xtemplates/tags/list.html27
-rwxr-xr-xtemplates/tags/single.html76
12 files changed, 268 insertions, 444 deletions
diff --git a/templates/base.html b/templates/base.html
index b6c8760..bdda7e4 100755
--- a/templates/base.html
+++ b/templates/base.html
@@ -83,10 +83,13 @@
{% endfor %}
<div class="flex space-x-4 ml-6">
<a class="navbar-item" id="nav-search" title="Search" data-target="#search-modal">
- <span class="icon">
- <i class="fas fa-search"></i>
- </span>
- </a>
+ <span class="icon">
+ <i class="fas fa-search"></i>
+ </span>
+ </a>
+ </div>
+ <div class="ml-4">
+ {{ macros:: social_links( social_config=config.extra.social) }}
</div>
</div>
</div>
diff --git a/templates/categories/list.html b/templates/categories/list.html
deleted file mode 100755
index c78c7b0..0000000
--- a/templates/categories/list.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<section class="section">
- <div class="container">
- <div class="has-text-centered">
- <h1 class="title is-2">
- <span class="icon">
- <i class="fas fa-cubes"></i>
- </span>
- Categories
- </h1>
- <p class='subtitle is-4'>{{ terms | length }} categories in total</p>
- <p>
- {% for category in terms %}
- <a href="{{ get_taxonomy_url(kind='categories', name=category.name) }}" class="mr-4">
- <span class="icon">
- <i class="fas fa-cube"></i>
- </span>
- <span>{{category.name}} <sup>{{ category.pages | length }}</sup></span>
- </a>
- {% endfor %}
- </p>
- </div>
- </div>
-</section>
-{% endblock content %}
diff --git a/templates/categories/single.html b/templates/categories/single.html
deleted file mode 100755
index a3d2159..0000000
--- a/templates/categories/single.html
+++ /dev/null
@@ -1,76 +0,0 @@
-{% extends "base.html" %}
-
-{% block header %}
-<header class='hero'>
- <div class='hero-body pb-0'>
- <div class='container'>
- <div class='has-text-centered'>
- <h1 class="title">
- <span class="icon-text">
- <span class="icon">
- <i class="fas fa-cube"></i>
- </span>
- <span>{{ term.name }}</span>
- </span>
- </h1>
- </div>
- </div>
- </div>
-</header>
-{% endblock %}
-
-{% block content %}
-<section class="section">
- <div class="container">
- <div class="columns is-centered">
- <div class="column is-9">
- {% if paginator %}
- {% set pages = paginator.pages %}
- {% else %}
- {% set pages = term.pages %}
- {% endif %}
-
- {% for page in pages %}
- <article class="box">
- <h2 class="title">
- <a href='{{ page.permalink }}'>
- {{ page.title }}
- </a>
- </h2>
- <p class="subtitle">{{ page.description }}</p>
- <div class="columns is-multiline is-gapless">
- <div class="column is-8">
- {{ macros::page_publish_metadata(page=page) }}
- </div>
- <div class="column is-4 has-text-right-desktop">
- {{ macros::page_content_metadata(page=page) }}
- </div>
- </div>
- <div class="content mt-2">
- {{ page.summary | safe }}
- <a href='{{ page.permalink }}'>
- Read More
- <span class="icon is-small">
- <i class="fas fa-arrow-right fa-xs"></i>
- </span>
- </a>
- </div>
- <div class="columns">
- <div class="column">
- {% if page.taxonomies.categories %}
- {{ macros::render_categories(categories=page.taxonomies.categories) }}
- {% endif %}
- </div>
- <div class="column has-text-right-desktop">
- {% if page.taxonomies.tags %}
- {{ macros::render_tags(tags=page.taxonomies.tags) }}
- {% endif %}
- </div>
- </div>
- </article>
- {% endfor %}
- </div>
- </div>
- </div>
-</section>
-{% endblock content %} \ No newline at end of file
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
diff --git a/templates/index.html b/templates/index.html
index 2126007..08cce9c 100755
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,26 +4,26 @@
<section class="section" id="home-section">
<div>
- <div class="flex flex-col items-center justify-center py-12">
+ <div class="flex flex-col items-center justify-center py-12 px-12 xl:px-0">
<img src="{{ config.extra.organization.logo }}" width="220px" class="" />
- <p class="text-gray-500 leading-10 pt-4 text-xl">{{ config.extra.organization.description }}</p>
- <div class="max-w-7xl mx-auto grid grid-cols-3 gap-x-24 py-12">
- <div class="flex flex-col items-start justify-center p-2">
- <img src="{{ get_url(path='images/host2.png') }}">
- <span class="text-xl text-gray-700 font-semibold mt-4">Host a Website</span>
+ <p class="text-gray-500 leading-10 pt-4 text-xl text-center">{{ config.extra.organization.description }}</p>
+ <div class="max-w-7xl mx-auto grid-cols-1 md:grid grid-cols-3 gap-x-32 py-12">
+ <div class="group flex flex-col items-start justify-center p-2">
+ <img src="{{ get_url(path='images/host2.png') }}" class="transform group-hover:translate-y-4 transition duration-500">
+ <span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-2 transition duration-500">Host a Website</span>
</div>
- <div class="flex flex-col items-center justify-center p-2">
- <img src="{{ get_url(path='images/store.png') }}">
- <span class="text-xl text-gray-700 font-semibold mt-4">Store Media</span>
+ <div class="group flex flex-col items-center justify-center p-2">
+ <img src="{{ get_url(path='images/store.png') }}" class="transform group-hover:translate-y-4 transition duration-500">
+ <span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-2 transition duration-500">Store Media</span>
</div>
- <div class="flex flex-col items-end justify-center p-2">
- <img src="{{ get_url(path='images/backup.png') }}">
- <span class="text-xl text-gray-700 font-semibold mt-4">Backup Target</span>
+ <div class="group flex flex-col items-end justify-center p-2">
+ <img src="{{ get_url(path='images/backup.png') }}" class="transform group-hover:translate-y-4 transition duration-500">
+ <span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-2 transition duration-500">Backup Target</span>
</div>
</div>
</div>
- <div class="grid grid-cols-2 gap-x-12 gap-y-32 text-garage-gray font-light bg-gray-100 py-12 w-full shadow-inner">
+ <div class="grid grid-cols-1 xl:grid-cols-2 gap-x-0 xl:gap-x-12 gap-y-24 text-garage-gray font-light bg-gray-100 py-12 w-full shadow-inner">
<div class="flex flex-col items-center justify-center space-y-2">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Our Goals</h2>
@@ -64,36 +64,36 @@
<p class="text-center leading-5 italic">
We worked hard to keep requirements as low as possible<br>as we target the largest possible public.
</p>
- <ul class="text-center list-style-none flex flex-col items- space-y-2 justify-start py-4">
- <li class="flex items-center justify-start">
+ <ul class="text-center list-style-none flex flex-col space-y-2 justify-start py-4">
+ <li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/cpu.svg') }}" width="24px">
<span class="font-semibold">CPU</span>
</div>
<span class="px-2">Any x86_64 CPU from the last 10 years, ARMv7 or ARMv8</span>
</li>
- <li class="flex items-center justify-start">
+ <li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/ram.svg') }}" width="24px">
<span class="font-semibold">RAM</span>
</div>
<span class="px-2">1 GB</span>
</li>
- <li class="flex items-center justify-start">
+ <li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/disk.svg') }}" width="24px">
<span class="font-semibold">Disk space</span>
</div>
<span class="px-2">At least 16 GB</span>
</li>
- <li class="flex items-center justify-start">
+ <li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/network.svg') }}" width="24px">
<span class="font-semibold">Network</span>
</div>
<span class="px-2">200 ms or less, 50 Mbps or more</span>
</li>
- <li class="flex flex-col items-start justify-center">
+ <li class="flex flex-col items-center md:items-start justify-center">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/hardware.svg') }}" width="24px">
<span class="font-semibold">Heterogeneous hardware</span>
@@ -103,11 +103,11 @@
</ul>
</div>
- <div class="flex flex-col items-center justify-center space-y-2">
+ <div class="flex flex-col items-center justify-center space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Data resiliency for everyone</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic pb-4">
- Blabla bla bla bla.
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="font-normal">
Garage implements the Amazon S3 API<br>and thus is already compatible with many applications.
@@ -146,10 +146,12 @@
</ul>
</div>
- <div class="flex flex-col items-center justify-center space-y-2">
+ <div class="flex flex-col items-center justify-center space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Built on the shoulder of giants</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
- <p class="text-center leading-5 italic">Which means thats you have to be very tall to get it.</p>
+ <p class="text-center leading-5 italic">
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ </p>
<ul class="text-center list-style-none flex flex-col items-center py-4">
<li>
<a href="#" class="font-semibold hover:text-garage-orange">Dynamo: Amazon’s Highly Available Key-value Store</a>
diff --git a/templates/page.html b/templates/page.html
index ee83cad..eeba7f1 100755
--- a/templates/page.html
+++ b/templates/page.html
@@ -19,8 +19,8 @@
<p class="subtitle my-2 text-gray-600 italic text-sm">{{ page.description }}</p>
{% endif %}
<a id="back-to-blog-posts" class="absolute top-0 -left-12" href="/blog" title="Back to blog posts">
- <div class="w-10 overflow-hidden inline-block">
- <div class="h-16 bg-garage-orange hover:bg-garage-gray transform -rotate-45 origin-top-right"></div>
+ <div class="w-10 overflow-hidden inline-block group">
+ <div class="h-16 bg-garage-gray group-hover:bg-garage-orange transform -rotate-45 origin-top-right"></div>
</div>
</a>
</div>
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
diff --git a/templates/tags/list.html b/templates/tags/list.html
deleted file mode 100755
index 4100e8d..0000000
--- a/templates/tags/list.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<section class="section">
- <div class="container">
- <div class="has-text-centered">
- <h1 class="title is-2">
- <span class="icon">
- <i class="fas fa-tags"></i>
- </span>
- Tags
- </h1>
- <p class='subtitle is-4'>{{ terms | length }} tags in total</p>
- <p>
- {% for tag in terms %}
- <a href="{{ get_taxonomy_url(kind='tags', name=tag.name) }}" class="mr-4">
- <span class="icon">
- <i class="fas fa-tag"></i>
- </span>
- <span>{{tag.name}} <sup>{{ tag.pages | length }}</sup></span>
- </a>
- {% endfor %}
- </p>
- </div>
- </div>
-</section>
-{% endblock content %}
diff --git a/templates/tags/single.html b/templates/tags/single.html
deleted file mode 100755
index 3c89294..0000000
--- a/templates/tags/single.html
+++ /dev/null
@@ -1,76 +0,0 @@
-{% extends "base.html" %}
-
-{% block header %}
-<header class='hero'>
- <div class='hero-body pb-0'>
- <div class='container'>
- <div class='has-text-centered'>
- <h1 class="title">
- <span class="icon-text">
- <span class="icon">
- <i class="fas fa-tag"></i>
- </span>
- <span>{{ term.name }}</span>
- </span>
- </h1>
- </div>
- </div>
- </div>
-</header>
-{% endblock %}
-
-{% block content %}
-<section class="section">
- <div class="container">
- <div class="columns is-centered">
- <div class="column is-9">
- {% if paginator %}
- {% set pages = paginator.pages %}
- {% else %}
- {% set pages = term.pages %}
- {% endif %}
-
- {% for page in pages %}
- <article class="box">
- <h2 class="title">
- <a href='{{ page.permalink }}'>
- {{ page.title }}
- </a>
- </h2>
- <p class="subtitle">{{ page.description }}</p>
- <div class="columns is-multiline is-gapless">
- <div class="column is-8">
- {{ macros::page_publish_metadata(page=page) }}
- </div>
- <div class="column is-4 has-text-right-desktop">
- {{ macros::page_content_metadata(page=page) }}
- </div>
- </div>
- <div class="content mt-2">
- {{ page.summary | safe }}
- <a href='{{ page.permalink }}'>
- Read More
- <span class="icon is-small">
- <i class="fas fa-arrow-right fa-xs"></i>
- </span>
- </a>
- </div>
- <div class="columns">
- <div class="column">
- {% if page.taxonomies.categories %}
- {{ macros::render_categories(categories=page.taxonomies.categories) }}
- {% endif %}
- </div>
- <div class="column has-text-right-desktop">
- {% if page.taxonomies.tags %}
- {{ macros::render_tags(tags=page.taxonomies.tags) }}
- {% endif %}
- </div>
- </div>
- </article>
- {% endfor %}
- </div>
- </div>
- </div>
-</section>
-{% endblock content %} \ No newline at end of file