Maurice Renck - Webdev (team) https://maurice-renck.de/de Interessiert an Webentwicklung de Thu, 21 Aug 2025 17:02:00 +0200 Darum mag ich mein Kirby-Setup so https://maurice-renck.de/de/notes/2025/that-s-why-i-like-me-kirby-setup https://maurice-renck.de/de/@/page/wchltpf7dei7bcyw Thu, 21 Aug 2025 17:02:00 +0200 Maurice Renck kirby-cms Deshalb gefällt mir mein Kirby-Setup so gut: Ich wollte die letzten fünf Folgen unseres Podcasts und die letzten fünf Beiträge unseres Sociabli-Blogs zu meiner Homepage hinzufügen. Und alles, was ich tun musste, war, das hier zum Controller hinzuzufügen:

$serverSideStories = $site->rssPages('https://konzentrik.de/server-side-stories/feed')->sortBy('date', 'desc')->limit(5);
$sociabli = $site->rssPages('https://sociab.li/blog/feed.xml')->sortBy('date', 'desc')->limit(5);

Und dann auf der Startseite mein Textlisten-Snippet benutzen:

<?php snippet('list/textlist', ['articleList' => $sociabli, 'useLink' => true]); ?>

Das war's!

]]>
Avatare anpassen https://maurice-renck.de/de/kirby/komments/guides/avatare-anpassen https://maurice-renck.de/de/@/page/r66xvuYUXxUXMGb0 Fri, 20 Jun 2025 12:00:00 +0200 Maurice Renck kirby-cms

Bisher hat das Komments-Plugin Gravatar als Standard- und einzigen Avatar-Dienst genutzt. Mit dem Release 3.2.x hat sich dies geändert. Avatare sind nun anpassbar.

Mit den neuen Optionen lassen sich Avatare nun einfach anpassen. Drei neue Optionen können in der config.php angepasst werden:

'mauricerenck.komments.avatar.returnType' => 'img',
'mauricerenck.komments.avatar.service' => 'gravatar',
'mauricerenck.komments.avatar.webmentionAvatars' => true

Das hier sind die Standardwerte. Über den service kann gesteuert werden, woher Avatare kommen. In diesem Fall kommen sie von Gravatar. Der returnType steuert die Ausgabe des Avatars, hier stehen drei Optionen bereit:

  1. img (default)
  2. url
  3. svg

SVG ist natürlich nur sinnvoll, wenn ein Service genutzt wird, der SVG zurückgibt.

webmentionAvatars steuert, ob weiterhin die in Webmentions erkannten Avatare angezeigt werden sollen, auch wenn ein anderer Service genutzt wird.

Initialen anzeigen

Bisher gibt es zwei Services:

  1. Gravatar
  2. Initials

Initials ist kein externer Service, denn diese Avatare werden lokal erzeugt. Um in den Kommentaren Initialen als Avatar anzuzeigen, setzen wird lediglich die Service-Option:

'mauricerenck.komments.avatar.returnType' => 'img',
'mauricerenck.komments.avatar.service' => 'initials',
'mauricerenck.komments.avatar.webmentionAvatars' => true

Jetzt werden Avatare weiterhin als Bild ausgespielt und zeigen zwei Buchstaben, abhängig vom Namen der kommentierenden Person. Avatare, die durch Webmentions empfangen wurden, werden weiterhin angezeigt. Das wollen wir ändern und nur noch Initialen anzeigen:

'mauricerenck.komments.avatar.returnType' => 'img',
'mauricerenck.komments.avatar.service' => 'initials',
'mauricerenck.komments.avatar.webmentionAvatars' => false

Die Avatare sehen ganz nett aus, wir möchten sie aber noch ein wenig anpassen. Das ist mit CSS möglich, dazu müssen die Avatare allerdings als SVG eingebunden sein:

'mauricerenck.komments.avatar.returnType' => 'svg',
'mauricerenck.komments.avatar.service' => 'initials',
'mauricerenck.komments.avatar.webmentionAvatars' => false

