Zum Inhalt springen
A beautiful cover image with the text "History Time"

Vielleicht haben Sie schon einmal von diesem coolen Dokumentationsframework gehört. Ich spreche oft darüber und benutze es regelmäßig. Nicht nur, weil ich ein aktiver Mitwirkender bin, sondern auch, weil Starlight mir einfach ans Herz gewachsen ist. Seine Funktionen: Einfachheit und Minimalismus, aber alles, was man braucht. Seine Leistung: Schneller als 98 % der anderen Websites. Seine Barrierefreiheit: Keine Frage!

Die Entstehung

Eine Sache, die aus meiner Sicht objektiv fehlt, ist eine granulare Möglichkeit, breite Themen in Ihrer Dokumentation zu trennen. Und ich bin nicht allein mit dieser subjektiv allgemein akzeptierten Meinung. HiDeooHiDeoo ist nicht nur einer der aktivsten Maintainer des Projekts, sondern auch der Autor der meisten und meiner Meinung nach besten Plugins, die man für Starlight finden kann. Und auch ihnen fiel diese fehlende Nischenfunktionalität bei Themen auf. Deshalb haben sie im Oktober 2024, also relativ früh, das Starlight Sidebar Topics Plugin erstellt, mit dem man eine Seitenleiste mit Themen erstellen kann. Lesen Sie mehr über die Funktionen des Plugins in der Dokumentation.

Das Einzige, was mich in den frühen Tagen des Plugins persönlich gestört hat, war die Art und Weise, wie die Themen in der Seitenleiste angezeigt wurden. Es verwendet - im Gegensatz zu der von mir vorgestellten Lösung - keine Art Dropdown-Menü zum Wechseln zwischen Themen, sondern zeigt stattdessen immer alle Themen an. Diese Designentscheidung war, wie HiDeoo klar hervorhebt, sehr bewusst und nicht ohne Grund: Alle Themen sollen auf einmal sichtbar sein. Bewiesen durch die withastroAstro Dokumentation selbst (delucisChris Swithinbank implementierte die “Tab-Leiste” für die Astro v5 Dokumentation später im selben Monat), hat dieser Ansatz definitiv viele Vorteile gegenüber einem Dropdown-Menü. Dennoch war ich weiterhin mit diesem Design unzufrieden, und so habe ich meine eigene Version erstellt.

Kopieren und Einfügen war meine Stärke, wenn es darum ging, ein neues Starlight-Plugin für die Community zu erstellen. Und so habe ich es einfach getan. Ich nahm das Starlight Sidebar Topics Plugin als Ausgangspunkt und musste nur das Topics.astro-Komponente anpassen, das das HTML für die Darstellung der Themen in der Seitenleiste enthält. Nachdem ich einige Zeit damit gekämpft hatte, ein zufriedenstellendes Dropdown-Menü zu implementieren, das nur aus HTML und CSS bestand, aber auch optisch ansprechend war (Entschuldigung für das Eigenlob, ich bin einfach stolz auf mich), habe ich endlich eine Lösung gefunden, mit der ich sehr zufrieden bin, und habe dieses neue Plugin unter dem Namen Starlight Sidebar Topics Dropdown veröffentlicht - wie originell.

Die Anpassung

Sie könnten denken, dass diese Geschichte nun vorbei ist, da jeder einfach die Variante nutzen könnte, die er bevorzugt, und alle wären glücklich. Aber Starlight entwickelte sich weiter und verbessert sich ständig. Etwa drei Monate später, am 15. Februar, fast wie ein Geburtstagsgeschenk für mich, kam die lang erwartete Ergänzung von Routendaten in Starlight mit der Veröffentlichung von v0.32. Diese scheinbar kleine Ergänzung eröffnete so viele Möglichkeiten, die ich selbst nie erwartet hätte. HiDeoo war einmal mehr die führende Inspiration für Plugin-Autoren und trieb diese neue Funktionalität bis an ihre Grenzen. Es dauerte nur zwei Tage, um mehr als 11 Plugins an die neueste Starlight-Version von damals anzupassen, und später wurden viele dieser Codeabschnitte verbessert und refaktoriert, um diese mächtige Funktion noch weiter zu nutzen.

Und so kam der Tag, an dem HiDeoo mich kontaktierte, um mir mitzuteilen, dass das Starlight Sidebar Topics Plugin nun die neue Routen-Daten-Funktion von Starlight nutzt. Zuerst verstand ich nicht ganz, welchen Nutzen diese Implementierungsänderungen haben würden, aber dann nahm sich HiDeoo die Zeit, mir zu erklären, dass ich das Starlight Sidebar Topics Dropdown Plugin jetzt in eine einfache Komponente umwandeln könnte, die die Routen-Daten aus seinem Plugin verwendet. Intuitiv war ich gegen diese clevere Idee, weil es sich anfühlte, als würde mein einziges Plugin, das etwas Popularität erlangt hatte, in eine nutzlose Komponente verwandelt. Ich hätte nicht weiter von der Wahrheit entfernt sein können.

Die Vereinigung

Schließlich beschloss ich, mein Plugin in eine Komponente umzuwandeln - diese Umstrukturierung eliminierte beiläufig genau 1210 Zeilen Code und fügte 68 Änderungsprotokollzeilen hinzu - und ich bemerkte, wie wenig Code es jetzt erforderte, um die Topics.astro Liste aus der Perspektive eines Nutzers in ein Dropdown zu verwandeln. Ich war zuversichtlich, dass dies wirklich die richtige Richtung für die Plugin Komponente war. Also aktualisierte ich die gesamte Dokumentation - eher: löschte über 200 Zeilen Text (fühlt sich gut an) - und veröffentlichte die neue Version 0.5.

Jetzt fragen Sie sich vielleicht, wie solch ausgereifte Plugins sich noch weiter verbessern können. Um ehrlich zu sein, ich selbst war sehr überrascht, als HiDeoo mir beiläufig eine Bombe in meine Discord-DMs fallen ließ. Seine Idee war und ist immer noch genial. Andernfalls würde ich nicht einmal mehr an dieses Thema denken. Aber hier bin ich und schreibe satte 800 Worte, nur um Sie auf das kommende vorzubereiten. Trommelwirbel bitte! Anschnallen! Diese Aussage von HiDeoo wird Sie umhauen:

„Man könnte auf einer Desktop-Ansicht etwas wie die standardmäßig eingebaute Liste und auf mobilen Geräten Ihre Komponente oder so etwas verwenden 🧠“ — HiDeoo, 21/03/2025 09:54

Tiefgründig. Zeitlos. Golden.

Und diese einzige, wunderschöne Idee? Genau darüber werde ich Ihnen im Beitrag „Starlight Topics Dropdown und List zusammen“ berichten.