✨ feat(templates): introduce info-page template

Useful for About Me, Privacy page, and similar.
welpo · Sep 12, 2023 · 2508f94 · 2508f94
1 parent 355162e
commit 2508f94
Show file tree

Hide file tree

Showing 29 changed files with 180 additions and 47 deletions.
diff --git a/config.toml b/config.toml
@@ -141,6 +141,7 @@ menu = [
     { name = "archive", url = "archive", trailing_slash = true },
     { name = "tags", url = "tags", trailing_slash = true },
     { name = "projects", url = "projects", trailing_slash = true },
+    { name = "about", url = "about", trailing_slash = true },
 ]
 
 # The RSS icon will be shown if (1) it's enabled and (2) the following variable is set to true.

diff --git a/content/pages/_index.ca.md b/content/pages/_index.ca.md
@@ -0,0 +1,4 @@
++++
+render = false
+insert_anchor_links = "left"
++++
diff --git a/content/pages/_index.es.md b/content/pages/_index.es.md
@@ -0,0 +1,4 @@
++++
+render = false
+insert_anchor_links = "left"
++++
diff --git a/content/pages/_index.md b/content/pages/_index.md
@@ -0,0 +1,4 @@
++++
+render = false
+insert_anchor_links = "left"
++++
diff --git a/content/pages/about.ca.md b/content/pages/about.ca.md
@@ -0,0 +1,28 @@
++++
+title = "Sobre mi"
+template = "info-page.html"
+path = "/ca/about"
+
+[extra]
+giscus = true
+quick_navigation_buttons = true
+social_media_card = "img/social_cards/about.ca.jpg"
++++
+
+Benvingut a la demo de [**tabi**](https://github.com/welpo/tabi), un tema per a [Zola](https://www.getzola.org/), un generador de llocs web estàtics rapidíssim.
+
+**tabi** és una obra d'Óscar Fernández ([welpo](https://github.com/welpo/) a GitHub), inicialment creat per al [seu lloc personal](https://osc.garden/). És un tema modern i ple de funcionalitats que ofereix configuracions predefinides raonables i segures.
+
+Busques instruccions detallades o consells sobre com utilitzar **tabi**? Les seccions del [blog](https://welpo.github.io/tabi/ca/blog/) i de l'[arxiu](https://welpo.github.io/tabi/ca/archive/) contenen la documentació del tema, que inclou des de mostres de funcions fins a guies detallades.
+
+## Característiques
+
+**tabi** ofereix suport per a [diversos idiomes](https://welpo.github.io/tabi/ca/blog/faq-languages/), [aparença personalitzable](https://welpo.github.io/tabi/ca/blog/customise-tabi/), [integració de comentaris](https://welpo.github.io/tabi/blog/comments/), i molt més, tot amb un enfocament en el rendiment ([tot el JavaScript és opcional](https://welpo.github.io/ca/tabi/blog/javascript/)) i la [seguretat](https://welpo.github.io/ca/tabi/blog/security/).
+
+## Contribucions
+
+Tota aportació és benvinguda! Agraïm els informes d'errors, millores en traduccions o documentació (per mínimes que siguin), sol·licituds de noves funcions… Consulta les [Pautes de Contribució](https://github.com/welpo/tabi/blob/main/CONTRIBUTING.md) per saber com pots contribuir. Gràcies!
+
+## Llicència
+
+El codi està disponible sota la [llicència MIT](https://choosealicense.com/licenses/mit/).
diff --git a/content/pages/about.es.md b/content/pages/about.es.md
@@ -0,0 +1,28 @@
++++
+title = "Sobre mí"
+template = "info-page.html"
+path = "/es/about"
+
+[extra]
+giscus = true
+quick_navigation_buttons = true
+social_media_card = "img/social_cards/about.es.jpg"
++++
+
+Bienvenido a la demo de [**tabi**](https://github.com/welpo/tabi), un tema para [Zola](https://www.getzola.org/), un rapidísimo generador de sitios estáticos.
+
+**tabi** es obra de Óscar Fernández ([welpo](https://github.com/welpo/) en GitHub), inicialmente creado para [su página personal](https://osc.garden/). Es un tema moderno y lleno de funcionalidades que ofrece configuraciones predeterminadas sensatas y seguras.
+
+¿Buscas instrucciones detalladas o consejos sobre cómo utilizar **tabi**? Las secciones del [blog](https://welpo.github.io/tabi/es/blog/) y del [archivo](https://welpo.github.io/tabi/es/archive/) contienen la documentación del tema, que incluye desde muestras de funciones hasta guías detalladas.
+
+## Características
+
+**tabi** ofrece soporte para [varios idiomas](https://welpo.github.io/tabi/es/blog/faq-languages/), [apariencia personalizable](https://welpo.github.io/tabi/es/blog/customise-tabi/), [integración de comentarios](https://welpo.github.io/tabi/es/blog/comments/), y mucho más, todo con un enfoque en el rendimiento ([todo el JavaScript es opcional](https://welpo.github.io/tabi/es/blog/javascript/)) y la [seguridad](https://welpo.github.io/tabi/es/blog/security/).
+
+## Contribuciones
+
+¡Toda aportación es bienvenida! Agradecemos los reportes de errores, mejoras en traducciones o documentación (por mínimas que sean), solicitudes de nuevas funciones… Consulta las [Pautas de Contribución](https://github.com/welpo/tabi/blob/main/CONTRIBUTING.md) para saber cómo puedes contribuir. ¡Gracias!
+
+## Licencia
+
+El código está disponible bajo la [licencia MIT](https://choosealicense.com/licenses/mit/).
diff --git a/content/pages/about.md b/content/pages/about.md
@@ -0,0 +1,28 @@
++++
+title = "About"
+template = "info-page.html"
+path = "about"
+
+[extra]
+giscus = true
+quick_navigation_buttons = true
+social_media_card = "img/social_cards/about.jpg"
++++
+
+Welcome to the demo of [**tabi**](https://github.com/welpo/tabi), a theme for [Zola](https://www.getzola.org/), a fast static site generator.
+
+**tabi** is the creation of Óscar Fernández ([welpo](https://github.com/welpo/) on GitHub), initially designed for [his personal site](https://osc.garden/). It is a feature-rich, modern theme that provides sane (and safe) defaults.
+
+Looking for detailed instructions or tips on using **tabi**? The [blog](https://welpo.github.io/tabi/blog/) and [archive](https://welpo.github.io/tabi/archive/) sections feature the theme's documentation, offering a variety of articles from feature overviews to step-by-step guides.
+
+## Features
+
+**tabi** supports [multiple languages](https://welpo.github.io/tabi/blog/faq-languages/), [customisable appearance](https://welpo.github.io/tabi/blog/customise-tabi/), [comment integrations](https://welpo.github.io/tabi/blog/comments/), and much more, all with an emphasis on performance ([all JavaScript is optional](https://welpo.github.io/tabi/blog/javascript/)) and [security](https://welpo.github.io/tabi/blog/security/).
+
+## Contributing
+
+Contributions are much appreciated! We appreciate bug reports, improvements to translations or documentation (however minor), feature requests… Check out the [Contributing Guidelines](https://github.com/welpo/tabi/blob/main/CONTRIBUTING.md) to learn how you can help. Thank you!
+
+## License
+
+The code is available under the [MIT license](https://choosealicense.com/licenses/mit/).
diff --git a/i18n/ca.toml b/i18n/ca.toml
@@ -8,6 +8,7 @@ blog = "blog"
 archive = "arxiu"
 tags = "etiquetes"
 projects = "projectes"
+about = "sobre mi"
 
 # Navigation.
 read_more = "Llegir més"

diff --git a/i18n/de.toml b/i18n/de.toml
@@ -12,6 +12,7 @@ blog = "blog"
 archive = "archiv"
 tags = "tags"
 projects = "projekte"
+about = "über"
 
 # Navigation.
 read_more = "Weiterlesen"

diff --git a/i18n/en.toml b/i18n/en.toml
@@ -8,6 +8,7 @@ blog = "blog"
 archive = "archive"
 tags = "tags"
 projects = "projects"
+about = "about"
 
 # Navigation.
 read_more = "Read more"

diff --git a/i18n/es.toml b/i18n/es.toml
@@ -8,6 +8,7 @@ blog = "blog"
 archive = "archivo"
 tags = "etiquetas"
 projects = "proyectos"
+about = "sobre mí"
 
 # Navigation.
 read_more = "Leer más"

diff --git a/i18n/fr.toml b/i18n/fr.toml
@@ -12,6 +12,7 @@ blog = "blog"
 archive = "archives"
 tags = "étiquettes"
 projects = "projets"
+about = "à propos"
 
 # Navigation.
 read_more = "Lire plus"

diff --git a/i18n/hi.toml b/i18n/hi.toml
@@ -10,6 +10,7 @@ blog = "ब्लॉग"
 archive = "संग्रह"
 tags = "टैग"
 projects = "परियोजनाएं"
+about = "बारे में"
 
 # Navigation.
 read_more = "और पढ़ें"

diff --git a/i18n/it.toml b/i18n/it.toml
@@ -8,6 +8,7 @@ blog = "blog"
 archive = "archivio"
 tags = "tag"
 projects = "progetti"
+about = "chi sono"
 
 # Navigation.
 read_more = "Leggi di più"

diff --git a/i18n/ja.toml b/i18n/ja.toml
@@ -12,6 +12,7 @@ blog = "ブログ"
 archive = "アーカイブ"
 tags = "タグ"
 projects = "プロジェクト"
+about = "自己紹介"
 
 # Navigation.
 read_more = "続きを読む"

diff --git a/i18n/ko.toml b/i18n/ko.toml
@@ -12,6 +12,7 @@ blog = "블로그"
 archive = "아카이브"
 tags = "태그"
 projects = "프로젝트"
+about = "소개"
 
 # Navigation.
 read_more = "더 읽기"

diff --git a/i18n/pt.toml b/i18n/pt.toml
@@ -8,6 +8,7 @@ blog = "blog"
 archive = "arquivo"
 tags = "etiquetas"
 projects = "projetos"
+about = "sobre"
 
 # Navigation.
 read_more = "Ler mais"

diff --git a/i18n/ru.toml b/i18n/ru.toml
@@ -8,6 +8,7 @@ blog = "блог"
 archive = "архив"
 tags = "теги"
 projects = "проекты"
+about = "обо мне"
 
 # Navigation.
 read_more = "Читать далее"

diff --git a/i18n/uk.toml b/i18n/uk.toml
@@ -12,6 +12,7 @@ blog = "блог"
 archive = "архів"
 tags = "теги"
 projects = "проєкти"
+about = "про мене"
 
 # Navigation.
 read_more = "Читати далі"

diff --git a/i18n/zh.toml b/i18n/zh.toml
@@ -12,6 +12,7 @@ blog = "博客"
 archive = "归档"
 tags = "标签"
 projects = "项目"
+about = "关于"
 
 # Navigation.
 read_more = "阅读更多"

diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss
@@ -146,3 +146,7 @@ hr {
     padding: 1rem;
     text-align: center;
 }
+
+#page-content {
+    margin-top: 4vmin;
+}
diff --git a/static/custom_subset.css b/static/custom_subset.css
diff --git a/static/img/social_cards/about.ca.jpg b/static/img/social_cards/about.ca.jpg
diff --git a/static/img/social_cards/about.es.jpg b/static/img/social_cards/about.es.jpg
diff --git a/static/img/social_cards/about.jpg b/static/img/social_cards/about.jpg
diff --git a/templates/info-page.html b/templates/info-page.html
@@ -0,0 +1,17 @@
+{# Template for non-articles (About Me, Privacy…) #}
+
+{% extends "base.html" %}
+
+{%- block main_content %}
+
+{{ macros_page_header::page_header(title=page.title) }}
+
+<div id="page-content">
+    <main>
+        {{ page.content | safe }}
+    </main>
+</div>
+
+{%- include "partials/extra_features.html" -%}
+
+{%- endblock main_content %}
diff --git a/templates/page.html b/templates/page.html
@@ -147,51 +147,6 @@ <h3>TL;DR:</h3>
     </article>
 </main>
 
-{# Quick navigation buttons #}
-{% if macros_settings::evaluate_setting_priority(setting="quick_navigation_buttons", page=page, default_global_value=false) == "true" %}
-    <div id="button-container">
-        {# Button to go show a floating Table of Contents #}
-        {% if page.toc %}
-            <div id="toc-floating-container">
-                <input type="checkbox" id="toc-toggle" class="toggle"/>
-                <label for="toc-toggle" class="overlay"></label>
-                <label for="toc-toggle" id="toc-button" class="button" title="Toggle Table of Contents" aria-label="toggle Table of Contents">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M414.82-193.094q-18.044 0-30.497-12.32-12.453-12.319-12.453-30.036t12.453-30.086q12.453-12.37 30.497-12.37h392.767q17.237 0 29.927 12.487 12.69 12.486 12.69 30.203 0 17.716-12.69 29.919t-29.927 12.203H414.82Zm0-244.833q-18.044 0-30.497-12.487Q371.87-462.9 371.87-480.45t12.453-29.92q12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.511 12.69 12.512 12.69 29.845 0 17.716-12.69 30.086-12.69 12.37-29.927 12.37H414.82Zm0-245.167q-18.044 0-30.497-12.32t-12.453-30.037q0-17.716 12.453-30.086 12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.486 12.69 12.487 12.69 30.203 0 17.717-12.69 29.92-12.69 12.203-29.927 12.203H414.82ZM189.379-156.681q-32.652 0-55.878-22.829t-23.226-55.731q0-32.549 23.15-55.647 23.151-23.097 55.95-23.097 32.799 0 55.313 23.484 22.515 23.484 22.515 56.246 0 32.212-22.861 54.893-22.861 22.681-54.963 22.681Zm0-245.167q-32.652 0-55.878-23.134-23.226-23.135-23.226-55.623 0-32.487 23.467-55.517t56.12-23.03q32.102 0 54.721 23.288 22.62 23.288 22.62 55.775 0 32.488-22.861 55.364-22.861 22.877-54.963 22.877Zm-.82-244.833q-32.224 0-55.254-23.288-23.03-23.289-23.03-55.623 0-32.333 23.271-55.364 23.272-23.03 55.495-23.03 32.224 0 55.193 23.288 22.969 23.289 22.969 55.622 0 32.334-23.21 55.364-23.21 23.031-55.434 23.031Z"/></svg>
-                </label>
-                <div class="toc-content">
-                    {{ macros_toc::toc(page=page, header=false, language_strings=language_strings) }}
-                </div>
-            </div>
-        {% endif %}
-
-        {# Button to go to the comment section #}
-        {% if comment_system %}
-            <a href="#comments" id="comments-button" title="Go to comment section">
-                <svg viewBox="0 0 20 20" fill="currentColor"><path d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" fill-rule="evenodd"/></svg>
-            </a>
-        {% endif %}
-
-        {# Button to go to the top of the page #}
-        <a href="#" id="top-button" title="Go to top of page">
-            <svg viewBox="0 0 20 20" fill="currentColor"><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg>
-        </a>
-    </div>
-{% endif %}
-
-{# Add KaTeX functionality #}
-{%- if macros_settings::evaluate_setting_priority(setting="katex", page=page, default_global_value=false) == "true" -%}
-    <link rel="stylesheet" href="{{ get_url(path='katex.min.css', trailing_slash=false) | safe }}">
-    <script defer src="{{ get_url(path='js/katex.min.js', trailing_slash=false) | safe }}"></script>
-{%- endif -%}
-
-{# Add copy button to code blocks #}
-{%- if macros_settings::evaluate_setting_priority(setting="copy_button", page=page, default_global_value=true) == "true" -%}
-    <script defer src="{{ get_url(path='js/copyCodeToClipboard.min.js', trailing_slash=false) | safe }}"/></script>
-{%- endif -%}
-
-{# Add backlinks to footnotes #}
-{%- if macros_settings::evaluate_setting_priority(setting="footnote_backlinks", page=page, default_global_value=false) == "true" -%}
-    <script defer src="{{ get_url(path='js/footnoteBacklinks.min.js', trailing_slash=false | safe )}}"/></script>
-{%- endif -%}
+{%- include "partials/extra_features.html" -%}
 
 {% endblock main_content %}
diff --git a/templates/partials/extra_features.html b/templates/partials/extra_features.html
@@ -0,0 +1,46 @@
+{# Quick navigation buttons #}
+{% if macros_settings::evaluate_setting_priority(setting="quick_navigation_buttons", page=page, default_global_value=false) == "true" %}
+    <div id="button-container">
+        {# Button to go show a floating Table of Contents #}
+        {% if page.toc %}
+            <div id="toc-floating-container">
+                <input type="checkbox" id="toc-toggle" class="toggle"/>
+                <label for="toc-toggle" class="overlay"></label>
+                <label for="toc-toggle" id="toc-button" class="button" title="Toggle Table of Contents" aria-label="toggle Table of Contents">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M414.82-193.094q-18.044 0-30.497-12.32-12.453-12.319-12.453-30.036t12.453-30.086q12.453-12.37 30.497-12.37h392.767q17.237 0 29.927 12.487 12.69 12.486 12.69 30.203 0 17.716-12.69 29.919t-29.927 12.203H414.82Zm0-244.833q-18.044 0-30.497-12.487Q371.87-462.9 371.87-480.45t12.453-29.92q12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.511 12.69 12.512 12.69 29.845 0 17.716-12.69 30.086-12.69 12.37-29.927 12.37H414.82Zm0-245.167q-18.044 0-30.497-12.32t-12.453-30.037q0-17.716 12.453-30.086 12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.486 12.69 12.487 12.69 30.203 0 17.717-12.69 29.92-12.69 12.203-29.927 12.203H414.82ZM189.379-156.681q-32.652 0-55.878-22.829t-23.226-55.731q0-32.549 23.15-55.647 23.151-23.097 55.95-23.097 32.799 0 55.313 23.484 22.515 23.484 22.515 56.246 0 32.212-22.861 54.893-22.861 22.681-54.963 22.681Zm0-245.167q-32.652 0-55.878-23.134-23.226-23.135-23.226-55.623 0-32.487 23.467-55.517t56.12-23.03q32.102 0 54.721 23.288 22.62 23.288 22.62 55.775 0 32.488-22.861 55.364-22.861 22.877-54.963 22.877Zm-.82-244.833q-32.224 0-55.254-23.288-23.03-23.289-23.03-55.623 0-32.333 23.271-55.364 23.272-23.03 55.495-23.03 32.224 0 55.193 23.288 22.969 23.289 22.969 55.622 0 32.334-23.21 55.364-23.21 23.031-55.434 23.031Z"/></svg>
+                </label>
+                <div class="toc-content">
+                    {{ macros_toc::toc(page=page, header=false, language_strings=language_strings) }}
+                </div>
+            </div>
+        {% endif %}
+
+        {# Button to go to the comment section #}
+        {% if comment_system %}
+            <a href="#comments" id="comments-button" title="Go to comment section">
+                <svg viewBox="0 0 20 20" fill="currentColor"><path d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" fill-rule="evenodd"/></svg>
+            </a>
+        {% endif %}
+
+        {# Button to go to the top of the page #}
+        <a href="#" id="top-button" title="Go to top of page">
+            <svg viewBox="0 0 20 20" fill="currentColor"><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg>
+        </a>
+    </div>
+{% endif %}
+
+{# Add KaTeX functionality #}
+{%- if macros_settings::evaluate_setting_priority(setting="katex", page=page, default_global_value=false) == "true" -%}
+    <link rel="stylesheet" href="{{ get_url(path='katex.min.css', trailing_slash=false) | safe }}">
+    <script defer src="{{ get_url(path='js/katex.min.js', trailing_slash=false) | safe }}"></script>
+{%- endif -%}
+
+{# Add copy button to code blocks #}
+{%- if macros_settings::evaluate_setting_priority(setting="copy_button", page=page, default_global_value=true) == "true" -%}
+    <script defer src="{{ get_url(path='js/copyCodeToClipboard.min.js', trailing_slash=false) | safe }}"/></script>
+{%- endif -%}
+
+{# Add backlinks to footnotes #}
+{%- if macros_settings::evaluate_setting_priority(setting="footnote_backlinks", page=page, default_global_value=false) == "true" -%}
+    <script defer src="{{ get_url(path='js/footnoteBacklinks.min.js', trailing_slash=false | safe )}}"/></script>
+{%- endif -%}
diff --git a/theme.toml b/theme.toml
@@ -124,6 +124,7 @@ menu = [
     { name = "archive", url = "archive", trailing_slash = true },
     { name = "tags", url = "tags", trailing_slash = true },
     { name = "projects", url = "projects", trailing_slash = true },
+    { name = "about", url = "about", trailing_slash = true },
 ]
 
 # The RSS icon will be shown if (1) it's enabled and (2) the following variable is set to true.