WebEdge viešoji svetainė

Mūsų lt/en/ru svetainė su Astro, turinys iš WebEdge CMS.

AstroTypeScriptTailwind

WebEdge viešosios svetainės ekrano vaizdas

Dev-story

Iššūkis

Norėjome viešos svetainės trimis kalbomis, sinchronizuotos su mūsų pačių CMS, bet pateikiamos kaip grynas statinis HTML — be sunkaus SPA, kraunančio duomenis realiu laiku.

Ką darėme

Astro kiekvieną puslapį sugeneruoja į statinį HTML statybos metu; tekstai ir projektų katalogas paimami iš WebEdge CMS, o jei CMS nepasiekiama, tipizuota atsarginė kopija repozitorijoje išlaiko sėkmingą statybą.

Rezultatas

Redaktoriai keičia turinį CMS, perstatymas pateikia naujus statinius puslapius, o svetainė nenulūžta, kai CMS neveikia.

Dev-story straipsnis

Kaip buvo kuriamas projektas: WebEdge viešoji svetainė

Vitrina projektų tekstus traukia iš mūsų TVS, bet TVS nuolat nuklysdavo: pasenusios 'featured' žymos, negražūs automatiškai padaryti ekrano vaizdai ir produktų pavadinimai, kurių viešai rodyti negalime (konkurentų prekės ženklai, vidiniai kodiniai vardai). Taisyti 32 projektų korteles ranka TVS'e nebuvo išeitis — reikėjo tiesos šaltinio, gyvenančio kode ir išliekančio po peržiūros. Todėl kompiliavimą perdarėme taip, kad laimi repozitorija, o TVS tik užpildo spragas.

Skyriai

Moduliai

Stackas

Astro + TypeScript

Kodėl projektas atsirado

Norėjome viešos svetainės trimis kalbomis, sinchronizuotos su mūsų pačių CMS, bet pateikiamos kaip grynas statinis HTML — be sunkaus SPA, kraunančio duomenis realiu laiku.

Ką sukūrėme

Statinė Astro svetainė lietuvių, anglų ir rusų kalbomis — rinkodaros fasadas ir ~32 projektų portfelio katalogas su atskirais detalių puslapiais. Turinys kompiliavimo metu paimamas iš TVS ir sulydomas su repozitorijoje esančiais pakeitimais; rezultatas — grynas statinis HTML be sunkaus kliento karkaso.

Pagrindiniai moduliai ir vartotojo kelias

M01

Pirmenybė repozitorijai lydant: repo turinys (šūkiai, technologijų žymos, viršelis, 'featured' žyma) nustelbia TVS, o ne yra jungiamas su pasenusiomis TVS reikšmėmis

M02

staticScreenshots žemėlapis, tiekiantis kiekvienam projektui į repozitoriją įkeltą cover.webp vietoj TVS automatiškai padarytų ekrano vaizdų

M03

Prekės ženklų šalinimo etapas, iš kiekvienos kortelės pašalinantis išorinių produktų ir vidinių kodinių vardus, bet paliekantis teisėtus savų technologijų pavadinimus

M04

Pagrindinio puslapio tinklelis sutvarkytas į švarų 3x3 iš devynių išskirtų projektų, valdomą repo žymos, o ne TVS

M05

Suplonintos katalogo kortelės: vienos eilutės šūkiai perrašyti iki <=81 simbolio su line-clamp-2 apsauga, o visas iššūkio/sprendimo/rezultato gylis perkeltas į detalių puslapį

Architektūra ir technologiniai sprendimai

Sukurta su Astro, TypeScript, Tailwind.

Sukurta su Astro; TVS turinys paimamas kompiliavimo metu ir sulydomas per repozitorijai pirmenybę teikiantį lyginį; kiekvienas projektas turi EN/LT/RU tekstą, kurio prasmė išlieka nuosekli visose trijose kalbose.

Rezultatas ir pamokos

Redaktoriai keičia turinį CMS, perstatymas pateikia naujus statinius puslapius, o svetainė nenulūžta, kai CMS neveikia.

Svetainė pateikiama kaip statinis HTML, o repozitorija yra peržiūrimas tiesos šaltinis, tad kortelės tekstas, viršelis ir 'featured' būsena keičiasi vienu commit'u — be kelionės į TVS ir be pasenusių duomenų nutekėjimo į viešą tinklelį.