Nearsighted Penguin March

    gatsby-theme-comments

    0.1.0 • Public • Published

    gatsby-theme-comments

    Provides drop-in comment functionality for static Gatsby site, powered by Firebase

    The problem

    You want to drive engagement for your Gatsby blog via comments.

    This solution

    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.

    Table of Contents

    Installation

    npm install gatsby-theme-comments gatsby-plugin-firebase
    npm install -D dotenv
    

    Usage

    1. Register plugins

    In gatsby-config.js:

    require("dotenv").config()
     
    module.exports = {
      plugins: [
        ...otherPlugins,
     
        "gatsby-plugin-firebase",
        "gatsby-theme-comments",
      ],
    }

    2. Set up Firestore and environment variables

    • Create a Firebase project
    • Create a new Firestore database
    • Inside the Database page, open the Indexes tab and add a composite index like so:

    Firestore index instruction

    • Create a .env in 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>
    

    3. Use in React

    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.

    Showcase

    UI child themes of gatsby-theme-comments

    If you wrote a child theme for gatsby-theme-comments, please submit a PR to add your theme to the list.

    Sites that uses gatsby-theme-comments

    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.

    APIs

    Comment

    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;
    }

    Exports

    CommentSection

    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.

    id

    string | required

    A unique identifier used to identify each post. It cannot contain special characters such as "/".

    CommentCount

    A component that renders the comment count of the post

    id

    string | required

    A unique identifier used to identify each post

    useComments

    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>
      )
    }

    useCommentCount

    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>
    }

    useAddComment

    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.

    Shadowable Components

    Here is a list of recommended components that you can shadow:

    • components/Button.js
    • components/Comment.js
    • components/CommentCount.js
    • components/Comments.js
    • components/Form.js
    • components/Loading.js
    • components/TextField.js

    License

    MIT

    Install

    npm i gatsby-theme-comments

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    13.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • alexluong