feat: implement giscus comment

astro.config.ts

@@ -79,4 +79,12 @@ export default defineConfig({
   devToolbar: {
     enabled: false,
   },
+  server: {
+    headers: {
+      "Access-Control-Allow-Origin": "https://giscus.app"
+    }
+  },
+  security: {
+    checkOrigin: true,
+  }
 })

public/css/giscus_dark.css

@@ -0,0 +1,125 @@
+/*! Modified from GitHub's dark theme in primer/primitives.
+ * 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: rgb(45 51 59 / 80%);
+    --color-btn-border: rgb(240 246 252 / 10%);
+    --color-btn-shadow: 0 0 transparent;
+    --color-btn-inset-shadow: 0 0 transparent;
+    --color-btn-hover-bg: rgb(45 51 59 / 50%);
+    --color-btn-hover-border: #8b949e;
+    --color-btn-active-bg: hsl(212deg 12% 18% / 50%);
+    --color-btn-active-border: #6e7681;
+    --color-btn-selected-bg: rgb(45 51 59 / 50%);
+    --color-btn-primary-text: #fff;
+    --color-btn-primary-bg: #238636;
+    --color-btn-primary-border: rgb(240 246 252 / 10%);
+    --color-btn-primary-shadow: 0 0 transparent;
+    --color-btn-primary-inset-shadow: 0 0 transparent;
+    --color-btn-primary-hover-bg: #2ea043;
+    --color-btn-primary-hover-border: rgb(240 246 252 / 10%);
+    --color-btn-primary-selected-bg: #238636;
+    --color-btn-primary-selected-shadow: 0 0 transparent;
+    --color-btn-primary-disabled-text: rgb(240 246 252 / 50%);
+    --color-btn-primary-disabled-bg: rgb(35 134 54 / 60%);
+    --color-btn-primary-disabled-border: rgb(240 246 252 / 10%);
+    --color-action-list-item-default-hover-bg: rgb(144 157 171 / 12%);
+    --color-segmented-control-bg: rgb(99 110 123 / 10%);
+    --color-segmented-control-button-bg: transparent;
+    --color-segmented-control-button-selected-border: #636e7b;
+    --color-fg-default: #c9d1d9;
+    --color-fg-muted: #8b949e;
+    --color-fg-subtle: #484f58;
+    --color-canvas-default: transparent;
+    --color-canvas-overlay: rgb(22 27 34 / 90%);
+    --color-canvas-inset: transparent;
+    --color-canvas-subtle: transparent;
+    --color-border-default: #30363d;
+    --color-border-muted: #21262d;
+    --color-neutral-muted: rgb(110 118 129 / 5%);
+    --color-neutral-subtle: rgb(110 118 129 / 10%);
+    --color-accent-fg: #58a6ff;
+    --color-accent-emphasis: #1f6feb;
+    --color-accent-muted: rgb(56 139 253 / 40%);
+    --color-accent-subtle: rgb(65 132 228 / 10%);
+    --color-success-fg: #3fb950;
+    --color-attention-fg: #c69026;
+    --color-attention-muted: rgb(174 124 20 / 40%);
+    --color-attention-subtle: rgb(174 124 20 / 15%);
+    --color-danger-fg: #f85149;
+    --color-danger-muted: rgb(229 83 75 / 40%);
+    --color-danger-subtle: rgb(229 83 75 / 10%);
+    --color-primer-shadow-inset: 0 0 transparent;
+    --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");
+}
+
+.gsc-pagination-button {
+    background-color: var(--color-btn-bg);
+}
+
+.gsc-homepage-bg {
+    background: linear-gradient(135deg, #05485c, #032e58, #2f0154);
+    background-size: 600% 600%;
+    animation: gradient 21s ease infinite;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 2% 0%;
+    }
+
+    50% {
+        background-position: 99% 100%;
+    }
+
+    100% {
+        background-position: 2% 0%;
+    }
+}
+
+main .gsc-loading-image {
+    background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
+}

public/css/giscus_light.css

@@ -0,0 +1,94 @@
+main {
+    --color-prettylights-syntax-comment: #6e7781;
+    --color-prettylights-syntax-constant: #0550ae;
+    --color-prettylights-syntax-entity: #8250df;
+    --color-prettylights-syntax-storage-modifier-import: #24292f;
+    --color-prettylights-syntax-entity-tag: #116329;
+    --color-prettylights-syntax-keyword: #cf222e;
+    --color-prettylights-syntax-string: #0a3069;
+    --color-prettylights-syntax-variable: #953800;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+    --color-prettylights-syntax-carriage-return-bg: #cf222e;
+    --color-prettylights-syntax-string-regexp: #116329;
+    --color-prettylights-syntax-markup-list: #3b2300;
+    --color-prettylights-syntax-markup-heading: #0550ae;
+    --color-prettylights-syntax-markup-italic: #24292f;
+    --color-prettylights-syntax-markup-bold: #24292f;
+    --color-prettylights-syntax-markup-deleted-text: #82071e;
+    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+    --color-prettylights-syntax-markup-inserted-text: #116329;
+    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+    --color-prettylights-syntax-markup-changed-text: #953800;
+    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+    --color-prettylights-syntax-meta-diff-range: #8250df;
+    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+    --color-btn-text: #24292f;
+    --color-btn-bg: #f6f8fa;
+    --color-btn-border: rgb(31 35 40 / 15%);
+    --color-btn-shadow: 0 1px 0 rgb(31 35 40 / 4%);
+    --color-btn-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
+    --color-btn-hover-bg: #f3f4f6;
+    --color-btn-hover-border: rgb(31 35 40 / 15%);
+    --color-btn-active-bg: hsl(220deg 14% 93% / 100%);
+    --color-btn-active-border: rgb(31 35 40 / 15%);
+    --color-btn-selected-bg: hsl(220deg 14% 94% / 100%);
+    --color-btn-primary-text: #fff;
+    --color-btn-primary-bg: #1f883d;
+    --color-btn-primary-border: rgb(31 35 40 / 15%);
+    --color-btn-primary-shadow: 0 1px 0 rgb(31 35 40 / 10%);
+    --color-btn-primary-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
+    --color-btn-primary-hover-bg: #1a7f37;
+    --color-btn-primary-hover-border: rgb(31 35 40 / 15%);
+    --color-btn-primary-selected-bg: hsl(137deg 66% 28% / 100%);
+    --color-btn-primary-selected-shadow: inset 0 1px 0 rgb(0 45 17 / 20%);
+    --color-btn-primary-disabled-text: rgb(255 255 255 / 80%);
+    --color-btn-primary-disabled-bg: #94d3a2;
+    --color-btn-primary-disabled-border: rgb(31 35 40 / 15%);
+    --color-action-list-item-default-hover-bg: rgb(208 215 222 / 32%);
+    --color-segmented-control-bg: #eaeef2;
+    --color-segmented-control-button-bg: transparent;
+    --color-segmented-control-button-selected-border: #8c959f;
+    --color-fg-default: #1F2328;
+    --color-fg-muted: #656d76;
+    --color-fg-subtle: #6e7781;
+    --color-canvas-default: transparent;
+    --color-canvas-overlay: #fff;
+    --color-canvas-inset: transparent;
+    --color-canvas-subtle: transparent;
+    --color-border-default: #d0d7de;
+    --color-border-muted: hsl(210deg 18% 87% / 100%);
+    --color-neutral-muted: rgb(175 184 193 / 20%);
+    --color-accent-fg: #0969da;
+    --color-accent-emphasis: #0969da;
+    --color-accent-muted: rgb(84 174 255 / 40%);
+    --color-accent-subtle: #ddf4ff;
+    --color-success-fg: #1a7f37;
+    --color-attention-fg: #9a6700;
+    --color-attention-muted: rgb(212 167 44 / 40%);
+    --color-attention-subtle: #fff8c5;
+    --color-danger-fg: #d1242f;
+    --color-danger-muted: rgb(255 129 130 / 40%);
+    --color-danger-subtle: #ffebe9;
+    --color-primer-shadow-inset: inset 0 1px 0 rgb(208 215 222 / 20%);
+    --color-scale-gray-1: #eaeef2;
+    --color-scale-blue-1: #b6e3ff;
+
+    /*! Extensions from @primer/css/alerts/flash.scss */
+    --color-social-reaction-bg-hover: var(--color-scale-gray-1);
+    --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
+}
+
+main .pagination-loader-container {
+    background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
+}
+
+main .gsc-loading-image {
+    background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
+}

