diff options
author | sptaule <lecas83@gmail.com> | 2022-01-24 18:36:50 +0100 |
---|---|---|
committer | sptaule <lecas83@gmail.com> | 2022-01-24 18:36:50 +0100 |
commit | 336fd3f7566c7872c17b30f7cd150e1d16899205 (patch) | |
tree | 2761022d83f35c3ea839d00eb63dfb7f0a91a713 /templates | |
download | garagehq.deuxfleurs.fr-336fd3f7566c7872c17b30f7cd150e1d16899205.tar.gz garagehq.deuxfleurs.fr-336fd3f7566c7872c17b30f7cd150e1d16899205.zip |
First commit
Diffstat (limited to 'templates')
-rwxr-xr-x | templates/404.html | 22 | ||||
-rwxr-xr-x | templates/base.html | 173 | ||||
-rwxr-xr-x | templates/categories/list.html | 27 | ||||
-rwxr-xr-x | templates/categories/single.html | 76 | ||||
-rwxr-xr-x | templates/index.html | 178 | ||||
-rwxr-xr-x | templates/macros.html | 79 | ||||
-rwxr-xr-x | templates/page.html | 210 | ||||
-rwxr-xr-x | templates/robots.txt | 2 | ||||
-rwxr-xr-x | templates/section.html | 71 | ||||
-rwxr-xr-x | templates/shortcodes/chart.html | 1 | ||||
-rwxr-xr-x | templates/shortcodes/galleria.html | 1 | ||||
-rwxr-xr-x | templates/shortcodes/katex.html | 1 | ||||
-rwxr-xr-x | templates/shortcodes/mapbox.html | 11 | ||||
-rwxr-xr-x | templates/shortcodes/mermaid.html | 1 | ||||
-rwxr-xr-x | templates/shortcodes/vimeo.html | 9 | ||||
-rwxr-xr-x | templates/shortcodes/youtube.html | 9 | ||||
-rwxr-xr-x | templates/tags/list.html | 27 | ||||
-rwxr-xr-x | templates/tags/single.html | 76 |
18 files changed, 974 insertions, 0 deletions
diff --git a/templates/404.html b/templates/404.html new file mode 100755 index 0000000..7885942 --- /dev/null +++ b/templates/404.html @@ -0,0 +1,22 @@ +{% extends 'base.html' %} + + +{% block content %} +<section class="py-48"> + <div class="w-full mx-auto"> + <div class="flex items-center justify-center" style="min-height:40vh;"> + <div class="flex flex-col items-center justify-center w-96 mx-auto"> + <h1 class="flex items-center justify-around space-x-2 text-2xl text-garage-gray"> + <span class="text-garage-orange font-semibold">HTTP 404</span> + </h1> + <p class="text-gray-900 font-light text-center"> + What a shame!<br>The page you are looking for does not exist. + </p> + <a href="/" class="text-garage-gray hover:text-garage-orange underline"> + Go back to homepage + </p> + </div> + </div> + </div> +</section> +{% endblock %} diff --git a/templates/base.html b/templates/base.html new file mode 100755 index 0000000..b6c8760 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,173 @@ +{% import 'macros.html' as macros %} + +<!DOCTYPE html> +<html lang="{{lang}}"> + +<head> + <meta charset="utf-8" /> + <meta content="width=device-width, initial-scale=1" name="viewport" /> + <meta content="#ffffff" name="theme-color" /> + <meta content="#da532c" name="msapplication-TileColor" /> + + {% if config.extra.favicon.webmanifest %} + <link href='{{ config.extra.favicon.webmanifest }}' rel="manifest" /> + {% endif %} + {% if config.extra.favicon.safari_pinned_tab %} + <link color="#5bbad5" href='{{ config.extra.favicon.safari_pinned_tab }}' rel="mask-icon" /> + {% endif %} + {% if config.extra.favicon.favicon_16x16 %} + <link href='{{ config.extra.favicon.favicon_16x16 }}' rel="icon" sizes="16x16" type="image/png" /> + {% endif %} + {% if config.extra.favicon.favicon_32x32 %} + <link href='{{ config.extra.favicon.favicon_32x32 }}' rel="icon" sizes="32x32" type="image/png" /> + {% endif %} + {% if config.extra.favicon.apple_touch_icon %} + <link href='{{ config.extra.favicon.apple_touch_icon }}' rel="apple-touch-icon" sizes="180x180" /> + {% endif %} + + {% if config.extra.galleria.enabled %} + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/galleria@1.6.1/dist/themes/folio/galleria.folio.min.css" integrity="sha384-+rY0QD+LRnTOquDMzGa9lXU6jIwdiQuwCJQ2cdcW0qeP/0UbjQCZlXnRsUMA+9pH" crossorigin="anonymous"> + {% endif %} + + {% if config.extra.mapbox.enabled %} + <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" integrity="sha384-oGm59HWAkwO32h2w8u0B98wKBZJwd6MbWtAJwQKCTffZjOXHXrnyv9Syjovgc+UV" crossorigin="anonymous"> + {% endif %} + + <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1.9.1/css/academicons.min.css" integrity="sha384-FIue+PI4SsI9XfHCz8dBLg33b0c1fMJgNU3X//L26FYbGnlSEfWmNT7zgWc2N9b6" crossorigin="anonymous"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"> + <link href="{{ get_url(path='style.css') }}" rel="stylesheet" /> + + {% block user_custom_stylesheet %} + {% endblock %} + + <title> + {% block title %} + {{ config.title }} + {% endblock title %} + </title> + + {% if config.extra.katex.enabled %} + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous"> + <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script> + + <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/mathtex-script-type.min.js" integrity="sha384-jiBVvJ8NGGj5n7kJaiWwWp9AjC+Yh8rhZY3GtAX8yU28azcLgoRo4oukO87g7zDT" crossorigin="anonymous"></script> + {% if config.extra.katex.auto_render %} + <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script> + {% endif %} + {% endif %} +</head> + +<body class="has-background-white"> + <nav aria-label="section navigation" class="navbar is-light" role="navigation"> + <div class="flex items-center justify-between py-1 px-8 text-garage-gray bg-garage-orange bg-opacity-20"> + <div class="navbar-brand"> + <a class="hover:rounded-full hover:bg-white" href="{{config.base_url}}"> + <img class="transform duration-150 focus:bg-white hover:bg-white hover:shadow rounded-lg hover:scale-90" src="{{ config.extra.organization.logo }}" width="65px"> + </a> + <a aria-expanded="false" aria-label="menu" class="navbar-burger burger" data-target="navMenu" role="button"> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + </a> + </div> + <div class="navbar-menu" id="navMenu"> + <div class="flex items-center"> + {% for item in config.extra.navbar_items %} + {% if lang == item.code %} + {% for nav in item.nav_items %} + <a class="font-semibold focus:bg-white hover:bg-white hover:shadow px-4 py-2 rounded-lg" href="{{ nav.url | replace(from='$BASE_URL', to=config.base_url) }}"> + {{ nav.name }} + </a> + {% endfor %} + {% endif %} + {% 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> + </div> + </div> + </div> + </div> + </nav> + + <div> + {% block content %}{% endblock %} + </div> + + + {% block pagination %} + {% if paginator.previous or paginator.next %} + <section class="section"> + <div class="container max-w-5xl mx-auto flex items-center justify-center"> + <nav class="pagination flex items-center my-12 text-garage-gray" role="navigation" aria-label="pagination"> + {% if paginator.previous %} + <a class="flex items-center justify-center space-x-2 hover:text-garage-orange" href='{{ paginator.previous }}' {% if not paginator.previous %}disabled{% endif %}> + <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>Prev</span> + </a> + {% endif %} + <ul class="flex space-x-4 px-4"> + {% for pager in range(start=1, end=paginator.number_pagers+1) %} + <li> + <a class="font-semibold inline-flex items-center justify-center h-7 w-7 rounded hover:shadow hover:bg-garage-orange bg-garage-gray bg-opacity-20 border-b-2 {% if paginator.current_index == pager %}border-garage-orange{% else %}border-transparent{% endif %}" href='{{ paginator.base_url }}{{pager}}' aria-label="Goto page {{pager}}"> + {{pager}} + </a> + </li> + {% endfor %} + </ul> + {% if paginator.next %} + <a class="flex items-center justify-center space-x-2 hover:text-garage-orange" href='{{ paginator.next }}' {% if not paginator.next %}disabled{% endif %}> + <span>Next</span> + <svg class="mt-0.5 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> + </a> + {% endif %} + </nav> + </div> + </section> + {% endif %} + {% endblock %} + + {% block comment %} + {% endblock %} + + <footer class="py-4 bg-garage-orange bg-opacity-20"> + <div class="content has-text-centered flex flex-col items-center justify-center"> + <p> + {{ macros:: social_links( social_config=config.extra.social) }} + </p> + <p class="text-gray-600 py-2"> + Powered by <a href="https://www.getzola.org" target="_blank" class="font-semibold hover:text-garage-orange">Zola</a> + </p> + </div> + </footer> + + {% if config.extra.galleria.enabled %} + <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/galleria@1.6.1/dist/galleria.min.js" integrity="sha384-QSfwGT8/EU536DKdtyP2D6SLlh8zBaZ0cVkwfrwhqzIU9VCfJT00CLVP5t+HAiYg" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/galleria@1.6.1/dist/themes/folio/galleria.folio.min.js" integrity="sha384-DwpKI+deZB267+hPKwiOIc5Y2GKsVL0mR6hgz7GgIu7AgAMYqJwcJKY1YBNfhWcY" crossorigin="anonymous"></script> + {% endif %} + {% if config.extra.mermaid.enabled %} + <script src="https://cdn.jsdelivr.net/npm/mermaid@8.13.5/dist/mermaid.min.js" integrity="sha384-0yWn54pSGtfKCU+skfA69l25VsCw+MZt4LQov3xNRoS7YkAMrFokGgSBnAWSK4pv" crossorigin="anonymous"></script> + {% endif %} + {% if config.extra.chart.enabled %} + <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1.13/dist/chart.xkcd.min.js" integrity="sha384-xC3h1+IHXK8seA+8KfT79Z4e0GPsznjXBoMa5nd8ooWKplPyXx92NOmljWxLC/cs" crossorigin="anonymous"></script> + {% endif %} + <script src="{{ get_url(path='elasticlunr.min.js') }}"></script> + <script src="{{ get_url(path='search_index.' ~ lang ~ '.js') }}"></script> + {%- if lang != "en" -%} + {%- block other_lang_search_js -%} + {%- endblock -%} + {%- endif -%} + <script src="{{ get_url(path='js/site.js') }}"></script> + + {% block custom_js %} + {% endblock %} + + {% block user_custom_js %} + {% endblock %} +</body> + +</html> diff --git a/templates/categories/list.html b/templates/categories/list.html new file mode 100755 index 0000000..c78c7b0 --- /dev/null +++ b/templates/categories/list.html @@ -0,0 +1,27 @@ +{% 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 new file mode 100755 index 0000000..a3d2159 --- /dev/null +++ b/templates/categories/single.html @@ -0,0 +1,76 @@ +{% 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/index.html b/templates/index.html new file mode 100755 index 0000000..2126007 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,178 @@ +{% extends "base.html" %} + +{% block content %} +<section class="section" id="home-section"> + <div> + + <div class="flex flex-col items-center justify-center py-12"> + <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> + </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> + <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> + </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="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> + <div class="w-8 h-1 bg-garage-orange"></div> + <p class="text-center leading-5 italic">We made it lightweight and kept the efficiency in mind.</p> + <ul class="list-style-none font-semibold flex flex-col items-center justify-center py-4"> + <li class="py-1.5"> + As self-contained as possible + </li> + <div class="w-2 h-2 rounded-full bg-garage-orange"></div> + <li class="py-1.5"> + Easy to set up + </li> + <div class="w-2 h-2 rounded-full bg-garage-orange"></div> + <li class="py-1.5 text-center"> + Highly resilient to<br> + <div class="font-normal"> + <span>network failures</span>, + <span>network latency</span><br> + <span>disk failures</span>, + <span>sysadmin failures</span> + </div> + </li> + <div class="w-2 h-2 rounded-full bg-garage-orange"></div> + <li class="py-1.5"> + Relatively simple + </li> + <div class="w-2 h-2 rounded-full bg-garage-orange"></div> + <li class="py-1.5"> + Made for multi-datacenter deployments + </li> + </ul> + </div> + + <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">Keeping requirements low</h2> + <div class="w-8 h-1 bg-garage-orange"></div> + <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"> + <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"> + <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"> + <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"> + <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"> + <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> + </div> + <span class="px-2">Build a cluster with whatever second-hand machines are available</span> + </li> + </ul> + </div> + + <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">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. + </p> + <p class="font-normal"> + Garage implements the Amazon S3 API<br>and thus is already compatible with many applications. + </p> + <ul class="grid grid-cols-3 gap-6 py-4 px-8"> + <li class="flex items-center justify-start"> + <a href="https://nextcloud.com/" target="_blank" title="Nextcloud"> + <img class="h-20 w-20" src="{{ get_url(path='images/nextcloud-logo.svg') }}" alt="Nextcloud"> + </a> + </li> + <li class="flex items-center justify-start"> + <a href="https://element.io/" target="_blank" title="Matrix"> + <img class="h-20 w-20" src="{{ get_url(path='images/matrix-logo.svg') }}" alt="Matrix"> + </a> + </li> + <li class="flex items-center justify-start"> + <a href="https://cyberduck.io/" target="_blank" title="Cyberduck"> + <img class="h-20 w-20" src="{{ get_url(path='images/cyberduck-logo.png') }}" alt="Cyberduck"> + </a> + </li> + <li class="flex items-center justify-start"> + <a href="https://mastodon.social/" target="_blank" title="Mastodon"> + <img class="h-20 w-20" src="{{ get_url(path='images/mastodon-logo.svg') }}" alt="Mastodon"> + </a> + </li> + <li class="flex items-center justify-start"> + <a href="https://rclone.org/" target="_blank" title="Rclone"> + <img class="h-20 w-20" src="{{ get_url(path='images/rclone-logo.svg') }}" alt="Rclone"> + </a> + </li> + <li class="flex items-center justify-start"> + <a href="https://joinpeertube.org/" target="_blank" title="PeerTube"> + <img class="h-20 w-20" src="{{ get_url(path='images/peertube-logo.svg') }}" alt="PeerTube"> + </a> + </li> + </ul> + </div> + + <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">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> + <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> + by DeCandia et al. + </li> + <li> + <a href="#" class="font-semibold hover:text-garage-orange">Conflict-Free Replicated Data Types</a> + by Shapiro et al. + </li> + <li> + <a href="#" class="font-semibold hover:text-garage-orange">Maglev: A Fast and Reliable Software Network Load Balancer</a> + by Eisenbud et al. + </li> + </ul> + </div> + + </div> + + {% if section.content %} + <div class="content max-w-7xl mx-auto py-12"> + {{ section.content | safe }} + </div> + {% endif %} + </div> +</section> +{% endblock %} diff --git a/templates/macros.html b/templates/macros.html new file mode 100755 index 0000000..9fab136 --- /dev/null +++ b/templates/macros.html @@ -0,0 +1,79 @@ +{% macro social_links(social_config) %} + <p class="flex items-center justify-center space-x-2"> + {% if social_config.git %} + <a href="{{ social_config.git }}" target="_blank"> + <span class="icon is-large" title="Git"> + <i class="fab fa-git fa-lg text-garage-gray h-8 w-8 bg-white hover:bg-garage-orange hover:text-white rounded-full shadow flex items-center justify-center"></i> + </span> + </a> + {% endif %} + + {% if social_config.email %} + <a href="mailto:{{ social_config.email }}" target="_blank"> + <span class="icon is-large" title="Email"> + <i class="far fa-envelope fa-lg text-garage-gray h-8 w-8 bg-white hover:bg-garage-orange hover:text-white rounded-full shadow flex items-center justify-center"></i> + </span> + </a> + {% endif %} + + {% if config.generate_feed %} + <a href="{{ config.base_url }}/{{ config.feed_filename }}" target="_blank"> + <span class="icon is-large" title="RSS Feed"> + <i class="fas fa-rss fa-lg text-garage-gray h-8 w-8 bg-white hover:bg-garage-orange hover:text-white rounded-full shadow flex items-center justify-center"></i> + </span> + </a> + {% endif %} + </p> +{% endmacro %} + +{% macro page_publish_metadata(page) %} +<span class="icon-text has-text-grey"> + <span>Published on</span> + <div class="font-semibold inline-flex items-center justify-center space-x-1 bg-garage-gray bg-opacity-10 p-0.5 rounded"> + <span><time datetime="{{ page.date }}">{{ page.date | date(format='%B %d, %Y') }}</time></span> + </div> +</span> +{% endmacro %} + +{% macro page_content_metadata(page) %} +<span class="icon-text has-text-grey"> + <span class="inline-flex items-center justify-center space-x-1 bg-garage-gray bg-opacity-10 p-0.5 rounded"> + {{ page.reading_time }} min reading time + </span> + <span class="inline-flex items-center justify-center space-x-1 bg-garage-gray bg-opacity-10 p-0.5 rounded"> + {{ page.word_count }} words + </span> +</span> +{% endmacro %} + +{% macro render_categories(categories) %} +<div class="flex items-center"> + <span class="text-sm">Categories</span> + {% for category in categories %} + <a class="font-semibold inline-flex items-center justify-center space-x-1 px-1 py-0.5 rounded" href="{{ get_taxonomy_url(kind='categories', name=category) }}"> + <div class="text-garage-gray inline-flex items-center space-x-1 border px-1 border-gray-300 hover:border-garage-orange rounded"> + <span class="icon"> + <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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg> + </span> + <span>{{category}}</span> + </div> + </a> + {% endfor %} +</div> +{% endmacro %} + +{% macro render_tags(tags) %} +<div class="flex items-center"> + <span class="text-sm">Tags</span> + {% for tag in tags %} + <a class="font-semibold inline-flex items-center justify-center space-x-1 px-1 py-0.5 rounded" href="{{ get_taxonomy_url(kind='tags', name=tag) }}"> + <div class="text-garage-gray inline-flex items-center space-x-1 border px-1 border-gray-300 hover:border-garage-orange rounded"> + <span class="icon"> + <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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg> + </span> + <span>{{tag}}</span> + </div> + </a> + {% endfor %} +</div> +{% endmacro %} diff --git a/templates/page.html b/templates/page.html new file mode 100755 index 0000000..ee83cad --- /dev/null +++ b/templates/page.html @@ -0,0 +1,210 @@ +{% extends 'base.html' %} + +{% block title %} +{{ config.title }} | {{ page.title }} +{% endblock %} + +{% block content %} + <section class="section"> + <div class="mx-auto max-w-7xl"> + <div class="grid grid-cols-5 gap-x-12"> + <div class="{% if page.extra.toc %}col-span-4{% else %}col-span-full{% endif %}"> + <article class="box my-12"> + <div class="flex flex-col bg-gray-50"> + <div class="flex flex-col border-l-4 border-garage-orange py-2 pl-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 %} + <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> + </a> + </div> + <div class="w-full text-garage-gray text-sm grid grid-cols-2 bg-gradient-to-r from-gray-100 to-transparent p-3 border-l-4 border-gray-300"> + <div class="flex items-center justify-start"> + {{ macros::page_publish_metadata(page=page) }} + </div> + <div class="flex items-center justify-end"> + {{ macros::page_content_metadata(page=page) }} + </div> + <div> + {% if page.taxonomies.categories %} + {{ macros::render_categories(categories=page.taxonomies.categories) }} + {% endif %} + </div> + <div> + {% if page.taxonomies.tags %} + {{ macros::render_tags(tags=page.taxonomies.tags) }} + {% endif %} + </div> + </div> + </div> + <div class="page-content max-w-4xl text-justify mt-12"> + {{ page.content | safe }} + </div> + </article> + </div> + {% if page.extra.toc %} + <div class="col-span-1 my-12 is-hidden-mobile bg-gradient-to-b from-yellow-100 to-transparent rounded shadow-inner"> + <aside class="menu" style="position:sticky;top:0"> + <p class="bg-yellow-200 uppercase text-xs font-light p-1 text-center text-gray-600">Contents</p> + <ul class="menu-list p-2 text-gray-800"> + {% for h1 in page.toc %} + <li class="flex flex-col h-full"> + <a id="link-{{h1.id}}" class="toc text-sm text-gray-600 bg-transparent hover:text-orange-600 font-semibold {% if loop.first %}is-active{% endif %}" + href="{{ h1.permalink | safe }}"> + {{ h1.title }} + </a> + {% if h1.children %} + <ul> + {% for h2 in h1.children %} + <li class="hover:text-orange-600 border-l border-orange-400"> + <a id="link-{{h2.id}}" class="toc pl-2 text-xs" href="{{ h2.permalink | safe }}"> + {{ h2.title }} + </a> + </li> + {% endfor %} + </ul> + {% endif %} + </li> + {% endfor %} + </ul> + </aside> + </div> + {% endif %} + </div> + </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 %} diff --git a/templates/robots.txt b/templates/robots.txt new file mode 100755 index 0000000..d5b8403 --- /dev/null +++ b/templates/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Sitemap: {{config.base_url}}/sitemap.xml
\ No newline at end of file diff --git a/templates/section.html b/templates/section.html new file mode 100755 index 0000000..83c5134 --- /dev/null +++ b/templates/section.html @@ -0,0 +1,71 @@ +{% extends 'base.html' %} + +{% block title %} +{{ config.title }} | {{ section.title }} +{% endblock title %} + +{% block content %} +<section class="section"> + <div class="container max-w-7xl mx-auto"> + <div class="flex flex-col items-center flex-start space-y-2 py-8"> + <h1 class="title leading-10 text-3xl text-garage-gray">{{ section.title }}</h1> + <p class="italic">{{ section.description }}</p> + </div> + <div class="content"> + {{ section.content | safe }} + </div> + <div class="columns is-centered"> + <div class="space-y-20"> + {% if paginator %} + {% set pages = paginator.pages %} + {% else %} + {% set pages = section.pages %} + {% endif %} + + {% for page in pages %} + <article class="border-l-4 border-garage-gray pl-4"> + <h2 class="text-garage-gray hover:text-garage-orange text-2xl pb-3"> + <a class="w-full block" href='{{ page.permalink }}'> + {{ page.title }} + </a> + </h2> + {% if page.description %} + <p class="w-max italic text-gray-600 py-0.5 px-1.5 bg-gray-100 rounded mb-1">{{ page.description }}</p> + {% endif %} + <div class="flex space-x-1 text-sm py-2 bg-garage-orange bg-opacity-10 w-full p-1.5 rounded"> + <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 class="group py-4 font-semibold px-4 py-2 flex items-center space-x-1 text-garage-orange" href='{{ page.permalink }}'> + <div class="h-0.5 mt-0.5 w-4 group-hover:w-8 group-hover:bg-garage-gray transition-all bg-garage-orange"></div> + <span>Read</span> + <span class="text-garage-orange group-hover:text-garage-gray transition-all"> + <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 %} diff --git a/templates/shortcodes/chart.html b/templates/shortcodes/chart.html new file mode 100755 index 0000000..539aeea --- /dev/null +++ b/templates/shortcodes/chart.html @@ -0,0 +1 @@ +<svg class="chart">{{body | safe}}</svg> diff --git a/templates/shortcodes/galleria.html b/templates/shortcodes/galleria.html new file mode 100755 index 0000000..0e23cd3 --- /dev/null +++ b/templates/shortcodes/galleria.html @@ -0,0 +1 @@ +<div class="galleria mb-6" style="height: 450px">{{body | safe}}</div>
\ No newline at end of file diff --git a/templates/shortcodes/katex.html b/templates/shortcodes/katex.html new file mode 100755 index 0000000..cac8e97 --- /dev/null +++ b/templates/shortcodes/katex.html @@ -0,0 +1 @@ +<script type="math/tex{% if block %};mode=display{% endif %}">{{body}}</script> diff --git a/templates/shortcodes/mapbox.html b/templates/shortcodes/mapbox.html new file mode 100755 index 0000000..13d3488 --- /dev/null +++ b/templates/shortcodes/mapbox.html @@ -0,0 +1,11 @@ +<div class="map mb-6" style='height: 450px;'> + <div class="mapbox-access-token"> + {{config.extra.mapbox.access_token}} + </div> + <div class="mapbox-zoom"> + {{zoom}} + </div> + <div class="mapbox-geojson"> + {{body}} + </div> +</div> diff --git a/templates/shortcodes/mermaid.html b/templates/shortcodes/mermaid.html new file mode 100755 index 0000000..18395a6 --- /dev/null +++ b/templates/shortcodes/mermaid.html @@ -0,0 +1 @@ +<div class="mermaid is-flex is-justify-content-center is-align-items-center">{{body}}</div> diff --git a/templates/shortcodes/vimeo.html b/templates/shortcodes/vimeo.html new file mode 100755 index 0000000..79f92bb --- /dev/null +++ b/templates/shortcodes/vimeo.html @@ -0,0 +1,9 @@ +<div class="vimeo is-flex is-justify-content-center is-align-items-center"> + <iframe + width="848" height="510" + title="vimeo-player" + src="https://player.vimeo.com/video/{{id}}" + frameborder="0" + allowfullscreen> + </iframe> +</div>
\ No newline at end of file diff --git a/templates/shortcodes/youtube.html b/templates/shortcodes/youtube.html new file mode 100755 index 0000000..a6d8ad8 --- /dev/null +++ b/templates/shortcodes/youtube.html @@ -0,0 +1,9 @@ +<div class="youtube is-flex is-justify-content-center is-align-items-center"> + <iframe + width="848" height="510" + src="https://www.youtube.com/embed/{{id}}" + frameborder="0" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" + allowfullscreen> + </iframe> +</div>
\ No newline at end of file diff --git a/templates/tags/list.html b/templates/tags/list.html new file mode 100755 index 0000000..4100e8d --- /dev/null +++ b/templates/tags/list.html @@ -0,0 +1,27 @@ +{% 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 new file mode 100755 index 0000000..3c89294 --- /dev/null +++ b/templates/tags/single.html @@ -0,0 +1,76 @@ +{% 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 |