From 6cc1dd797cacf46d9e08de1ef7950075bd807f12 Mon Sep 17 00:00:00 2001 From: Maruan Date: Sun, 11 Dec 2022 19:33:09 -0800 Subject: [PATCH] Add support for giscus comments (#1028) adds support for comments on posts using https://giscus.app/ --- _config.yml | 23 +++++++++++++++- _includes/disqus.html | 13 +++++++++ _includes/giscus.html | 27 +++++++++++++++++++ _layouts/distill.html | 19 +++++-------- _layouts/post.html | 18 ++++--------- ...ments.md => 2015-10-20-disqus-comments.md} | 6 ++--- _posts/2018-12-22-distill.md | 21 ++++++++------- _posts/2022-02-01-redirect.md | 2 +- _posts/2022-12-10-giscus-comments.md | 9 +++++++ assets/js/theme.js | 23 ++++++++++++++-- 10 files changed, 118 insertions(+), 43 deletions(-) create mode 100644 _includes/disqus.html create mode 100644 _includes/giscus.html rename _posts/{2015-10-20-comments.md => 2015-10-20-disqus-comments.md} (54%) create mode 100644 _posts/2022-12-10-giscus-comments.md diff --git a/_config.yml b/_config.yml index ae72ce93bfc6..2d59de79c7f4 100644 --- a/_config.yml +++ b/_config.yml @@ -122,8 +122,29 @@ bing_site_verification: # out your bing-site-verification ID (Bing Webmaster) #pagination: # enabled: true +<<<<<<< HEAD # Comments #disqus_shortname: al-folio # put your disqus shortname +======= +# Giscus comments (RECOMMENDED) +# Follow instructions on https://giscus.app/ to setup for your repo to fill out +# the information below. +giscus: + repo: alshedivat/al-folio # / + repo_id: MDEwOlJlcG9zaXRvcnk2MDAyNDM2NQ== + category: Comments # name of the category under which discussions will be created + category_id: DIC_kwDOA5PmLc4CTBt6 + mapping: title # identify discussions by post title + strict: 1 # use strict identification mode + reactions_enabled: 1 # enable (1) or disable (0) emoji reactions + input_position: bottom # whether to display input form below (bottom) or above (top) the comments + theme: preferred_color_scheme # name of the color scheme (preferred works well with al-folio light/dark mode) + emit_metadata: 0 + lang: en + +# Disqus comments (DEPRECATED) +disqus_shortname: al-folio # put your disqus shortname +>>>>>>> b9f1fc8 (Add support for giscus comments (#1028)) # https://help.disqus.com/en/articles/1717111-what-s-a-shortname # External sources. @@ -270,7 +291,7 @@ more_authors_animation_delay: 10 # more authors are revealed on click using ani # ----------------------------------------------------------------------------- -# Jekyll Link Attributes +# Jekyll Link Attributes # ----------------------------------------------------------------------------- # These are the defaults diff --git a/_includes/disqus.html b/_includes/disqus.html new file mode 100644 index 000000000000..73fe9538d0dc --- /dev/null +++ b/_includes/disqus.html @@ -0,0 +1,13 @@ +
+ + +
diff --git a/_includes/giscus.html b/_includes/giscus.html new file mode 100644 index 000000000000..bb504f64dbb8 --- /dev/null +++ b/_includes/giscus.html @@ -0,0 +1,27 @@ +
+ + +
diff --git a/_layouts/distill.html b/_layouts/distill.html index 3528985c28f2..bc323ce8f9e5 100644 --- a/_layouts/distill.html +++ b/_layouts/distill.html @@ -98,20 +98,13 @@

Contents

- {%- if site.disqus_shortname and page.comments -%} -
- - + {%- if site.disqus_shortname and page.disqus_comments -%} + {% include disqus.html %} {%- endif %} + {%- if site.giscus.repo and page.giscus_comments -%} + {% include giscus.html %} + {%- endif -%} + diff --git a/_layouts/post.html b/_layouts/post.html index 3acc9afd7d8a..ad513ff4a599 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -43,19 +43,11 @@

{{ page.title }}

{{ content }} - {%- if site.disqus_shortname and page.comments -%} -
- - + {%- if site.disqus_shortname and page.disqus_comments -%} + {% include disqus.html %} {%- endif %} + {%- if site.giscus.repo and page.giscus_comments -%} + {% include giscus.html %} + {%- endif -%} diff --git a/_posts/2015-10-20-comments.md b/_posts/2015-10-20-disqus-comments.md similarity index 54% rename from _posts/2015-10-20-comments.md rename to _posts/2015-10-20-disqus-comments.md index 33e08010305f..3174f6ca54e9 100644 --- a/_posts/2015-10-20-comments.md +++ b/_posts/2015-10-20-disqus-comments.md @@ -1,9 +1,9 @@ --- layout: post -title: a post with comments +title: a post with disqus comments date: 2015-10-20 11:59:00-0400 -description: an example of a blog post with comments -comments: true +description: an example of a blog post with disqus comments categories: sample-posts external-services +disqus_comments: true --- This post shows how to add DISQUS comments. diff --git a/_posts/2018-12-22-distill.md b/_posts/2018-12-22-distill.md index b467407cc81e..f919d3f13efe 100644 --- a/_posts/2018-12-22-distill.md +++ b/_posts/2018-12-22-distill.md @@ -2,6 +2,7 @@ layout: distill title: a distill-style blog post description: an example of a distill-style blog post and main elements +giscus_comments: true date: 2021-05-22 authors: @@ -180,7 +181,7 @@ Strikethrough uses two tildes. ~~Scratch this.~~ 1. First ordered list item 2. Another item -⋅⋅* Unordered sub-list. +⋅⋅* Unordered sub-list. 1. Actual numbers don't matter, just that it's a number ⋅⋅1. Ordered sub-list 4. And another item. @@ -207,8 +208,8 @@ Strikethrough uses two tildes. ~~Scratch this.~~ Or leave it empty and use the [link text itself]. -URLs and URLs in angle brackets will automatically get turned into links. -http://www.example.com or and sometimes +URLs and URLs in angle brackets will automatically get turned into links. +http://www.example.com or and sometimes example.com (but not on Github, for example). Some text to show that the reference links can follow later. @@ -219,10 +220,10 @@ Some text to show that the reference links can follow later. Here's our logo (hover to see the title text): -Inline-style: +Inline-style: ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1") -Reference-style: +Reference-style: ![alt text][logo] [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2" @@ -233,14 +234,14 @@ Inline `code` has `back-ticks around` it. var s = "JavaScript syntax highlighting"; alert(s); ``` - + ```python s = "Python syntax highlighting" print s ``` - + ``` -No language indicated, so no syntax highlighting. +No language indicated, so no syntax highlighting. But let's throw in a tag. ``` @@ -253,7 +254,7 @@ Colons can be used to align columns. | zebra stripes | are neat | $1 | There must be at least 3 dashes separating each header cell. -The outer pipes (|) are optional, and you don't need to make the +The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown. Markdown | Less | Pretty @@ -266,7 +267,7 @@ Markdown | Less | Pretty Quote break. -> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. +> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. Here's a line for us to start with. diff --git a/_posts/2022-02-01-redirect.md b/_posts/2022-02-01-redirect.md index 29170d855800..8bb9f857d473 100644 --- a/_posts/2022-02-01-redirect.md +++ b/_posts/2022-02-01-redirect.md @@ -1,7 +1,7 @@ --- layout: post title: a post with redirect -date: 2021-07-04 17:39:00 +date: 2022-02-01 17:39:00 description: you can also redirect to assets like pdf redirect: /assets/pdf/example_pdf.pdf --- diff --git a/_posts/2022-12-10-giscus-comments.md b/_posts/2022-12-10-giscus-comments.md new file mode 100644 index 000000000000..01c8755fba74 --- /dev/null +++ b/_posts/2022-12-10-giscus-comments.md @@ -0,0 +1,9 @@ +--- +layout: post +title: a post with giscus comments +date: 2022-12-10 11:59:00-0400 +description: an example of a blog post with giscus comments +categories: sample-posts external-services +giscus_comments: true +--- +This post shows how to add GISCUS comments. diff --git a/assets/js/theme.js b/assets/js/theme.js index f6c9cdf715a4..8cd515105b97 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -12,6 +12,7 @@ let toggleTheme = (theme) => { let setTheme = (theme) => { transTheme(); setHighlight(theme); + setGiscusTheme(theme); if (theme) { document.documentElement.setAttribute("data-theme", theme); @@ -20,7 +21,7 @@ let setTheme = (theme) => { document.documentElement.removeAttribute("data-theme"); } localStorage.setItem("theme", theme); - + // Updates the background of medium-zoom overlay. if (typeof medium_zoom !== 'undefined') { medium_zoom.update({ @@ -30,6 +31,7 @@ let setTheme = (theme) => { } }; + let setHighlight = (theme) => { if (theme == "dark") { document.getElementById("highlight_theme_light").media = "none"; @@ -41,6 +43,23 @@ let setHighlight = (theme) => { } +let setGiscusTheme = (theme) => { + + function sendMessage(message) { + const iframe = document.querySelector('iframe.giscus-frame'); + if (!iframe) return; + iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app'); + } + + sendMessage({ + setConfig: { + theme: theme + } + }); + +} + + let transTheme = () => { document.documentElement.classList.add("transition"); window.setTimeout(() => { @@ -56,7 +75,7 @@ let initTheme = (theme) => { theme = 'dark'; } } - + setTheme(theme); }