Jetzt haben wir SVGs direkt im Dokument und können diese Stylen:

.komment-avatar-initials {
    --author-bg: blue;

    --author-text: white;
    --author-size: 50px;
    --author-font-family: Arial, sans-serif;
    --author-font-size: 20px;
    --author-font-weight: bold;
    --author-text-transform: uppercase;
}

Wer noch weiter ins Detail gehen will, kann die CSS-Klasse natürlich komplett überschreiben.

In Zukunft könnten noch weitere Services folgen. Viel Spaß beim Anpassen.

]]>
Zwei Kirby Plugins https://maurice-renck.de/de/notes/2025/two-kirby-plugins https://maurice-renck.de/de/@/page/IYqmd441ZmTrfDoB Tue, 13 May 2025 18:09:00 +0200 Maurice Renck kirby-cms Eigentlich bin ich gerade mitten in den Arbeiten an einem großen Feature für den IndieConnector, dennoch habe ich in den vergangenen Tagen zwei weitere Kirby-Plugins veröffentlicht.

Da hätten wir einerseits das Bloggerrolle-Plugin, welches den Dienst anpingt und zum anderen ein Kirby-Plugin zum automatischen Veröffentlichen von Seiten, was wir bei konzentrik für uns entwickelt haben. Das war im Grunde schon fertig und brauche nur noch ein paar Vorbereitungen, damit die Releases auch funktionieren.

(Und irgendwie bin ich noch sehr unzufrieden darüber, wie die Detailseiten meiner Projekte aussehen)

]]>
Fetching Responses https://maurice-renck.de/de/blog/2025/fetching-responses https://maurice-renck.de/de/@/page/MmSzUF82MKkuwlZ3 Sun, 27 Apr 2025 18:51:00 +0200 Maurice Renck kirby-cms, indieweb Vor einigen Tagen schrieb ich bei Mastodon von Problemen mit dem IndieConnector und brid.gy

Maurice (@mauricerenck@mastodon.online)
There seems to be something up with the #indieConnector in combination with brid.gy. All webmentions fall back to the type „mention-of" instead of, for example, „like-of". I am pretty sure the webmention source (generated by brid.gy) previo…

Ich erwähnte dort, dass ich schon lange vorhabe, externe Antworten, Likes und Reposts selbst zu holen. Das ist allerdings nicht ganz so trivial, wie es auf den ersten Blick scheint.

Leider bin ich bisher nicht dahintergekommen, warum das Einsammeln von Antworten über brid.gy nicht mehr so funktioniert. Aktuelle Logs kann ich mir nicht ansehen, weil sie mit Fehlermeldungen abbrechen, bevor eine Webmention geschickt wird.

Es ist also doch Zeit, dieses Feature in Angriff zu nehmen und es bei GitHub von der Upcoming-Feature-Liste zu streichen. Und genau das habe ich getan.

Postet man automatisch zu Mastodon oder Bluesky, speichert das IndieConnector-Plugin (IC) schon die URLs zu den Posts. Im Falle von Mastodon kann man zudem selbst eine URL hinterlegen (das wird es dann auch für Bluesky geben).

Das sind schon einmal gute Voraussetzungen für das Feature, denn IC weiß somit, wo es nachschauen kann, um Reaktionen einzusammeln. Mastodon stellt bereitwillig drei Endpunkte bereit, um an Likes, Reposts und Replies zu kommen – wunderbar.

Es gibt schon ein paar Lösungen und Beschreibungen, wie man das mit JavaScript lösen kann. Die funktionieren gut, für die Plugins muss (und will) ich jedoch den PHP-Weg gehen.

Der IC geht alle URLs durch, holt sich die Antworten und schickt dann eine Webmention an sich selbst. Jede Response hat eine virtuelle Seite mit entsprechenden Microformats. Von hier an läuft der gewohnte Webmention-Ablauf ab. Ein Grund, warum ich diesen Weg gewählt habe. Auf diese Weise muss ich wirklich nur das Abholen bauen und nicht noch einen weiteren Weg öffnen, um Daten abzulegen usw.

