This content originally appeared on DEV Community and was authored by darrendube
Let's face it - Jamstack websites have many advantages, but adding comments easily isn't one of them.
And for those of us with blogs, we know that a blog is never fully complete without comments. Blogging is meant to be a two way exchange, a way to build a community.
Jamstack's static nature means that comments don't come natively, but there is no shortage of third party comments providers - Disqus, Commentbox, Facebook Comments, among others.
The problem is that most of them are either not free, or they have ads and privacy concerns.
This is why I was excited when I discovered a comments app that's free, open source, and has no privacy issues.
What is Utterances
Utterances is a free, open source application that essentially acts as a widget on your blog post, storing comments on Github Issues. It creates a GitHub Issue for every blog post on your blog, then stores the blog comments as comments on that issue. You can moderate comments by editing those issues. To see how it looks like on an actual page, head to my original post and scroll down to the end!
Who is Utterances for
Because Utterances runs on Github Issues, it requires commenters to have a GitHub account, and to sign in everytime they want to comment. Therefore, Utterances is more suited towards developer/tech blogs, where the majority of readers would have Github accounts already.
How to set Utterances up
This tutorial is geared towards GatsbyJS websites, but will work for any react-based website.
First, you have to install Utterances to the GitHub repo that your website is hosted on. The repo has to be public. Click here to install the app.
Then, if you follow the instructions on Utterances' website, it gives you a simple script to insert into your HTML:
<script
src="https://utteranc.es/client.js"
repo="[ENTER REPO HERE]"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async></script>
However, this solution only works for simple Static HTML websites, and will not work for react-based Jamstack websites like GatsbyJS and Next.js.
Instead, make a Comments components:
//comments.js
import React from "react";
const Comment = ({ commentBox }) => (
<div className="comments-section-wrapper">
<div className="inner-section">
<h2>Comments</h2>
<div ref={commentBox} className="comments"></div>
</div>
</div>
);
export default Comment;
In your blog post template, create a ref that is attached to the commentBox prop on the Comments component
//blogTemplate.js
const commentBox = createRef();
Use the useEffects hook to add the script tag to the Comments Component using the ref:
//blogTemplate.js
...
useEffect(() => {
const commentScript = document.createElement("script");
commentScript.async = true;
commentScript.src = "https://utteranc.es/client.js";
commentScript.setAttribute("repo", "darrendube/website"); // PLEASE CHANGE THIS TO YOUR REPO
commentScript.setAttribute("issue-term", "pathname");
commentScript.setAttribute("id", "utterances");
commentScript.setAttribute("theme", "preferred-color-scheme");
commentScript.setAttribute("crossorigin", "anonymous");
if (commentBox && commentBox.current) {
commentBox.current.appendChild(commentScript);
} else {
console.log(`Error adding utterances comments on: ${commentBox}`);
}
}, [commentBox]);
...
You can now insert this Comments component anywhere on your website:
//blogTemplate.js
return (
...
<Comments commentBox={commentBox} />
...
);
Utterances provides a selection of 7 themes which you can find here. You can change the theme by changing the theme value in the useEffect hook. The widget is an iFrame so you can't use CSS to customise the comments - you are limited to the seven themes.
And that's it! If you want to see this in action, head to my original post and leave a comment there!
This content originally appeared on DEV Community and was authored by darrendube
darrendube | Sciencx (2021-05-24T21:34:23+00:00) Jamstack comments suck – but they don’t have to. Retrieved from https://www.scien.cx/2021/05/24/jamstack-comments-suck-but-they-dont-have-to/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.