Vilniaus Verinėlis svetainė

Maža, greita statinė svetainė Vilniaus Verinėlio darželiui.

Vue 3TypeScriptStatic site

Dev-story

Iššūkis

Darželio svetainei tereikia greito veikimo, aiškaus teksto ir kad netechninis personalas galėtų ją lengvai atnaujinti.

Ką darėme

Vue 3 + TypeScript svetainė, sukurta kaip statiniai puslapiai, su paprasta struktūra, kad informaciją būtų lengva rasti, o turinį — keisti.

Rezultatas

Ji veikia ties vilniausverinelis.lt, kraunasi greitai ir kasdieniams turinio atnaujinimams nereikia programuotojo.

Dev-story straipsnis

Kaip buvo kuriamas projektas: Vilniaus Verinėlis svetainė

Darželiui reikia, kad svetainė būtų nuolat atnaujinama — naujienos, skelbimai, nuotraukos — bet ją tvarko auklėtojos, ne programuotojai, ir puslapis turi akimirksniu atsidaryti tėvų telefone. Įtampa buvo tokia: traukti gyvą turinį iš CMS ir reaktyvaus back-endo, bet viešą svetainę pateikti kaip statinius failus, kuriuose vykdymo metu nėra ko sugesti. Todėl viskas parsiunčiama surinkimo metu ir užšaldoma, o personalas publikuodamas net neliečia kodo.

Skyriai

Moduliai

Stackas

Vue 3 + TypeScript

Kodėl projektas atsirado

Darželio svetainei tereikia greito veikimo, aiškaus teksto ir kad netechninis personalas galėtų ją lengvai atnaujinti.

Ką sukūrėme

Vue 3 + TypeScript svetainė, sukurta kaip statiniai puslapiai, su paprasta struktūra, kad informaciją būtų lengva rasti, o turinį — keisti.

Vue 3 / Nuxt 4 svetainė, pilnai iš anksto sugeneruota į statinį HTML ir paleista Cloudflare Pages, kuri savo turinį — puslapius, naujienas, paveikslėlius — surinkimo metu skaito iš WebEdge turinio valdymo sistemos ir reaktyvaus back-endo. Kiekvienas perkeltas naujienų puslapis apeinamas ir sugeneruojamas iš anksto, todėl lankytojui atėjus nėra jokio serverio kreipinio. Svetainė dvikalbė ir turi hCaptcha apsaugotą kontaktų formą.

Pagrindiniai moduliai ir vartotojo kelias

M01

Turinio parsiuntimas surinkimo metu iš WebEdge CMS viešo REST API ir reaktyvaus back-endo, kad redaktoriai dirbtų įprastame administravimo skydelyje, o svetainė persirinktų pagal jų pakeitimus

M02

Prerender apėjimo mechanizmas, kuris suranda ir užšaldo kiekvieną perkeltą naujienų puslapį į statinį HTML, apeidamas saugyklos/turinio API kelius, kurių liesti nereikia

M03

Statinis surinkimas nustatytas garsiai nutrūkti esant bet kokiai CMS parsiuntimo klaidai, kad blogas turinys niekada nebūtų paskelbtas kaip pustuštis puslapis

M04

WebEdge saugyklos turinio ID perrašymas, kad paveikslėliai teisingai užsikrautų iš saugyklos po turinio perkėlimo

M05

Dvikalbis maršrutizavimas su Nuxt i18n, Tailwind stilius ir Swiper karuselės nuotraukų galerijoms

Architektūra ir technologiniai sprendimai

Sukurta su Vue 3, TypeScript, Static site.

Nuxt 4 su TypeScript, Tailwind, VueUse ir i18n; turinys ateina iš WebEdge CMS ir reaktyvaus back-endo per runtimeConfig (aplinkos kintamieji nepasiekiami Nuxt kompozicinėse funkcijose prerender metu), o rezultatas — statiniai failai Cloudflare Pages.

Rezultatas ir pamokos

Ji veikia ties vilniausverinelis.lt, kraunasi greitai ir kasdieniams turinio atnaujinimams nereikia programuotojo.

Personalas redaguoja turinį CMS, o svetainė persirenka į paprastus statinius failus — greita tėvams, nieko prižiūrėti vykdymo metu, ir naujam įrašui paskelbti kodo nereikia.