Anders als bei der JavaScript-Lösung muss ich mir merken, welche Reaktionen ich schon verarbeitet habe, damit ich nicht ständig dieselben Webmentions verschicke und unnötige Last auf den Systemen erzeuge. Ich merke mir also für jeden Mastodon-Endpunkt die letzte bekannte Response-ID und beende dann den Ablauf, sobald die erreicht ist.

Das klappt bisher super.

Seit ein paar Stunden sitze ich nun aber hier und grübele, warum diese Webmentions nicht ankommen wollen. Verschickt werden sie. Und so cool ich diese ganze Technik finde, asynchrone Prozesse zu debuggen ist und bleibt fummelig. Ich versuche einzelne Schritte mit Unit-Tests abzudecken, aber manchmal – wie gerade – sitze ich dann trotzdem da und schaue fragend auf den Bildschirm.

Ich hoffe, dass ich das Problem schnell gelöst bekomme. Dann hätte ich den kompletten Ablauf für Mastodon schon fertig und müsste für Bluesky "nur" noch das Abholen bauen (denn danach läuft es genauso weiter wie bei Mastodon).

Update
Ich habe eine falsche (alte) URL für meinen Webmention-Endpunkt benutzt und alle Webmentions ins Nirvana geschickt, deshalb kamen sie nicht an 🤦🏼‍♂️

]]>
Reply via Webmention https://maurice-renck.de/de/kirby/komments/guides/reply-via-webmention https://maurice-renck.de/de/@/page/kf2V6GancGv5lr3y Fri, 11 Apr 2025 15:58:00 +0200 Maurice Renck kirby-cms Blogs erleben gerade eine Renaissance, viele Menschen wenden sich von den zentralen und geschlossenen Plattformen ab. Viele neue Blogs entstehen und alte Blogs wachen wieder auf. Das ist schön, aber noch tun wir uns etwas schwer damit, uns zu vernetzen.

Das Komments- und IndieConnector-Plugin möchte es dir ein wenig leichter machen. Empfängst du eine Webmention, kannst du ab sofort darauf direkt aus dem Panel heraus antworten.

Mini-Exkurs: Webmentions

Um zu verstehen, wie das funktioniert, müssen wir uns ansehen, wie Webmentions funktionieren. Nehmen wir zwei Blogs, die beide Webmentions unterstützen:

  • Blog A veröffentlicht einen Beitrag
  • Blog B reagiert in einem eigenen Beitrag auf den von Blog A
  • Beim Veröffentlichen des Beitrags von Blog B, schickt Blog B die Beitrags-URL an Blog A
  • Blog A empfängt die URL, ruft diese auf und liest die Daten aus
  • Blog A kann nun den Post von Blog B als Kommentar anzeigen

Natürlich passiert noch viel mehr im Hintergrund, aber für diesen Beitrag konzentrieren wir uns auf die Grundlagen.

Antworten senden

Nehmen wir an, wir sind Blog A und haben gerade die Webmention von Blog B mit dem IndieConnector empfangen, die wir mit dem Komments-Plugin unter unserem Beitrag anzeigen.

Würden wir nun auf diesen Kommentar antworten, würde Blog B davon gar nichts mitbekommen. Die Betreiberin von Blog B müsste gezielt unseren Beitrag aufrufen und schauen, ob wir eventuell reagiert haben.

Mit dem neuen Feature in den beiden Plugins lässt sich das ändern!

Antworten wir im Panel auf die Webmention, wird unsere Antwort nicht nur als Kommentar auf unserer Seite gespeichert, sondern zugleich wird auch eine Webmention zurück an Blog B geschickt.

Empfängt Blog B unsere Webmention, wird es versuche unsere Seite auszulesen und hier geraten wir an das erste Problem, denn einerseits enthält unsere Seite diverse Kommentare und andererseits würden die Microformate auf unserer Seite dafür sorgen, dass unser Artikel als Webmention ausgelesen wird, nicht der Kommentar.

Mit einem kleinen Trick können wir das jedoch ändern.

