Extract the giscus configuration to config.yml

Author: ramsayleung

README.org

@@ -7,3 +7,57 @@
   The blog is migrated from the original self-hosted [[https://github.com/ramsayleung/blog][blog]] which was interesting and delightful to build something from scratch.
 
   There is Ramsay's personal blog, where he shares a bit of what he has learned along the way.
+
+* Cloning and Setup
+  Even though this blog is tailored to serve my own purpose, but this blog is designed to be easily cloned and adapted for your own use as well. Here are the steps to get started:
+
+** 1. Clone the Repository**
+   #+begin_src shell
+   git clone https://github.com/ramsayleung/ramsayleung.github.io.git
+   cd ramsayleung.github.io
+   #+end_src
+
+** 2. Update Configuration**
+   The main configuration file is `config.yml`. You'll need to update it with your personal information.
+
+*** Social Media
+    Update the information to your own social media accordingly.
+      #+begin_src yaml
+      params:
+        socialIcons:
+            - name: github
+            url: "[YOUR_GITHUB_URL]"
+            - name: stackoverflow
+            url: "[YOUR_STACKOVERFLOW_URL]"
+            - name: x
+            url: "[YOUR_TWITTER_URL]"
+            - name: linkedin
+            url: "[YOUR LINKEDIN URL]"
+            - name: telegram
+            url: "[YOUR TELEGRAM URL]"
+      #+end_src
+*** Giscus Comments
+    This blog uses [[https://giscus.app/][giscus]] for comments, which is based on GitHub Discussions. To set it up for your own repository, you need to update the following section in `config.yml`:
+
+    #+begin_src yaml
+    params:
+      giscus:
+        repo: "[YOUR_GITHUB_USERNAME]/[YOUR_REPO_NAME]"
+        repoId: "[YOUR_REPO_ID]"
+        category: "[YOUR_DISCUSSION_CATEGORY_NAME]"
+        categoryId: "[YOUR_CATEGORY_ID]"
+
+      socialIcons:
+          - name: github
+          url: "[YOUR_GITHUB_URL]"
+          - name: stackoverflow
+          url: "[YOUR_STACKOVERFLOW_URL]"
+          - name: x
+          url: "[YOUR_TWITTER_URL]"
+          - name: linkedin
+          url: "[YOUR LINKEDIN URL]"
+          - name: telegram
+          url: "[YOUR TELEGRAM URL]"
+    #+end_src
+
+    You can get the `repoId` and `categoryId` by following the instructions on the giscus website.

config.yml

@@ -116,6 +116,12 @@ params:
     minMatchCharLength: 0
     keys: ["title", "permalink", "summary", "content"]
 
+  giscus:
+    repo: "ramsayleung/comment"
+    repoId: "MDEwOlJlcG9zaXRvcnkzMDk2NjQ1NDk="
+    category: "General"
+    categoryId: "DIC_kwDOEnUbJc4Cltnz"
+
   socialIcons:
     - name: github
       url: "https://github.com/ramsayleung"

layouts/partials/comments.html

@@ -28,10 +28,10 @@ <h2>Comments</h2>
       console.log('Initial giscus load');
       const commentScript = document.createElement("script");
       commentScript.setAttribute("src", "https://giscus.app/client.js");
-      commentScript.setAttribute("data-repo", "ramsayleung/comment");
-      commentScript.setAttribute("data-repo-id", "MDEwOlJlcG9zaXRvcnkzMDk2NjQ1NDk=");
-      commentScript.setAttribute("data-category", "General");
-      commentScript.setAttribute("data-category-id", "DIC_kwDOEnUbJc4Cltnz");
+      commentScript.setAttribute("data-repo", "{{ .Site.Params.giscus.repo }}");
+      commentScript.setAttribute("data-repo-id", "{{ .Site.Params.giscus.repoId }}");
+      commentScript.setAttribute("data-category", "{{ .Site.Params.giscus.category }}");
+      commentScript.setAttribute("data-category-id", "{{ .Site.Params.giscus.categoryId }}");
       commentScript.setAttribute("data-mapping", "pathname");
       commentScript.setAttribute("data-strict", "0");
       commentScript.setAttribute("data-reactions-enabled", "1");