
Last week, I integrated [Utterances](https://utteranc.es) to my blog over a couple of hours and shortly after integration, I found out about [Giscus](https://giscus.app/) and [laymonage](https://github.com/laymonage) came over to tell me that Giscus comes "with a ready-to-use [component library](https://github.com/giscus/giscus-component)".

Being "heavily inspired by utterances", Giscus is similar in many aspects (client-side integration, custom themes, reactions etc.) leveraged on [GitHub Discussions](https://docs.github.com/en/discussions) to host comments rather than GitHub Issues. Since I was familiar with how Utterances worked by then, I was able to quickly switch over to Giscus in an hour or so. Additionally, Giscus allows you to:

- add reactions to the page itself - these are stored on the discussion original post and can be disabled by option
- replies to comments, nesting - this is a feature I understand to be not supported by GitHub Issues
- sorting of comments by oldest/newest
- configuring if the comment box should be placed above all comments - I preferred not to scroll through the long list of comments before adding my comment, though this is purely the user's preference.

One thing I was facinated about, was that the comments widget did not reload fully when themes changed. I dug into the component library's source code and found that Giscus's component library leverages on [message passing to the iframe](https://github.com/giscus/giscus-component/blob/main/web/src/giscus.ts#L202) to update changes occurred in the component props. When using Utterances, any change in the props would result in a full reload of the script and iframe.

<img src="/assets/d3c0caadbf.gif" />

Giscus worked nicely, and I guess it's here to stay on my blog. Kudos to the Giscus team for building on the goodness that Utterances brought about.



Awhile back when I was reading up on [TkDodo's commentaries of react-query](https://tkdodo.eu/blog/practical-react-query), I noticed that TkDodo's blog has a nice comments section that looked very familiar. Upon closer inspection, I realised it was a widget called [Utterances](https://utteranc.es/), which allowed comments to be stored on a GitHub repository's issues.

This was neat for a fully static blog like mine, where I just don't want to host a database somewhere just to store comments. So I decided to try adding it to my built-time generated blog.

The setup was straightforward, I simply fill up the form in the `configuration` section, and it populates my input into the `<script>` tag below. I thought it would be a straightforward copy-paste, but TypeScript came complaining about `repo` being an invalid attribute for the `<script>` tag.

I looked around GitHub for React implementation or integration of Utterances, and found these two:

- <https://github.com/wicksome/utterances-react/blob/master/packages/component/src/Utterances.js>
- <https://github.com/b6pzeusbc54tvhw5jgpyw8pwz2x6gs/react-utterances/blob/master/packages/component/src/ReactUtterances.js>

So the trick was to dynamically assign the special attributes (like `repo`) to get by TypeScript complains for `<script>`. Along the way, I encountered the issue of the injected `<script>` tag being removed while the `<iframe>` tag as being injected asynchronously via `insertAdjacentHTML` (See [line 77](https://github.com/utterance/utterances/blob/36695bf89ffb2ea10eaa26f1b5cbc90477704b9f/src/client.ts) of the utterances source code).

My solution? To enable proper re-render of the Utterances widget, [I wrote a copy of the component](https://github.com/mauris/mauris.github.io/blob/main/apps/main/components/Utterances.tsx) taking references from the two other implementations mentioned above. My implementation takes care to track the number of script instances being loaded, and once the last instance has loaded, it will remove all duplicated instances, leaving only the last "up-to-date" instance in the DOM. This works neatly with changes in the site theme and current post.

I was quite pleased at how easy and straightforward Utterances can be integrated to provide comments and discussions into static sites. I hope to hear from people who's come by to read what I've written and give their thoughts too.

Thank you to the folks behind [utterances](https://github.com/utterance) for making the comments widget that made sense.


Sam's Blog

Posts tagged utterances

Giscus: Blog Comments with GitHub Discussions

Utterances: Blog Comments with GitHub Issues