Add blog comments

website/blog/2025-10-28-example.md → website/blog/2025-10-28-welcome.md

@@ -1,8 +1,9 @@
 ---
-slug: 2025-10-28-example
+slug: 2025-10-28-welcome
 title: Hello Compose World!
 authors: [mn]
 tags: [hello]
+enableComments: false
 ---
 
 Welcome to the blog

website/blog/authors.yml

@@ -1,33 +1,10 @@
-yangshun:
-  name: Yangshun Tay
-  title: Ex-Meta Staff Engineer, Co-founder GreatFrontEnd
-  url: https://linkedin.com/in/yangshun
-  image_url: https://github.com/yangshun.png
-  page: true
-  socials:
-    x: yangshunz
-    linkedin: yangshun
-    github: yangshun
-    newsletter: https://www.greatfrontend.com
-
-slorber:
-  name: Sébastien Lorber
-  title: Docusaurus maintainer
-  url: https://sebastienlorber.com
-  image_url: https://github.com/slorber.png
-  page:
-    # customize the url of the author page at /blog/authors/<permalink>
-    permalink: '/all-sebastien-lorber-articles'
-  socials:
-    x: sebastienlorber
-    linkedin: sebastienlorber
-    github: slorber
-    newsletter: https://thisweekinreact.com
-
 mn:
   name: MN
   title: Maintainer @ Compose
   image_url: https://github.com/maxnorm.png
+  socials:
+    x: mnnnnnnnn355
+    github: maxnorm
 
 mudgen:
   name: Nick Mudge

website/docusaurus.config.js

@@ -262,6 +262,23 @@ const config = {
           contextualSearch: true,
         },
       }),
+      // Giscus commenting system configuration
+      // See here for more information: https://github.com/giscus/giscus
+      ...(process.env.GISCUS_REPO && process.env.GISCUS_REPO_ID && process.env.GISCUS_CATEGORY_ID && {
+        giscus: {
+          repo: process.env.GISCUS_REPO,
+          repoId: process.env.GISCUS_REPO_ID,
+          category: process.env.GISCUS_CATEGORY || 'Blog',
+          categoryId: process.env.GISCUS_CATEGORY_ID,
+          mapping: process.env.GISCUS_MAPPING || 'pathname',
+          strict: process.env.GISCUS_STRICT || '0',
+          reactionsEnabled: process.env.GISCUS_REACTIONS_ENABLED || '1',
+          emitMetadata: process.env.GISCUS_EMIT_METADATA || '0',
+          inputPosition: process.env.GISCUS_INPUT_POSITION || 'top',
+          lang: process.env.GISCUS_LANG || 'en',
+          loading: process.env.GISCUS_LOADING || 'lazy'
+        },
+      }),
     }),
   plugins: [
     process.env.POSTHOG_API_KEY && [

website/package.json

@@ -17,6 +17,7 @@
     "@docusaurus/core": "3.9.2",
     "@docusaurus/preset-classic": "3.9.2",
     "@docusaurus/theme-mermaid": "^3.9.2",
+    "@giscus/react": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "dotenv": "^17.2.3",

website/src/components/Giscus/GiscusComponent.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import Giscus from "@giscus/react";
+import { useColorMode } from '@docusaurus/theme-common';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styles from './styles.module.css';
+
+/**
+ * Giscus comment component for blog posts
+ * 
+ * Configuration is read from themeConfig.giscus in docusaurus.config.js
+ * The component automatically adapts to the current Docusaurus theme (light/dark mode)
+ * by using Giscus's built-in themes.
+ * 
+ * Quick setup: Visit https://giscus.app/ to get your configuration values.
+ * See GISCUS_SETUP.md for detailed instructions.
+ */
+export default function GiscusComponent() {
+  const { colorMode } = useColorMode();
+  const { siteConfig } = useDocusaurusContext();
+
+  const giscusConfig = siteConfig.themeConfig?.giscus;
+
+  if (!giscusConfig) {
+    console.warn(
+      'Giscus configuration is missing from themeConfig. ' +
+      'Please ensure giscus config is set in docusaurus.config.js'
+    );
+    return null;
+  }
+
+  const {
+    repo,
+    repoId,
+    category = 'Blog',
+    categoryId,
+    mapping = 'pathname',
+    strict = '0',
+    reactionsEnabled = '1',
+    emitMetadata = '0',
+    inputPosition = 'top',
+    theme: themeConfig,
+    lightTheme = 'light', // Configurable light theme
+    darkTheme = 'dark',   // Configurable dark theme
+    lang = 'en',
+    loading = 'lazy',
+    ...restConfig
+  } = giscusConfig;
+
+
+  // Determine theme based on color mode and configuration
+  const theme = colorMode === 'dark' ? darkTheme : lightTheme;
+
+  return (
+    <div className={styles.commentsSection}>
+      <h2 className={`${styles.commentsHeading} anchor`} id="comments">
+        Comments
+      </h2>
+      <Giscus
+        key={`giscus-${colorMode}`}
+        repo={repo}
+        repoId={repoId}
+        category={category}
+        categoryId={categoryId}
+        mapping={mapping}
+        strict={strict}
+        reactionsEnabled={reactionsEnabled}
+        emitMetadata={emitMetadata}
+        inputPosition={inputPosition}
+        theme={theme}
+        lang={lang}
+        loading={loading}
+        crossorigin="anonymous"
+        async
+        {...restConfig}
+      />
+    </div>
+  );
+}

website/src/components/Giscus/index.js

@@ -0,0 +1 @@
+export { default } from './GiscusComponent';