docs: Add comments for proposal section (#1517)

* Add utterances

* Update repo

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',

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} />
+}

website/src/custom.css

@@ -243,4 +243,8 @@ svg {
   .navbar_custom_item--button {
     margin-right: 3rem
   }
+}
+
+.utterances {
+  max-width: 100%;
 }

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',
+}

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 />
+    </>
+  )
+}