👨 Firstly a little bit about myself

I am a 14-year-old Developer, YouTuber, Blogger, and of course a student. Though I have been coding for quite a long time, I started web development about 5 months ago. I learned Javascript, React, Redux, NextJS, various styling libraries, and a lot more in this course of time. Hashnode has now given me an opportunity to show and test my skills through this hackathon.

🛡 A few words on Auth0

As a part of this hackathon, I am using the popular authentication provider, Auth0 for user authentication on my application. Auth0 is great to get started (especially with their quickstarts) and has a quite generous free tier. The NextJS SDK provides all the basic features along with some advanced ones too and is quite easy to implement and use. There is a Universal Login Page which means one can get started quickly without the need of developing components for that (though you have the option to).

🤔 So what have I built?

I started quite late, the 19th of August and I didn't have a lot of time but I was successful in making a Web Application!!! So my app is called Easy Comments and it allows you to easily allow comments functionality to your site by adding a simple embed.

I started doing some mock-ups in my brain. Then I recreated some of them on Figma and then decided to start building. I started with OpenChakra (because I am using Chakra UI, more on that later).

Screenshots

📚 The stack

I had learned React over the course of over 4 months and also NextJS so I thought of going with NextJS for this project. I also had experience with Chakra UI and found it to be awesome so that is what I am using for styling.

NextJS
Chakra UI for styling
Firebase for storing data
Auth0 for user authentication
React Icons and Chakra Icons for icons
React Markdown and Remark GFM for markdown supports in comments
React Syntax Highligher for syntax highlighting of code in comments.
Iframe Resizer support
Formik for forms
Vercel for hosting

👀 The reason

Why did I make this?

There are many ways of integrating comments onto your site, Disqus being a popular option but there is one big issue, trackers. Most of us don't like to be tracked around the web and hence I felt like we need a tracker-free alternative.

Features

No Ads. No Trackers.
Free and Open Source (Licensed under MIT)
Unlimited Sites
Unlimited Comments
Approval stage for Comments (optional)
Route wise comments
Ability to edit and delete a Comment
Markdown support
Customization of Comments
Ability to Self-Host

⚙️ How do you use it?

I have written a quickstart guide on GitHub - https://github.com/AnishDe12020/easycomments#-guide

🖧 How does it work?

Once you create a site on the sites page, you get an embed URL upon clicking the "See Embed URL" button (refer the quickstart for more information).

Then it is quite simple, you just need to embed that link on your site but how will you do it?

The embed supports Iframe Resizer so it is quite simple.

For React -

<IframeResizer
  style={{
    width: "1px",
    minWidth: "100%",
    height: "1px",
    minHeight: "100%",
  }}
  src="<Your embed url goes here>"
  title="Comments"
/>

For Vue refer to this guide

For Angular, you can refer to this comment

You can refer to the Iframe Resizer getting started guide for more information.

A sneak peek behind the curtains

<ReactMarkdown
    remarkPlugins={[remarkGfm]}
    components={{
        code({ node, inline, className, children, ...props }) {
        const match = /language-(\w+)/.exec(className || "");
        return !inline && match ? (
            <SyntaxHighlighter
            language={match[1]}
            style={colorMode === "light" ? solarizedlight : dracula}
            PreTag="div"
            {...props}
            >
            {String(children).replace(/\n$/, "")}
            </SyntaxHighlighter>
        ) : (
            <code className={className} {...props}>
            {children}
            </code>
        );
        },
    }}
    >
    {comment}
</ReactMarkdown>;

Here React Markdown, React Syntax Highlighter and the Remark GFM plugin is used. React Markdown helps with parsing markdown and Remark GFM adds support for GitHub Flavoured Markdown. React Syntax Highlighter does syntax highlighting for code snippets in a comment.

How is the embed URL structured?

A sample embed URL -

https://easycomments.anishde.dev/embed/EwI3VgCSuJkl85wh18Ru/

Firstly we have the domain, https://easycomments.anishde.dev. Then we have the embed route which is a dynamic route and hence the siteId is put as a parameter. We can also add a route, for example -

https://easycomments.anishde.dev/embed/EwI3VgCSuJkl85wh18Ru/easy-comments/

Here, comments are stored route-specific. For example, you have a blog, blog.com. You can have an embed with the route as / (default) for comments left on the home page. Then you can have a route for each blog post with a route, for example, how-to-add-auth0-to-nextjs and only comments for that specific blog post will show up when queried with that route.

You can also specify a preferred color mode. By default, the comments widget defaults to the system color mode but this can be overwritten with the colorMode parameter in the URL.

Example -

https://easycomments.anishde.dev/embed/EwI3VgCSuJkl85wh18Ru/easy-comments?colorMode=dark

The available parameters are light and dark as of now

❓ Some FAQ

How does one leave a comment?

Each embed has got a "Leave a Comment" link. This redirects the users to a page where one can sign in (if not already signed in) and then leave a comment.

Example -

https://easycomments.anishde.dev/comments/EwI3VgCSuJkl85wh18Ru

How do comment approvals work?

Comments need to be approved by the site owner unless he/she explicitly enabled auto-approvals of comments when setting up the site or later on through the sites page. If a comment is not approved, the comment won't show up for everyone except the author (who will see a pending badge). The site owner can also remove the comment which then changes the comment status to removed and the comment author sees a removed badge. The site owner can do such comment management via the manage comments page. There is a global manage comments page for all sites the site owner owns and one for each site he/she owns.

How can I see comments I have left on other's sites?

The comment will be visible on the site you have left the comment on (along with the status). You can also view all comments that you have left at the my comments page from where you can edit as well as delete a comment (this can be done from the leave a comment page as well)

What site settings can a site owner change

Right now Show Date, Show Time, Show Avatar and Automatically Approve Comments are the available settings that can be changed by the site owner. In the future, I plan to add support for custom colors and more!!! You can keep an I on the to-do list.

🎁 Wrapping up

You can see the site live on https://easycomments.anishde.dev/

Source code - https://github.com/AnishDe12020/easycomments

Blog

Easy Comments

Anish De