Kommentare aktiviert

Nachdem das mit dem Bloggen doch besser klappt, als ich anfangs befürchtet hatte, und ich schon darauf angesprochen wurde, ob ich nicht Interesse an einem Austausch hätte, habe ich mich für eine Kommentarfunktion entschieden.

Warum hat das so lange gedauert? Hauptsächlich, weil ich keine Lust hatte, zur Schleuder für Porno-Seiten oder zwielichtige Angebote zu werden. Auch sollte es nichts Halbkommerzielles sein, und dann ist da ja auch noch die DSGVO.

Die Entscheidung war also gefallen – es sollte eine schlanke, selbst gehostete Lösung sein. Ich habe mich letztlich für Isso entschieden. Vielleicht lag’s am Namen.

Technische Umsetzung #

Für die Technikinteressierten ein paar Details: Der Blog wird über einen Caddy-Server ausgeliefert, der in einem Docker-Compose-Setup läuft. Fangen wir mit dem Caddyfile an.

Anpassungen am Caddyfile #

Damit Caddy die Isso-API weiterleitet, musste ich folgenden Abschnitt ergänzen:

https://ch.ege.io {
    root * /site
    file_server

    handle_path /isso/* {
        reverse_proxy http://isso-server:8080 {
            header_up X-Script-Name /isso
        }
    }

    encode gzip
}

Alle Anfragen an https://ch.ege.io/isso/* werden an http://isso-server:8080 im internen Docker-Netzwerk weitergeleitet.

Docker-Compose-Konfiguration #

Da ich auf einem ARM64v8-Server hoste, musste ich auf ein aktuelles Image zurückgreifen. Das Standard-release-Image funktionierte nicht.

isso-server:
  image: ghcr.io/isso-comments/isso:latest
  restart: always
  volumes:
    - ./isso/config:/config
    - ./isso/db:/db
  networks:
    - proxy

Die Konfiguration liegt in ./isso/config, die SQLite-Datenbank in ./isso/db.

Isso-Konfiguration #

Ein Auszug aus meiner config.cfg:

[general]
dbpath = /db/comments.db
host = 
    http://ch.ege.io/
    https://ch.ege.io/
public-endpoint = /isso

[moderation]
enabled = true

[server]
listen = http://0.0.0.0:8080/

[guard]
enabled = true
ratelimit = 2
direct-reply = 3
reply-to-self = false
require-author = true
require-email = true

[smtp]
username = <user name>
password = <user password>
host = <smtp server>
port = 465 
security = ssl 
to = <admin mail address>
from = <sender address>
timeout = 10

Damit ist der Server einsatzbereit.

Hugo-Integration #

Damit Hugo Isso korrekt einbindet, musste ich etwas tricksen. Da ich lokal in einem VS Code Devcontainer entwickle, wollte ich auch dort Kommentare testen. Dafür starte ich Isso lokal so:

isso -c isso/config/config.cfg run

Meine lokale Konfiguration:

[general]
dbpath = /workspaces/ch.ege.io/isso/db/comments.db
host = 
    http://localhost:1313/
    http://127.0.0.1:1313/

[server]
listen = http://0.0.0.0:8080

Um zwischen lokalem und produktivem Setup zu wechseln, nutze ich Hugo-Umgebungen. In config/local/params.toml steht:

isso_script = "http://localhost:8080/js/embed.min.js"
isso_endpoint = "http://localhost:8080/"

Hugo startet man dann so:

hugo server -e local -D

Einbindung im Template #

Das Theme erlaubt Kommentarunterstützung, man muss lediglich layouts/partials/comments.html anlegen:

<section id="isso-thread"></section>
<script 
  src="{{ .Site.Params.isso_script | safeURL }}"
  data-isso="{{ .Site.Params.isso_endpoint }}"
  data-isso-require-author="true"
  data-isso-sorting="newest"
  data-isso-lang="{{ .Site.Language.Lang | default "en" }}"
></script>

Der Wert data-isso-lang sorgt für automatische Lokalisierung, je nach Sprache der Seite.

CSS-Anpassung #

Mit aktiviertem Dark Mode im Theme war weißer Text auf weißer Box ein Problem – ganz nach dem Motto “weiße Taube auf weißem Grund” (das hätte schon meinem Grundschullehrer nicht gefallen).

Die Lösung: eigene CSS-Datei assets/css/custom.css anlegen mit:

html.dark #isso-thread textarea,
html.dark #isso-thread input,
html.dark #isso-thread .isso-postbox,
html.dark #isso-thread .isso-comment {
  background-color: var(--color-bg-dark) !important;
  color: var(--color-text-dark) !important;
  border-color: var(--color-border-dark, #333) !important;
}

html.dark #isso-thread ::placeholder {
  color: var(--color-text-dark) !important;
  opacity: 0.6;
}

Je nach Theme kann das variieren – ggf. musst du eigene Variablen definieren oder andere Klassen verwenden.

Fazit #

Kommentare mit Hugo und Isso zum Laufen zu bringen, ist durchaus möglich – aber kein Selbstläufer, wenn man wie ich gerne auf die Details achtet. Die Integration ist jetzt funktional, optisch noch nicht perfekt – aber da geht bestimmt noch was.

Schreib mir gerne etwas dazu in die Kommentare – ich bin gespannt! 😁