Provides drop-in comment functionality for static Gatsby site, powered by Firebase
You want to drive engagement for your Gatsby blog via comments.
This is a Gatsby theme that let you add comment section to your blog.
This differs from other solutions in that it gives you complete control of your data and UI. You store your data on your own database, and you can modify the design as you see fit.
- gatsby-theme-comments
npm install gatsby-theme-comments gatsby-plugin-firebase
npm install -D dotenv
In gatsby-config.js:
require("dotenv").config()
module.exports = {
plugins: [
...otherPlugins,
"gatsby-plugin-firebase",
"gatsby-theme-comments",
],
}- Create a Firebase project
- Create a new Firestore database
- Inside the
Databasepage, open theIndexestab and add a composite index like so:
- Create a
.envin your root directory:
GATSBY_FIREBASE_API_KEY=<YOUR_FIREBASE_API_KEY>
GATSBY_FIREBASE_AUTH_DOMAIN=<YOUR_FIREBASE_AUTH_DOMAIN>
GATSBY_FIREBASE_DATABASE_URL=<YOUR_FIREBASE_DATABASE_URL>
GATSBY_FIREBASE_PROJECT_ID=<YOUR_FIREBASE_PROJECT_ID>
GATSBY_FIREBASE_STORAGE_BUCKET=<YOUR_FIREBASE_STORAGE_BUCKET>
GATSBY_FIREBASE_MESSAGING_SENDER_ID=<YOUR_FIREBASE_MESSAGING_SENDER_ID>
GATSBY_FIREBASE_APP_ID=<YOUR_FIREBASE_APP_ID>
In your post template (src/templates/post.js), you can use CommentSection in your JSX:
import { CommentSection } from "gatsby-theme-comments"
...
return (
<Layout>
<Article />
<Author />
<CommentSection id={slug} />
</Layout>
)The id prop must be a unique string or number that identifies the post. It can be the post's id, slug, or title, but do be aware that you'd lose track of the comments if you change that id.
For example, let's say that you use slug as the identifier. If you want to change the post's slug, remember to go into your Firebase database and change that value too.
If you wrote a child theme for gatsby-theme-comments, please submit a PR to add your theme to the list.
Nobody is using this plugin. Sad face 😢
If you use gatsby-theme-comments, please submit a PR to add your site to the list.
Feel free to reach out or open an issue if you're interested in using this. I'm available to answer any questions or take feature requests.
The Comment interface is an object that looks like this:
interface Comment {
id: string;
content: string;
name: string;
createdAt: Timestamp;
updatedAt: Timestamp;
}
interface Timestamp {
nanoseconds: number;
milliseconds: number;
toDate: function;
}A component that renders a form for users to add comment as well as all the comments of the post. This is the simplest way to use gatsby-theme-comments. You can use this component in your Post template.
string| required
A unique identifier used to identify each post. It cannot contain special characters such as "/".
A component that renders the comment count of the post
string| required
A unique identifier used to identify each post
function(id: string): { loading: boolean, error: Error, comments: Array<Comment> }
This hook takes the identifier as argument and gives you the corresponding array of comments.
If the identifier is invalid, the comment array is empty.
function Comments({ id }) {
const { loading, comments } = useComments()
if (loading) {
return <p>Loading...</p>
}
return (
<ul>
{comments.map(comment) => (
<li key={comment.id}>{comment.content}</li>
)}
</ul>
)
}
function(id: string): { loading: boolean, error: Error, commentCount: number }
This hook takes the identifier as argument and gives you the corresponding number of comments.
If the identifier is invalid, the count is 0. The reason for this is that the plugin only keeps track of posts with at least 1 comment. Therefore, if a post doesn't have any, its id would not be available in database.
function CommentCount({ id }) {
const { loading, commentCount } = useCommentCount()
if (loading) {
return <p>0 comment</p>
}
return <p>{commentCount} comment{commentCount > 1 ? "s" : ""}</p>
}
function(): { loading: boolean, error: Error, addComment: function(comment: Comment): void }
This hook returns a function for you to add comment to database.
function AddComment({ comment }) {
const { addComment } = useAddComment()
return (
<button onClick={() => addComment(comment)}>Add</button>
)
}Note: The Comment you pass to the addComment function is one without Timestamp. The createdAt field will be included whenever the plugin makes a call to Firebase. You don't have to construct that value.
Here is a list of recommended components that you can shadow:
components/Button.jscomponents/Comment.jscomponents/CommentCount.jscomponents/Comments.jscomponents/Form.jscomponents/Loading.jscomponents/TextField.js
To run the demo,
- Clone this project
cdintoexamples/demo- Add your Firebase details to
.env - Create an index in Firestore as shown in the second section
- Run
npm start - Try out the project on
localhost:8000
Note: Depending on how you've set up your Firestore project, you may have to change the permissions first. A good starting point would be:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}Just don't use it in production.
MIT