Update Giscus component and add language filter for essays

Author: ComputelessComputer

part-of-my-brain

@@ -1,14 +1,22 @@
 ---
 interface Props {
-  category: string;
-  categoryId: string;
+  category: "essays" | "inspirations" | "journals" | "lessons" | "questions";
 }
 
-const { category, categoryId } = Astro.props;
+const { category } = Astro.props;
 
-// Get these values from https://giscus.app after configuring
 const REPO = "ComputelessComputer/part-of-my-brain";
-const REPO_ID = ""; // TODO: Get from giscus.app
+const REPO_ID = "R_kgDOQyThnQ";
+
+const CATEGORY_IDS: Record<string, string> = {
+  essays: "DIC_kwDOQyThnc4C0ehA",
+  inspirations: "DIC_kwDOQyThnc4C0ehC",
+  journals: "DIC_kwDOQyThnc4C0eg4",
+  lessons: "DIC_kwDOQyThnc4C0ehD",
+  questions: "DIC_kwDOQyThnc4C0ehE",
+};
+
+const categoryId = CATEGORY_IDS[category];
 ---
 
 <section class="giscus-container">
@@ -23,7 +31,7 @@ const REPO_ID = ""; // TODO: Get from giscus.app
     data-reactions-enabled="1"
     data-emit-metadata="0"
     data-input-position="top"
-    data-theme="light"
+    data-theme="preferred_color_scheme"
     data-lang="en"
     data-loading="lazy"
     crossorigin="anonymous"

src/components/Giscus.astro

@@ -9,6 +9,7 @@ const essays = defineCollection({
     updated_at: z.coerce.date().optional(),
     published: z.boolean().default(false),
     tags: z.array(z.string()).optional(),
+    lang: z.enum(["en", "ko"]).default("en"),
   }),
 });
 

src/content.config.ts

@@ -42,5 +42,5 @@ const date = essay.data.created_at.toLocaleDateString("en-US", {
     </div>
   </article>
 
-  <Giscus category="Essays" categoryId="" />
+  <Giscus category="essays" />
 </Base>

src/pages/essays/[id].astro

@@ -15,10 +15,17 @@ const sortedEssays = essays.sort((a, b) =>
 
   <h1>Essays</h1>
 
-  <ul style="margin-top: 2rem;">
+  <div style="margin: 1rem 0;">
+    <button class="lang-btn active" data-lang="all">All</button>
+    <button class="lang-btn" data-lang="en">English</button>
+    <button class="lang-btn" data-lang="ko">Korean</button>
+  </div>
+
+  <ul style="margin-top: 2rem;" id="essays-list">
     {sortedEssays.map((essay) => (
-      <li style="margin-bottom: 1rem;">
+      <li style="margin-bottom: 1rem;" data-lang={essay.data.lang}>
         <a href={`/essays/${essay.id}`}>{essay.data.title}</a>
+        {essay.data.lang === "ko" && <span style="color: #999; margin-left: 0.5rem;">🇰🇷</span>}
         <br />
         <small style="color: #666;">
           {essay.data.created_at.toLocaleDateString("en-US", {
@@ -31,3 +38,45 @@ const sortedEssays = essays.sort((a, b) =>
     ))}
   </ul>
 </Base>
+
+<style>
+  .lang-btn {
+    background: none;
+    border: 1px solid #ccc;
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  .lang-btn:hover {
+    background: #f0f0f0;
+  }
+  .lang-btn.active {
+    background: #1a1a1a;
+    color: white;
+    border-color: #1a1a1a;
+  }
+</style>
+
+<script>
+  const buttons = document.querySelectorAll('.lang-btn');
+  const items = document.querySelectorAll('#essays-list li');
+
+  buttons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const lang = btn.getAttribute('data-lang');
+
+      buttons.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+
+      items.forEach(item => {
+        const itemLang = item.getAttribute('data-lang');
+        if (lang === 'all' || itemLang === lang) {
+          (item as HTMLElement).style.display = '';
+        } else {
+          (item as HTMLElement).style.display = 'none';
+        }
+      });
+    });
+  });
+</script>

src/pages/essays/index.astro

@@ -54,5 +54,5 @@ const date = inspiration.data.created_at.toLocaleDateString("en-US", {
     </div>
   </article>
 
-  <Giscus category="Inspirations" categoryId="" />
+  <Giscus category="inspirations" />
 </Base>

src/pages/inspirations/[id].astro

@@ -38,5 +38,5 @@ const date = new Date(dateStr).toLocaleDateString("en-US", {
     </div>
   </article>
 
-  <Giscus category="Journals" categoryId="" />
+  <Giscus category="journals" />
 </Base>

src/pages/journals/[id].astro

@@ -44,5 +44,5 @@ const date = lesson.data.created_at.toLocaleDateString("en-US", {
     </div>
   </article>
 
-  <Giscus category="Lessons" categoryId="" />
+  <Giscus category="lessons" />
 </Base>

src/pages/lessons/[id].astro

@@ -14,5 +14,5 @@ import Giscus from "../../components/Giscus.astro";
     Ask me anything. Sign in with GitHub to submit a question.
   </p>
 
-  <Giscus category="Questions" categoryId="" />
+  <Giscus category="questions" />
 </Base>