Adding Comments to My Blog with Giscus!

After 42 years of coding, I'm still amazed by how modern tools and AI can make development such a joyful experience. Today, I'm thrilled to share how I added comments to my blog using Giscus, with some help from Cursor.AI!

What is Giscus?

How We Added It

The implementation was surprisingly straightforward:

1. First, we installed the Giscus React component:

npm install @giscus/react

1. Created a new Comments component that wraps Giscus with some nice Joy UI styling:

import { Box } from '@mui/joy';
import { Giscus } from '@giscus/react';

export function Comments() {
  return (
    <Box sx={{ mt: 4 }}>
      <Giscus
        repo="yourusername/repo"
        repoId="your-repo-id"
        category="Announcements"
        categoryId="your-category-id"
        mapping="pathname"
        reactionsEnabled="1"
        emitMetadata="0"
        inputPosition="top"
        theme="preferred_color_scheme"
        lang="en"
      />
    </Box>
  );
}

1. Added it to our blog post layout, and voilà!

The Magic of Modern Development

And the best part? You can see it in action right below this post! Feel free to leave a comment and join the discussion.