✨feat: add blog comments form

front/src/components/BlogComments.astro

@@ -0,0 +1,8 @@
+<script
+  is:inline
+  src="https://utteranc.es/client.js"
+  repo="yanosea/yanoPortfolioBlogComments"
+  issue-term="pathname"
+  theme="github-dark"
+  crossorigin="anonymous"
+  async></script>

front/src/layouts/PageLayout.astro

@@ -3,18 +3,25 @@ import BaseLayout, {
   type Props as BaseLayoutProps,
 } from "@/layouts/BaseLayout.astro";
 
+import BlogComments from "@/components/BlogComments.astro";
+
 import Footer, { type Props as FooterProps } from "@/components/Footer.astro";
 
 import Header from "@/components/Header.astro";
 
 export interface Props extends BaseLayoutProps {}
 export interface Props extends FooterProps {}
+export interface Props {
+  blogComments?: boolean;
+}
+const { blogComments } = Astro.props;
 ---
 
 <BaseLayout {...Astro.props}>
   <Header />
   <main class="max-w-screen-lg m-auto px-6 py-6 space-y-6">
     <slot />
+    {blogComments && <BlogComments />}
   </main>
   <Footer {...Astro.props} />
 </BaseLayout>

front/src/pages/blog/[...slug].astro

@@ -24,6 +24,7 @@ const { Content } = await entry.render();
   description={entry.data.description}
   article
   ssg
+  blogComments
 >
   <article class="m-auto space-y-6">
     <Title icon={entry.data.title_icon} title={entry.data.title} />