src/components/Comments/Giscus.astro

@@ -0,0 +1,78 @@
+---
+import { themeConfig } from "@/config";
+
+const {
+  repo = "",
+  repoID = "",
+  category = "",
+  categoryID = "",
+  mapping = "pathname",
+  inputPosition = "top",
+  lang = "zh-CN",
+  loading = "lazy",
+} = themeConfig.comment?.giscus ?? {};
+---
+
+<div class="giscus mt-16" id="giscus-container"></div>
+
+<script
+  is:inline
+  define:vars={{
+    repo,
+    repoID,
+    category,
+    categoryID,
+    mapping,
+    inputPosition,
+    lang,
+    loading,
+  }}
+>
+  const host = window.location.origin;
+
+  function loadGiscus() {
+    const existingScript = document.querySelector("script[src*='giscus.app']");
+    if (existingScript) {
+      existingScript.remove();
+    }
+    const giscusContainer = document.getElementById("giscus-container");
+    if (giscusContainer) giscusContainer.innerHTML = "";
+    // 创建新脚本
+    const theme = document.documentElement.classList.contains("dark")
+      ? host + "/css/giscus_dark.css"
+      : host + "/css/giscus_light.css";
+    const script = document.createElement("script");
+    script.src = "https://giscus.app/client.js";
+    script.setAttribute("data-repo", repo);
+    script.setAttribute("data-repo-id", repoID);
+    script.setAttribute("data-category", category);
+    script.setAttribute("data-category-id", categoryID);
+    script.setAttribute("data-mapping", mapping);
+    script.setAttribute("data-strict", "0");
+    script.setAttribute("data-reactions-enabled", "1");
+    script.setAttribute("data-theme", theme);
+    script.setAttribute("data-emit-metadata", "0");
+    script.setAttribute("data-input-position", inputPosition);
+    script.setAttribute("data-lang", lang);
+    script.setAttribute("data-loading", loading);
+    script.crossOrigin = "anonymous";
+    script.async = true;
+    giscusContainer.appendChild(script);
+  }
+
+  function changeGiscusTheme() {
+    const iframe = document.querySelector("iframe.giscus-frame");
+    if (!iframe) return;
+    const theme = document.documentElement.classList.contains("dark")
+      ? host + "/css/giscus_dark.css"
+      : host + "/css/giscus_light.css";
+    iframe.contentWindow.postMessage(
+      { giscus: { setConfig: { theme } } },
+      "https://giscus.app",
+    );
+  }
+
+  document.addEventListener("DOMContentLoaded", loadGiscus);
+  document.addEventListener("theme-changed", changeGiscusTheme);
+  document.addEventListener("astro:page-load", loadGiscus);
+</script>

