In den letz­ten Jahren habe ich ver­schie­de­ne Read-it-later-Apps ver­wen­det, um Links zu Webseiten oder Artikeln, die mich inter­es­sier­ten, zu spei­chern. Da eine sol­che Sammlung idea­ler­wei­se von ver­schie­de­nen Geräten aus gepflegt und abge­ru­fen wer­den soll­te, erschie­nen ent­spre­chen­de Web-Dienste zunächst als gute Lösung. Leider haben sie den Nachteil, dass sie häu­fig irgend­wann auf­ge­kauft und dann meist ein­ge­stellt wer­den. So ist es mir bei­spiels­wei­se mit Delicious (2019), Omnivore (2024) und aktu­ell mit Pocket ergan­gen.

Aus die­sem Grund set­ze ich seit eini­ger Zeit auf selbst gehos­te­te Lösungen. Zunächst habe ich mei­ne Nextcloud genutzt, mitt­ler­wei­le spei­che­re ich aber die Bookmarks direkt in Obsidian ab. Eine ers­te Lösung, die auf Python-Skripten und der Alfred-App basier­te, habe ich bereits hier und hier beschrie­ben. Inzwischen nut­ze ich jedoch einen Apple-Kurzbefehl, den ich, in einer ers­ten Version, schon am Ende die­ses Artikels in mei­nem eng­lisch­spra­chi­gen Blog vor­ge­stellt habe. Diese klei­nen Helfer lie­fen, genau­so wie der hier vor­ge­stell­te Kurzbefehl, nur auf Apple-Geräten.

Diese neue­re Version des Kurzbefehls möch­te ich hier als ein­fa­che, loka­le und unab­hän­gi­ge Lösung vor­stel­len. Ganz im Sinne der Obsidian-Philosophie wer­den die Bookmarks nun als ein­fa­che Markdown-Dateien lokal gespei­chert. Dadurch blei­ben sie voll­stän­dig im eige­nen Besitz, kön­nen von ande­ren Apps gele­sen und bear­bei­tet wer­den und blei­ben auch dann zugäng­lich, falls Obsidian selbst ein­mal nicht mehr wei­ter­ent­wi­ckelt wer­den soll­te.

Was eine Read-It-Later Lösung können sollte

Traditionell sind die Anforderungen an eine Read-It-Later App:

1. Einfacher Aufruf im Webbrowser
2. Inhaltliche Organisation
3. Visuelle Orientierung
4. Gute Lesbarkeit
5. Synchronisation über die ver­wen­de­ten Geräte hin­weg

Da ich das Tool mit Apple-Kurzbefehl erstel­le, ste­hen mir ver­schie­de­ne Möglichkeiten für den Aufruf zur Verfügung. Auf dem iPhone und iPad nut­ze ich die Share-Sheet-Option, die auf dem Mac aber zu kom­pli­ziert zu bedie­nen ist. Deshalb habe ich zunächst die Option „In Menüleiste anpin­nen“ genutzt, ver­wen­de inzwi­schen aber die App Barcuts von dem Indie-Entwickler Carlo Zottmann, deren Einsatz ich hier beschrie­ben habe.

Da ich beim Erstellen kei­ne kom­ple­xe Interaktion woll­te, wird ein­fach nur die URL ver­ar­bei­tet und – wie in den bei­den Beispielen zu sehen – ent­we­der mit oder ohne Vorschaubild abge­legt:

Ob ein Vorschaubild ange­zeigt wird, hängt davon ab, ob der Kurzbefehl eines fin­det. Das scheint bei mei­nen WordPress-Seiten nicht der Fall zu sein. Meistens wird jedoch ein Bild wie im zwei­ten Beispiel ange­zeigt (@Carlo, ich hof­fe, ich durf­te die URL als Beispiel ver­wen­den).

