Knowasiak
Commento++ is a free, open-source, fast and lightweight comments box

Commento++ is a free, open-source, fast and lightweight comments box

Hello reader! Welcome, let's start-

💬 Try it out and deploy your own
LIVE DEMO

❓ About
Commento++ is a free, open source, fast & lightweight comments box that you can embed in your static Website instead of Disqus.

⚡ Features

Markdown support
Import from Disqus
Voting
Automated spam detection (Askimet integration)
Moderation tools
Sticky comments
Thread locking
OAuth login (Google, Github, Twitter) and single Sign-on
Hot-reloading of comments
Email notifications.

🤝 Support
Please (donate) if you find my work helpful (this will always remain free and open source)!

📷 Screenshots

🤔 How is this different from Disqus, Facebook Comments, and the rest?

🐱‍👤 Respects your privacy and no adverts
💄 Prettier comments box compared to other FOSS alternatives
⚡ Orders of magnitude lighter and faster than alternatives
🕐 One click to deploy your own instance to a free Heroku account in seconds
🔌 You can self-host too for maximum control!

Get started
To start you just need to launch an instance. The button below will work for a free Heroku account:

Otherwise, most of the below is the same as documented at https://docs.commento.io

If you want to self-host, you will need a PostgreSQL server handy and then:

Use this repo’s Dockerfile if you’re into that kind of thing
Download the plug and play pre-compiled version from the releases
To build yourself, you can clone this repo (you will require nodejs, yarn, golang installed) and run make prod and you will generate ./build/prod/commento

To launch, you should configure the following environment variables below:

$ export COMMENTO_ORIGIN=http://commento.example.com:8080
$ export COMMENTO_PORT=8080
$ export COMMENTO_POSTGRES=postgres://username:password@postgres.example.com:5432/commento?sslmode=disable
$ export COMMENTO_CDN_PREFIX=$COMMENTO_ORIGIN

And then you can run the commento binary.

Logging and graphing page views
The logging defaults to off to preseve disk space, but you can specify the COMMENTO_ENABLE_LOGGING environment variable to true to enable each page view being logged and a nice graph generated on your dashboard. This will however use Up a lot of space quickly if you have a high traffic Website; you may want to consider a more fully-featured analytics solution for your Website.

e.g.

$ export COMMENTO_ENABLE_LOGGING=true

to turn this feature on.

Wildcard domain support
A new feature added recently, with better edge-case handling of domain names, etc.

This feature however will open Up your commento instance to abuse if it is shared between a lot of people (e.g. people registering e% to register every domain beginning with e…)

As most of commento++ instances are serving one user only, I have assumed you will be sensible about this and enabled wildcard domain support by default.

If you want the old behaviour, you can disable this with an environment variable:

$ export COMMENTO_ENABLE_WILDCARDS=false

Disabling SMTP Host verification check
Commento++ allows configuration of the tlsConfig for both SMTPS as well as StartTLS for email sending.
For context, this is required for the https://cloudron.io/ app package.

To skip SMTP hostname verification, use:

$ export SMTP_SKIP_HOST_VERIFY=true

Docker setup
Alternatively you can use the pre-build images from:

https://gitlab.com/caroga/commentoplusplus-docker
https://hub.docker.com/r/caroga/commentoplusplus

Instructions for configuring the docker image can be found here. Are you missing a version? Please contact @caroga here.

Finally
Once you have created an account in your commento instance, it should give you instructions on how to embed this into your site! It should be as simple as:

If you’re running this behind nginx/another reverse proxy
Remember to either forward the websockets through to commento in your nginx config, e.g.:

location / {
proxy_pass http://commento;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “Upgrade”;
proxy_set_header Host $host;
}

Or if you’d rather not do that, disable websockets in favour of HTTP polling by adding data-no-websockets=”true” to the commento “>