src/components/Comments/index.astro

@@ -1,6 +1,6 @@
 ---
 // import Disqus from '@/components/Comments/Disqus.astro'
-// import Giscus from '@/components/Comments/Giscus.astro'
+import Giscus from '@/components/Comments/Giscus.astro'
 // import Twikoo from '@/components/Comments/Twikoo.astro'
 import Waline from '@/components/Comments/Waline.astro'
 import { themeConfig } from '@/config'
@@ -9,22 +9,22 @@ const enableComments = themeConfig.comment?.enabled ?? false
 
 // Disqus
 // const disqusShortname = themeConfig.comment?.disqus?.shortname || ''
-// const showDisqus = enableComments && disqusShortname.trim() !== ''
+// const showDisqus = enableComments && themeConfig.comment.provider == 'disqus' && disqusShortname.trim() !== ''
 
-// Giscus
+Giscus
-// const giscusRepo = themeConfig.comment?.giscus?.repo || ''
+const giscusRepo = themeConfig.comment?.giscus?.repo || ''
-// const showGiscus = enableComments && giscusRepo.trim() !== ''
+const showGiscus = enableComments && themeConfig.comment.provider == 'giscus' && giscusRepo.trim() !== ''
 
 // Twikoo
 // const twikooEnvId = themeConfig.comment?.twikoo?.envId || ''
