DEV Community

loading...

Adding Comments to a Static Website

jarodpeachey profile image Jarod Peachey ・2 min read

Static websites aren't static anymore.

This has become pretty obvious with the rise of serverless architecture, the headless CMS and the JAMstack. Static websites are created by sourcing content from an API, and generating a static website using static site generator.

However, the JAMstack method still has some drawbacks, specifically when dealing with dynamic functionality. In today's day and age, it's very rare that a website not need some kind of dynamic aspect to it.

One of the most popular dynamic aspects of a website is, without a doubt, comments. However, it's not as easy to add comments to a static site as it is a website with a traditional server.

That's why I decided to develop a tool that could allow anyone to add comments to their static blog or website with as little hassle as possible.

Enter Triangle Comments.

What is Triangle?

Triangle Comments is a tool that provides drop-in commenting to be used on any static site, anywhere on that site.

Why Triangle?

I created Triangle not to be the first method to add comments on a static site but to offer more than other options. Triangle is unique in that it can be both static AND dynamic.

What does that mean?

Well, Triangle collects data from a Netlify form and sends the data to GraphQL. That data is used by the Comments component offered by Triangle. Your static site generator then builds the HTML, and the comments will be included in that HTML.

But what if someone adds a new comment, and you want it to show up right away?

Triangle makes a call to the API where your comments are stored and gets the latest comments. The beautiful part is: this API call doesn't bog down your site at all. Because of the comments in the GraphQL server from your most recent build, the entire site (plus all but the new comments) shows up on page before the new comments are called.

Once the new comments are retrieved, the Comments component is updated to include the latest comment.

Let me know what you think!

This is still in beta version, but I'd love for you to test it out, and see what you think! I'm constantly improving it and would love your feedback regarding improvements or features you'd like to see.

https://github.com/jarodpeachey/triangle-comments

Discussion (4)

pic
Editor guide
Collapse
modestotech profile image
Max Modesto Wallin

Cool idea! Nicely done.

Collapse
jarodpeachey profile image
Collapse
kamittransient profile image
kamit-transient

whats the license ?MIT ?

Collapse
hashimwarren profile image
Hashim Warren

Looks promising!