Obsidian

Seit Jahren – vielleicht sogar Jahrzehnten – benutze ich sowohl beruflich als auch privat einen elektronischen Notizkasten. Bei der Auswahl sind für mich Open Source, lokale Speicherung und eine möglichst kostenlose Nutzung die Hauptkriterien. Teamfähigkeit und Synchronisation sind nicht erforderlich. Lange Jahre war WikidPad meine Wahl. Da diese Software jedoch nicht mehr weiterentwickelt wird, bin ich vor einiger Zeit auf Obsidian umgestiegen. Die Notizen werden dort im Format Markdown geschrieben und gespeichert, sodass sie leicht lesbar und ggf. auch portierbar sind. Eine Datenbank ist nicht erforderlich. Die Software wird von einer großen Community unterstützt, die zahllose Erweiterungen (Plug-ins) beisteuert.

Durch die Verwendung von Markdown sind der Gestaltungsfreiheit natürlich Grenzen gesetzt. Es ist auch möglich, HTML direkt innerhalb der Notiz zu verwenden. Durch Verwendung eines Community Plugins lassen sich dadurch sehr einfach mathematische Formeln in einer Notiz unterbringen.

Die kostenlose Variante von Obsidian läuft lokal auf verschiedenen Betriebssystemen (Windows, Android, iOS). Die Synchronisation über eine Cloud und die Veröffentlichung als Webseite sind kostenpflichtige Zusätze, die ich nicht nutze. Da ich meistens am Laptop arbeite, kopiere ich die Notizen bei Gelegenheit einfach auf das Notepad. Falls erforderlich, können die Notizen z. B. im Urlaub auch darauf bearbeitet werden.

Zur Veröffentlichung ausgewählter Notizen benutze ich Tools und Plugins, welche HTML Seiten generieren, die ich in den Webspace meiner bestehenden Domain kopieren kann.

Webpage HTML Export

Die erste Wahl für ein Plugin fiel auf “Webpage HTML Export”. Dieses erzeugt auch ohne weitere Eingriffe und Ergänzungen eine passable Webseite. Zur Personalisierung sind aber dennoch einige Eingriffe erforderlich. Das Plugin bietet dazu an, HTML Code mit einzubinden. Dieser kann dann ergänzende CSS Stylesheets und auch JavaScript Code beinhalten. Da die generierten Seiten bereits sehr scriptlastig sind, ist die zusätzliche Verwendung kein Nachteil.

Farben

Die neuen Seiten werden neben den Seiten meiner bestehenden Homepage sichtbar sein. Daher sollten die neu erzeugten Seiten einen Wiedererkennungswert zur bestehenden Homepage haben. Dies betrifft zunächst die Farbauswahl. Es werden die gleichen Farben für die gleichen Funktionen verwendet.

Hintergrundfarbe Schriftfarbe Verwendung
#FFFFFF #000000 Inhalt (schwarz auf weiß)
#FFFFFF #00008B Footer
#FFFFCC #0080FF Navigationsflächen (hover)
#D8D8E0 #00008B Seitenleisten links und rechts
#FFFF00 #00008B Aktive Seite im File-Explorer (Seitenleiste links)
#0080FF #FFFFFF Banner (Hintergrund und Verlaufsvordergrund)
#00008B #FFFFFF Navigation oben (alte Webseite, Impressum)

Wie man sieht, gibt es keine separate Farbauswahl für den Dark-Modus. Die Seiten sehen in beiden Modi daher gleich aus. Da Obsidian die Einbindung eigener Stylesheets erlaubt, wurden diese Farben, wenn möglich, auch dort verwendet. Ausgenommen sind die zusätzlichen Elemente der Webseite (Navigation oben, Banner und Footer).

Seitenaufbau

Das Plugin erzeugt eine Single-Page-Application, bei der beim Seitenwechsel immer nur ein Teil der Webseite ausgetauscht wird. Durch Konfiguration wurde als linke Seitenleiste ein baumartiges Verzeichnis der Seiten und für die rechte Seitenleiste das Inhaltsverzeichnis der aktuellen Seite gewählt. Die Seitenleisten sind ein und ausklappbar bzw. sie sind je nach Breite der Anzeige bei Aufruf der Seite schon eingeklappt.

Obsidian-Webpage-Layout

Zusätzlich wird eine statische Navigationsleiste generiert, die Verweise auf die bestehende Website und das Impressum enthält. Im zentralen Bereich befindet sich ein feststehendes Banner mit der Seitenüberschrift und darunter den Inhalt der Seite, also das gerenderte Markdown.

Beim Seitenwechsel müssen somit lediglich der Text und gegebenenfalls die Bilder im Banner ausgetauscht und der Footer neu generiert werden. Ein kleiner Programmiertipp: Es gibt ein zur Laufzeit ein undokumentiertes ObsidianSite Objekt. In der Konsole des Browsers kann man es erforschen. Daran wird der Seitenwechsel erkannt:

ObsidianSite.onDocumentLoad(doc => {
    pageLoaded(doc);
});

Pandoc

Nachdem das Layout der Webseiten feststand und auch auf mobilen Geräten passabel funktionierte, kamen mir doch Zweifel am Konzept. Die mit dem Plugin erzeugten Webseiten sind ohne Skripte nicht lesbar. Außerdem sind Single-Page-Applications, wie sie das Plugin generiert, nicht suchmaschinenfreundlich. Das widerspricht den Paradigmen, mit denen ich ursprünglich meine Website gestalten wollte.

Meine Recherche führte mich schließlich zu dem Tool „Pandoc“, welches verschiedene Formate konvertieren kann, insbesondere auch Markdown zu HTML. Dafür gibt es ein Plugin (Enhancing Export), mit dem sich Pandoc auch von Obsidian aus recht gut aufrufen lässt. Pandoc kann auch ein Template für die zu erzeugende Website verwenden, in das die erzeugten HTML-Fragmente eingebunden werden. Dieses Template war verhältnismäßig schnell erstellt, da das Layout nun feststand. Arbeit machte dann das Stylesheet, denn alle Elemente müssen einzeln beschrieben werden.

Pandoc konvertiert immer nur eine einzelne Markdown-Datei. Ein Verzeichnisbaum (Datei-Explorer), wie er auf meiner Website vorhanden sein sollte, kann auf diese Weise natürlich nicht entstehen. Er wird erst generiert, wenn alle Markdown-Dateien aus Obsidian in HTML konvertiert sind, und dann nachträglich in alle HTML-Dateien kopiert. Ganz ohne JavaScript kam ich dann doch nicht aus. Einige optische Effekte, wie das Vergrößern von Abbildungen durch Anklicken, sind ohne Scripts nicht nutzbar.