feat: added reactions in header

src/app/(home)/story/page.tsx

@@ -15,7 +15,8 @@ import Link from "next/link";
 
 import { NRenderer } from "@/components/notion/renderer";
 import { Metadata, ResolvingMetadata } from "next";
-import Comments from "@/components/comments";
+import Comments, { Reactions } from "@/components/comments";
+import { Stats } from "./stats";
 
 export const revalidate = 100;
 
@@ -115,6 +116,20 @@ export default async function Story({
           {title}
         </h1>
 
+        <section
+          id="comments"
+          className="comments-section h-[58px] my-2 overflow-hidden"
+        >
+          {repo && repoId && category && categoryId ? (
+            <Reactions
+              repo={repo as `${string}/${string}`}
+              repoId={repoId}
+              category={category}
+              categoryId={categoryId}
+            />
+          ) : null}
+        </section>
+
         <div className="text-foreground/80 flex gap-1 hover:no-underline sticky top-12 z-50 mt-2 mx-auto w-fit">
           <Link href="/">
             <div className="backdrop-blur border border-foreground/20 backdrop-saturate-100 bg-background/60 backdrop-contrast-125 p-1 px-2 w-fit rounded-full flex gap-1 items-center">
@@ -135,7 +150,7 @@ export default async function Story({
           <Connect />
         </section>
 
-        <section id="comments" className="comments-section">
+        <section id="comments" className="comments-section pt-4">
           {repo && repoId && category && categoryId ? (
             <Comments
               repo={repo as `${string}/${string}`}

src/app/(home)/story/stats.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function Stats() {
+  useEffect(() => {
+    const handleMetadata = (event: any) => {
+      const { data } = event;
+      if (typeof data === "object" && data?.giscus?.discussion) {
+        console.log(data);
+      }
+    };
+
+    window.addEventListener("message", handleMetadata as any);
+
+    return () => window.removeEventListener("message", handleMetadata as any);
+  }, []);
+  return <div></div>;
+}

src/components/comments.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Giscus from "@giscus/react";
+import { useEffect, useState } from "react";
 
 const Comments = ({
   repo,
@@ -30,4 +31,90 @@ const Comments = ({
   );
 };
 
+interface Reaction {
+  count: number;
+  viewerHasReacted: boolean;
+}
+
+interface Reactions {
+  CONFUSED: Reaction;
+  EYES: Reaction;
+  HEART: Reaction;
+  HOORAY: Reaction;
+  LAUGH: Reaction;
+  ROCKET: Reaction;
+  THUMBS_DOWN: Reaction;
+  THUMBS_UP: Reaction;
+  [key: string]: Reaction; // To accommodate additional reaction types not explicitly listed here
+}
+
+interface Discussion {
+  id: string;
+  locked: boolean;
+  reactionCount: number;
+  reactions: Reactions;
+  repository: {
+    nameWithOwner: string;
+  };
+  totalCommentCount: number;
+  totalReplyCount: number;
+  url: string;
+}
+
+interface GiscusData {
+  discussion: Discussion;
+}
+
+interface MetadataEvent {
+  giscus?: GiscusData;
+}
+
+export const Reactions = ({
+  repo,
+  repoId,
+  category,
+  categoryId,
+}: {
+  repo: `${string}/${string}`;
+  repoId: string;
+  category: string;
+  categoryId: string;
+}) => {
+  const [showReactions, setShowReactions] = useState(false);
+
+  useEffect(() => {
+    const handleMetadata = (event: { data: MetadataEvent }) => {
+      const { data } = event;
+      if (typeof data === "object" && data?.giscus?.discussion) {
+        console.log(data.giscus.discussion);
+        setShowReactions(
+          Object.values(data.giscus.discussion).some(
+            (reaction) => reaction.count > 0,
+          ),
+        );
+      }
+    };
+
+    window.addEventListener("message", handleMetadata as any);
+
+    return () => window.removeEventListener("message", handleMetadata as any);
+  }, []);
+
+  return (
+    <Giscus
+      repo={repo}
+      repoId={repoId}
+      category={category}
+      categoryId={categoryId}
+      mapping="url"
+      reactionsEnabled="1"
+      emitMetadata="1"
+      inputPosition="top"
+      theme="light_tritanopia"
+      lang="en"
+      loading="eager"
+    />
+  );
+};
+
 export default Comments;