Documentation

Documentation

Introduction

With the rise of JAMStack, more and more websites have converted to static, and why not? Static websites do have quite a few benefits than dynamic websites or websites backed by a CMS. With the benefits, it also carries some problems. Probably the number one problem is the absence of dynamic features like search, comments, etc. ThreadTalk.JS aims to solve one of them. It is a comment engine written in JavaScript (and styled by CSS). It provides a drop-in solution for any Netlify website to add self-hosted comments to their website easily.

Warning

The use of the term ‘self-hosted’ might need some clarification. In this context, self-hosted doesn’t necessarily mean ‘on your servers’. Instead, it means that you can host the data on other services, and can monitor, edit and control it. You own the data in the sense that the data is in your account, but the actual owner of the data would be the service. This is because they can choose to close their service or change their pricing at any given time and you might be locked out of your data. They can take action against you in case of reported spam or other reasons. You’ve been warned.

Motive

Yes, there are many comment engines out there. Probably the top-ranked Disqus will come to your mind, followed by Facebook Comments, IntenseDebate, Gitalk, utterances and many others. They are great indeed but do have their share of problems. The primary problem is probably that, they are not themeable. Imagine taking time to make the perfect blog or portfolio and then deciding to add comments for user engagement. You try these solutions and find out, they lack one primary thing, the ability to theme them to your liking, your website’s design. The former ones are third-party SAAS solutions that completely lock you down to their branding, look and feel. They’re also plagued with ads, self-branding and all in all, slow down your website. The latter ones are open-source but it’s still difficult to change their design. Furthermore, they rely on GitHub issues, but how many of your users have a GitHub account or are willing to create an account, just to comment on your website? Probably not many. Thus, a free, lightweight, open-source and anonymous solution was required. This is where ThreadTalk.JS comes in.

The question remains as to why Netlify Functions? This could have been easily possible using just client-side JavaScript since the libraries that are used in this are available for client-side processing too. The reason is security. By making the entire thing available client-side, it would be easy for anyone to be able to see your API keys. This makes exploiting the keys very easy. Now, with Netlify Functions, we can keep the keys private and combining the power of Netlify Identity, it’s possible up to some extent to prevent people from exploiting your functions externally. Read more in Security.

Working

ThreadTalk.JS makes use of modern web technology to achieve its goal. It combines the power of a headless database, FaunaDB and serverless functions using Netlify Functions . This helps to decouple the frontend from all the heavy work which in turn helps to keep the code and bundle size to a minimum. In the serverless functions, ThreadTalk.JS uses a lot of under-the-hood libraries to achieve many more objectives. Check out all the open-source libraries used by ThreadTalk.JS.

Prerequisites

  1. An account on:
  • Netlify
  • FaunaDB
  • Sendinblue
  1. Node.js + npm
  2. A SCSS compiler
  3. A JavaScript bundler

Browser support

Chrome 42+

Firefox 39+

Safari 10+

Internet Explorer is not supported because it does not support Fetch API which is highly required by ThreadTalk.JS.