Self-hosting isso-comments

Server-side config

Refer to Sending and receiving email from a custom domain for instructions on how to acquire the credentials for the [smtp] section.

isso.cfg

See the official documentation for a full list of options. Here are mine:

• I enable moderation, so when you add a comment to the Guestbook, it sends me an email asking me to approve or deny the request

isso.cfg

[general]
dbpath = /db/comments.db
host = https://garden.bencuan.me
notify = smtp
 
[server]
listen = http://localhost:8080
public-endpoint = https://comments.bencuan.me
 
[moderation]
enabled = true
approve-if-email-previously-approved = false
purge-after = 60d
 
[smtp]
username = comments@bencuan.me
password = <KEY GOES HERE>
host = smtp.mailgun.org
port = 587
security = starttls
to = comments@bencuan.me
from = "bencuan" <comments@bencuan.me>
timeout = 10
 
[guard]
enabled = true
ratelimit = 2
direct-reply = 3
reply-to-self = false
require-author = true
require-email = false

Client-side configuration

The base html to include looks like this.

<script
  data-isso="https://comments.bencuan.me/"
  src="https://comments.bencuan.me/js/embed.min.js"
></script>
<section id="isso-thread"></section>

I configure it in a Comments Quartz component, and include it in every page (including the homepage, where the Guestbook lives).

Unfortunately it doesn’t work out of the box.

1. Since Quartz has SPA (single-page application) routing, the comments section doesn’t get reloaded when navigating from one page to another. So manually trigger it with a setupIssoComments function:

function setupIssoComments() {
  const issoThread = document.getElementById("isso-thread")
  if (issoThread) {
    // Clear existing comments to force a reload
    issoThread.innerHTML = "<noscript>Javascript needs to be activated to view comments.</noscript>"
 
    // Trigger Isso to load comments for the current page
    if (window.Isso) {
      window.Isso.init()
      window.Isso.fetchComments()
    }
  }
}
 
// Run on navigation
document.addEventListener("nav", setupIssoComments)

2. Quartz turns the isso buttons into internal links with href=# which breaks things, so I disable this with a MutationObserver:

// Set up observer to fix Isso links
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === "childList") {
      const issoLinks = document.querySelectorAll(
        ".isso-reply, .isso-edit, .isso-delete, .isso-upvote, .isso-downvote",
      )
      issoLinks.forEach((link) => {
        if (!link.hasAttribute("data-fixed")) {
          link.setAttribute("data-fixed", "true")
          link.addEventListener("click", (e) => {
            e.preventDefault()
            e.stopPropagation()
            // The link's onclick handler will still run
          })
        }
      })
    }
  }
})
 
// Start observing the document with the configured parameters
if (issoThread) {
  observer.observe(issoThread, { childList: true, subtree: true })
}