Kommentare

Wusstest du, dass jeder Kommentar auf deiner Seite einen eigenen Permalink hat? Einen Deeplink, wie du ihn vielleicht von Deinen normalen Seite kennst. Kirbys Permalinks sehen so aus: https://example.com/@/page/some-unique-id.

Und auch jeder Kommentar bekommt eine Identifikationsnummer, eine UUID. Das Kommets-Plugin stellt außerdem eine Route bereit, mit der Du jeden Kommentar über seine UUID aufrufen kannst. Schaust du dir im Panel die Details eines Kommentars an, siehst du diesen Permalink:

Rufst du diesen Permalink auf, wird die Seite geöffnet, zur welcher der Kommentar gehört und zum Kommentar gescrollt.

Dieses Verhalten lässt sich nun aber ändern.

In der config.php können wir nun folgende Option aktivieren:

'mauricerenck.komments.webmentions.sendReplies' => true

Die sorgt zum einen dafür, dass eine Webmention verschickt wird, sobald wir im Panel auf eine Webmention antworten, andererseits ändert es auch das Verhalten des Permalinks.

Anstatt beim Aufruf des Permalinks zum Kommentar zu scrollen, wird eine einzelne Seite angezeigt, die nur den Kommentar inklusive Microformats enthält.

Damit bezieht sich die verschickte Webmention nicht mehr auf den Beitrag, sondern ausschließlich auf deinen Kommentar. Dieser kann in unserem Beispiel von Blog B ausgelesen und angezeigt werden.

Webmentions verschicken

Normalerweise verschickt das IndieConnector-Plugin Webmentions nur dann, wenn es in einer Seite beim Veröffentlichen oder Speichern Links entdeckt. In unserem speziellen Fall speichern oder veröffentlichen wir aber keine Seite. Damit beide Plugins zusammenarbeiten können, müssen wir dem IndieConnector ebenfalls sagen, dass es auf Kommentar-Webmentions reagieren soll:

'mauricerenck.indieConnector.send.hook.enabled' => true

Diese Option aktiviert einen neuen Hook, der jetzt von anderen Plugins ausgelöst werden kann und der daraufhin eine Webmention verschickt. Das Komments-Plugin ruft diesen Hook auf und IndieConnector verschickt die Webmention.

Damit taucht unser Kommentar sowohl in unserem Blog als auch in Blog B auf und die Betreiberin von Blog B bekommt das automatisch mit, ohne ständig bei uns nachschauen zu müssen. 🥳

Fazit

Mit nur zwei Änderungen in Deiner config kannst du dein Blog nun noch besser mit anderen vernetzen. Wenn mehr Webseiten dieses oder ein ähnliches Feature implementieren, werden sie Schritt für Schritt zu einem dezentralen Netzwerk – ganz ohne aufwendige Serververwaltung oder Konfigurationen.