-// const showTwikoo = enableComments && twikooEnvId.trim() !== ''
+// const showTwikoo = enableComments && themeConfig.comment.provider == 'twikoo' && twikooEnvId.trim() !== ''
 
 // Waline
 const walineURL = themeConfig.comment?.waline?.serverURL || ''
-const showWaline = enableComments && walineURL.trim() !== ''
+const showWaline = enableComments && themeConfig.comment.provider == 'waline' && walineURL.trim() !== ''
 ---
 
 <!-- {showDisqus && <Disqus />} -->
-<!-- {showGiscus && <Giscus />} -->
+{showGiscus && <Giscus />}
 <!-- {showTwikoo && <Twikoo />} -->
 {showWaline && <Waline />}

src/config.ts

@@ -72,6 +72,7 @@ export const themeConfig: ThemeConfig = {
   comment: {
     // enable comment system
     enabled: true, // true, false
+    provider: 'giscus', // giscus, waline
     // waline comment system
     // https://waline.js.org/en/
     waline: {
@@ -89,6 +90,16 @@ export const themeConfig: ThemeConfig = {
       // bug: unable to hide image uploader icon
       imageUploader: false, // true, false
     },
+    giscus: {
+      repo: "senshinya/blog",
+      repoID: "R_kgDOLAV3QQ",
+      category: "Announcements",
+      categoryID: "DIC_kwDOLAV3Qc4CcKlC",
+      mapping: "pathname",
+      inputPosition: "top",
+      lang: "zh-CN",
+      loading: "lazy",
+    }
   },
   // COMMENT SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 

src/types/index.d.ts

@@ -39,11 +39,22 @@ export interface ThemeConfig {
 
   comment: {
     enabled: boolean
+    provider?: 'waline' | 'giscus'
     waline?: {
       serverURL?: string
       emoji?: string[]
       search?: boolean
       imageUploader?: boolean
+    },
+    giscus?: {
+      repo: string
+      repoID: string
+      category: string
+      categoryID: string
+      mapping: 'pathname' | 'url' | 'title'
+      inputPosition: 'top' | 'bottom'
+      lang: Exclude<typeof supportedLangs[number], 'zh-CN'>,
+      loading: 'lazy' | 'embed'
     }
   }
 

uno.config.ts

@@ -1,10 +1,10 @@
-import type { Theme } from 'unocss/preset-uno'
 import {
   defineConfig,
   presetAttributify,
   presetWind3,
   transformerDirectives,
   transformerVariantGroup,
+  type Preset,
 } from 'unocss'
 import presetTheme from 'unocss-preset-theme'
 import { themeConfig } from './src/config.ts'
@@ -15,13 +15,13 @@ export default defineConfig({
   presets: [
     presetWind3(),
     presetAttributify(),
-    presetTheme<Theme>({
+    presetTheme({
       theme: {
         dark: {
           colors: dark,
         },
       },
-    }),
+    }) as Preset<object>,
   ],
   theme: {
     colors: light,