feat(ui): create Comments component with giscus

giscus.json

@@ -0,0 +1,14 @@
+{
+  "origins": [
+    "https://www.mateusf.com",
+    "https://www.mateusf.vercel.app/",
+    "https://www.mfg-b-mateusfg7.vercel.app/",
+    "https://mateusf.com",
+    "https://mateusf.vercel.app/",
+    "https://mfg-b-mateusfg7.vercel.app/"
+  ],
+  "originsRegex": [
+    "https://mateusf-([A-z0-9]|-)*mateusf\\.vercel\\.app",
+    "http://localhost:[0-9]+"
+  ]
+}

src/app/blog/post/[slug]/components/comments.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import Giscus, { GiscusProps, Theme } from '@giscus/react'
+import { useTheme } from 'next-themes'
+
+export function Comments() {
+  const theme: { [key: string]: Theme } = {
+    system: 'preferred_color_scheme',
+    dark: 'transparent_dark',
+    light: 'light'
+  }
+
+  const { theme: currTheme } = useTheme()
+
+  return (
+    <Giscus
+      repo="mateusfg7/mateusf.com"
+      repoId="MDEwOlJlcG9zaXRvcnkzMTk0MDcwODI="
+      category="Post Comments"
+      categoryId="DIC_kwDOEwnD6s4CZvWA"
+      mapping="og:title"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="bottom"
+      theme={theme[currTheme as string]}
+      lang="en"
+    />
+  )
+}

src/app/blog/post/[slug]/page.tsx

@@ -21,6 +21,7 @@ import { PrettyCodeElement } from './components/pretty-code-element'
 import { UtterancesComments } from './components/utterances-comments'
 
 import 'katex/dist/katex.min.css'
+import { Comments } from './components/comments'
 
 interface Props {
   params: { slug: string }
@@ -147,8 +148,8 @@ export default function Page({ params }: Props) {
       <div className="post-content">
         <MDXContent components={mdxComponents} />
       </div>
-      <div className="pt-5">
-        <UtterancesComments />
+      <div className="pt-12">
+        <Comments />
       </div>
       <TopButton />
     </div>