From 05a6d15455a0ecc41f071ce03fbed5aaf16d38b5 Mon Sep 17 00:00:00 2001 From: welpo Date: Sun, 16 Jul 2023 00:50:07 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20quick=20navigation=20?= =?UTF-8?q?buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 馃拕 style(dark): change inline code background 鈾伙笍 refactor: simplify comment system logic --- config.toml | 5 ++ content/blog/comments.ca.md | 3 + content/blog/comments.es.md | 3 + content/blog/comments.md | 3 + sass/main.scss | 4 +- sass/parts/_misc.scss | 46 ++++++++++++ templates/macros/add_comments.html | 117 ++++++++++++----------------- templates/macros/content.html | 33 +++++++- 8 files changed, 144 insertions(+), 70 deletions(-) diff --git a/config.toml b/config.toml index 35c13e4..17616d9 100644 --- a/config.toml +++ b/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] diff --git a/content/blog/comments.ca.md b/content/blog/comments.ca.md index a336d9e..2da80b8 100644 --- a/content/blog/comments.ca.md +++ b/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] diff --git a/content/blog/comments.es.md b/content/blog/comments.es.md index e461d2b..332b4d8 100644 --- a/content/blog/comments.es.md +++ b/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] diff --git a/content/blog/comments.md b/content/blog/comments.md index 6473d87..9170120 100644 --- a/content/blog/comments.md +++ b/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] diff --git a/sass/main.scss b/sass/main.scss index 8a429ba..b0195bf 100644 --- a/sass/main.scss +++ b/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; diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index 964d19e..a8b491b 100644 --- a/sass/parts/_misc.scss +++ b/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; + } + } +} diff --git a/templates/macros/add_comments.html b/templates/macros/add_comments.html index 1537008..801e588 100644 --- a/templates/macros/add_comments.html +++ b/templates/macros/add_comments.html @@ -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 %} -
- - {% if config.extra.giscus.automatic_loading %} - - {% else %} - - - {% endif %} -
- -{% elif utterances_enabled %} -
- - {% if config.extra.utterances.automatic_loading %} - - {% else %} - - - {% endif %} -
+{%- macro add_comments(comment_system, automatic_loading) -%} + +
+ +{% 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 %} +
+{% if automatic_loading %} + +{% else %} + + {% endif %} {%- endmacro add_comments -%} diff --git a/templates/macros/content.html b/templates/macros/content.html index 884cea7..758b80d 100644 --- a/templates/macros/content.html +++ b/templates/macros/content.html @@ -80,10 +80,39 @@ {{ page.content | safe }} - {# 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 %} +{% if config.extra.quick_navigation_buttons or page.extra.quick_navigation_buttons %} +
+ {% if comment_system %} + + + + {% endif %} + + + + +
+{% endif %} + {% endmacro content %}