gatsby-plugin-commentator

Gatsby PLUGIN Commentator

This plugin adds comment feature to a GatsbyJS website. The goal is to abstract out all the details for posting and storing of comments in a GatsbyJS website.

It gives a barebone commenting system which gives the developer consuming this plugin the total control of the look and feel of gatsby-plugin-commentator elements.

Kindly star it if you find it useful! Gracias!!!

Demo

See it here

Installation

npm install gatsby-plugin-commentator
// or
yarn add gatsby-plugin-commentator

Include it among the plugins in the gatsby-config.js file of a GatsbyJS website project folder.

module.exports = {
    plugins: [
        // ......
        {
            resolve: "gatsby-plugin-commentator",
            {website: "http://url-of-the-webiste.com"}
        }
    ]
}

Lastly, make a DOM element available at any component rendered with id="commentContainer"

<!-- Single post listing page -->
<section id="commentContainer"></section>

That's all!

Component Classnames

• commentator-comment-cont:

• commentator-title: Classname for the <h2> element

• commentator-comment-list: Classname for the parent <ul> of the comments

• commentator-comment-list-item: Classname for the <li> element. It is a direct child of <ul class="commentator-comment-list">

• commentator-comment-author: The className for the <div> holding the author of the comment.

• commentator-comment-date: The className for the <span> holding the date.

• commentator-comment-content: Classname for a div holding all the comment body/content.

• commentator-comment-form: Classname for the <form> element

• commentator-name-input: Classname for the <input name="name"> that collects the name of the commentator

• commentator-comment-input: Classname for the <textarea name="content" /> that collects the comment content.

• commentator-feedback: The className for the <span> elements that gives the state of a form during submission. It also supports .info for general information, .error for error feedback and .success for successful operation feedback.

• commentator-comment-btn: The className for the form submit button.

NOTE.

To load fresh comments, the server has to be restarted.

Built with 💕💕💕 by Aleem Isiaka