Ich hatte ja schon lange vor, mal ein realistisches Projekt mit Astro umzusetzen. Mein langjähriger Freund und Trauzeuge hat, nachdem wir schon länger darüber gesprochen hatten, seine Seite mal zu verbessern, das ganze vertrauensvoll in meine Hände gelegt.
Seine Seite ist eigentlich eine reine Marketing-Seite, so dass der Inhalt zu 90% statisch ist und bleiben kann – ein fast perfektes Szenario für das Astro Content Layer.
Also erstmal überlegen, was man mit den restlichen 10 Prozent macht. Meine erste Idee war, dass ein CSV hochgeladen und geparst wird. Das hat sich in einem ersten Test als nicht sehr bedienerfreundlich entpuppt. Ein Google Sheet als API, wie ich es damals bei dem Gamingbooster gemacht habe, ist hier in diesem Kontext leider auch schwierig aufgrund der Startup-Zeiten bei der Google API.
Letztendlich sind wir dann bei Contentful gelandet, das Free Tier ist mehr als ausreichend für den Veranstaltungskalender. Und später dann vielleicht auch noch ein bisschen mehr.
Die Buchungen der Cocktailkurse etc. werden durch externe Bookingwidgets eines Anbieters dafür erledigt, diese sind als custom-elements umgesetzt und können ohne Probleme auch auf der neuen statischen Website eingebunden werden.
Astro 4 und Astro 5
Da ich aufgrund externer Umstände recht lange mit dem Projekt beschäftigt war, ergab sich der glückliche Umstand, dass ich bei ca. 50% der Fertigstellung auf Astro 5 Beta und bei ca. 90% auf Astro 5 ‘gold’ wechseln konnte.
Das war ein mega Boost für das Projekt, der Change im Content Layer hat weniger Probleme gemacht als gedacht, alle MDX-Files sind sauber typisiert und durch die neuen Relations ist der Content auch besser in sich aufgebaut (und queryable).
Dazu die neuen Responsive-Images und das Image-Cropping in den astro:asset Features – Ein Traum und bezahlt gleich 2 der 4 grünen 100er Ringe bei Lighthouse.
SEO
Natürlich darf eine Optimierung für eine solche Seite nicht fehlen:
- Sauber strukturierte Überschriften / Listen und Navigationen – was man seit den 90ern schon als “semantisches HTML” kennt.
- Title, Descriptions, alt-Attribute und Co.
- Korrekte Statuscodes
Accessibility
Wer mich kennt, weiß, dass ich da sehr nervig sein kann. Das BFSG steht vor der Tür, also haben wir das gleich mit berücksichtigt: Das Design ist nicht nur responsive, es ist auch tastatur-navigierbar. Kontraste etc. wurden alle mit WebAIM dauerhaft geprüft und angepasst. Die Bilder haben alle alt-Texte, wenn notwendig oder explizit keinen, wenn es nur Design-Bilder sind.
Komponenenten, die eigene Überschriften enthalten können die korrekten Heading-Level von außen mitgegeben bekommen, so dass sie universeller einsetzbar sind. Sinnvolle Überschriften sind schließlich auch ein Thema beim BFSG, ebenso wie die anderen semantischen Themen.
Die FAQ-Akkordeons z.B. sind per custom-element erweiterte Definition Lists, die diese Frage-Antwort-Hierarchie schon abbilden.
Deployment
Mittlerweile gibt es 2 Versionen der Seite, eine Version die bei Netlify auf Basis des Develop-Branches gebaut wird, eine Version die per Gitlab Runner gebaut und dann auf dem finalen System deployed wird. So haben wir Gitlab als generelles Preview und Feature-Branches und ein sauberes Deployment auf einem komplett anderen Host.
Die Zukunft
Spannend wird es, wenn man sich überlegt, dass man die Content-Pflege in Zukunft auf ein Headless-CMS übernehmen kann und mit der Content-Struktur weiterarbeiten kann oder dann ggf. irgendwann mehr Interaktion in die Seite kommt. Ich bin gespannt, was da noch kommt.
