From 93c8b577b87aaa928a13b5696d7b3ebc91aa6cce Mon Sep 17 00:00:00 2001 From: welpo Date: Mon, 10 Jul 2023 21:42:21 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20feat:=20add=20utterances=20suppo?= =?UTF-8?q?rt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config.toml | 40 ++++++++++++++++++++++++++++++++++ sass/main.scss | 25 +++++++++++---------- sass/parts/_comments.scss | 16 ++++++++++++++ static/js/main.js | 8 +++++++ static/js/main_min.js | 2 +- templates/macros/content.html | 19 ++++++++++++++++ templates/partials/header.html | 7 ++++++ 7 files changed, 104 insertions(+), 13 deletions(-) create mode 100644 sass/parts/_comments.scss diff --git a/config.toml b/config.toml index 9827a9d..da0f719 100644 --- a/config.toml +++ b/config.toml @@ -177,3 +177,43 @@ allowed_domains = [ # This avoids a flashing text issue in Firefox. # Please see https://welpo.github.io/tabi/blog/custom-font-subset/ to learn how to create this file. custom_subset = true + +# giscus support for comments. https://giscus.app +# TODO: make sure giscus / utterances are added to the Custom security headers when enabled +# TODO: Mention this fact in the docs +[extra.giscus] +enabled_for_all_posts = false # Enables utterances on all posts. You can also do it on a post-per-post basis by setting `utterances = true` in the [extra] section of the post's front matter. +repo = "yourname/yourrepository" + + +enable_reactions = true +comment_box_above_comments = true +lazy_loading = true +light_theme = "noborder_light" +dark_theme = "noborder_dark" +# TODO: Set data-lang to page's language + +# + + + + + + +# Utterances support for comments. https://utteranc.es +[extra.utterances] +enabled_for_all_posts = false # Enables utterances on all posts. You can also do it on a post-per-post basis by setting `utterances = true` in the [extra] section of the post's front matter. +repo = "welpo/test-utterances" # https://utteranc.es/#heading-repository +issue_term = "pathname" # Available: pathname; url; title. More info: https://utteranc.es/#heading-mapping +label = "💬" # https://utteranc.es/#heading-issue-label +theme = "preferred-color-scheme" # https://utteranc.es/#heading-theme. If you use the theme switcher, it's probably best to use "preferred-color-scheme" +lazy_loading = true diff --git a/sass/main.scss b/sass/main.scss index 528e582..8a429ba 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -22,21 +22,22 @@ font-display: swap; } -@import 'parts/_archive.scss'; -@import 'parts/_cards.scss'; -@import 'parts/_code.scss'; -@import 'parts/_header.scss'; -@import 'parts/_image.scss'; -@import 'parts/_multilingual_quote.scss'; -@import 'parts/misc.scss'; -@import 'parts/table.scss'; -@import 'parts/home-banner.scss'; +@import 'parts/archive.scss'; +@import 'parts/cards.scss'; +@import 'parts/code.scss'; +@import 'parts/comments.scss'; @import 'parts/footer.scss'; -@import 'parts/theme-switch.scss'; +@import 'parts/header-anchor.scss'; +@import 'parts/header.scss'; +@import 'parts/home-banner.scss'; +@import 'parts/image.scss'; +@import 'parts/misc.scss'; +@import 'parts/multilingual_quote.scss'; +@import 'parts/pagination.scss'; @import 'parts/posts_list.scss'; +@import 'parts/table.scss'; @import 'parts/tags.scss'; -@import 'parts/pagination.scss'; -@import 'parts/_header-anchor.scss'; +@import 'parts/theme-switch.scss'; @import 'syntax/syntax-ayu-dark.scss'; :root { diff --git a/sass/parts/_comments.scss b/sass/parts/_comments.scss new file mode 100644 index 0000000..5188b40 --- /dev/null +++ b/sass/parts/_comments.scss @@ -0,0 +1,16 @@ +.utterances-frame { + min-height: 18rem; + width: 100%; +} + +.comments { + padding-top: 5vmin; + + iframe { + border: none; + width: 100%; + margin: 0; + max-width: 100%; + aspect-ratio: inherit; + } +} diff --git a/static/js/main.js b/static/js/main.js index 356c7a7..f74df37 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -10,6 +10,14 @@ function switchTheme() { currentTheme = currentTheme === "dark" ? "light" : "dark"; document.documentElement.setAttribute("data-theme", currentTheme); localStorage.setItem("theme", currentTheme); + + // Send a message to the Utterances iframe to change its theme. + document.querySelectorAll(".utterances-frame").forEach((frame) => { + frame.contentWindow.postMessage( + { type: 'set-theme', theme: `github-${currentTheme}` }, + '*' + ); + }); } // Initialize the theme switcher button. diff --git a/static/js/main_min.js b/static/js/main_min.js index 21b5b5a..d444580 100644 --- a/static/js/main_min.js +++ b/static/js/main_min.js @@ -1 +1 @@ -const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme");function switchTheme(){currentTheme="dark"===currentTheme?"light":"dark",document.documentElement.setAttribute("data-theme",currentTheme),localStorage.setItem("theme",currentTheme)}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||(currentTheme=e.matches?"dark":"light",document.documentElement.setAttribute("data-theme",currentTheme))}),currentTheme||(currentTheme=document.documentElement.getAttribute("data-theme")); +const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme");function switchTheme(){currentTheme="dark"===currentTheme?"light":"dark",document.documentElement.setAttribute("data-theme",currentTheme),localStorage.setItem("theme",currentTheme),document.querySelectorAll(".utterances-frame").forEach(e=>{e.contentWindow.postMessage({type:"set-theme",theme:`github-${currentTheme}`},"*")})}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||(currentTheme=e.matches?"dark":"light",document.documentElement.setAttribute("data-theme",currentTheme))}),currentTheme||(currentTheme=document.documentElement.getAttribute("data-theme")); diff --git a/templates/macros/content.html b/templates/macros/content.html index 159f977..d1b6598 100644 --- a/templates/macros/content.html +++ b/templates/macros/content.html @@ -81,6 +81,25 @@ + + {# giscus / utterances comments #} + {% if config.extra.giscus.enabled_for_all_posts or page.extra.giscus %} + {# TODO: HERE GOES GISCUS SUPPORT #} + {% elif config.extra.utterances.enabled_for_all_posts or page.extra.utterances %} +
+ +
+ {% endif %} {% endmacro content %} diff --git a/templates/partials/header.html b/templates/partials/header.html index 5d82c09..e484bb8 100644 --- a/templates/partials/header.html +++ b/templates/partials/header.html @@ -63,6 +63,13 @@ ; {%- for domain in config.extra.allowed_domains -%} {{ domain.directive }} {{ domain.domains | join(sep=' ') }} + + {# Automatically allow giscus/utterances, if enabled #} + {%- if domain.directive == "script-src" or domain.directive == "frame-src" or domain.directive == "style-src" -%} + {%- if config.extra.giscus.enabled_for_all_posts or page.extra.giscus %} giscus.app + {%- elif config.extra.utterances.enabled_for_all_posts or page.extra.utterances%} utteranc.es + {%- endif %} + {%- endif -%} {%- if not loop.last -%} ; {%- endif -%}