Template

Files

✨ feat: add new contact form, hero, features, and richtext blocks; implement scroll-reveal action and update styles

- 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.

2026-02-26 03:54:07 +00:00

3.1 KiB

Raw Blame History

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.online
- STAGING_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: Passe ADMIN_TOKEN, Datenbank-Name und weitere Secrets an.
docker-compose-local.yml: Suche nach project_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 Content
- frontend/mocking/navigation.json — Demo-Mockdaten für Navigation
- api/collections/content.yml — Content-Collection-Konfiguration
- api/collections/navigation.yml — Navigation-Collection-Konfiguration
- tests/e2e/demo.spec.ts — Demo-E2E-Tests
- video-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

UI	URL
Website	https://tibi-svelte-starter.code.testversion.online/
Tibi Admin	https://tibi-svelte-starter-tibiadmin.code.testversion.online/
Maildev	https://tibi-svelte-starter-maildev.code.testversion.online/

Bauen

# moderne Browser
yarn build

# alte Browser (IE11)
yarn build:legacy

# serverseitiges Rendering
yarn build:server

# Admin-Module
yarn build:admin

3.1 KiB Raw Blame History