✨ feat: add quick navigation buttons

config.toml

@@ -180,6 +180,11 @@ allowed_domains = [
 # Please see https://welpo.github.io/tabi/blog/custom-font-subset/ to learn how to create this file.
 custom_subset = true
 
+# Quick navigation buttons.
+# Adds "go up" and "go to comments" buttons on the bottom right (hidden for mobile).
+# Can also be enabled on individual posts in the front matter's [extra].
+quick_navigation_buttons = false
+
 # giscus support for comments. https://giscus.app
 # Setup instructions: https://welpo.github.io/tabi/blog/comments/#setup
 [extra.giscus]

content/blog/comments.ca.md

@@ -1,6 +1,7 @@
 +++
 title = "Afegeix comentaris a les teves publicacions amb giscus o utterances"
 date = 2023-07-14
+updated = 2023-07-16
 description = "Descobreix com habilitar una secció de comentaris a les teves publicacions utilitzant giscus o utterances, permetent la interacció i feedback dels lectors."
 
 [taxonomies]
@@ -8,6 +9,7 @@ tags = ["funcionalitat", "tutorial"]
 
 [extra]
 giscus = true
+quick_navigation_buttons = true
 +++
 
 tabi actualment suporta dos sistemes de comentaris: [giscus](https://giscus.app/ca) i [utterances](https://utteranc.es/).
@@ -74,6 +76,7 @@ Alternativament, pots habilitar els comentaris de publicacions concretes afegint
 +++
 title = "L'art de l'entremaliadura segons Shin-Chan
 date = 1990-02-14
+updated = 2023-07-16
 description = "Descobreix com les travessures poden canviar la teva perspectiva de vida."
 
 [taxonomies]

content/blog/comments.es.md

@@ -1,6 +1,7 @@
 +++
 title = "Añade comentarios a tus publicaciones con giscus o utterances"
 date = 2023-07-14
+updated = 2023-07-16
 description = "Descubre cómo habilitar una sección de comentarios en tus publicaciones usando giscus o utterances, permitiendo la interacción y feedback de los lectores."
 
 [taxonomies]
@@ -8,6 +9,7 @@ tags = ["funcionalidad", "tutorial"]
 
 [extra]
 giscus = true
+quick_navigation_buttons = true
 +++
 
 tabi actualmente soporta dos sistemas de comentarios: [giscus](https://giscus.app/es) y [utterances](https://utteranc.es/).
@@ -76,6 +78,7 @@ Alternativamente, puedes habilitar los comentarios en publicaciones concretas co
 +++
 title = "Los molinos de viento de mi vida: reflexiones de un escudero"
 date = 1605-01-16
+updated = 2023-07-16
 description = "Mi viaje junto a Don Quijote, enfrentándome a gigantes imaginarios y descubriendo las verdaderas batallas de la vida."
 
 [taxonomies]

content/blog/comments.md

@@ -1,6 +1,7 @@
 +++
 title = "Add comments to your posts with giscus or utterances"
 date = 2023-07-14
+updated = 2023-07-16
 description = "Discover how to enable a comments section on your posts using giscus or utterances, enabling reader interaction and feedback."
 
 [taxonomies]
@@ -8,6 +9,7 @@ tags = ["showcase", "tutorial"]
 
 [extra]
 giscus = true
+quick_navigation_buttons = true
 +++
 
 tabi currently supports two comment systems: [giscus](https://giscus.app/) and [utterances](https://utteranc.es/).
@@ -76,6 +78,7 @@ Alternatively, enable comments on an individual post's front matter by adding `u
 +++
 title = "Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life"
 date = 2007-04-26
+updated = 2023-07-16
 description = "Lessons learned from beet farming and paper sales."
 
 [taxonomies]

sass/main.scss

@@ -57,6 +57,7 @@
     --bg-0: #f0f0f0;
     --bg-1: #e7e7e7;
     --bg-2: #fefefe;
+    --bg-3: #d8dcdd;
     --hover-color: white;
     --primary-color: #087E96;
     --primary-color-dark: #10668b;
@@ -75,8 +76,9 @@
 [data-theme='dark'] {
     --background-color: #1f1f1f;
     --bg-0: #2f2f2f;
-    --bg-1: #4c4d4d;
+    --bg-1: #3c3c3c;
     --bg-2: #171717;
+    --bg-3: #535555;
     --hover-color: black;
     --primary-color: #91e0ee;
     --primary-color-dark: #69bace;

sass/parts/_misc.scss

@@ -148,3 +148,49 @@ a:not(.no-hover-padding):hover::before {
     border-radius: 10px;
     text-align: center;
 }
+
+#button-container {
+    position: fixed;
+    right: 2rem;
+    bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+
+    #comments-button, #top-button {
+        background-color: var(--bg-1);
+        padding: 0.4rem;
+        height: 1rem;
+        width: 1rem;
+        text-align: center;
+        border-radius: 50%;
+        border: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:hover {
+            background-color: var(--bg-3);
+
+            svg {
+                fill: var(--primary-color);
+            }
+
+            &::before {
+            background-color: transparent;
+            }
+        }
+
+        svg {
+            width: 1rem;
+            height: 1rem;
+            fill: var(--text-color);
+        }
+    }
+
+    @media (max-width: 700px) {
+        #comments-button, #top-button {
+            display: none;
+        }
+    }
+}

templates/macros/add_comments.html

@@ -1,14 +1,7 @@
-{%- macro add_comments() -%}
+{%- macro add_comments(comment_system, automatic_loading) -%}
 
-{% set giscus_enabled = config.extra.giscus.enabled_for_all_posts or page.extra.giscus %}
+<div id="comments" class="comments centered-text"
-{% set utterances_enabled = config.extra.utterances.enabled_for_all_posts or page.extra.utterances %}
+{% if comment_system == "giscus" %}
-
-{# Ensure only one comment system is enabled #}
-{% if giscus_enabled and utterances_enabled %}
-    {{ throw(message="ERROR: Multiple comment systems have been enabled for the same page. Check your config.toml and individual page settings to ensure only one comment system is activated at a time.") }}
-
-{% elif giscus_enabled %}
-    <div class="comments centered-text"
     {# Store required giscus data attributes in the div #}
     data-repo="{{ config.extra.giscus.repo }}"
     data-repo-id="{{ config.extra.giscus.repo_id }}"
@@ -36,16 +29,7 @@
     {% endif %}
     data-lazy-loading="{{ config.extra.giscus.lazy_loading | default(value=true) }}">
 
-        {% if config.extra.giscus.automatic_loading %}
+{% elif comment_system == "utterances" %}
-            <script src="{{ get_url(path='js/giscus_min.js', trailing_slash=false) | safe }}" async></script>
-        {% else %}
-            <button id="load-comments" class="load-comments-button" data-script-src="{{ get_url(path='js/giscus_min.js', trailing_slash=false) | safe }}">{%- if lang != config.default_language %} {{ trans(key="load_comments" | safe, lang=lang) }}{% else %} Load comments {%- endif -%}</button>
-            <script src="{{ get_url(path='js/loadComments_min.js', trailing_slash=false) | safe }}" async></script>
-        {% endif %}
-    </div>
-
-{% elif utterances_enabled %}
-    <div class="comments centered-text"
     {# Store required utterances data attributes in the div #}
     data-repo="{{ config.extra.utterances.repo }}"
     {% if config.extra.utterances.issue_term == "slug" %}
@@ -57,15 +41,14 @@
     data-light-theme="{{ config.extra.utterances.light_theme }}"
     data-dark-theme="{{ config.extra.utterances.dark_theme }}"
     data-lazy-loading="{{ config.extra.utterances.lazy_loading | default(value=true) }}">
-
-        {% if config.extra.utterances.automatic_loading %}
-            <script src="{{ get_url(path='js/utterances_min.js', trailing_slash=false) | safe }}" async></script>
-        {% else %}
-            <button id="load-comments" class="load-comments-button" data-script-src="{{ get_url(path='js/utterances_min.js', trailing_slash=false) | safe }}">{%- if lang != config.default_language %} {{ trans(key="load_comments" | safe, lang=lang) }}{% else %} Load comments {%- endif -%}</button>
-            <script src="{{ get_url(path='js/loadComments_min.js', trailing_slash=false) | safe }}" async></script>
 {% endif %}
 </div>
 
+{% if automatic_loading %}
+    <script src="{{ get_url(path='js/' ~ comment_system ~ '_min.js', trailing_slash=false) | safe }}" async></script>
+{% else %}
+    <button id="load-comments" class="load-comments-button" data-script-src="{{ get_url(path='js/' ~ comment_system ~ '_min.js', trailing_slash=false) | safe }}">...</button>
+    <script src="{{ get_url(path='js/loadComments_min.js', trailing_slash=false) | safe }}" async></script>
 {% endif %}
 
 {%- endmacro add_comments -%}

templates/macros/content.html

@@ -80,10 +80,39 @@
             {{ page.content | safe }}
         </section>
 
-        {# Add comments if they are enabled #}
+        {# Check if comments are enabled #}
-        {{ macros_add_comments::add_comments() }}
+        {% set giscus_enabled = config.extra.giscus.enabled_for_all_posts or page.extra.giscus %}
+        {% set utterances_enabled = config.extra.utterances.enabled_for_all_posts or page.extra.utterances %}
+
+        {# Ensure only one comment system is enabled #}
+        {% if giscus_enabled and utterances_enabled %}
+            {{ throw(message="ERROR: Multiple comment systems have been enabled for the same page. Check your config.toml and individual page settings to ensure only one comment system is activated at a time.") }}
+        {% elif giscus_enabled %}
+            {% set comment_system = "giscus" %}
+        {% elif utterances_enabled %}
+            {% set comment_system = "utterances" %}
+        {% endif %}
+
+        {% if comment_system %}
+            {% set automatic_loading = config.extra[comment_system].automatic_loading %}
+            {{ macros_add_comments::add_comments(comment_system=comment_system, automatic_loading=automatic_loading) }}
+        {% endif %}
 
     </article>
 </main>
 
+{% if config.extra.quick_navigation_buttons or page.extra.quick_navigation_buttons %}
+    <div id="button-container">
+    {% if comment_system %}
+        <a href="#comments" id="comments-button">
+            <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 %}
+
+    <a href="#" id="top-button">
+        <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 %}
+
 {% endmacro content %}