How is this different to the original Commento?
Original source is from @adtac at https://gitlab.com/commento/commento/ – this fork is largely a result of me getting carried away fixing a lot of bugs but the original maintainer seemingly disappearing!

(Inconclusive) list of changes from upstream:

NEW FEATURE: Auto refreshing comments with WebSockets for push updates
NEW FEATURE: Window title updates when there’s new activity
NEW FEATURE: Permalinks, and a subtle yellow highlight animation for new comments when they come in live
NEW FEATURE: Smooth scrolling
NEW FEATURE: Hide +/- if no children
NEW FEATURE: Errors now slide down from the top rather than the ugly error system before
NEW FEATURE: Guests can leave their name
FIXED: Twitter profile photo bug
FIXED: Duplicate comment bug on login
FIXED: Add target=”_blank” to all external links, while also adding “noopener” to prevent XSS
FIXED: Allow anchor links onto same page
NEW FEATURE: Comment moderation dashboard, to approve/delete comments across your entire domain from one place
NEW FEATURE: MathJax support hook, will plug in to any MathJax library included on the same page commento is on
NEW FEATURE: Press enter to log in after entering your password
FIXED: Deleted comments not returned in array
NEW FEATURE: Reinit widget functionality for Single Page Applications
NEW FEATURE: Wildcards possible in domain name (so can serve %.example.com)

I’ve sent in merge requests for a lot of the above but I don’t know when they’ll be accepted, so here’s a ready to use version with all batteries included to help out fellow bloggers!

How to use this in a SPA (Single Page Application)
Commento++ runs a bit of code on page load to initialize the widget. This widget can be customized by using data attributes on the script tag. When using commento++ in a SPA you might want to change the pageId for the widget when navigating to a new blog post without a browser page load. Below you’ll find an example for an Commento++ component in React:

import React, { useEffect } from ‘react’

const Commento=({ pageId })=> {
useEffect(()=> {
if (typeof window !==’undefined’ && !window.commento) {
// init empty object so commento.js script extends this with global functions
window.commento={}
const script=document.createElement(‘script’)
// Replace this with the url to your commento instance’s commento.js script
script.src=`http://localhost:8080/js/commento.js`
script.defer=true
// Set default attributes for first load
script.setAttribute(‘data-auto-init’, false)
script.setAttribute(‘data-page-id’, pageId)
script.setAttribute(‘data-id-root’, ‘commento-box’)
script.onload=()=> {
// Tell commento.js to load the widget
window.commento.main()
}
document.getElementsByTagName(‘head’)[0].appendChild(script)
} else if (typeof window !==’undefined’ && window.commento) {
// In-case the commento.js script has already been loaded reInit the widget with a new pageId
window.commento.reInit({
pageId: pageId,
})
}
}, [])

return
}

export default Commento
Commento initializes itself and extends the window.commento object. When you have an HTML element with the id commento this will live on the window.commento namespace. Replacing the HTML element (as SPAs do) the window.commento is reset to the new element, losing all extended functionality provided by the commento++ script. Make sure to provide a data-id-root other than commento for this to work, see commento-box in the example above.

The window.commento.reInit function can be called with the following updated options (all optional):

{
pageId: “string”, // eg: “path/to/page”
idRoot: “string”, // eg: “new-element-id”
noFonts: “string”, // Boolean string, “true” or “false”
hideDeleted: “string”, // Boolean string, “true” or “false”
cssOverride: “string” // or null to reset to undefined
}

Read More
Share this on knowasiak.com to discuss with people on this topicSign Up on Knowasiak.com now if you’re not registered yet.

About the author: Knowasiak
Hey! look, i give tutorials to all my users and i help them!
Advertisements

Get involved!

Get Connected!
One of the Biggest Social Platform for Entrepreneurs, College Students and all. Come and join our community. Expand your network and get to know new people!

Discussion(s)

No comments yet
Knowasiak We would like to show you notifications so you don't miss chats & status updates.
Dismiss
Allow Notifications