Webseite 3.0: Ein frischer Look & viele Verbesserungen

Ich habe die letzten Monate damit verbracht, die FAB INDUSTRIES Webseite zu überarbeiten. Mit einem neuen Look sollte das Meiste trotzdem aber noch ziemlich vertraut sein. Der Inhalt bleibt derselbe. Eine große Änderung gibt es allerdings.

25. Juni 2025, 13:40 CEST 863 Wörter 5 Minuten

Nach mehreren Monaten harter Arbeit bringt diese Aktualisierung der Webseite ein neues Theme, das zwar ein bisschen frischen Wind in die Bude bringt, aber dennoch jedem, der diese Webseite in den letzten sechs Jahren besucht hat, vertraut sein sollte. Ich habe mein Bestes gegeben, um etwas zu bauen, was sich frisch anfühlt, aber die Designsprache beibehält, die ich in der Vergangenheit für die Webseite entwickelt habe. Hier sind die wichtigsten Features des neuen Themes:

Verbesserte Navigation mit Kategorien, Artikel-Serien und Tags
Client-seitige Suchfunktion — heutzutage dringend erforderlich, da die Ergebnisse von Google von Tag zu Tag schlechter werden
Drei unterschiedliche Farbschemata:
- Newsprint ‘72 — ein heller Look
- Synthwave ‘84 — ein gedämpftes Farbschema mit farbenfrohen Akzenten
- Usenet ‘95 — ein dunkler Look (die Standard-Einstellung)
Funktionen zum Teilen einzelner Artikel in sozialen Netzen
Eine klarere Blog-Startseite
Emoji-Unterstützung über die bei Hugo eingebauten Funktionen:

😗 🤠 🦉

Die Website sollte jetzt auf mobilen Browsern besser dargestellt und zwischengespeichert werden
Wechsel auf die Schriftart Iosevka für vorformattierten Text und Quellcode-Blöcke; alles andere wird natürlich weiter mit Inter dargestellt
Viele andere neue Funktionen, wie bessere Einbettungen von Drittanbieter-Inhalten, integrierte Mapbox-Karten und lustige Layout-Funktionen wie diese Informationsboxen:

Privatssphäre

Wie bisher ist die gesamte Website statisch und der Code wird nur im Browser ausgeführt, nicht auf dem Server. Ich tracke niemanden. Die Besucherstatistiken sind IP-basiert und werden nach 14 Tagen anonymisiert. Kein Dritter, mit Ausnahme meines Hosters, hat Zugang zu diesen Daten.

Neu ist, dass Besucher jetzt einen Cookie-Banner akzeptieren müssen, wenn sie die Webseite besuchen und noch kein Cookie gesetzt wurde. Obwohl meine Seite selbst keine Tracking-Informationen oder Sessions im Browser der Besucher speichert, legt mein neues Kommentarsystem (mehr dazu weiter unten) Cookies ab, wenn man es benutzt. Alles in allem hielt ich dies angesichts der neuen Funktionalität für einen akzeptablen Kompromiss.

Neues Kommentarsystem

Die einzige größere Änderung, die Seitenbesucher bei dieser neuen Version direkt betrifft, ist das neue Kommentarsystem. Nachdem ich vor einiger Zeit mit Version 2.2 der Webseite Webmention-basierte Kommentare eingeführt hatte, habe ich dieses System wieder abgeschafft. Nicht genug Besucher haben es benutzt, und einige Leser haben mir sogar geschrieben und ihre Verwirrung über dieses System zum Ausdruck gebracht. Obwohl ich die ganze IndieWeb-Idee immer noch sehr mag und unterstütze, ist mir doch klar geworden, dass diese Technik für die meisten Menschen noch nicht benutzbar ist. Da ich offensichtlich ein Kommentarsystem benötige, welches einfacher zu bedienen ist, habe ich beschlossen, auf giscus zu wechseln. Dieses System verwendet GitHub Discussions, um Webseiten-Kommentare und Reaktionen zu speichern.

Zitat

Wenn giscus geladen wird, wird die GitHub-Diskussions-Such-API verwendet, um die mit der Seite verknüpfte Diskussion anhand einer gewählten Zuordnung (URL, pathname, <title>, etc.) zu finden. Wenn keine passende Diskussion gefunden werden kann, erstellt der Giscus-Bot automatisch eine Diskussion, sobald jemand einen Kommentar oder eine Reaktion hinterlässt.

Um zu kommentieren, müssen Besucher die giscus-App autorisieren, in ihrem Namen über den GitHub OAuth-Flow zu posten. Alternativ können Besucher auch direkt in der GitHub-Diskussion kommentieren. Kommentare können auf GitHub moderiert werden.

Da ich die Kommentare nicht selbst speichern möchte — und selbst wenn ich das wollte, wäre es bei den aktuellen Gesetzen in Europa rechtlich kaum machbar — entschied ich, dass es akzeptabel wäre, dies auf Microsoft auszulagern. GitHub bietet eine gute Plattform, um Kommentare zu moderieren, und giscus ist Open Source. Außerdem habe ich festgestellt, dass viele meiner Webseiten-Besucher eh bereits ein GitHub-Konto haben.

Wenn ihr GitHub nicht nutzen wollt oder Microsoft irgendwas zensiert, könnt ihr, wie immer, auch einfach per E-Mail Kontakt aufnehmen. Wenn ihr das wollt, oder wenn ich eine Diskussion als besonders interessant für alle Leser des Blogs erachte, werde ich sie mit einem Beitrag in der neuen Kategorie Korrespondenz hervorheben.

Um das noch einmal klarzustellen: Wenn Besucher das Kommentarsystem nicht nutzen, werden auf deren Systemen nur ein leeres giscus-Cookie und ein einziges Cookie von meiner Website gespeichert, welches dazu dient, sich das Durchklicken des Cookie-Banners zu merken.

Work in Progress

Als Teil der Arbeit am neuen Webseiten-Theme musste ich jeden einzelnen Inhalt, den ich jemals in diesem Blog veröffentlicht habe, anfassen. Ich bin damit immer noch nicht fertig, vor allem auf dem deutschen Teil der Webseite. Daher kann es sein, dass einige Inhalte noch auf Blog-Startseite fehlen oder in einem fehlerhaften Zustand angezeigt werden. In den nächsten Wochen werde ich das beheben, aber nachdem ich so lange hinter den Kulissen geschuftet habe, fand ich, dass es wichtiger ist, die neue Version des Blogs so schnell wie möglich online zu bringen. Jetzt kann ich mich wieder dem Schreiben neuer Inhalte widmen und werde nebenbei die alten Sachen reparieren.

Achtung Bugs

Ich habe viel Arbeit investiert, um dieses Theme an meine Bedürfnisse anzupassen und die Grundlage für die neuen Funktionen zu legen. Ich habe dabei auch viel getestet, aber ich bin mir sicher, dass trotzdem noch Dinge kaputtgehen oder nicht richtig funktionieren werden. Ich bin schließlich eine Ein-Mann-Show. Wenn etwas schief geht, könnt ihr mir aber gerne einen Kommentar hinterlassen oder eine E-Mail schicken, damit ich den betreffenden Bug behebn kann.

Zum Abschluss noch ganz am Rande: Im Zuge der Entwicklung der neuen Farbschemata für diese Seite habe ich übrigens eine eigene Farbpalette für die Webseite und für FAB INDUSTRIES als Ganzes entwickelt. Ich bin sehr zufrieden mit dem Ergebnis.