feat(comment): introduce giscus

close #4

.env.tmpl

@@ -0,0 +1,4 @@
+BASE_URL=/blog/
+# GISCUS Configs: generated from https://giscus.app/
+GISCUS_REPO_ID=
+GISCUS_CATEGORY_ID=

.github/contributing.md

@@ -9,10 +9,16 @@ The version number is stored in this file: [`.nvmrc`](../.nvmrc).
 After the corresponding [Node.js](https://nodejs.org/) is installed, run:
 
 ```sh
+# setup .env
+mv .env.tmpl .env
+# then fill out the .env
+
 # install dependencies
 npm install
+
 # start the development server
 npm run dev
+
 # build static files for deployment
 npm run build
 ```

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.env
 .vitepress/dist
 .vitepress/cache
 node_modules

.vitepress/config.theme.ts

@@ -1,7 +1,7 @@
 import type { ThemeConfig } from "./theme/types/theme-config";
 import { tokenize } from "./theme/search";
 import emailSVGString from "./theme/svgs/email";
-import { withBaseURL } from "./config.utils";
+import { giscus, withBaseURL } from "./config.utils";
 
 export default {
   outline: "deep",
@@ -81,5 +81,6 @@ export default {
   location: "Shenzhen, China",
   timezone: "Asia/Shanghai",
   pageSize: 13,
-  mdfilePatterns: ["posts/**/*.md"]
+  mdfilePatterns: ["posts/**/*.md"],
+  giscus
 } satisfies ThemeConfig;

.vitepress/config.utils.ts

@@ -1,8 +1,14 @@
+import "dotenv/config";
 import { env } from "process";
 import * as path from "path";
 
 export const BASE_URL = env.BASE_URL || undefined;
 
+export const giscus = {
+  repo_id: env.GISCUS_REPO_ID || "",
+  category_id: env.GISCUS_CATEGORY_ID || "",
+};
+
 export function withBaseURL(urlPath: string) {
   return path.join(BASE_URL || "/", urlPath);
 }

.vitepress/theme/components/Comments.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="$style.giscus">
+    <Giscus
+      v-if="giscusOptions.show"
+      repo="Octobug/blog"
+      :repo-id="giscus.repo_id"
+      category="Announcements"
+      :category-id="giscus.category_id"
+      mapping="title"
+      strict="1"
+      reactions-enabled="1"
+      emit-metadata="0"
+      input-position="top"
+      :theme="giscusOptions.theme"
+      lang="en"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Giscus from "@giscus/vue";
+import { onContentUpdated, useData } from "vitepress";
+import { ref } from "vue";
+
+const { isDark, theme } = useData();
+const { giscus } = theme.value;
+
+function getGiscusTheme() {
+  return isDark.value ? "dark" : "light";
+}
+
+const giscusOptions = ref({
+  theme: getGiscusTheme(),
+  show: false,
+});
+
+function reloadGiscus() {
+  // I cannot tolerate the color flash when switching, so I choose to reload it.
+  giscusOptions.value = {
+    theme: getGiscusTheme(),
+    show: false
+  };
+  setTimeout(() => {
+    giscusOptions.value.show = true;
+  }, 1);
+}
+
+onContentUpdated(() => {
+  reloadGiscus();
+  const observer = new MutationObserver(reloadGiscus);
+  const element = document.querySelector("button.VPSwitchAppearance");
+  if (!element) return;
+  observer.observe(element, { attributes: true });
+});
+</script>
+
+<style module scoped>
+.giscus {
+  margin-top: 1.5rem;
+  display: grid;
+  grid-row-gap: 8px;
+}
+</style>

.vitepress/theme/components/PrevNext.vue

@@ -43,7 +43,7 @@ import { findPostIndex } from "../utils";
 import type { PageControl } from "../types/page-control";
 
 const { page, theme } = useData();
-let control = ref<PageControl>({});
+const control = ref<PageControl>({});
 
 onContentUpdated(() => {
   const index = findPostIndex(allPosts, page.value);
@@ -64,7 +64,7 @@ onContentUpdated(() => {
 <style module scoped>
 .prevNext {
   border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
+  padding-top: 1.5rem;
   display: grid;
   grid-row-gap: 8px;
 }

.vitepress/theme/pages/Layout.vue

@@ -4,8 +4,8 @@
       <PostElements />
     </template>
     <template #doc-after>
-      <!-- <Comments /> -->
       <PrevNext />
+      <Comments />
     </template>
   </Layout>
 </template>
@@ -14,6 +14,7 @@
 import DefaultTheme from "vitepress/theme";
 import PostElements from "../components/PostElements.vue";
 import PrevNext from "../components/PrevNext.vue";
+import Comments from "../components/Comments.vue";
 
 const { Layout } = DefaultTheme;
 </script>

.vitepress/theme/types/theme-config.d.ts

@@ -8,4 +8,8 @@ export interface ThemeConfig extends DefaultTheme.Config {
   timezone: string,
   pageSize: number,
   mdfilePatterns: Array<string>
+  giscus: {
+    repo_id: string,
+    category_id: string
+  }
 }

README.md

@@ -22,13 +22,13 @@ This blog is powered by [VitePress](https://vitepress.dev/) with a customized th
   - [x] Location
   - [x] Reading Time
   - [x] Prev/Next (without the built-in global sidebar)
-  - [ ] Comments with Giscus
+  - [x] Comments (with [Giscus](https://github.com/giscus/giscus))
 - [ ] Posts (Archives)
 - [ ] Tags
 - [ ] Sorts (Categories)
 - [ ] Others
   - [ ] Visions (for special pages)
-  - [ ] Google Analytics
+  - [x] [Google Analytics](https://analytics.google.com/)
 
 ## Contribution
 

package.json

@@ -30,19 +30,19 @@
   },
   "homepage": "https://github.com/Octobug/blog#readme",
   "devDependencies": {
+    "@giscus/vue": "^2.3.0",
     "@types/node": "^20.8.10",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
+    "dotenv": "^16.3.1",
     "eslint": "^8.50.0",
     "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.0.2",
     "markdownlint-cli": "^0.37.0",
     "moment-timezone": "^0.5.43",
+    "reading-time": "^1.5.0",
     "typescript": "^5.2.2",
     "vitepress": "^1.0.0-rc.25"
-  },
-  "dependencies": {
-    "reading-time": "^1.5.0"
   }
 }