Představujeme vlastní Open-Source projekt Vituum

Jde o projekt Vituum, kombinace slov Vite (francouzsky rychlý) a Tuum (estonsky jádro).

O Vite jste ještě neslyšeli?!

Jde o front-end nástroj nové generace. Zapomeňte na Webpack, který musíte složitě konfigurovat a nastavovat ,abyste se vůbec dočkali požadovaného výsledku.

Vite tedy znamená francouzsky rychlý a rychlý nástroj to opravdu je. Zapne se během půl sekundy a můžete vyvíjet a to bez kompilace a bez configu. Cokoliv upravíte ve zdrojových souborech se ihned projeví v prohlížeči. Používá totiž moderní standardy jako např. ES moduly.

Pokud se chcete dozvědět více, tak se podívejte na oficiální stránky vitejs.dev

Co je teda Vituum?

Hlavním úkolem tohoto projektu je přidat nové funkce nad rámec funkčnosti Vite. A to s minimálním configem a všemi funkcemi ihned připravenými k použití.

Mezi tyto funkce patří - základní PostCSS pluginy, podpora pro šablonovací systémy, multi-page podpora, předdefinovaná struktura, auto-importy pro styly a scripty, tvorba e-mailových šablon a TailwindCSS integrace.

Dá se vlastně říct, že to je takový starter pack pro Vite a malý statický generátor stránek.

Pokud si to rovnou vše chcete vyzkoušet, tak navštivte sekci vyzkoušet online na oficiálních stránkách. Zde si můžete vyzkoušet spoustu online příkladů ihned na StackBlitz.

Šablonovací systémy

Vite šablonovací systémy samo o sobě úplně neumí. Jde o dlouhodobý problém, který je mimo rozsah funkčností Vite (viz. #1861). Pluginy pro šablonovací systémy jako takové se ovšem napsat dají (pár jich dokonce už existuje), ale mimo podporu formátu koncovek jako .twig, .hbs, .njk apod.

To je také jeden z důvodů, proč jsme dali dohromady tento malý projekt. Vituum podporu těchto koncovek umí a napsali jsme i spoustu pluginů pro různé šablonovací systémy. Umíme Twig, Latte (ano vidíte správně, vážně umíme i Latte v Node.js!), Liquid, Nunjucks, Pug a Handlebars. Všechny tyto šablonovací systémy lze přidat a instalovat volitelně přes API Integraci.

Aby vše mohlo fungovat, tak Vituum používá vlastní příkaz pro build vituum build.

Více informací o tom jak instalovat jednotlivé šablonovací systémy naleznete v dokumentaci.

Multi-page podpora

Ve výchozím stavu Vite podporuje jen jeden index.html soubor. Což sice lze upravit přes config, ale je to trošku zdlouhavější zápis a není moc dobře zdokumentovaný.

Vituum ve výchozím nastavení načítá všechny stránky, které jsou umístěny v src/views a mohou to být .html soubory, soubory šablonovacích systémů, a nebo pouhé .json soubory s daty, které automaticky načítají šablony šablonovacích systémů. Stránky můžete dokonce zanořovat do složek.

Více informací naleznete v dokumentaci.

Předdefinovaná struktura

Výchozí struktura ve Vituum je v následujícím formátu. Rozložení složek je volitelné a lze jej vždy změnit pomocí configu. Primárně jde o to ulehčit práci se zbytečnou konfigurací u projektu.

• src/assets - statické soubory jako .png nebo .svg
• src/data - globální .json data pro šablonovací systémy
• src/emails - stránky vyloženě pro emaily
• src/scripts - script soubory jako .js nebo .ts
• src/styles - styles soubory jako .css nebo .scss
• src/templates - soubory šablonovacích systémů jako .twig nebo .latte
• src/views - stránky webu ve formátu šablonovacích systémů jako .twig, .latte, .json nebo čisté .html

Importy

V čistém .css a .js lze importovat vždy jen jeden soubor. Globy jako *.css nebo *.js nejsou možné.

Pro automatický import více souborů používá Vituum interní plugin, který přidává všechny importy souborů v adresářích do jednoho souboru.

Pokud máte složitý projekt se spoustou souborů stylů nebo skriptů, tak je to super věc.

Jsou podporované všechny typy souborů, můžete používat .css, .less, .scss nebo .js, .ts, vše lze nastavit pomocí configu.

Více informací naleznete v dokumentaci.

Emaily

Psaní emailových šablon bylo vždycky zrádné. Vituum se to snaží zlepšit. Přidáním integrace @vituum/juice můžete psát styly v PostCSS nebo jakémkoliv pre-processoru. Všechny styly budou inlinované pomocí knihovny Juice.

Jednotlivé emaily pak píšete klasickým způsobem jako u src/views, můžete tak využít šablonovacích systémů nebo třeba PostHTML.

Vše můžete dokonce otestovat odesláním emailu přes vituum send, stačí si nastavit v configu nebo .env souboru SMTP údaje.

Více informací naleznete v dokumentaci.

Integrace

Všechny moduly lze volitelně přidat pomocí API Integrací. Pomocí tohoto API si dokonce můžete napsat i vlastní příkaz a ten pak spustíte přes vituum muj-prikaz

Mezi integrace pak patří třeba i populární TailwindCSS, kde stačí pouze přidat integraci, tailwind.config.cjs a můžete naplno bez složité konfigurace začít používat tuto knihovnu.

My jsme si pro Newlogic napsali vlastní integraci @newlogic-digital/core s předpřipraveným configem, integracemi a s rozšířeními pro šablonovací systémy pro snadné používání na našich projektech. Náš config u projektů má pak většinou maximálně 6-10 řádků.

Více informací naleznete v dokumentaci.

Líbí se?

Vituum je vlastně i dobrá cesta pro přechod na modernější řešení ze starších nástrojů jako je gulp, grunt nebo webpack a pro ty kteří stále používají šablonovací systémy.

Hodí se i pro rychlé vytvoření statických stránek. Pokud však hledáte kompletní řešení na čistě statické stránky, tak určitě doporučujeme vyzkoušet i Astro.

Celý projekt má kompletní dokumentaci na vituum.dev a můžete ho sledovat i na Twitteru pod @vituum_dev.

Pokud projekt chcete podpořit, tak určitě dejte hvězdu na GitHubu, budeme moc rádi. A nebo se také můžete stát partnery a podpořit tak další vývoj finančně. V takovém případě mě kontaktuje na adrese lubomir.blazek@newlogic.cz, vaše logo se pak může objevit na stránkách projektu.

Případně i jakákoliv pomoc, ať už přidáváním issues nebo pull requestů, je vítána.