update

Author: Lexciese

package-lock.json

@@ -21,6 +21,7 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/vercel": "^8.1.3",
+    "@giscus/react": "^3.1.0",
     "@playform/compress": "^0.1.9",
     "@unocss/reset": "^65.5.0",
     "@waline/client": "^3.5.6",

package.json

@@ -7,11 +7,10 @@ const path = Astro.url.pathname
 ---
 
 <div class={cn('text-base text-sm text-muted-foreground', className)} {...props}>
-  <span class='waline-pageview-count' data-path={path}></span> views
   {
     !hideComment && (
-      <a href='#waline'>
-        | <span class='waline-comment-count' data-path={path} /> comments
+      <a href='#giscus-container'>
+        View comments
       </a>
     )
   }

packages/pure/components/pages/PageInfo.astro

@@ -52,6 +52,30 @@ export const IntegrationConfigSchema = () =>
       emoji: z.array(z.string()).optional(),
       /** Additional configurations for the Waline comment system. */
       additionalConfigs: z.record(z.string(), z.any()).default({})
+    }),
+    
+    /** The Giscus comment system */
+    giscus: z.object({
+      /** Enable the Giscus comment system. */
+      enable: z.boolean().default(false),
+      /** The GitHub repository to use for comments. */
+      repo: z.string(),
+      /** The repository ID. */
+      repoId: z.string(),
+      /** The discussion category name. */
+      category: z.string(),
+      /** The discussion category ID. */
+      categoryId: z.string(),
+      /** The mapping between the current page and GitHub discussion. */
+      mapping: z.string().default('pathname'),
+      /** Whether to enable reactions for the comments. */
+      reactionsEnabled: z.string().default('1'),
+      /** Whether the metadata should be sent to the parent window. */
+      emitMetadata: z.string().default('0'),
+      /** Where the comment box should be placed. */
+      inputPosition: z.string().default('top'),
+      /** The language Giscus should use. */
+      lang: z.string().default('en')
     })
   })
 

packages/pure/types/integrations-config.ts

