From 9b4af20a18d93b2edf8d96d818958c43012f3e34 Mon Sep 17 00:00:00 2001
From: Caelan Sayler <git@caesay.com>
Date: Sun, 10 Mar 2024 16:03:49 +0000
Subject: [PATCH] Add comments with Giscus

---
 docs/index.mdx                    |  4 +-
 package-lock.json                 | 67 +++++++++++++++++++++++++++++++
 package.json                      |  1 +
 src/components/Giscus.tsx         | 23 +++++++++++
 src/theme/BlogPostItem/index.js   | 22 ++++++++++
 src/theme/DocItem/Layout/index.js | 33 ++++++++++-----
 6 files changed, 139 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Giscus.tsx
 create mode 100644 src/theme/BlogPostItem/index.js

diff --git a/docs/index.mdx b/docs/index.mdx
index 96561dc..d4c78ae 100644
--- a/docs/index.mdx
+++ b/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.
 
diff --git a/package-lock.json b/package-lock.json
index cd2620b..f7b8274 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,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",
@@ -2877,6 +2878,18 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@giscus/react": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@giscus/react/-/react-3.0.0.tgz",
+      "integrity": "sha512-hgCjLpg3Wgh8VbTF5p8ZLcIHI74wvDk1VIFv12+eKhenNVUDjgwNg2B1aq/3puyHOad47u/ZSyqiMtohjy/OOA==",
+      "dependencies": {
+        "giscus": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -2974,6 +2987,19 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
+      "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0"
+      }
+    },
     "node_modules/@mdx-js/mdx": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.0.1.tgz",
@@ -4031,6 +4057,11 @@
       "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==",
       "dev": true
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
+    },
     "node_modules/@types/unist": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
@@ -7505,6 +7536,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/giscus": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/giscus/-/giscus-1.5.0.tgz",
+      "integrity": "sha512-t3LL0qbSO3JXq3uyQeKpF5CegstGfKX/0gI6eDe1cmnI7D56R7j52yLdzw4pdKrg3VnufwCgCM3FDz7G1Qr6lg==",
+      "dependencies": {
+        "lit": "^3.1.2"
+      }
+    },
     "node_modules/github-slugger": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
@@ -8983,6 +9022,34 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/lit": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.2.tgz",
+      "integrity": "sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==",
+      "dependencies": {
+        "@lit/reactive-element": "^2.0.4",
+        "lit-element": "^4.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz",
+      "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit/reactive-element": "^2.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
+      "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
diff --git a/package.json b/package.json
index de371c6..1881a09 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Giscus.tsx b/src/components/Giscus.tsx
new file mode 100644
index 0000000..8221451
--- /dev/null
+++ b/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"
+        />
+    );
+}
\ No newline at end of file
diff --git a/src/theme/BlogPostItem/index.js b/src/theme/BlogPostItem/index.js
new file mode 100644
index 0000000..20ef73f
--- /dev/null
+++ b/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 />
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/theme/DocItem/Layout/index.js b/src/theme/DocItem/Layout/index.js
index 28e4875..937d229 100644
--- a/src/theme/DocItem/Layout/index.js
+++ b/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 />