My site is a Jamstack site. It is built using GatsbyJS powered by ReactJS. In this post I gonna show how you can add a free comments to your site with the following pretty simple steps.
- Use Reddit as a service that stores comments.
- Implement React component that shows reddit Comments.
- Integrate component to the blog post template
React Component
We gonna use NextJS useSWR hook to fetch comments from reddit re-post.
Here a code snippet of this component.
import React from 'react'; import useSWR from 'swr'; import moment from 'moment'; // to render relative time of the comment import ContentLoader from 'react-content-loader'; // to render nice loader export default function RedditComments({ reddit }) { if (!reddit) { return null; } const { data, error } = useSWR(reddit, fetcher); if (error) { // TODO render error return null; } const comments = data ? ( data.map((item, i) => <Comment key={i} data={item.data} level={0} />) ) : ( <Loader /> ); return ( <div className="reddit"> <a className="heading" href={reddit} target="_blank"> Comments </a> {comments} </div> ); } The full source code is available here.
Component Integration
I've added a reddit metadata to each post having a reddit re-post.
After that I've extended a blog post template to render comment block.
// ... import Reddit from '../components/Reddit'; const BlogPostTemplate = ({ pageContext }) => { let { // ... // new metadata reddit, } = pageContext; // ... computing more state like translations return ( <Layout> {/* main content is omitted */} <footer> <Reddit reddit={reddit}/> {/* other footer blocks */} </footer> </Layout> ); }; And voila it amazingly works.
Enjoy! EOF 😄
Top comments (0)