nick
/
tabi-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat: add quick navigation buttons

Browse Source
main
Óscar 2 years ago committed by GitHub
parent 54abe36d44 05a6d15455
commit 33337cf172
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 144 additions and 70 deletions
Show Stats Download Patch File Download Diff File

5
config.toml
Unescape Escape View File

@ -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]

3
content/blog/comments.ca.md
Unescape Escape View File

@ -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]

3
content/blog/comments.es.md
Unescape Escape View File

@ -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]

3
content/blog/comments.md
Unescape Escape View File

@ -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]

4
sass/main.scss
Unescape Escape View File

@ -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;

46
sass/parts/_misc.scss
Unescape Escape View File

@ -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;
}
}
}

117
templates/macros/add_comments.html
Unescape Escape View File

@ -1,71 +1,54 @@
{%- macro 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 %}
<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 }}"
data-category="{{ config.extra.giscus.category }}"
data-category-id="{{ config.extra.giscus.category_id }}"
{% if config.extra.giscus.mapping == "slug" %}
data-mapping="specific"
data-term="{{ page.slug }}"
{% else %}
data-mapping="{{ config.extra.giscus.mapping }}"
{% endif %}
data-strict="{{ config.extra.giscus.strict_title_matching }}"
data-reactions-enabled="{{ config.extra.giscus.enable_reactions }}"
{% if config.extra.giscus.comment_box_above_comments %}
data-input-position="top"
{% else %}
data-input-position="bottom"
{% endif %}
data-light-theme="{{ config.extra.giscus.light_theme }}"
data-dark-theme="{{ config.extra.giscus.dark_theme }}"
{% if config.extra.giscus.lang %}
data-lang="{{ config.extra.giscus.lang }}"
{% else %}
data-lang="{{ lang }}"
{% endif %}
data-lazy-loading="{{ config.extra.giscus.lazy_loading | default(value=true) }}">
{% if config.extra.giscus.automatic_loading %}
<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" %}
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>
{%- macro add_comments(comment_system, automatic_loading) -%}
<div id="comments" class="comments centered-text"
{% if comment_system == "giscus" %}
{# Store required giscus data attributes in the div #}
data-repo="{{ config.extra.giscus.repo }}"
data-repo-id="{{ config.extra.giscus.repo_id }}"
data-category="{{ config.extra.giscus.category }}"
data-category-id="{{ config.extra.giscus.category_id }}"
{% if config.extra.giscus.mapping == "slug" %}
data-mapping="specific"
data-term="{{ page.slug }}"
{% else %}
data-mapping="{{ config.extra.giscus.mapping }}"
{% endif %}
data-strict="{{ config.extra.giscus.strict_title_matching }}"
data-reactions-enabled="{{ config.extra.giscus.enable_reactions }}"
{% if config.extra.giscus.comment_box_above_comments %}
data-input-position="top"
{% else %}
data-input-position="bottom"
{% endif %}
data-light-theme="{{ config.extra.giscus.light_theme }}"
data-dark-theme="{{ config.extra.giscus.dark_theme }}"
{% if config.extra.giscus.lang %}
data-lang="{{ config.extra.giscus.lang }}"
{% else %}
data-lang="{{ lang }}"
{% endif %}
data-lazy-loading="{{ config.extra.giscus.lazy_loading | default(value=true) }}">
{% elif comment_system == "utterances" %}
{# 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) }}">
{% 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 -%}

33
templates/macros/content.html
Unescape Escape View File

@ -80,10 +80,39 @@
{{ page.content | safe }}
</section>
{# Add comments if they are enabled #}
{{ macros_add_comments::add_comments() }}
{# Check if comments are enabled #}
{% 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 %}

Write Preview
Loading…
Cancel
Save