Die inhalt­li­che Organisation erfolgt beim spä­te­ren Lesen. Ich bear­bei­te die gesam­mel­ten Bookmarks täg­lich: Artikel wer­den ent­we­der direkt ver­ar­bei­tet, also in neu­en Notizen zusam­men­ge­fasst oder in bestehen­de Notizen inte­griert, um anschlie­ßend aus der Liste gelöscht zu wer­den. Oft las­se ich sie auch zur wei­te­ren Bearbeitung in der Bookmark-Notiz, ver­se­he sie jedoch mit Tags, die ent­we­der eine the­ma­ti­sche Einordnung ermög­li­chen, die Wichtigkeit und Relevanz aus­drü­cken oder bei­des, sodass sie über die Suchfunktion leicht auf­find­bar sind.

Implementierung

Meine Lösung besteht aus 3 Teilen:

1. Einem Apple-Kurzbefehl, der die Webseite ver­ar­bei­tet und für die Bookmark-Notiz ein Markdown Callout zusam­men­baut.
2. Carlos Zottmanns App Actions for Obsidian, die hilft den Callout in die Bookmark-Notiz zu schrei­ben.
3. Ein CSS-Snippet in mei­nem Obsidian-Vault defi­niert das Design des Bookmarks. Früher habe ich für das Layout HTML ver­wen­det, aber mit Markdown sind die Dateien kom­pa­ti­bler und im Quellcode bes­ser les­bar.

Der Kurzbefehl

Der Kurzbefehl führt fol­gen­de Schritte aus:

1. In den Details des Kurzbefehls wer­den die Optionen „Bildschirminhalt emp­fan­gen“ und ggf. „In Menüleiste anpin­nen“ akti­viert.
2. Im Kurzbefehl-Editor wer­den als Eingabequelle nur „URL“ und „Artikel“ aus­ge­wählt sowie das Verhalten fest­ge­legt, falls der Kurzbefehl nicht im Browser gestar­tet wird.
3. Die aktu­ell akti­ve App wird in einer Variablen gespei­chert, um am Ende den Browser wie­der in den Vordergrund zu holen.
4. Das Artikel-Objekt mit den Daten der akti­ven Webseite wird für die spä­te­re Verarbeitung erstellt.
5. Mit einer „Wenn“-Abfrage wird geprüft, ob eine Hauptbild-URL vor­han­den ist:
   1. Falls ja, wird das Markdown für den Bookmark-Callout inklu­si­ve Preview-Bild aus den Artikeldaten erstellt und in der Variablen Text gespei­chert. Dazu wer­den die not­wen­di­gen Daten aus dem Objekt Artikelein­ge­fügt.
   2. Falls nein, wird das Markdown ohne Preview-Bild erzeugt.
6. Der erstell­te Callout in Text wird mit der “Actions for Obsidian” Aktion „Text an eine Notiz vor­an­stel­len“ unter­halb der Überschrift # Bookmark in die Bookmark-Notiz ein­ge­fügt. Vault und Pfad müs­sen ent­spre­chend ange­passt wer­den.
7. Nur unter macOS: Die App „Actions for Obsidian“ wird geschlos­sen, damit sie nicht im Dock oder App-Switcher (⌘-Tab) sicht­bar bleibt (unter iPadOS/iOS nicht mög­lich).
8. Der Browser wird wie­der in den Vordergrund geholt

So sieht das Ganze aus:

Damit ist die Definition des Kurzbefehls abge­schlos­sen. Zum Testen muss die Bookmark-Notiz an der gewünsch­ten Stelle erstellt und mit der Überschrift # Bookmark ver­se­hen wer­den. Anschließend kann der Kurzbefehl auf einer belie­bi­gen Webseite in einem belie­bi­gen Browser aus­ge­führt wer­den.

Da im Auslieferungszustand kein Callout vom Typ [!bookmark] defi­niert ist, wird der Bookmark zunächst fol­gen­der­ma­ßen dar­ge­stellt:

Um das Aussehen anzu­pas­sen, muss noch ein CSS-Baustein defi­niert wer­den.

