config/_default/params.toml

@@ -38,6 +38,20 @@ robots = [
 
 # Comments
 comments = true
+giscusCategory = "Announcements"
+giscusCategoryId = "DIC_kwDOKKEGD84CcG89"
+giscusCrossOrigin = "anonymous"
+giscusEmitMetadata = "0"
+giscusInputPosition = "bottom"
+giscusLang = "en"
+giscusLoading = "lazy"
+giscusMapping = "og:title"
+giscusReactions = "0"
+giscusRepo = "jbowdre/site-comments"
+giscusRepoId = "R_kgDOKKEGDw"
+giscusStrict = "0"
+giscusTheme = "noborder_gray"
+
 analytics = true
 kudos = true
 emailReplies = true

layouts/_default/single.html

@@ -63,6 +63,9 @@
       {{- $address := printf "blogreply.%s@%s" $path "runtimeterror.dev" }}
       <span class="post_email_reply"><a href="mailto:{{ $address }}?Subject=Re: {{ .Title }}">📧 Reply by email</a></span>
       {{- end }}
+      <br><details class="comments_widget"><summary>Comments</summary>
+      {{- partial "comments" . }}
+      </details>
     {{- end }}
     <footer class="content__footer"></footer>
 {{ end }}

layouts/partials/comments.html

@@ -0,0 +1,20 @@
+{{ if isset site.Params "giscusrepo" }}
+<div class="post_comments">
+  <script src="https://giscus.runtimeterror.dev/client.js"
+  data-repo="{{ .Site.Params.giscusRepo }}"
+  data-repo-id="{{ .Site.Params.giscusRepoId }}"
+  data-category="{{ .Site.Params.giscusCategory }}"
+  data-category-id="{{ .Site.Params.giscusCategoryId }}"
+  data-mapping="{{ .Site.Params.giscusMapping }}"
+  data-strict="{{ .Site.Params.giscusStrict }}"
+  data-reactions-enabled="{{ .Site.Params.giscusReactions }}"
+  data-emit-metadata="{{ .Site.Params.giscusEmitMetadata }}"
+  data-input-position="{{ .Site.Params.giscusInputPosition }}"
+  data-theme="{{ .Site.Params.giscusTheme }}"
+  data-lang="{{ .Site.Params.giscusLang }}"
+  data-loading="{{ .Site.Params.giscusLoading }}"
+  crossorigin="{{ .Site.Params.giscusCrossOrigin }}"
+  async>
+  </script>
+</div>
+{{ end }}

layouts/partials/footer.html

@@ -1,3 +1,4 @@
+{{- partial "lang.html" . -}}
 <p class="copyright">{{ .Site.Copyright | markdownify }}</p>
 <p class="powered_by">{"powered_by": [{{- range $i, $link :=  .Site.Params.powerLinks }}{{ if $i }}, {{ end }}&quot;<a target="_blank" href="{{ $link.url }}">{{ $link.title }}</a>&quot;{{ end }}]}
 <br>&lt;<a target="_blank" href="https://github.com/jbowdre/runtimeterror">view source</a>&gt;</p>

static/css/custom.css

@@ -391,3 +391,16 @@ a.tinylytics_webring {
 hr {
   margin-top: 1.5rem;
 }
+
+/* summary styling */
+details {
+  cursor: pointer;
+}
+
+details.comments_widget summary::before {
+  content: 'Load ';
+}
+
+details[open].comments_widget summary::before {
+  content: 'Hide ';
+}