Add comments with Giscus

docs/index.mdx

@@ -1,4 +1,6 @@
-
+---
+disable_comments: true
+---
 # Introduction
 Velopack is an installation and auto-update framework for cross-platform desktop applications. It's opinionated, extremely easy to use with zero config needed. With just one command you can be up and running with an installable application, and it's lightning fast for your users, too.
 

package.json

@@ -19,6 +19,7 @@
     "@docusaurus/core": "3.1.1",
     "@docusaurus/preset-classic": "3.1.1",
     "@easyops-cn/docusaurus-search-local": "^0.40.1",
+    "@giscus/react": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "lunr": "^2.3.9",

src/components/Giscus.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Giscus from "@giscus/react";
+import { useColorMode } from '@docusaurus/theme-common';
+
+export default function GiscusComponent() {
+    const { colorMode } = useColorMode();
+    return (
+        <Giscus
+            repo="velopack/velopack.docs"
+            repoId="R_kgDOLaUYhQ"
+            category="General"
+            categoryId="DIC_kwDOLaUYhc4Cd3Se"
+            mapping="pathname"
+            strict="1"
+            reactionsEnabled="0"
+            emitMetadata="1"
+            inputPosition="top"
+            theme={colorMode}
+            lang="en"
+            loading="eager"
+        />
+    );
+}

src/theme/BlogPostItem/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import BlogPostItem from '@theme-original/BlogPostItem';
+import Giscus from '@site/src/components/Giscus';
+import { useBlogPost } from '@docusaurus/theme-common/internal'
+
+export default function BlogPostItemWrapper(props) {
+  const { metadata, isBlogPostPage } = useBlogPost();
+  const { frontMatter } = metadata;
+  const { disable_comments } = frontMatter;
+
+  return (
+    <>
+      <BlogPostItem {...props} />
+      {(!disable_comments && isBlogPostPage) && (
+        <>
+          <br />
+          <Giscus />
+        </>
+      )}
+    </>
+  );
+}

src/theme/DocItem/Layout/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
-import {useWindowSize} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
+import { useWindowSize } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/theme-common/internal';
 import DocItemPaginator from '@theme/DocItem/Paginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
@@ -12,11 +12,10 @@ import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import Unlisted from '@theme/Unlisted';
 import styles from './styles.module.css';
-/**
- * Decide if the toc should be rendered, on mobile or desktop viewports
- */
+import Giscus from '@site/src/components/Giscus';
+
 function useDocTOC() {
-  const {frontMatter, toc} = useDoc();
+  const { frontMatter, toc } = useDoc();
   const windowSize = useWindowSize();
   const hidden = frontMatter.hide_table_of_contents || toc.length < 1;
   const canRender = !hidden;
@@ -31,11 +30,18 @@ function useDocTOC() {
     desktop,
   };
 }
-export default function DocItemLayout({children}) {
+
+export default function DocItemLayout({ children }) {
   const docTOC = useDocTOC();
-  const {
-    metadata: {unlisted},
-  } = useDoc();
+  const { metadata } = useDoc();
+  const { unlisted, frontMatter, slug } = metadata;
+  let { disable_comments } = frontMatter;
+
+  if (slug.includes("/reference/")) {
+    // Disable comments for all library reference pages
+    disable_comments = true;
+  }
+
   return (
     <div className="row">
       <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
@@ -47,6 +53,13 @@ export default function DocItemLayout({children}) {
             <DocVersionBadge />
             {docTOC.mobile}
             <DocItemContent>{children}</DocItemContent>
+            {(!disable_comments) && (
+              <>
+                <br />
+                <br />
+                <Giscus />
+              </>
+            )}
             <DocItemFooter />
           </article>
           <DocItemPaginator />