Git Product home page Git Product logo

commentatic's Introduction

Commentatic, static comments for Statamic

Use the magic of Statamic to power your comments

Features

Installation & Config

Copy first the commentatic.yaml.sample file from the plugin folder to _config/add-ons/commentatic.yaml

Then field the following parameters :

  • username_field: Sets the field name containing the username (default: username)
  • email_field: Sets the field name containing the email (default: email)
  • comment_field: Sets the field name containing the comment (default: comment)
  • comment_per_page: Number of comments per page
  • comment_folder: Set the folder that will host your comments and located in the _content folder of your Statamic installation. Use a underscore before the folder name in order to hide the navigation (default: _comments)

Create a folder dedicated to the comments in the _content folder. Assign write permissions to the folder.

Comment listing usage

Use the {{commentatic:listing}} method in the same way as for the Statamic {{entries:listing}} method. The options are similar except that you don't have to specify the limit (defined in the config file).

{{ commentatic:listing }}
<div class="row">
    <div class="entry clearfix">
      {{ if no_results }}
        <h3>Hey! No comment. <a href="#post-comment">Why not post one ?</a></h3>
      {{ else }}
      <div class="span2">
        <div class="entry-meta">{{ username }}</div>
        <a href="{{ gravatar_profile }}">{{ avatar }}</a>
        <div class="entry-meta">Posted on <span class="date"> {{ last_modified format="F jS, Y H:i" }}</span>.</div>
      </div>
      <div class="span6">
              {{ content }}
        </div>
    </div>
    {{ endif }}
</div>
{{ /commentatic:listing }}

If you use the pagination, The use is similar to the method {{ entries:pagination }}. Except that you don't specify the limit parameter (defined in the config file).

Comment form usage

To display the form for writing a comment, use the method {{ commentatic:form }}

Here are the options :

class : Sets the class name of the form tag id : Sets the ID of the form tag required : Sets the required fields. Separated by |.(no default but username, email and comment are always required) honeypot : activate or not the honeypot against bot (default : true)

Example of usage :

{{ commentatic:form honeypot="true" id="post-comment" }} {{ if error}}

Error

    {{ errors }}
  • {{error}}
  • {{ /errors }}
{{ endif }}

  {{ if success }}
      <p>Your message has been sent!</p>
  {{ else }}
      {{ if logged_in }}
      <div class="clearfix">
        <p class="offset2">Logged in as <strong>{{ username }}</strong></p>
      </div>
      {{ else }}
      <p class="offset2">
          <label for="username">Username*:</label><br />
          <input type="text" name="username" id="username" value="{{ post:username }}" placeholder="Your Username">
      </p>
      <p class="offset2">
          <label  for="from">Email*:</label><br />
          <input type="text" name="email" id="email" value="{{ post:email }}" placeholder="Your email address">
      </p>
      {{ endif }}
      <p class="clearfix">
        <label class="span2" for="comment">Your comment:</label>
        <textarea class="span6" type="text" rows="5" name="comment" id="comment" placeholder="Your thoughts here !">{{ post:comment }}</textarea>
      </p>
      <p class="clearfix"><input class="offset2 btn" value="Send comment" type="submit"></p>
  {{ endif }}

{{ /commentatic:form }}

Helpers

  • {{ commentatic:comment_count }}: returns the number of comments of an folder
  • {{ commentatic:comment_count folder="my_folder"}}: returns the number of comments for a specific folder
  • {{avatar}}: print the user's gravatar if available
  • {{gravatar_profile}}: print the user's gravatar profile link if available

TODO

  • Better management publishing date and publishing time
  • Better memory of users who have already posted (Cookie)
  • Social login (Twitter, Facebook, etc...)
  • Performance improvement (Something like caching)
  • More tests!
  • Code cleanup

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.