chore: update gpts

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 yarn.lock
+dev-dist

index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
     <meta name="description" content="Discover the Best in Custom GPT at OpenAI's GPT Store – Your Adventure Begins Here!" />
     <meta name="keywords" content="ChatGPT, OpenAI, GPTs, AI, Store, Tools">
+    <meta name="google-adsense-account" content="ca-pub-5066880741262012">
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-KP12ZRYGBJ"></script>
     <script>
       window.dataLayer = window.dataLayer || [];

package.json

@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@giscus/react": "^2.3.0",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.10",
     "lodash": "^4.17.21",

src/components/Comments.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import Giscus from '@giscus/react';
+
+export default function Comments() {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    setDark(localStorage.getItem('theme') === 'dracula');
+  }, [])
+
+  useEffect(() => {
+    const targetNode = document.documentElement;
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+          console.log('data-theme attribute changed:', targetNode.getAttribute('data-theme'));
+          setDark(!isDark);
+        }
+      }
+    });
+
+    const config = { attributes: true, attributeFilter: ['data-theme'] };
+    observer.observe(targetNode, config);
+    return () => {
+      observer.disconnect();
+    };
+  }, [isDark]);
+
+  return (
+    <Giscus
+      id="comments"
+      repo="lencx/gpthub"
+      repoId="R_kgDOKrn4Tw"
+      category="Comments"
+      categoryId="DIC_kwDOF1L2fM4B-hVS"
+      mapping="pathname"
+      term="Welcome to GPTHub!"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="top"
+      theme={isDark ? 'dark_dimmed' : 'light_tritanopia'}
+      lang="en"
+      loading="lazy"
+    />
+  );
+}

src/views/GPTDetail.tsx

@@ -1,11 +1,13 @@
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import dayjs from 'dayjs';
+import Giscus from '@giscus/react';
 
 import { gptLink } from '@/utils';
 import GPTTools from '@components/GPTTools';
 import GPTPrompts from '@components/GPTPrompts';
 import GPTHubNote from '@components/GPTHubNote';
+import Comments from '@components/Comments'
 import data from '@@/gpthub.json';
 
 export default function GPTs() {
@@ -49,6 +51,9 @@ export default function GPTs() {
           rel="noopener noreferrer"
         />
       </div>
+      <div className="mt-10">
+        <Comments />
+      </div>
     </div>
   );
-}
+}

vite.config.ts

@@ -9,6 +9,11 @@ export default defineConfig({
     tsconfigPaths(),
     react(),
     splitVendorChunkPlugin(),
-    VitePWA(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      // devOptions: {
+      //   enabled: true,
+      // },
+    }),
   ],
 })