feat(blog): add giscus comments

Author: mcous

src/components/main.tsx

@@ -16,7 +16,7 @@ export const Main: FunctionComponent<MainProps> = ({
 }) => (
   <>
     <Header bio={bio} isHome={isHome} />
-    <main class="mx-auto max-w-xl flex flex-col items-center px-4">
+    <main class="mx-auto mb-4 max-w-xl flex flex-col items-center px-4">
       {children}
     </main>
   </>

src/layouts/comments.astro

@@ -0,0 +1,17 @@
+<script
+  is:inline
+  src="https://giscus.app/client.js"
+  data-repo="mcous/mcous.github.io"
+  data-repo-id="MDEwOlJlcG9zaXRvcnkxOTkwMjMxOQ=="
+  data-category="Announcements"
+  data-category-id="DIC_kwDOAS-vb84CgeTB"
+  data-mapping="pathname"
+  data-strict="0"
+  data-reactions-enabled="1"
+  data-emit-metadata="0"
+  data-input-position="top"
+  data-theme="light"
+  data-lang="en"
+  data-loading="lazy"
+  crossorigin="anonymous"
+  async></script>

src/pages/articles/[...slug].astro

@@ -2,6 +2,7 @@
 import { Article } from '$components/article-layout.tsx'
 import { Body } from '$components/body.tsx'
 import { Main } from '$components/main.tsx'
+import Comments from '$layouts/comments.astro'
 import Layout from '$layouts/layout.astro'
 import * as components from '$layouts/markdown'
 import { type ArticleEntry, getArticles } from '$lib/articles.ts'
@@ -29,6 +30,7 @@ const [{ Content }, bio] = await Promise.all([article.render(), getBio()])
       <Article article={article.data}>
         <Content components={components} />
       </Article>
+      <Comments />
     </Main>
   </Body>
 </Layout>