From 211f1000364772dd1a78f850a9c587a635c457a4 Mon Sep 17 00:00:00 2001
From: maicss <maicss@foxmail.com>
Date: Mon, 6 Nov 2023 23:01:14 +0800
Subject: [PATCH] add giscus

---
 .vitepress/config.mts             |  1 +
 .vitepress/theme/custom.css       |  7 +++
 .vitepress/theme/giscusLayout.vue | 79 +++++++++++++++++++++++++++++--
 .vitepress/theme/index.mts        |  4 +-
 package.json                      |  3 ++
 pages/pyqt/index.md               | 16 -------
 pages/pyqt/v6/index.md            |  1 +
 pnpm-lock.yaml                    | 47 ++++++++++++++++++
 8 files changed, 136 insertions(+), 22 deletions(-)
 create mode 100644 .vitepress/theme/custom.css

diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index a481c7e..0109e93 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -36,6 +36,7 @@ export default defineConfig({
     outline: {
       label: 'TOC'
     },
+    returnToTopLabel: 'returnToTopLabel',
     docFooter: {
       prev: '上一篇',
       next: '下一篇'
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
new file mode 100644
index 0000000..21e2782
--- /dev/null
+++ b/.vitepress/theme/custom.css
@@ -0,0 +1,7 @@
+* {
+    scrollbar-width: thin;
+}
+*::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
diff --git a/.vitepress/theme/giscusLayout.vue b/.vitepress/theme/giscusLayout.vue
index 7b2318f..55575f9 100644
--- a/.vitepress/theme/giscusLayout.vue
+++ b/.vitepress/theme/giscusLayout.vue
@@ -1,11 +1,27 @@
 <!-- .vitepress/theme/Layout.vue -->
 
 <script setup lang="ts">
-import { useData } from 'vitepress'
+import { useData, useRoute, useRouter } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import { nextTick, provide } from 'vue'
+import { nextTick, onMounted, ref, watch, provide } from 'vue';
+const { Layout } = DefaultTheme
+const { frontmatter, isDark } = useData()
 
-const { isDark } = useData()
+const route = useRoute()
+const router = useRouter()
+
+const NoCommentPages = ['/', '/pyqt/', '/blog/']
+const mountComment = ref(false)
+
+// const 
+onMounted(() => {
+  import('giscus');
+  handleCommentComponent()
+});
+
+const handleCommentComponent = () => {
+  mountComment.value = !NoCommentPages.includes(route.path) || frontmatter.value?.comment
+}
 
 const enableTransitions = () =>
   'startViewTransition' in document &&
@@ -39,10 +55,65 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
     }
   )
 })
+
+
+router.onAfterRouteChanged = () => {
+
+}
+// onAfterRouteChanged((to) => {
+//   console.log(1111, to)
+// })
+
+
+// onBeforeRouteChange((to) => {
+//   console.log(2222, to)
+//   return true
+// })
+
+watch(() => route.path, () => {
+  nextTick().then(() => {
+    handleCommentComponent()
+  })
+})
+
+watch([isDark], () => {
+  // console.log(1111, isDark, document.querySelector('#giscus'), document.querySelector('#giscus').getAttribute('theme'))
+  document.querySelector('#giscus').setAttribute('theme', isDark.value ? 'dark' : 'light')
+  nextTick().then(() => {
+  })
+})
+
+// todo 1, 上面俩监听是不是可以去掉一个
+// todo 2, 为啥官方的vue包装不用 v-pre
+// todo 3, 为啥官方的vue包装可以直接使用v-if
+// todo 4, 换肤，不使用重新渲染的方式试试看
 </script>
 
 <template>
-  <DefaultTheme.Layout />
+  <Layout>
+    <template #doc-bottom>
+      <div v-if="mountComment">
+        <giscus-widget
+          v-pre
+          id="giscus"
+          repo="maicss/website"
+          repoid="R_kgDOKnduBQ"
+          category="Announcements"
+          categoryid="DIC_kwDOKnduBc4Cas0c"
+          mapping="pathname"
+          term="Welcome to Maicss' site"
+          strict="0"
+          :reactionsenabled="true"
+          emitmetadata="0"
+          inputposition="top"
+          theme="light"
+          lang="zh-CN"
+        >
+        <p>Loading comments...</p>
+      </giscus-widget>
+      </div>
+    </template>
+  </Layout>
 </template>
 
 <style>
diff --git a/.vitepress/theme/index.mts b/.vitepress/theme/index.mts
index 70beb8b..5497fe5 100644
--- a/.vitepress/theme/index.mts
+++ b/.vitepress/theme/index.mts
@@ -1,12 +1,12 @@
 import DefaultTheme from 'vitepress/theme'
 import type { Theme } from 'vitepress'
