Tänään bestes-wetter.de on julkaistu tuotantoon – toinen verkkosivustoni CARECOM-perheessä ja tietoinen vastakohta carecom.de:n konsultointi- ja valokuvausmaailmalle. Kyse on ulkoilusta: kaukovaelluksista kuten Alppien ylityksestä Garmischista Sterzingiin, kaupungeista jotka koetaan jalan, ja varusteista jotka eivät tule esitteestä vaan vuorelta. Tavoite näkyy jo tunnuslauseessa: rehellisesti testattu, siististi dokumentoitu.
Koska tämä on ohjelmistoarkkitehdin ja -kehittäjän sivusto, haluan kertoa paitsi siitä mitä syntyi, myös vilauksia siitä miten. Konepellin alla on Blazor Web App .NET 10:llä – palvelinpuolella renderöity, interaktiivisin saarekkein siellä missä se kannattaa – mutta ei huolta, tästä ei tule white paperia.
Yksi pohja usealle verkkosivustolle
bestes-wetter.de seisoo samalla pohjalla kuin carecom.de – yhteisellä Razor Class Libraryllä, jonka irrotimme carecom.de:tä rakentaessamme. Evästebanneri, monikielisyys, SEO-työkalupakki sivukartoin ja hreflang-merkinnöin, postitus MailKitin kautta: kaikki tämä on yhdessä paikassa ja vain puetaan uudelleen sivustokohtaisesti. Nykyään tämä pohja kantaa useita sisarsivustoja – jokainen uusi valmistuu edellistä nopeammin, ja yksi parannus perustaan hyödyttää kaikkia kerralla. Juuri siksi perustan ja julkisivun siisti erottelu kannattaa.
Sisältö datana ajateltuna
Vaellusraportti on enemmän kuin juokseva teksti. Siinä on etappeja, korkeusmetrejä, reitti, päivätyt valokuvat ja siellä täällä varustevinkki. Siksi jokainen artikkeli on kevyt XML-metatietotiedosto puhtaan Markdown-tekstin vieressä. Teksti renderöidään Markdigillä, jota on laajennettu omilla container-lohkoilla: :::leg etapille etäisyyksineen, korkeusprofiileineen ja karttoineen, :::product-card varustesuositukselle, :::pros-cons rehelliselle puntaroinnille. Kirjoittaminen pysyy lähellä puhdasta tekstiä, ja lopputulos on silti rakenteinen ja koneluettava. Ja koska artikkelin teksti ei enää muutu ajonaikana, jokainen runko jäsennetään täsmälleen kerran ja valmis HTML tarjoillaan sen jälkeen välimuistista.
Kartat ja kuvat, jotka pitävät tahdin
Vaellukset halutaan nähdä kartalla. Siitä huolehtii Leaflet – mutta ei pääbundlessa, vaan ladattuna tarvittaessa heti kun sivu todella sisältää kartan. Kirjasto on itse isännöity omalla palvelimella, ja alustus kiinnittyy paitsi ensimmäiseen sivunlataukseen myös Blazorin Enhanced Navigationiin – niin kartat ilmestyvät luotettavasti myös sovelluksen sisäisen klikkauksen jälkeen. Sivua vaihdettaessa orvot karttaesiintymät siivotaan pois; muuten Leaflet jättää jälkeensä resize-kuuntelijoita ja animaatiosilmukoita, jotka myöhemmin olisivat tiellä.
Valokuvat puolestaan ovat useina resoluutioina WebP-muodossa ja tarjoillaan srcsetin kautta, jottei älypuhelin lataa työpöytäversiota. Kunnes terävä kuva saapuu, pieni sumea esikatselu pitää paikkaa – kuva häivähtää pehmeästi esiin sen sijaan että pomppaisi äkisti näkyviin. Pieniä asioita, jotka yhdessä tekevät eron „latautuu"- ja „on yksinkertaisesti siellä" -tilan välille.
Kaksi kieltä alusta alkaen
Sivusto puhuu saksaa ja englantia, eikä jälkikäteen liimattuna lisäkkeenä. Käyttöliittymätekstit ovat XML-muodossa, ja Roslyn-lähdegeneraattori valaa ne käännösvaiheessa tyyppiturvalliseksi C#-koodiksi – jokaisesta tekstiavaimesta tulee näin ominaisuus, ja kirjoitusvirhe paljastuu jo käännöksessä, ei vasta kävijällä. Ulospäin oikeat hreflang-signaalit kertovat Googlelle, että saksan- ja englanninkielinen versio tunnistetaan tasavertaisiksi sisaruksiksi eikä erehdytä pitämään niitä kaksoissisältönä.
Suositukset, jotka renderöijä linkittää
Jotkut varustesuositukset sisältävät kumppanilinkkejä – avoimesti ilmoitettuna. Markdownissa on vain lähderiippumaton paikkamerkki kuten amazon:<tuote-id>; vasta renderöinnissä ArticleRenderer tekee siitä valmiin kumppanilinkin, mukaan lukien rel="sponsored" ja kohde uudessa välilehdessä. Hyöty on kotikutoinen: tekstin kirjoittajan ei tarvitse murehtia seurantaparametreja, ja kumppanin vaihto on konfiguraatioasia eikä etsi-ja-korvaa läpi kaikkien artikkelien.
Käy katsomassa
Kaikkein mukavinta on tietysti kokea tämä kaikki itse kohteessa. Jokainen, joka kaipaa vuoria, kaupunkeja ja hyvin dokumentoituja varusteita, on lämpimästi tervetullut osoitteeseen bestes-wetter.de. Ja jos haluat tietää, miten tällainen sivusto toteutettaisiin omaan hankkeeseesi: juuri sitä varten on CARECOM Consulting.