Seit heute ist bestes-wetter.de produktiv – meine zweite Website im CARECOM-Verbund und ein bewusster Kontrast zur Beratungs- und Fotografie-Welt hier auf carecom.de. Es geht um draußen: um Fernwanderungen wie die Alpenüberquerung von Garmisch nach Sterzing, um Städte, die man zu Fuß erkundet, und um Ausrüstung, die nicht aus dem Prospekt, sondern vom Berg kommt. Der Anspruch steht schon im Claim: ehrlich getestet, sauber dokumentiert.
Weil dies hier die Seite eines Software-Architekten und -Entwicklers ist, möchte ich nicht nur erzählen, was entstanden ist, sondern auch ein paar Schlaglichter darauf werfen, wie. Unter der Haube ist es eine Blazor Web App auf .NET 10 – serverseitig gerendert, mit interaktiven Inseln dort, wo es sich lohnt – aber keine Sorge, es wird kein Whitepaper.
Eine Basis für mehrere Websites
bestes-wetter.de steht auf derselben Grundlage wie carecom.de – einer gemeinsamen Razor Class Library, die wir beim Bau von carecom.de herausgelöst haben. Cookie-Banner, Mehrsprachigkeit, der SEO-Baukasten mit Sitemap und hreflang, der Mailversand über MailKit: All das liegt einmal zentral und wird pro Seite nur noch eingekleidet. Inzwischen trägt diese Basis mehrere Schwester-Seiten – jede neue ist schneller fertig als die vorige, und eine Verbesserung am Fundament kommt allen auf einmal zugute. Genau dafür lohnt sich die saubere Trennung von Fundament und Fassade.
Inhalt als Daten gedacht
Ein Tourenbericht ist mehr als ein Fließtext. Er hat Etappen, Höhenmeter, eine Route, Fotos mit Datum und mittendrin manchmal eine Ausrüstungsempfehlung. Deshalb liegt jeder Artikel als schlanke XML-Metadaten-Datei neben einem reinen Markdown-Text. Gerendert wird der über Markdig, erweitert um eigene Container-Bausteine: :::leg für eine Etappe samt Distanz, Höhenprofil und Karte, :::product-card für eine Ausrüstungsempfehlung, :::pros-cons für die ehrliche Abwägung. So bleibt das Schreiben nah an purem Text, das Ergebnis ist trotzdem strukturiert und maschinenlesbar. Und weil sich ein Artikel-Text zur Laufzeit nicht mehr ändert, wird jeder Body genau einmal geparst und das fertige HTML danach aus einem Cache bedient.
Karten und Bilder, die das Tempo halten
Touren wollen auf einer Karte gesehen werden. Dafür kommt Leaflet zum Einsatz – aber nicht im Haupt-Bundle, sondern erst bei Bedarf nachgeladen, sobald eine Seite tatsächlich eine Karte enthält. Die Bibliothek liegt selbst gehostet auf dem eigenen Server, und die Initialisierung hängt sich nicht nur an den ersten Seitenaufbau, sondern auch an Blazors Enhanced Navigation – so erscheinen Karten auch nach einem Klick im SPA-Betrieb zuverlässig. Beim Seitenwechsel werden verwaiste Karten-Instanzen wieder abgeräumt; sonst hinterlässt Leaflet Resize-Listener und Animations-Schleifen, die sich später in die Quere kämen.
Die Fotos liegen in mehreren Auflösungen als WebP vor und werden per srcset ausgespielt, sodass ein Smartphone nicht die Desktop-Variante herunterlädt. Bis das scharfe Bild da ist, hält eine winzige, unscharfe Vorschau den Platz – das Foto blendet weich ein, statt ruckartig aufzuploppen. Kleine Dinge, die zusammen den Unterschied zwischen „lädt" und „ist einfach da" ausmachen.
Zwei Sprachen, von Anfang an
Die Seite spricht Deutsch und Englisch, und zwar nicht als nachträglicher Anbau. Die Oberflächen-Texte liegen als XML und werden von einem Roslyn-Source-Generator beim Kompilieren in typsicheren C#-Code gegossen – jeder Textschlüssel wird so zu einer Eigenschaft, und ein Vertipper fliegt schon beim Build auf, nicht erst beim Besucher. Nach außen sorgen die passenden hreflang-Signale dafür, dass Google die deutsche und die englische Fassung als gleichwertige Geschwister erkennt und nicht als doppelten Inhalt missversteht.
Empfehlungen, die der Renderer verlinkt
Manche Ausrüstungsempfehlungen tragen Partner-Links – offen deklariert. Im Markdown steht dabei nur ein quell-neutraler Platzhalter wie amazon:<Produkt-ID>; erst beim Rendern macht der ArticleRenderer daraus den fertigen Partner-Link, inklusive rel="sponsored" und Ziel im neuen Tab. Der Gewinn ist hausgemacht: Wer einen Text schreibt, muss sich nicht um Tracking-Parameter kümmern, und ein Partnerwechsel ist eine Sache der Konfiguration statt eines Suchen-und-Ersetzen quer durch alle Artikel.
Schauen Sie vorbei
Am schönsten lässt sich das alles natürlich an der Sache selbst erleben. Wer Lust auf Berge, Städte und gut dokumentierte Ausrüstung hat, ist auf bestes-wetter.de herzlich willkommen. Und wer wissen möchte, wie sich eine solche Seite für das eigene Vorhaben umsetzen lässt: Genau dafür gibt es das CARECOM Consulting.
