Commentcan

The out of the box comment solution for a statically built blog.

Launch a comment app in a docker container. Inject it to any page just by inserting a <script> tag. Can be easily used with static sites built with Jekyll and so on.

Usage

Run

What you will need is a running mongodb instance.

Here is an example of how it might be set up with a docker-compose project:

---

version: '3'

services:
  mongo:
    image: mongo:4.4
    ports:
      - 27017:27017
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: example
  commentcan:
    build: .
    ports:
      - 80:3000
      - 443:3000
    environment:
      PORT: 3000
      APP_URL: http://localhost:1992
      CONSUMER_URL: http://localhost:14000
      SECRET: any-randomly-choosen-string
      MONGO_URI: mongodb://mongo:27017/commentcan
      MONGO_USER: root
      MONGO_PASS: example
      FACEBOOK_CLIENT_ID: 111111111111111
      FACEBOOK_CLIENT_SECRET: 11111111111111111111111111111111

Here's an explanation of what the env variables mean here:

• PORT - Port on which the app will listen. Should be equal to the port that is exported by the ports directive. There's basically nothing to change here.
• APP_URL - Full app URL (if the app is behind the proxy, put the external URL of the app here)
• CONSUMER_URL - The URL of your external APP (e.g. your static blog) where you plan to inject the comments
• SECRET - Any randomly choosen secret string of text
• MONGO_URI - MongoDB connection URI
• MONGO_USER - MongoDB username
• MONGO_PASS - MongoDB password
• FACEBOOK_CLIENT_ID - Facebook APP client ID
• FACEBOOK_CLIENT_SECRET - Facebook APP client secret

Inject to a page

First of all you will need to give your page an Id by setting a specific meta tag with a property attribute equal to commentcanPageId and a content attribute equal to any random unique value which will be used to identify a page on your website:

<meta property="commentcanPageId" content="page1" />

You might (optionally) want to apply the predifined stylesheets:

<link rel="stylesheet" href="<APP_URL>/comments.css">

Now define the root area for the comments and finally inject a script:

<div id="commentcan-root"></div>
<script src="<APP_URL>/embed-script.js"></script>

Just don't forget to replace the <APP_URL> with the URL of your running commentcan instance.

TODO

• Allow authentication with a way more providers (Github, Reddit, Twitter etc.)
• Testing
• Pagination
• Pipe the FE code through babel to make it ES-5 compatible
• Prettify the default styles
• Implement several style themes
• Implement a simple admin panel with an UI
• Basic CSRF protection
• Optional WebSocket support
• Support of multiple consumer apps
• Making more plans...