V září jsem se ženil, měli jsme pozváno kolem 120 hostů a nejrychlejší způsob, jak hromadně předat ucelené a aktuální informace všem naráz, byl odkázat svatebčany na web.
Vytvořil jsem proto narychlo svatební web. Požadavek byl aby texty na webu mohla měnit i nevěsta, aby byl web alespoň trochu reprezentativní, aby byl web v designu celé svatby, aby web byl vícejazyčný (někteří hosté jsou ze zahraničí), aby byl web responzivní (jak znám kamarády, kde se to koná se kouknou z mobilu až někde po cestě) a hlavně abych s tím neměl moc práce.
Backend
Web jsem postavil na PayloadCMS, headless správci obsahu. Ten v základu umožňuje rychle nadefinovat entity jako Menu a Page. Do nich se pak nadefinují vícejazyčné atributy jako titulek nebo samotný obsah stránky. Vše se konfiguruje programátorsky sestavením konfiguračních objektů v typescriptu. Objekty popisují atributy entit, jejich datový typ, validační pravidla i jakým formulářovými inputy mají být reprezentovány v administraci.
Programátor tedy nastaví, že v systému bude entita Page, ta má textové pole title a taky má wysiwyg pole content. PayloadCMS má vlastní editor, který mimo základní prvky jako odstavec, tučný text, kurzíva umí definovat i vlastní bloky. Do textu tak lze vkládat své bloky, které jsou popsány stejnou konfigurací jako entity.
PayloadCMS všechny informace ukládá do dokumentové databáze MongoDB. I výstup z wysiwyg editoru je jen strom objektů v json formátu.
Frontend
Samotný web se vykresluje pomocí drobné Next.js aplikace, která si na základě url tahá z PayloadCMS data a ty vykresluje Reactem.
Stromový JSON s obsahem vytvořený wysiwyg editorem je velmi pohodlné vykreslovat rekurzivním renderováním React komponent, kdy každý definovaný blok v CMS odpovídá jedné komponentě Reactu a data bloku odpovídají properties komponenty.
