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.

document.addEventListener("DOMContentLoaded", () => {
    const dataTheme = document.documentElement.getAttribute("data-theme");
    const giscusScript = document.querySelector("script[src*='giscus.app']");
 
    if (giscusScript) {
        let newTheme = dataTheme || "light";
        if (newTheme === "dark") {
            newTheme = "dark_dimmed";
        }
 
        giscusScript.setAttribute("data-theme", newTheme);
 
        const newScript = giscusScript.cloneNode(true);
        giscusScript.replaceWith(newScript);
    }
 
    const observer = new MutationObserver(() => {
        let newTheme = document.documentElement.getAttribute("data-theme");
        if (newTheme === "dark") {
            newTheme = "dark_dimmed";
        }
 
        const iframe = document.querySelector(".giscus-frame");
 
        if (iframe instanceof HTMLIFrameElement && iframe.contentWindow) {
            iframe.contentWindow.postMessage(
                { giscus: { setConfig: { theme: newTheme || "light" } } },
                "https://giscus.app"
            );
        }
    });
 
    observer.observe(document.documentElement, { attributes: true });
});

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.