Adding Giscus Discussions to Astro thumbnail

Adding Giscus Discussions to Astro

February 11, 2025 David Teather

Table of Contents

I’ve wanted to add discussions on my blog for awhile, and they’re great for ya know getting people to talk about your post and interact with them. I was looking for something that I didn’t have to host, easy to implement, css customizable, and allows me to moderate it. Thankfully, I recently looked at Nick Winans’s Blog recently and it uses Giscus which meets all of those checkboxes!

This is going to be a super quick post as it’s super easy to add to your site.

Adding Giscus

  1. Go to Giscus.app
    • Create a public repo that you want to use, enable the Discussions feature in settings. This is disabled by default
    • Install the Giscus app, you can select it to manage just the repo you’ve created
    • Select the themes and any other options there
  2. Copy the <script> that Giscus generates for you
  3. Add it to your Article page in astro.
  4. If you want it somewhere else you can create a div with class discus
    • ie: <div class="giscus pt-2"></div>

Stylizing Giscus

You can either use one of the existing themes or pass in your own fully qualified url path to a custom css file into the data-theme attribute as is documented here

I also made a custom pretty ugly looking that I’d like to clean up script to toggle my themes between light and dark_dimmed.

<script is:inline>
  function updateGiscusTheme() {
    const dataTheme =
      document.documentElement.getAttribute("data-theme") || "light";
 
    const giscusFrame = document.querySelector("iframe.giscus-frame");
    if (!giscusFrame) return;
 
    giscusFrame.contentWindow.postMessage(
      {
        giscus: {
          setConfig: {
            theme: dataTheme === "dark" ? "dark_dimmed" : "light",
          },
        },
      },
      "https://giscus.app"
    );
  }
 
  document.addEventListener("themechange", updateGiscusTheme);
</script>
 
<div class="giscus"></div>
<script>
  // doing this manually lets astro pick up the initial set theme without flashing or erroring
  const theme =
    localStorage.getItem("theme") === "dark" ? "dark_dimmed" : "light";
 
  const script = document.createElement("script");
  script.src = "https://giscus.app/client.js";
  script.async = true;
  script.crossOrigin = "anonymous";
 
  script.setAttribute("data-repo", "davidteather/dteather.com");
  script.setAttribute("data-repo-id", "R_kgDONz7hYA");
  script.setAttribute("data-category", "Announcements");
  script.setAttribute("data-category-id", "DIC_kwDONz7hYM4CmoaD");
  script.setAttribute("data-mapping", "pathname");
  script.setAttribute("data-reactions-enabled", "1");
  script.setAttribute("data-emit-metadata", "1");
  script.setAttribute("data-input-position", "top");
  script.setAttribute("data-lang", "en");
  script.setAttribute("data-loading", "lazy");
  script.setAttribute("data-theme", theme);
 
  document.querySelector(".giscus")?.appendChild(script);
</script>

I was working on trying to generate a daisyui dark / light theme css from the named colors at build time so it works properly with the theme but couldn’t manage to get it working. So if you know of a solution please let me know :D

Hopefully this short post was helpful to someone.

Back to blog