In this post, we’re going to take a look at how I integrated Utterances with my Astro blog without any additional UI library. We’ll create an Astro component that handle calling the Utterances script, and also see how we can change the theme of the Utterances’ IFrame dynamically.
What Is Utterances
First, let’s get to know Utterances. Utterances is a lightweight comments widget build on GitHub issues. It’s also completely free and open source. I’m using Utterances as the comment system of my blog, you can scroll down to the comments section below to see Utterances in action.
You can read more about Utterances in its official website.
Generating Utterances Script
Before we can put Utterances in our site, we have to generate a script to call the Utterances IFrame. You can do it by following the instructions in the official website or the instructions below if you don’t want to leave the site 😆.
First, you have to install Utterances in your GitHub account. Give Utterances access to your site’s repository and make sure that the repository is public.
Next, fill in the template below with your information.
src as it is.
repo structure is:
owner/repo. For example:
issue-term, you can choose among:
label with the label that’ll be assigned to issues created by Utterances.
label is optional. If you don’t need it, just remove the
label attribute from the
script tag. But if you do need it, make sure that the label exist in your repo. To create your own issue label, you can read the instructions here.
theme, you can choose among these options:
The next step is to call that script from your Astro app.
Creating Utterances Astro component
Let’s create a component that can call that Utterances script for reusability. Start by creating an Astro component. I named mine
Next, put a single
div element in the component with whatever
id you like. It’s going to serve as a container for Utterances.
<script> tag, not frontmatter(
---). Inside the
<script> tag, let’s put in these code:
So basically, we’re creating a
script element, then we assign it all our Utterances` script attributes, and finally, we insert the script into the container.
Utterances.astro should now look something like this:
With that, we’re finished with the component. You can plug it wherever you want your Utterances comment to show up.
Changing Utterances Theme Based On Site Theme
Now let’s take this a step further by having the Utterances theme match the site theme. This part really depends on how the theming system on your site works. A common approach is to persist theming information in local storage. I’m going to use that as an example here.
Nice our Utterances theme change dynamically now. But it’s still not perfect.
Usually, a site that support both light mode and dark mode will have a button to toggle between the modes. With our current implementation, the theme only change when our component mounts. In other words, even if we click on the button to toggle site theme change, we have to refresh the page before Utterance know about the change.
Synchronizing Utterances Theme With Site Theme
In order to make sure the Utterance theme is synced with the
theme value in our local storage, we are going to create a function to trigger theme change manually and bind it to our light/dark mode toggle button.
The function read our new
theme value and send a message containing the new
theme value to the Utterance IFrame. This way we can change the Utterance theme without refreshing the page.
And finally, we need to make sure our light/dark mode toggle button change the value in local storage and call the function.
With that, our Utterances theme will be in sync with our local storage 🎉.
That’s it for this post. We’ve successfully integrate Utterances with our Astro site. You might need to adjust the theme codes with how your theme system is implemented, but you should have a general idea of how to do it now. If you have any questions, feel free to comment below.