ルカ-さん Luca-san

Use Giscus to add comments in Eleventy

6 min read

This blog post explain how to add Giscus to Eleventy blog, as a simple and convenient way to have a comment section.

Table of Contents

Why Giscus

Though not everyone wants to have a comment section, comments can provide a nice addition to a blog. That said, there aren't many "simple" options and most require you not only to maintain your own database for storage, but to secure the form against bots as well (sadly, dead internet theory isn't a theory anymore).

Giscus is a nice solution that solves both problems: comments are hosted in GitHub discussions, so GH handles bot the storage and the security part. The down side is that only people with a GitHub account will be able to comment, but that's not an issue for technical blogs.

Adding Giscus

Jumping into how to add Giscus to Eleventy, it's quite simple. I found this guide https://design2seo.com/blog/web-development/add-a-giscus-comments-to-your-website/ but integrating Giscus that way didn't worked for me unfortunately, so i had to take a different approach.

Step 1: Generate Giscus Configuration

First go to https://giscus.app/ and generate your giscus configuration. You can follow this step-by-step guide here: https://zhauniarovich.com/post/2021/2021-06-giscus/. I kept default values a part:

Step 2: Create Giscus JS file

Create a new file giscus.js in your _includes folder, that contains the configuration you generated in the previous step (below, i've already adjusted the theme too):

// giscus.js
function loadGiscus() {
    const giscusScript = document.createElement("script");
    giscusScript.src = "https://giscus.app/client.js";
    giscusScript.setAttribute("data-repo", "DATA");
    giscusScript.setAttribute("data-repo-id", "REPO-ID");
    giscusScript.setAttribute("data-category", "Announcements");
    giscusScript.setAttribute("data-category-id", "CATEGORY-ID");
    giscusScript.setAttribute("data-mapping", "pathname");
    giscusScript.setAttribute("data-strict", "1");
    giscusScript.setAttribute("data-reactions-enabled", "1");
    giscusScript.setAttribute("data-emit-metadata", "0");
    giscusScript.setAttribute("data-input-position", "bottom");
    giscusScript.setAttribute("data-lang", "en");
    giscusScript.setAttribute("crossorigin", "anonymous");
    giscusScript.async = true;

    // Set theme based on local storage
    giscusScript.setAttribute("data-theme", getGiscusTheme()); 

    const footer = document.querySelector('footer');
    if (footer) {
        footer.insertAdjacentElement('beforebegin', giscusScript); 
    } else {
        document.body.appendChild(giscusScript); 
    }
}

// Function to get the Giscus theme based on local storage
function getGiscusTheme() {
    return localStorage.getItem("light-mode") ? "dark_dimmed" : "light";
}

// Initial load
loadGiscus();

Step 3: Edit Posts Template

Then import this script in your post.njk file:

<script type="text/javascript">{% include '_includes/giscus.js' %}</script>

Step 4: Adjust Theme

I've also adjusted the theme to match my blog, as i've implemented a light/dark theme switcher in this previous post.

Above, giscus.js already contains the logic for the theme switcher so we're only left to edit the theme-switch.js file as below:

function isLight() {
    return localStorage.getItem("light-mode");
}

function toggleRootClass() {
    document.querySelector(":root").classList.toggle("dark"); 
    updateGiscusTheme(); // Update Giscus theme
}

function toggleLocalStorageItem() {
    if (isLight()) {
        localStorage.removeItem("light-mode");
    } else {
        localStorage.setItem("light-mode", "set");
    }
}

function updateGiscusTheme() {
    // Remove the existing Giscus script
    const existingGiscus = document.querySelector('script[src="https://giscus.app/client.js"]');
    if (existingGiscus) {
        existingGiscus.remove(); // Remove the old script
    }
    loadGiscus(); // Reload Giscus with the new theme
}

// Initial theme load
if (isLight()) {
    toggleRootClass();
}

// Event listener to toggle theme
document.querySelector(".theme-icon").addEventListener("click", () => {
    toggleLocalStorageItem();
    toggleRootClass();
});

...and that's it, now Giscus is integrated with Eleventy.