-// import './custom.css'
+import './custom.css'
 import GiscusLayout from './giscusLayout.vue'
 
 export default {
     extends: DefaultTheme,
     Layout: GiscusLayout,
     enhanceApp({app}) {
-        // app.component()
+        // app.component('giscus-widget', )
     }
 } satisfies Theme
\ No newline at end of file
diff --git a/package.json b/package.json
index 203ab94..78f1dd7 100644
--- a/package.json
+++ b/package.json
@@ -16,5 +16,8 @@
         "search-insights"
       ]
     }
+  },
+  "dependencies": {
+    "giscus": "^1.3.0"
   }
 }
diff --git a/pages/pyqt/index.md b/pages/pyqt/index.md
index 0e46166..e1aa15b 100644
--- a/pages/pyqt/index.md
+++ b/pages/pyqt/index.md
@@ -13,22 +13,6 @@
         <span>PyQt6 教程</span>
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" data-rnwibasecard--161t3wu-hover="true" data-rnwi-handle="nearest" class="r-1rasi3h" style="width: 24px; height: 24px;"><path fill="currentColor" fill-rule="evenodd" d="M9.076 3.576a.6.6 0 0 1 .848 0l4 4a.6.6 0 0 1 0 .848l-4 4a.6.6 0 0 1-.848-.848L12.052 8.6H2.5a.6.6 0 0 1 0-1.2h9.552L9.076 4.424a.6.6 0 0 1 0-.848Z" clip-rule="evenodd"></path></svg>
     </a>
-<script src="https://giscus.app/client.js"
-        data-repo="maicss/website"
-        data-repo-id="R_kgDOKnduBQ"
-        data-category="Announcements"
-        data-category-id="DIC_kwDOKnduBc4Cas0c"
-        data-mapping="pathname"
-        data-strict="0"
-        data-reactions-enabled="1"
-        data-emit-metadata="0"
-        data-input-position="bottom"
-        data-theme="preferred_color_scheme"
-        data-lang="zh-CN"
-        data-loading="lazy"
-        crossorigin="anonymous"
-        async>
-</script>
 </div>
 
 <script setup>
diff --git a/pages/pyqt/v6/index.md b/pages/pyqt/v6/index.md
index b7735dd..1b8d18f 100644
--- a/pages/pyqt/v6/index.md
+++ b/pages/pyqt/v6/index.md
@@ -5,6 +5,7 @@ prev:
 next:
   text: '日期和时间'
   link: '/pyqt/v6/datetime'
+comment: true
 ---
 # 简介
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1faa82..d008ff4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+dependencies:
+  giscus:
+    specifier: ^1.3.0
+    version: 1.3.0
+
 devDependencies:
   vitepress:
     specifier: 1.0.0-rc.25
@@ -443,6 +448,16 @@ packages:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
     dev: true
 
+  /@lit-labs/ssr-dom-shim@1.1.2:
+    resolution: {integrity: sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==}
+    dev: false
+
+  /@lit/reactive-element@1.6.3:
+    resolution: {integrity: sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.2
+    dev: false
+
   /@types/chai-subset@1.3.4:
     resolution: {integrity: sha512-CCWNXrJYSUIojZ1149ksLl3AN9cmZ5djf+yUoVVV+NuYrtydItQVlL2ZDqyC6M6O9LWRnVf8yYDxbXHO2TfQZg==}
     dependencies:
@@ -474,6 +489,10 @@ packages:
       undici-types: 5.26.5
     dev: true
 
+  /@types/trusted-types@2.0.5:
+    resolution: {integrity: sha512-I3pkr8j/6tmQtKV/ZzHtuaqYSQvyjGRKH4go60Rr0IDLlFxuRT5V32uvB1mecM5G1EVAUyF/4r4QZ1GHgz+mxA==}
+    dev: false
+
   /@types/unist@2.0.9:
     resolution: {integrity: sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ==}
     dev: true
@@ -1343,6 +1362,12 @@ packages:
       hasown: 2.0.0
     dev: true
 
+  /giscus@1.3.0:
+    resolution: {integrity: sha512-A3tVLgSmpnh2sX9uGjo9MbzmTTEJirSyFUPRvkipvy37y9rhxUYDoh9kO37QVrP7Sc7QuJ+gihB6apkO0yDyTw==}
+    dependencies:
+      lit: 2.8.0
+    dev: false
+
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     dependencies:
@@ -1525,6 +1550,28 @@ packages:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
     dev: true
 
+  /lit-element@3.3.3:
+    resolution: {integrity: sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.2
+      '@lit/reactive-element': 1.6.3
+      lit-html: 2.8.0
+    dev: false
+
+  /lit-html@2.8.0:
+    resolution: {integrity: sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==}
+    dependencies:
+      '@types/trusted-types': 2.0.5
+    dev: false
+
+  /lit@2.8.0:
+    resolution: {integrity: sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==}
+    dependencies:
+      '@lit/reactive-element': 1.6.3
+      lit-element: 3.3.3
+      lit-html: 2.8.0
+    dev: false
+
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}