feat: add quick navigation buttons

💄 style(dark): change inline code background

♻️ refactor: simplify comment system logic
main
welpo 2 years ago
parent 6c8d5c750f
commit 05a6d15455
No known key found for this signature in database
GPG Key ID: A2F978CF4EC1F5A6

@ -180,6 +180,11 @@ allowed_domains = [
# Please see https://welpo.github.io/tabi/blog/custom-font-subset/ to learn how to create this file. # Please see https://welpo.github.io/tabi/blog/custom-font-subset/ to learn how to create this file.
custom_subset = true 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 # giscus support for comments. https://giscus.app
# Setup instructions: https://welpo.github.io/tabi/blog/comments/#setup # Setup instructions: https://welpo.github.io/tabi/blog/comments/#setup
[extra.giscus] [extra.giscus]

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

@ -1,6 +1,7 @@
+++ +++
title = "Añade comentarios a tus publicaciones con giscus o utterances" title = "Añade comentarios a tus publicaciones con giscus o utterances"
date = 2023-07-14 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." 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] [taxonomies]
@ -8,6 +9,7 @@ tags = ["funcionalidad", "tutorial"]
[extra] [extra]
giscus = true giscus = true
quick_navigation_buttons = true
+++ +++
tabi actualmente soporta dos sistemas de comentarios: [giscus](https://giscus.app/es) y [utterances](https://utteranc.es/). 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" title = "Los molinos de viento de mi vida: reflexiones de un escudero"
date = 1605-01-16 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." description = "Mi viaje junto a Don Quijote, enfrentándome a gigantes imaginarios y descubriendo las verdaderas batallas de la vida."
[taxonomies] [taxonomies]

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

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

@ -148,3 +148,49 @@ a:not(.no-hover-padding):hover::before {
border-radius: 10px; border-radius: 10px;
text-align: center; 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;
}
}
}

@ -1,71 +1,54 @@
{%- 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" %}
{# Store required giscus data attributes in the div #}
{# Ensure only one comment system is enabled #} data-repo="{{ config.extra.giscus.repo }}"
{% if giscus_enabled and utterances_enabled %} data-repo-id="{{ config.extra.giscus.repo_id }}"
{{ 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.") }} data-category="{{ config.extra.giscus.category }}"
data-category-id="{{ config.extra.giscus.category_id }}"
{% elif giscus_enabled %} {% if config.extra.giscus.mapping == "slug" %}
<div class="comments centered-text" data-mapping="specific"
{# Store required giscus data attributes in the div #} data-term="{{ page.slug }}"
data-repo="{{ config.extra.giscus.repo }}" {% else %}
data-repo-id="{{ config.extra.giscus.repo_id }}" data-mapping="{{ config.extra.giscus.mapping }}"
data-category="{{ config.extra.giscus.category }}" {% endif %}
data-category-id="{{ config.extra.giscus.category_id }}" data-strict="{{ config.extra.giscus.strict_title_matching }}"
{% if config.extra.giscus.mapping == "slug" %} data-reactions-enabled="{{ config.extra.giscus.enable_reactions }}"
data-mapping="specific" {% if config.extra.giscus.comment_box_above_comments %}
data-term="{{ page.slug }}" data-input-position="top"
{% else %} {% else %}
data-mapping="{{ config.extra.giscus.mapping }}" data-input-position="bottom"
{% endif %} {% endif %}
data-strict="{{ config.extra.giscus.strict_title_matching }}" data-light-theme="{{ config.extra.giscus.light_theme }}"
data-reactions-enabled="{{ config.extra.giscus.enable_reactions }}" data-dark-theme="{{ config.extra.giscus.dark_theme }}"
{% if config.extra.giscus.comment_box_above_comments %} {% if config.extra.giscus.lang %}
data-input-position="top" data-lang="{{ config.extra.giscus.lang }}"
{% else %} {% else %}
data-input-position="bottom" data-lang="{{ lang }}"
{% endif %} {% endif %}
data-light-theme="{{ config.extra.giscus.light_theme }}" data-lazy-loading="{{ config.extra.giscus.lazy_loading | default(value=true) }}">
data-dark-theme="{{ config.extra.giscus.dark_theme }}"
{% if config.extra.giscus.lang %} {% elif comment_system == "utterances" %}
data-lang="{{ config.extra.giscus.lang }}" {# Store required utterances data attributes in the div #}
{% else %} data-repo="{{ config.extra.utterances.repo }}"
data-lang="{{ lang }}" {% if config.extra.utterances.issue_term == "slug" %}
{% endif %} data-issue-term="{{ page.slug }}"
data-lazy-loading="{{ config.extra.giscus.lazy_loading | default(value=true) }}"> {% else %}
data-issue-term="{{ config.extra.utterances.issue_term }}"
{% if config.extra.giscus.automatic_loading %} {% endif %}
<script src="{{ get_url(path='js/giscus_min.js', trailing_slash=false) | safe }}" async></script> data-label="{{ config.extra.utterances.label }}"
{% else %} data-light-theme="{{ config.extra.utterances.light_theme }}"
<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> data-dark-theme="{{ config.extra.utterances.dark_theme }}"
<script src="{{ get_url(path='js/loadComments_min.js', trailing_slash=false) | safe }}" async></script> data-lazy-loading="{{ config.extra.utterances.lazy_loading | default(value=true) }}">
{% endif %} {% endif %}
</div> </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" %}
data-issue-term="{{ page.slug }}"
{% else %}
data-issue-term="{{ config.extra.utterances.issue_term }}"
{% endif %}
data-label="{{ config.extra.utterances.label }}"
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 %} {% endif %}
{%- endmacro add_comments -%} {%- endmacro add_comments -%}

@ -80,10 +80,39 @@
{{ page.content | safe }} {{ page.content | safe }}
</section> </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> </article>
</main> </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 %} {% endmacro content %}

Loading…
Cancel
Save