Der CSS-Baustein

Für die Definition des Aussehens ver­wen­de ich einen CSS-Baustein. Für alle, die mit die­sem Konzept noch nicht ver­traut sind, hier eine kur­ze Einführung:

Obsidian ermög­licht die Anpassung des Erscheinungsbilds ent­we­der über Themes, die die gesam­te Oberfläche visu­ell ver­än­dern. Möchte man jedoch nur einen bestimm­ten Aspekt inner­halb eines Themes anpas­sen, kom­men CSS-Bausteine zum Einsatz. Diese müs­sen in einem spe­zi­el­len Ordner abge­legt wer­den, den man über Einstellungen → Darstellung → CSS-Bausteine fin­det, indem man oben rechts auf das Ordner-Icon klickt.

Nun erstellt man mit einem Texteditor, der rei­nen ASCII-Code spei­chert – wie Sublime Text, TextMate, VS Code oder im Terminal mit nano, vim oder emacs – eine CSS-Datei, z. B. bookmark.css, mit fol­gen­dem Inhalt und spei­chert sie in dem Ordner ab, der vor­her geöff­net wur­de.

/* Callout für Bookmarks */

.callout[data-callout="bookmark"] {
    --callout-color: white;
    --callout-icon: book-open-text;

    background: white !important;
    border: 1px solid black;
    border-right: 5px solid #6666 !important;
    border-bottom: 5px solid #6666 !important;
    border-radius: 12px;
    padding: 15px;
}

.callout[data-callout="bookmark"] .callout-title {
    font-weight: bold;
    color: #005a9c;
    font-size: 1.3em;
}

.callout[data-callout="bookmark"] .callout-title a {
    text-decoration: none !important;
    color: #005a9c;
    font-weight: bold;
}

.callout[data-callout="bookmark"] .callout-title a:hover {
    text-decoration: none !important;
    color: #003366;
}

.callout[data-callout="bookmark"] p {
    color: black !important;
}

.callout[data-callout="bookmark"] img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin-top: 10px;
    display: block;
}

Nachdem die CSS-Datei im ent­spre­chen­den Ordner liegt, muss in den Einstellungen das Lade-Icon neben dem Ordner-Icon ange­klickt und der CSS-Baustein akti­viert wer­den.

Nun soll­te der Bookmark wie in den oben gezeig­ten Bildern aus­se­hen.

Eine klei­ne, aber ner­vi­ge Besonderheit tritt auf, wenn der Obsidian-Vault in iCloud liegt: Aus nicht ganz nach­voll­zieh­ba­ren Gründen wer­den die CSS-Dateien im ent­spre­chen­den Ordner im Finder nicht ange­zeigt. Im Einstellungsdialog von Obsidian jedoch schon! Apple hat offen­bar ent­schie­den, dass alle Dateien in ver­steck­ten Ordnern im Finder nicht ange­zeigt wer­den, wenn die­se in der iCloud lie­gen. Mit der Tastenkombination ⌘-⇧-. las­sen sich die­se ver­steck­ten Dateien jedoch tem­po­rär ein­blen­den. Achtung: Das gilt für alle Ordner, und vie­le die­ser ver­steck­ten Dateien und Ordner sind wich­tig für das Funktionieren von macOS oder ein­zel­ner Apps und soll­ten nicht ver­än­dert oder gelöscht wer­den.

Fazit

Ich hof­fe, dass ich mit die­sem klei­nen Artikel zei­gen konn­te, wie sich mit ein­fa­chen Mitteln ein Ersatz für Pocket und Co. schaf­fen lässt. Diese Lösung macht unab­hän­gig von exter­nen Anbietern und bie­tet zudem mehr Flexibilität, da die Dateien auch mit ande­ren Programmen oder Skripten wei­ter­ver­ar­bei­tet wer­den kön­nen. Das hal­te ich auch wei­ter­hin für einen der gro­ßen Vorteile der Offenheit von Obsidian.