Making a Blog with C# - Part 5

Adding Comments

I decided on using Giscus as my commenting system, as it seemed the simplest and easiest to set up.

To set up Giscus, there are a few prerequisites:

• A public GitHub repository. You can think of this as the storage for your comments.
• The Giscus app must be installed in your repository.
• The Discussions feature must be turned on by enabling it in your repository. It is not enabled by default.

Adding it to a Blazor website isn't as straight forward as following the guide though, and after a lot of head-scratching, I made an issue on the Giscus issue tracker asking for help. They quickly answered and got me back on track.

GiscusBlazor

There's a Giscus Blazor component!

To set it up, start by adding the nuget GiscusBlazor:

dotnet add package GiscusBlazor

Then import the required script in your \_Layout.cshtml:

<script type="module" src="https://cdn.esm.sh/giscus?bundle"></script>

Lastly, in order to add the comment area to your page, add this:

<Giscus Repo="[ENTER REPO HERE]"
    RepoId="[ENTER REPO ID HERE]"
    Category="[ENTER CATEGORY NAME HERE]"
    CategoryId="[ENTER CATEGORY ID HERE]"
    Mapping="Mapping.Specific"
    Term="[ENTER TERM HERE]"
    ReactionsEnabled="true"
    EmitMetadata="false"
    InputPosition="InputPosition.Bottom"
    Theme="light"
    Lang="en"
    Loading="Loading.Lazy" />

The required values can easily be configured using the Configuration section on https://giscus.app/

In my case, it looked like this:

@using GiscusBlazor
<Giscus Repo="NielsPilgaard/Pilgaard.Blog"
    RepoId="R_kgDOIHUfWQ"
    Category="Announcements"
    CategoryId="DIC_kwDOIHUfWc4CSFPf"
    Mapping="Mapping.PathName"
    Term="Welcome to giscus-blazor!" # No idea what this does
    ReactionsEnabled="true"
    EmitMetadata="false"
    InputPosition="InputPosition.Top"
    Theme="preferred_color_scheme"
    Lang="en"
    Loading="Loading.Lazy" />

Styling

To pretty up the comment section I added this bit to my site.css:

.giscus-frame {
    margin-top: 24px;
    width: 100%;
    display: block;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 600px) {
    .giscus-frame {
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 12px;
        }
    }
}

Summary

We learned how to add a comment area to a page using Giscus and GiscusBlazor, by leveraging the GitHub Discussions API.

Now that it's possible, I hope you'll leave a comment or reaction below 😄

See the code

Pull Request implementing the changes in this post

The state of the blog

This post

Comment section