Sebastian Frank
40ffa8207e
- Introduced ContactFormBlock, FeaturesBlock, HeroBlock, and RichtextBlock components. - Implemented a scroll-reveal action for animations on element visibility. - Enhanced CSS styles for better theming and prose formatting. - Added localization support for new components and updated existing translations. - Created e2e tests for demo pages including contact form validation and navigation. - Added a video tour showcasing the demo pages and interactions.
tibi-starter
Starter Kit für SPAs(s) ;) mit Svelte und TibiCMS inkl. SSR
Neues Projekt starten
Nachdem du dieses Repository als Vorlage geklont hast, passe die Platzhalter an dein Projekt an:
.env: Ersetze__PROJECT_NAME__mit deinem Projektnamen (z.B.mein-projekt). Die folgenden URLs werden automatisch abgeleitet:CODING_URL=https://mein-projekt.code.testversion.onlineSTAGING_URL=https://dev-mein-projekt.staging.testversion.online
frontend/spa.html/api/templates/spa.html: Ersetze__PROJECT_TITLE__mit dem Seitentitel.api/config.yml.env: PasseADMIN_TOKEN, Datenbank-Name und weitere Secrets an.docker-compose-local.yml: Suche nachproject_name__und ersetze mit deinem Projektnamen (Container-Benennung).- Demo-Inhalte entfernen: Die Demo-Seite besteht aus diesen Dateien, die für ein echtes Projekt entfernt/ersetzt werden können:
frontend/src/blocks/— Block-Komponenten (HeroBlock, FeaturesBlock, RichtextBlock, AccordionBlock, ContactFormBlock, BlockRenderer, NotFound)frontend/mocking/content.json— Demo-Mockdaten für Contentfrontend/mocking/navigation.json— Demo-Mockdaten für Navigationapi/collections/content.yml— Content-Collection-Konfigurationapi/collections/navigation.yml— Navigation-Collection-Konfigurationtests/e2e/demo.spec.ts— Demo-E2E-Testsvideo-tours/tours/demo-showcase.tour.ts— Demo-Video-Tour
frontend/src/App.svelte: Passe Header, Footer und Content-Loading an dein Datenmodell an.
# Platzhalter ersetzen (Beispiel für Linux/Mac):
sed -i 's/__PROJECT_NAME__/mein-projekt/g' .env
sed -i 's/__PROJECT_TITLE__/Mein Projekt/g' frontend/spa.html api/templates/spa.html
Wozu?
Via Svelte wird eine SPA (Single-Page-App) programmiert. Dazu wird der Code einmal für den Browser aufgebreitet und außerdem für den Server kompiliert und transpiliert. Der Server-Code wird in einem tibi-server SSR-Hook (server side rendering) eingebunden und generiert dort fertiges HTML anhand der aktuelle Route für SEO und optimierte Ladezeiten.
Die Navigation innerhalb der APP im Browser löst dagegen nur API-Aufrufe aus ohne jedesmal einen SSR-Prozess anzustoßen.
Um die SSR-Last so gering wie möglich zu halten, wurde ein Caching in der "ssr"-Collection der API implementiert.
Toolchain
git
nach git clone ...
git lfs install
git lfs pull
Abhängigkeiten laden
yarn install
Entwickeln auf dem Code-Server mit Docker Compose Stack
make docker-start
# oder
make docker-up
make docker-down
# "make help" zeigt alle Kommandos
Bauen
# moderne Browser
yarn build
# alte Browser (IE11)
yarn build:legacy
# serverseitiges Rendering
yarn build:server
# Admin-Module
yarn build:admin