@@ -0,0 +1,44 @@
+---
+import config from '../site.config'
+
+const { class: className } = Astro.props
+---
+
+{
+  config.integ.giscus.enable && (
+    <div id="giscus-container" class={className}></div>
+  )
+}
+
+<script>
+  import config from '../site.config'
+
+  // Only load if giscus is enabled
+  if (config.integ.giscus?.enable) {
+    const giscusConfig = config.integ.giscus;
+    
+    // Create script element
+    const script = document.createElement('script');
+    script.src = "https://giscus.app/client.js";
+    script.setAttribute("data-repo", giscusConfig.repo);
+    script.setAttribute("data-repo-id", giscusConfig.repoId);
+    script.setAttribute("data-category", giscusConfig.category);
+    script.setAttribute("data-category-id", giscusConfig.categoryId);
+    script.setAttribute("data-mapping", giscusConfig.mapping);
+    script.setAttribute("data-strict", "0");
+    script.setAttribute("data-reactions-enabled", giscusConfig.reactionsEnabled);
+    script.setAttribute("data-emit-metadata", giscusConfig.emitMetadata);
+    script.setAttribute("data-input-position", giscusConfig.inputPosition);
+    script.setAttribute("data-theme", document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+    script.setAttribute("data-lang", giscusConfig.lang);
+    script.setAttribute("data-loading", "lazy");
+    script.setAttribute("crossorigin", "anonymous");
+    script.async = true;
+    
+    // Add script to container
+    const container = document.getElementById('giscus-container');
+    if (container) {
+      container.appendChild(script);
+    }
+  }
+</script>

src/components/GiscusComment.astro

@@ -5,10 +5,11 @@ import type { CollectionEntry } from 'astro:content'
 // Plugin styles
 import 'katex/dist/katex.min.css'
 
-import { Comment, MediumZoom } from 'astro-pure/advanced'
+import { MediumZoom } from 'astro-pure/advanced'
 import { ArticleBottom, Copyright, Hero, TOC } from 'astro-pure/components/pages'
 import PageLayout from '@/layouts/ContentLayout.astro'
 import { integ } from '@/site-config'
+import GiscusComment from '@/components/GiscusComment.astro'
 
 interface Props {
   post: CollectionEntry<'blog'>
@@ -60,7 +61,7 @@ const primaryColor = data.heroImage?.color ?? 'hsl(var(--primary) / var(--un-tex
     {/* Article recommend */}
     <ArticleBottom collections={posts} {id} class='mt-3 sm:mt-6' />
     {/* Comment */}
-    {!isDraft && enableComment && <Comment class='mt-3 sm:mt-6' />}
+    {!isDraft && enableComment && <GiscusComment class='mt-3 sm:mt-6' />}
   </Fragment>
 
   <slot name='bottom-sidebar' slot='bottom-sidebar' />

src/layouts/BlogPost.astro

@@ -1,10 +1,10 @@
 ---
 import { Image } from 'astro:assets'
-import { Comment } from 'astro-pure/advanced'
-import { Button, Collapse, Spoiler, Timeline } from 'astro-pure/user'
+import { Spoiler, Timeline, Button, Collapse } from 'astro-pure/user'
 import PageLayout from '@/layouts/CommonPage.astro'
 import Substats from '@/components/about/Substats.astro'
 import ToolSection from '@/components/about/ToolSection.astro'
+import GiscusComment from '@/components/GiscusComment.astro'
 
 import avatar from '@/assets/avatar.png'
 import github from '@/assets/icons/social/github.svg'
@@ -147,7 +147,7 @@ const headings = [
     <li>
       Site hosting: <a href='https://github.com/Lexciese/lexciese.github.io' target='_blank'>GitHub Pages</a>
     </li>
-    <li>Comment system: <a href='https://waline.js.org' target='_blank'>Waline</a></li>
+    <li>Comment system: <a href='https://giscus.app/' target='_blank'>Giscus</a></li>
   </ul>
-  <Comment slot='bottom' />
+  <GiscusComment slot='bottom' />
 </PageLayout>

src/pages/about/index.astro

@@ -2,10 +2,10 @@
 import links from 'public/links.json'
 import config from 'virtual:config'
 
-import { Comment } from 'astro-pure/advanced'
 import { Collapse, Timeline } from 'astro-pure/user'
 import PageLayout from '@/layouts/CommonPage.astro'
 import FriendList from '@/components/links/FriendList.astro'
+import GiscusComment from '@/components/GiscusComment.astro'
 
 const headings = [
   { depth: 2, slug: 'professional', text: 'Professional' },
@@ -90,5 +90,5 @@ const linksConf = config.integ.links
     }
   </blockquote>
 
-  <Comment slot='bottom' />
+  <GiscusComment slot='bottom' />
 </PageLayout>

src/pages/links/index.astro

@@ -95,8 +95,7 @@ export const integ: IntegrationUserConfig = {
     applyTip: [
       { name: 'Name', val: theme.title },
       { name: 'Desc', val: theme.description || 'Null' },
-      { name: 'Link', val: 'https://astro-pure.js.org/' },
-      { name: 'Avatar', val: 'https://astro-pure.js.org/favicon/favicon.ico' }
+      { name: 'Link', val: 'lexciese.github.io' },
     ]
   },
   // Enable page search function
@@ -128,9 +127,14 @@ export const integ: IntegrationUserConfig = {
   },
   // Comment system
   waline: {
-    enable: true,
-    // Server service link
-    server: 'https://astro-theme-pure-waline.arthals.ink/',
+    enable: false, // Disabled - not suitable for static sites on GitHub Pages
+    // Server service link - you need to set up your own Waline server
+    // Follow the guide at https://waline.js.org/en/guide/get-started.html
+    // Quick deploy options:
+    // - Vercel: https://waline.js.org/en/guide/get-started.html#vercel-deploy
+    // - Netlify: https://waline.js.org/en/guide/get-started.html#netlify-deploy
+    // After deployment, replace this URL with your own Waline server URL
+    server: '',
     // Refer https://waline.js.org/en/guide/features/emoji.html
     emoji: ['bmoji', 'weibo'],
     // Refer https://waline.js.org/en/reference/client/props.html
@@ -144,6 +148,21 @@ export const integ: IntegrationUserConfig = {
       },
       imageUploader: false
     }
+  },
+  // Giscus comment system - uses GitHub Discussions as backend
+  // Learn more and get your settings at https://giscus.app/
+  giscus: {
+    enable: true,
+    // Fill in the following values from https://giscus.app/
+    repo: 'Lexciese/lexciese.github.io',
+    repoId: 'R_kgDOOYZ11g',
+    category: 'Q&A',
+    categoryId: 'DIC_kwDOOYZ11s4CpC8b',
+    mapping: 'pathname',
+    reactionsEnabled: '1',
+    emitMetadata: '0',
+    inputPosition: 'bottom',
+    lang: 'en'
   }
 }