From 7464d1607ea462cbfdd989b40eea305993e199b3 Mon Sep 17 00:00:00 2001
From: Nick Seagull <nick@booster.cloud>
Date: Thu, 25 Jan 2024 17:03:53 +0000
Subject: [PATCH] docs: Add comments for proposal section (#1517)

* Add utterances

* Update repo
---
 website/docusaurus.config.js                 |  2 +-
 website/src/components/Utterance.tsx         | 24 +++++++++
 website/src/custom.css                       |  4 ++
 website/src/hooks/useUtterance.tsx           | 52 ++++++++++++++++++++
 website/src/theme/BlogPostPaginator/index.js | 12 +++++
 5 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 website/src/components/Utterance.tsx
 create mode 100644 website/src/hooks/useUtterance.tsx
 create mode 100644 website/src/theme/BlogPostPaginator/index.js

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 2daf71ac0..6a92b582f 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -8,7 +8,7 @@ const lightCodeTheme = themes.palenight
 const config = {
   title: 'Booster Framework',
   staticDirectories: ['static'],
-  url: 'https://boosterframework.com',
+  url: 'https://docs.boosterframework.com',
   baseUrl: '/',
   onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',
diff --git a/website/src/components/Utterance.tsx b/website/src/components/Utterance.tsx
new file mode 100644
index 000000000..f2fffdc4b
--- /dev/null
+++ b/website/src/components/Utterance.tsx
@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react'
+// import { useColorMode } from "@docusaurus/theme-common";
+
+import useUtterance from '../hooks/useUtterance'
+
+export type Props = React.HTMLAttributes<HTMLDivElement>
+
+export default function Utterance(props: Props) {
+  // const { colorMode } = useColorMode();
+  const colorMode = 'light'
+  const options = useMemo(
+    () =>
+      ({
+        repo: 'boostercloud/docs-discussion',
+        theme: `github-${colorMode}`,
+        label: 'comment-section',
+      } as const),
+    [colorMode]
+  )
+
+  const { anchor } = useUtterance<HTMLDivElement>(options)
+
+  return <div ref={anchor} {...props} />
+}
diff --git a/website/src/custom.css b/website/src/custom.css
index 00bb4eeed..1a2aff9dc 100644
--- a/website/src/custom.css
+++ b/website/src/custom.css
@@ -243,4 +243,8 @@ svg {
   .navbar_custom_item--button {
     margin-right: 3rem
   }
+}
+
+.utterances {
+  max-width: 100%;
 }
\ No newline at end of file
diff --git a/website/src/hooks/useUtterance.tsx b/website/src/hooks/useUtterance.tsx
new file mode 100644
index 000000000..e4e06ea54
--- /dev/null
+++ b/website/src/hooks/useUtterance.tsx
@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react'
+
+export type Params = {
+  repo: string
+  theme:
+    | 'github-light'
+    | 'github-dark'
+    | 'preferred-color-scheme'
+    | 'github-dark-orange'
+    | 'icy-dark'
+    | 'dark-blue'
+    | 'photon-dark'
+    | 'boxy-light'
+    | 'gruvbox-dark'
+  label?: string
+  'issue-term'?: 'pathname' | 'url' | 'title' | 'og:title'
+  'issue-number'?: string
+}
+
+export default function useUtterance<T extends HTMLElement>(params?: Params) {
+  const anchor = useRef<T>(null)
+
+  useEffect(() => {
+    while (anchor.current.firstChild) {
+      anchor.current.removeChild(anchor.current.firstChild)
+    }
+
+    anchor.current.appendChild(createUtteranceScript(params))
+  }, [params])
+
+  return { anchor }
+}
+
+function createUtteranceScript(option?: Record<string, unknown>) {
+  const script = document.createElement('script')
+
+  script.src = 'https://utteranc.es/client.js'
+  script.crossOrigin = 'anonymous'
+  script.async = true
+
+  Object.entries({ ...defaultAttributes, ...option }).forEach(([key, value]) => {
+    script.setAttribute(key, value)
+  })
+
+  return script
+}
+
+const defaultAttributes = {
+  'issue-term': 'title',
+  label: 'comment-section',
+  theme: 'github-light',
+}
diff --git a/website/src/theme/BlogPostPaginator/index.js b/website/src/theme/BlogPostPaginator/index.js
new file mode 100644
index 000000000..515a2f72e
--- /dev/null
+++ b/website/src/theme/BlogPostPaginator/index.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import BlogPostPaginator from '@theme-original/BlogPostPaginator'
+import Utterance from '@site/src/components/Utterance'
+
+export default function BlogPostPaginatorWrapper(props) {
+  return (
+    <>
+      <BlogPostPaginator {...props} />
+      <Utterance />
+    </>
+  )
+}