Das Template für einzelne Kommentare ist ziemlich simpel aufgebaut, Du kannst es aber, wie alle Templates in Kirby, einfach mit Deinem eigenen überschreiben, indem du eine neue PHP-Datei anlegst: `site/templates/komment-response.php'

Kopiere am besten den Inhalt aus site/plugins/komments/templates/response.php und passe ihn so an, wie du magst. Achte aber darauf, dass die Microformats erhalten bleiben, damit andere Seiten in der Lage sind, den Inhalt korrekt auszulesen.

Das ist der erste Schritt, ich plane weitere Verfeinerungen, wie das Liken einer Webmention zum Beispiel.

Das Feature steht dir ab Version 2.7.1 des IndieConnectors und 3.1.0 des Komments-Plugins zur Verfügung. Viel Spaß damit!

]]>
Guides https://maurice-renck.de/de/kirby/komments/guides https://maurice-renck.de/de/@/page/VXUkMftQuDaY0nik Fri, 11 Apr 2025 15:55:00 +0200 Maurice Renck kirby-cms Mein kaputter RSS-Feed https://maurice-renck.de/de/blog/2025/my-broken-rss-feed https://maurice-renck.de/de/@/page/16ENhGdvX3s5TFQo Wed, 02 Apr 2025 15:15:00 +0200 Maurice Renck engine-room Feedbin war wegen einer Kleinigkeit nicht in der Lage meinen RSS-Feed zu lesen. Ein spezielles Blog-Feature half mir das Problem zu lösen.

Anfang des Jahres habe ich hier davon erzählt, dass ich von Feedly zu Feedbin gewechselt bin. Ich bin weiterhin sehr zufrieden mit Feedbin, habe dort zahlreiche Blogs und andere Seiten abonniert – meine eigene auch.

Vor einigen Tagen fiel mir dann etwas auf: Ich hatte einen neuen Beitrag veröffentlicht, ihn aber gar nicht bei Feedbin gesehen. Seltsam. Vielleicht habe ich einfach übersehen? Das lässt sich leicht nachprüfen. In der Liste aller Abos suchte ich nach meinem Namen und ließ mir die Details zu meinem Feed anzeigen:

Anders als hier im Screenshot zu sehen, stand dort allerdings, dass mein letztes Update im Feed zwei Jahre zurückliegt. Entweder ist die Zeit wie im Fluge vergangen, oder etwas stimmte mit meinem Feed nicht.

Im W3C-Validator sah alles gut aus, keine Fehler, nur ein paar Warnungen wegen relativer Anker-Links. Ich verwende außerdem einen freien Dienst, der mich per Mail informiert, wenn mein Feed defekt ist (ich komme gerade einfach nicht auf den Namen …).

Ich entschied mich, ein kleines Feature zu nutzen, über das ich gar nicht reden darf. Ich veröffentliche einen Blogpost, zeigte ihn aber ausschließlich im RSS-Feed an. Dort berichtete ich von meinen Problemen und bat um Kommentare.

Ich kam mir sehr clever vor, denn nur Abonnent:innen meines RSS-Feeds können diesen Beitrag sehen und kommentieren. Wer kommentiert, empfängt also eindeutig meinen Feed.

Es wurde fleißig kommentiert! Mein Feed war also lesbar und viele der Kommentare bestätigten mir dies. Das half mir sehr, vielen Dank an alle, die sich gemeldet haben!

Irgendwas musste Feedbin also an meinem Feed stören. Ich prüfte erneut im Detail das XML. Alles sah okay aus, Tags mit Datum waren gesetzt, das Datum im richtigen Format usw. Alles sah gut aus. Aber etwas musste meinen Feed von anderen unterscheiden!

Nach kurzem Grübeln vermutete ich, dass eine ganze bestimmte Zeile schuldig sein könnte: mein Stylesheet.

Ruft man einen RSS-Feed im Browser auf, wird er entweder direkt heruntergeladen oder man sieht den Quelltext, mit dem man wenig anfangen kann. Es gibt aber die Möglichkeit (wie bei HTML) Styles einzubetten, sodass der Feed dann im Browser auch für Menschen lesbar ist. Das habe ich gemacht.

Ich nahm das Styling also raus, schob die Änderungen auf den Server und abonnierte meinen Feed neu. Seitdem trudeln bei mir wieder Beiträge ein. Es lag tatsächlich am Styling.

Das ist ein wenig ärgerlich, aber nicht weltbewegend. Ich hatte auch bisher nicht die Muße herauszufinden, ob es an meinem speziellen Code lag, oder ob Feedbin damit generell nicht umgehen kann. Vielleicht teste ich das später noch einmal, gerade gibt es aber wichtigere Aufgaben.

Dank meiner tollen Feed-Leser:innen habe ich nun aber wieder einen RSS-Feed, der überall funktioniert – vielen Dank. Und vielleicht wollt ihr ja eure Feeds auch mal prüfen, das wäre doch ärgerlich, wenn es an so einer Kleinigkeit scheitert.

Welche Feeds ich abonniert habe, kann man übrigens jetzt auch in meiner Blogroll sehen!

]]>
Eine Kirby-Seite in zwei Wochen https://maurice-renck.de/de/blog/2024/a-kirby-site-in-two-weeks https://maurice-renck.de/de/@/page/LZm4i4cpkHMPZpVX Wed, 02 Oct 2024 09:30:00 +0200 Maurice Renck kirby-cms

Webseiten bauen ist viel zu kompliziert geworden? Wir haben eine Kirby-Seite in nur zwei Wochen gebaut, während mein Kollege in China saß und mit einer wackeligen Internetverbindung über VPN kämpfte.

Immer wieder lese ich davon, wie kompliziert es geworden ist, eine einfache Webseite zu bauen und online zu bringen. Etliche Frameworks, aufgeblähte CMS, komplizierte Deployments. Mein Kollege und ich haben uns vorgenommen, seine neue Webseite so schnell es geht online zu bringen.

Home - YADL
Mark ist seit 17 Jahren Full-Stack-Entwickler mit einer Leidenschaft für Event-Driven Architekturen. Er gründete ein Startup und hat eine eigene kleine Agentur. Er spielt Tischtennis und Rollenspiele.

Wir bei konzentrik bauen gerne kleine und große, hilfreiche Tools und Dienste, die uns und vielen anderen das Leben leichter machen sollen. Aber was bringt das ganze Entwickeln, wenn niemand davon mitbekommt?

Auf meiner Webseite habe ich für mich einen thematischen Schwerpunkt definiert, aus dem ich nur ungern ausbreche. Viele unserer Tools passten bisher nur sporadisch hier rein (unser Crossposter z.B.). Ich grübelte eine ganze Weile, wie sich das ändern lässt.

Vor etwas mehr als zwei Wochen sprach ich Mark dann darauf an. Mark saß zu dem Zeitpunkt gerade in China, hatte nur eine mäßig gute Internetverbindung und der Einsatz eines VPNs machte das nicht besser.

"Mark, ich werde dich jetzt zu etwas zwingen, was dir nicht so sehr gefallen wird."

Mark schaute mich leicht überrascht an und erfuhr dann, dass ich ihn zwingen würde, ein eigenes Blog zu führen. Für mich immer noch der beste Weg, um online präsent zu sein. Mark hat sich selbst nie als jemand gesehen, der gerne Artikel schreibt, deshalb wusste ich, dass er nicht in Begeisterung ausbrechen würde.

Ich schilderte ihm, was mir vorschwebte und wie ich das angehen würde, und er ließ sich darauf ein, hatte den Gedanken eines eigenen Blogs auch schon länger mit sich herumgetragen. Ich will nicht zu sehr spoilern, aber nach etwas mehr als einer Woche erreichte mich diese Nachricht:

Unser Ziel

Bis Mark wieder in zurück in Deutschland ist, wollten wir seine Webseite online haben, das waren etwas mehr als zwei Wochen. Die Webseite sollte gut aussehen, ein CMS als Grundlage haben, ans Fediverse angeschlossen sein und möglichst viel automatisch tun.

Für einen kurzen Moment stand noch im Raum, ob wir medium fürs Blog nutzen sollten, um es schneller online zu bekommen. Das haben wir aber schnell wieder verworfen, wollte uns auf keinen Fall von einer Plattform abhängig machen. Also fiel die Wahl rasch auf Kirby. Mein eigenes Blog sollte als Grundlage für einzelne Komponenten dienen – wir wollten das Rad nicht neu erfinden.

Die Basics

In der folgenden Woche legten wir dann auch direkt los. Über das Wochenende gab ich Mark die Aufgabe, darüber nachzudenken, wie er sich nach außen präsentieren, wofür er stehen möchte.

Mark hatte nicht nur eine Idee dafür, sondern auch schon einen möglichen Namen im Gepäck. Wir setzen uns also daran, grundlegende Aufgaben zu erledigen:

  • Eine Domain sichern
  • Ein Design-Template kaufen
  • Hosting einrichten
  • Kirby Lizenz kaufen

Eine gute Domain zu finden, ist ja nicht mehr allzu einfach, aber wir sind recht schnell fündig geworden und konnten sie über unseren Hoster registrieren. Dort richtete ich auch gleich ein minimales Deployment ein, welches über Git läuft.

Mark fand ein schönes Template und kaufte es prompt. Damit hatten wir alle notwendigen Grundlagen. In China wurde es bereits spät, richtig loslegen würden wir also erst am kommenden Tag.

Wir legten mit der Installation von Kirby los. Hier entschieden wir uns für das Plainkit, welches wir schnell über composer installierten. Dann schlug ich zu und setzte mein Public-Folder-Setup auf, eine Verzeichnisstruktur, bei der nur ein einzelnes Verzeichnis nach außen hin verfügbar gemacht wird, der Rest der Installation liegt außerhalb und ist somit nicht direkt abrufbar.

Plugins

Damit alles so läuft, wie wir uns das vorstellen, kommen ein paar Plugins zum Einsatz:

  • IndieConnector für Webmentions und Mastodon-Posts
  • Komments (beta) für Kommentare und dem Anzeigen von Webmentions
  • PexelsField um direkt im Panel Stockphotos zu suchen
  • Darkvisitors um Sitemaps verfügbar zu machen und bots steuern zu können
  • Staticache um statisches HTML zu erzeugen, damit die Seite schön schnell bleibt
  • Mein RSS-Feed-Plugin für RSS- und Atom-Feeds
  • Mein Page-Method-Plugin für eine Auswahl an praktischen Page-Methoden

Das Template / Design

Wir wollten auf keinen Fall selbst anfangen, ein Design zu bauen, das hätte viel zu lange gedauert und wir sind auch einfach keine Designer. Mark hat sich also für ein Tailwindcss Template entschieden. Wir haben uns die HTML-Templates geschnappt und sie zerstückelt. Nun haben wir verschiedene Snippets zur Hand, die wir auf allen Seiten verwenden können. Essenziell natürlich der Header und Footer.

Den Header haben wir noch um zahlreiche Meta-Tags erweitert. Hauptsächlich OG-Tags zum Teilen von Beiträgen, die sorgen z.B. dafür, dass bei Mastodon und Co. ein Vorschaubild zu sehen ist.

Außerdem haben wir bereits die notwendigen Tags eingebaut, um später Webmentions empfangen zu können.

Das Blog

Angefangen haben wir mit dem Bloglisting. Das Listing basiert aus verschiedenen Komponenten, die wir so angelegt haben, dass wir sie an anderen Stellen wieder verwenden können:

  • Bloglisting Template - Das eigentliche Template für die Darstellung des Blogs. Das Template enthält möglichst wenig Logik und Daten.
  • Bloglisting Controller - Hier werden Daten zusammengesammelt, sortiert, paginiert und ans Template weitergereicht
  • Bloglisting Collection - Als Quelle für alle Blogbeiträge. Die Collection enthält alle Beiträge und kann auch auf anderen Seiten verwendet werden
  • Bloglisting Eintrag - Ein einzelner Beitrag im Listing. Den haben wir als Snippet abgelegt und konnten ihn so auf der Startseite und den Fehlerseiten mit automatischer Suche wieder verwenden
  • Paginierung - Wenn es bald mehr Beiträge gibt, soll man durch das Blog blättern können. Dazu haben wir ein Snippet für die Paginierung angelegt, das wir auch auf anderen Seiten benutzen werden

Schließlich haben wir ein weiteres Template zum Anzeigen eines einzelnen Blogposts erstellt. Hier folgten wir wieder derselben Logik. Hier haben wir noch die Besonderheit, dass wir auf Microformats geachtet haben. Damit können wir später steuern, welche Daten erfasst werden, wenn wir Webmentions verschicken.

Natürlich benötigten wir auch noch die passenden Blueprints für das Bloglisting, denn Mark will zwar in Markdown schreiben, aber komfortabel im Kirby-Panel. Wir haben also zunächst das Blueprint für das Listing und dann auch direkt für Blogposts angelegt:

Anschluss ans IndieWeb

Damit wir Webmentions empfangen und senden können, haben wir das IndieConnector-Plugin installiert. In Kombination mit dem Komments-Plugin können wir so unter jedem Post Feedback von Leser:innen sammeln, und zwar direkt im Blog, aber auch in Netzwerken wie Mastodon.

Zusätzlich kann der IndieConnector auch automatisch Posts bei Mastodon veröffentlichen, sobald ein Beitrag veröffentlicht wird. Wir haben uns entschieden, Bluesky-Posts nicht auf diesem Weg zu erstellen, denn Mark nutzt unseren Crossposter, um alles von Mastodon zu Bluesky zu synchronisieren und beides zusammen, würde zu Dopplungen führen.

Mark kann nun also im Blog einen Beitrag veröffentlichen und dieser wird zugleich bei Mastodon gepostet und von dort aus zu Bluesky synchronisiert. Dafür muss er nichts weiter tun.

Ein Blog ohne RSS-Feed ist kein richtiges Blog, weshalb wir mein RSS-Feed-Plugin zu Mark kopiert und es etwas angepasst haben. Man kann Marks Blog nun also auch per RSS-Reader abonnieren.

Ebenso sind wir mit der Sitemap verfahren, die wir direkt bei Google eingereicht haben, damit die Google-Bots möglichst zeitig mit dem Indizieren loslegen können.

Notizen und Seiten

Ähnlich wie das Blog gibt es auch ein Listing für Notizen. Das sind kurze Beiträge, die zu kurz sind, um als Blogpost durchzugehen. Der Aufbau erfolgte analog zum Blog.

Für Seiten wie /now und /uses haben wir einfache Seitentemplates angelegt. Komplexere Seiten, wie about und die Startseite bestehen derzeit noch hauptsächlich aus statischem Content, den Mark jetzt Schritt für Schritt überführen wird.

Finetuning

Zwei Wochen waren indessen fast herum, die ersten Beiträge sind online und wir haben noch ein paar Verbesserungen eingebaut.

  • Die Fehlerseite führt – wie auch bei mir – eine Suche anhand der URL aus und zeigt eine List möglicher Beiträge an.
  • Die Seite läuft zweisprachig, was dank Kirby überhaupt kein Problem darstellt. Fehlende Übersetzungen quittieren wir allerdings mit einer 404 Seite, anstatt sie unübersetzt anzuzeigen
  • Wir haben das Staticache-Plugin aktiviert, damit die Seite möglichst schnell lädt. Nur bei Änderungen im Content wird der Cache neu erstellt.
  • Tags und Kategorien helfen beim Strukturieren der Daten, beim Auffinden ähnlicher Artikel und beim Filtern im Bloglisting

Fazit

Wir haben es wirklich geschafft, eine ansehnliche Webseite in nicht ganz zwei Wochen online zu bringen. Mit einem Deployment-Ablauf, Kirby als CMS, Mehrsprachigkeit, Anschluss ans IndieWeb und ersten Beiträgen im Blog und den Notizen.

Wir haben uns da – zurecht, wie ich finde – gegenseitig auf die Schultern geklopft und freuen ins tierisch, dass das so gut funktioniert hat und dabei auch noch so viel Spaß gemacht hat.

Wir konnten viele Hürden natürlich deshalb umgehen, weil ich schon auf meiner eigenen Seite darüber gestolpert bin. Das hat mich weiter darin bestärkt, an meinem Kurs zu arbeiten, der sich genau damit beschäftigt: von der Idee zum fertigen Full-Feature-Blog. Dort werde ich auf alle Details eingehen. Unser Unterfangen mit Marks Blog war ein hervorragender Pilotversuch für diesen Kurs.

Noch schreibe ich daran, aber wenn du Interesse hast, kannst du dich hier in den Verteiler eintragen. Ich verschicke hier keinen Newsletter oder so, sondern gebe wirklich nur Bescheid, wenn sich etwas bezüglich des Kurses tut:

(buttondown: https://buttondown.com/mauricerenck?as_embed=true)

]]>