feat: add ability for the user to comment on the documentation (#254)

* feat: add ability for the user to comment on the documentation

* fix: change the repository where the discussions are created

* chore: change the env.example

docs-website/.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_COMMENTS_REPO_ID=""
+NEXT_PUBLIC_COMMENTS_CATEGORY_ID=""
+NEXT_PUBLIC_COMMENTS_APP_HOST=""

docs-website/package.json

@@ -12,6 +12,7 @@
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
     "@docsearch/react": "^3.1.1",
+    "@giscus/react": "^2.2.0",
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
     "@markdoc/markdoc": "^0.1.3",
@@ -26,6 +27,7 @@
     "focus-visible": "^5.2.0",
     "next": "12.2.0",
     "next-sitemap": "^3.1.11",
+    "next-themes": "^0.2.1",
     "plausible-tracker": "^0.3.8",
     "postcss-focus-visible": "^6.0.4",
     "postcss-import": "^14.1.0",
@@ -41,6 +43,7 @@
     "eslint": "8.19.0",
     "eslint-config-next": "12.2.0",
     "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.11"
+    "prettier-plugin-tailwindcss": "^0.1.11",
+    "typescript": "^4.8.4"
   }
 }

docs-website/src/components/Comments.tsx

@@ -0,0 +1,40 @@
+import Giscus from '@giscus/react'
+import { useTheme } from 'next-themes'
+
+const Comments = () => {
+	const { theme, systemTheme } = useTheme()
+	return (
+		<div className="my-8">
+			<Giscus
+				id="comments"
+				repo="wundergraph/wundergraph"
+				repoId={
+					process.env.NEXT_PUBLIC_COMMENTS_REPO_ID
+						? process.env.NEXT_PUBLIC_COMMENTS_REPO_ID
+						: ''
+				}
+				category="Docs"
+				categoryId={
+					process.env.NEXT_PUBLIC_COMMENTS_CATEGORY_ID
+						? process.env.NEXT_PUBLIC_COMMENTS_CATEGORY_ID
+						: ''
+				}
+				mapping="title"
+				strict="1"
+				reactionsEnabled="1"
+				emitMetadata="0"
+				inputPosition="top"
+				theme={theme !== 'system' ? theme : systemTheme}
+				lang="en"
+				loading="lazy"
+				host={
+					process.env.NEXT_PUBLIC_COMMENTS_APP_HOST
+						? process.env.NEXT_PUBLIC_COMMENTS_APP_HOST
+						: ''
+				}
+			/>
+		</div>
+	)
+}
+
+export default Comments

docs-website/src/components/Layout.jsx

@@ -12,6 +12,7 @@ import { ThemeSelector } from '@/components/ThemeSelector'
 import navigation from '../../config/navigation'
 import { GitHubIcon } from './icons/Github'
 import { DocsFooter } from './DocsFooter'
+import Comments from './Comments'
 
 function Header({ navigation }) {
 	let [isScrolled, setIsScrolled] = useState(false)
@@ -174,6 +175,7 @@ export function Layout({ children, title, tableOfContents, frontmatter }) {
 							</header>
 						)}
 						<Prose>{children}</Prose>
+						<Comments />
 					</article>
 					<dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
 						{previousPage && (

docs-website/src/components/ThemeSelector.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Listbox } from '@headlessui/react'
 import clsx from 'clsx'
+import { useTheme } from 'next-themes'
 
 const themes = [
 	{ name: 'Light', value: 'light', icon: LightIcon },
@@ -46,6 +47,7 @@ function SystemIcon(props) {
 
 export function ThemeSelector(props) {
 	let [selectedTheme, setSelectedTheme] = useState()
+	const { setTheme } = useTheme()
 
 	useEffect(() => {
 		if (selectedTheme) {
@@ -56,13 +58,15 @@ export function ThemeSelector(props) {
 					'content',
 					selectedTheme.value === 'dark' ? 'rgb(11, 15, 26)' : '#ffffff'
 				)
+			setTheme(selectedTheme.value)
 		} else {
 			setSelectedTheme(
 				themes.find(
 					(theme) =>
 						theme.value === document.documentElement.getAttribute('data-theme')
 				)
 			)
+			setTheme(document.documentElement.getAttribute('data-theme') || 'dark')
 		}
 	}, [selectedTheme])
 

docs-website/src/pages/_app.jsx

@@ -5,6 +5,7 @@ import 'focus-visible'
 import '@/styles/tailwind.css'
 import Plausible from 'plausible-tracker'
 import { useEffect } from 'react'
+import { ThemeProvider } from 'next-themes'
 
 export const plausible = Plausible({
 	domain: 'docs.wundergraph.com',
@@ -80,13 +81,15 @@ export default function App({ Component, pageProps }) {
 				<title>{pageTitle}</title>
 				{description && <meta name="description" content={description} />}
 			</Head>
-			<Layout
-				title={title}
-				tableOfContents={tableOfContents}
-				frontmatter={pageProps.markdoc?.frontmatter}
-			>
-				<Component {...pageProps} />
-			</Layout>
+			<ThemeProvider attribute="class" enableSystem>
+				<Layout
+					title={title}
+					tableOfContents={tableOfContents}
+					frontmatter={pageProps.markdoc?.frontmatter}
+				>
+					<Component {...pageProps} />
+				</Layout>
+			</ThemeProvider>
 		</>
 	)
 }