Use giscus comments

LizardByte · Dec 20, 2024 · 5fda67e · 5fda67e
1 parent d249cac
commit 5fda67e
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 6 deletions.
diff --git a/_config_theme.yml b/_config_theme.yml
@@ -231,13 +231,33 @@ gtag: "G-0NFSCW63S2"  # TODO: Update this with your own Google Analytics tag ID
 # "repository" (make sure the repository is public), (2) Enable Issues in your repository,
 # (3) Install the Utterances app in your repository https://github.com/apps/utterances
 # See more details about the parameters below at https://utteranc.es/
-utterances:
+# utterances:
+#  repository: LizardByte/community  # GitHub username/repository eg. "daattali/beautiful-jekyll"
+#  issue-term: pathname  # Mapping between blog posts and GitHub issues
+#  theme: gruvbox-dark  # Utterances theme
+#  label: blog-comments  # Label that will be assigned to GitHub Issues created by Utterances
+
+# To use giscus comments:
+# (0) Uncomment the following giscus section, (1) Enable Discussions in your GitHub repository,
+# (2) Install the giscus app in your repository (details at https://giscus.app),
+# (3) Fill in *all* the parameters below
+# See more details about giscus and each of the following parameters at https://giscus.app
+giscus:
+  hostname: giscus.app  # Replace with your giscus instance's hostname if self-hosting
   repository: LizardByte/community  # GitHub username/repository eg. "daattali/beautiful-jekyll"
-  issue-term: title  # Mapping between blog posts and GitHub issues
-  theme: gruvbox-dark  # Utterances theme
-  label: blog-comments  # Label that will be assigned to GitHub Issues created by Utterances
-
-# other options for comments are staticman and giscus
+  repository-id: R_kgDOMzlnmw  # ID of your repository, retrieve this info from https://giscus.app
+  category: Announcements  # Category name of your GitHub Discussion posts
+  category-id: DIC_kwDOMzlnm84Cil5m  # ID of your category, retrieve this info from https://giscus.app
+  mapping: pathname
+  strict: 1
+  reactions-enabled: 1
+  emit-metadata: 0
+  input-position: top
+  theme: /assets/css/giscus.css
+  lang: en
+  lazy-loading: true
+
+# other options for comments are staticman
 
 ################
 # --- Misc --- #

diff --git a/_includes/giscus-comment.html b/_includes/giscus-comment.html
@@ -0,0 +1,26 @@
+{% if site.giscus.repository and site.giscus.hostname %}
+
+<script src="https://{{ site.giscus.hostname }}/client.js"
+        data-repo="{{ site.giscus.repository }}"
+        data-repo-id="{{ site.giscus.repository-id }}"
+        data-category="{{ site.giscus.category }}"
+        data-category-id="{{ site.giscus.category-id }}"
+        data-mapping="{{ site.giscus.mapping }}"
+        data-strict="{{ site.giscus.strict }}"
+        data-reactions-enabled="{{ site.giscus.reactions-enabled }}"
+        data-emit-metadata="{{ site.giscus.emit-metadata }}"
+        data-input-position="{{ site.giscus.input-position }}"
+        {% assign theme = site.giscus.theme %}
+        {% if theme | slice: 0 == '/' %}
+            {% assign theme = theme | absolute_url %}
+        {% endif %}
+        data-theme="{{ theme }}"
+        data-lang="{{ site.giscus.lang }}"
+        {% if site.giscus.lazy-loading == true %}
+            data-loading="lazy"
+        {% endif %}
+        crossorigin="anonymous"
+        async>
+</script>
+
+{% endif %}
diff --git a/assets/css/giscus.css b/assets/css/giscus.css
@@ -0,0 +1,98 @@
+/*! MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */
+main {
+    --color-prettylights-syntax-comment: #8b949e;
+    --color-prettylights-syntax-constant: #79c0ff;
+    --color-prettylights-syntax-entity: #d2a8ff;
+    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+    --color-prettylights-syntax-entity-tag: #7ee787;
+    --color-prettylights-syntax-keyword: #ff7b72;
+    --color-prettylights-syntax-string: #a5d6ff;
+    --color-prettylights-syntax-variable: #ffa657;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+    --color-prettylights-syntax-carriage-return-bg: #b62324;
+    --color-prettylights-syntax-string-regexp: #7ee787;
+    --color-prettylights-syntax-markup-list: #f2cc60;
+    --color-prettylights-syntax-markup-heading: #1f6feb;
+    --color-prettylights-syntax-markup-italic: #c9d1d9;
+    --color-prettylights-syntax-markup-bold: #c9d1d9;
+    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+    --color-prettylights-syntax-markup-deleted-bg: #67060c;
+    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+    --color-prettylights-syntax-markup-inserted-bg: #033a16;
+    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+    --color-btn-text: #c9d1d9;
+    --color-btn-bg: #21262d;
+    --color-btn-border: #f0f6fc1a;
+    --color-btn-shadow: 0 0 #0000;
+    --color-btn-inset-shadow: 0 0 #0000;
+    --color-btn-hover-bg: #30363d;
+    --color-btn-hover-border: #8b949e;
+    --color-btn-active-bg: #282e33;
+    --color-btn-active-border: #6e7681;
+    --color-btn-selected-bg: #161b22;
+    --color-btn-primary-text: #fff;
+    --color-btn-primary-bg: #238636;
+    --color-btn-primary-border: #f0f6fc1a;
+    --color-btn-primary-shadow: 0 0 #0000;
+    --color-btn-primary-inset-shadow: 0 0 #0000;
+    --color-btn-primary-hover-bg: #2ea043;
+    --color-btn-primary-hover-border: #f0f6fc1a;
+    --color-btn-primary-selected-bg: #238636;
+    --color-btn-primary-selected-shadow: 0 0 #0000;
+    --color-btn-primary-disabled-text: #ffffff80;
+    --color-btn-primary-disabled-bg: #23863699;
+    --color-btn-primary-disabled-border: #f0f6fc1a;
+    --color-action-list-item-default-hover-bg: #b1bac41f;
+    --color-segmented-control-bg: #6e76811a;
+    --color-segmented-control-button-bg: #0d1117;
+    --color-segmented-control-button-selected-border: #6e7681;
+    --color-fg-default: #e6edf3;
+    --color-fg-muted: #7d8590;
+    --color-fg-subtle: #6e7681;
+    --color-canvas-default: #242526;
+    --color-canvas-overlay: #161b22;
+    --color-canvas-inset: #151515;
+    --color-canvas-subtle: #303436;
+    --color-border-default: #30363d;
+    --color-border-muted: #21262d;
+    --color-neutral-muted: #6e768166;
+    --color-accent-fg: #2f81f7;
+    --color-accent-emphasis: #1f6feb;
+    --color-accent-muted: #388bfd66;
+    --color-accent-subtle: #388bfd1a;
+    --color-success-fg: #3fb950;
+    --color-attention-fg: #d29922;
+    --color-attention-muted: #bb800966;
+    --color-attention-subtle: #bb800926;
+    --color-danger-fg: #f85149;
+    --color-danger-muted: #f8514966;
+    --color-danger-subtle: #f851491a;
+    --color-primer-shadow-inset: 0 0 #0000;
+    --color-scale-gray-7: #21262d;
+    --color-scale-blue-8: #0c2d6b;
+
+    /*! Extensions from @primer/css/alerts/flash.scss */
+    --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+    --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8)
+}
+
+main .pagination-loader-container {
+    background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg)
+}
+
+main .gsc-loading-image {
+    background-image: url(https://github.githubassets.com/images/mona-loading-dark.gif)
+}