Datei-basiertes CMS für Projekte implementiert und Scroll-Animationen hinzugefügt

This commit is contained in:
2026-01-15 18:55:20 +01:00
parent 96ea52f368
commit bd966014af
6 changed files with 536 additions and 220 deletions

114
README.md
View File

@@ -1,99 +1,87 @@
bytemalte_de Community Chat
bytemalte_de Community Chat & Projekt-Portfolio
Dies ist ein Fullstack-Projekt für einen modernen Gruppenchat, entwickelt mit:
- Leptos Web-Framework aus Rust
- cargo-leptos Fullstack-Build-Tool
- Axum Webserver-Framework
- SQLite Leichte Embedded-Datenbank
Dies ist ein Fullstack-Projekt für eine moderne Community-Plattform, entwickelt mit:
Leptos (0.8) Web-Framework aus Rust (Frontend & SSR)
cargo-leptos Fullstack-Build-Tool
Axum Webserver-Framework
SQLite & SQLx Datenbank für Chat & Benutzer
File-based CMS JSON-basiertes System für Projekt-Verwaltung
Projekt-Features
Echtzeit-Chat: Benutzerregistrierung und Gruppenchat mit SQLite-Backend.
Projekt-Portfolio: Dynamische Anzeige von Projekten direkt aus einer projects.json.
Infinite Scroll: Performantes Nachladen von Inhalten auf der Startseite.
Server Side Rendering (SSR): Schnelle Ladezeiten und SEO-Optimierung.
Projekt-Setup
1. Datenbank konfigurieren
Voraussetzungen & Tools Stelle sicher, dass Rust installiert ist. Installiere zusätzlich die benötigten Komponenten:
Erstelle im Hauptverzeichnis eine .env Datei mit folgendem Inhalt:
DATABASE_URL="sqlite:community.db"
rustup target add wasm32-unknown-unknown cargo install cargo-leptos cargo install sqlx-cli --no-default-features --features sqlite
Initialisiere anschließend die Datenbank und führe Migrationen aus:
sqlx db create
sqlx migrate run
SASS Compiler: Fedora: sudo dnf install dart-sass Oder via npm: npm install -g sass
Damit werden die Tabellen für Benutzer und Nachrichten in der Datei community.db angelegt.
Datenbank & Umgebung Erstelle eine .env Datei im Hauptverzeichnis: DATABASE_URL="sqlite:community.db"
Initialisiere die Datenbank und führe Migrationen aus: sqlx db create sqlx migrate run
2. Entwicklungsserver starten
CMS Konfiguration (Projekte) Die Projekte auf der Startseite werden über die Datei projects.json gesteuert. Du kannst Projekte hinzufügen oder ändern, ohne den Code neu zu kompilieren. Die Datei muss im Hauptverzeichnis liegen.
Starte das Projekt mit Hot-Reload:
cargo leptos watch
Struktur der projects.json: [ { "id": 1, "title": "Projekt Name", "description": "Beschreibung...", "image_url": "/assets/bild.png", "download_url": "#", "code_url": "https://..." } ]
Nach erfolgreicher Kompilierung (WASM für das Frontend und Binärdatei für das Backend) ist die Anwendung unter
http://127.0.0.1:3000 erreichbar.
Entwicklungsserver starten
Starte das Projekt mit Hot-Reload: cargo leptos watch
Zusätzliche Tools und Konfiguration
Nach erfolgreicher Kompilierung ist die Anwendung unter http://127.0.0.1:3000 erreichbar.
Dieses Projekt nutzt kryptografische Funktionen (bcrypt) und Datenbankzugriffe. Stelle sicher, dass folgende Tools installiert sind:
Zusätzliche Konfiguration
rustup target add wasm32-unknown-unknown
cargo install sqlx-cli --no-default-features --features sqlite
SASS Compiler:
Fedora:
sudo dnf install dart-sass
oder mit npm:
npm install -g sass
Füge folgende Konfiguration in .cargo/config.toml hinzu, um das WASM-Krypto-Backend zu aktivieren:
[target.wasm32-unknown-unknown]
rustflags = ["--cfg", "getrandom_backend=\"wasm_js\""]
Füge folgende Konfiguration in .cargo/config.toml hinzu, um das WASM-Krypto-Backend (bcrypt) zu aktivieren:
[target.wasm32-unknown-unknown] rustflags = ["--cfg", "getrandom_backend="wasm_js""]
Produktion / Release Build
Erzeuge eine optimierte Release-Version:
cargo leptos build --release
Erzeuge eine optimierte Release-Version: cargo leptos build --release
Dieser Befehl erstellt:
- Die Server-Binärdatei unter target/release/bytemalte_de
- Das Frontend-Paket (WASM/JS/CSS) unter target/site
Die Server-Binärdatei unter target/release/bytemalte_de
Tests ausführen
Führe End-to-End-Tests mit Playwright aus:
cargo leptos end-to-end
Die Tests befinden sich im Verzeichnis end2end/tests.
Das Frontend-Paket (WASM/JS/CSS) unter target/site
Deployment auf einem entfernten Server (Ubuntu 24.04 VPS)
Nach cargo leptos build --release benötigst du auf dem Zielserver folgende Dateien:
- target/release/bytemalte_de
- target/site/
- community.db
- .env
Nach dem Build benötigst du auf dem Zielserver folgende Dateien:
Beispielhafte Verzeichnisstruktur:
bytemalte_de/
├── site/
├── community.db
└── .env
die Binärdatei (bytemalte_de)
Exportiere die Umgebungsvariablen (z.B. in einem Systemd-Service):
export LEPTOS_OUTPUT_NAME="bytemalte_de"
export LEPTOS_SITE_ROOT="site"
export LEPTOS_SITE_PKG_DIR="pkg"
export LEPTOS_SITE_ADDR="0.0.0.0:3000"
export DATABASE_URL="sqlite:community.db"
den Ordner site/
Starte die Anwendung:
./bytemalte_de
projects.json
community.db
.env
Beispielhafte Verzeichnisstruktur: bytemalte_de/ ├── site/ ├── projects.json ├── community.db └── .env
Exportiere die Umgebungsvariablen (z. B. in einem Systemd-Service): export LEPTOS_OUTPUT_NAME="bytemalte_de" export LEPTOS_SITE_ROOT="site" export LEPTOS_SITE_PKG_DIR="pkg" export LEPTOS_SITE_ADDR="0.0.0.0:3000" export DATABASE_URL="sqlite:community.db"
Anwendung starten: ./bytemalte_de
Lizenz & Urheberrecht
Dieses Projekt basiert auf dem Leptos Axum Starter Template.
Die spezifische Chat-Logik, das Styling und UI-Design wurden individuell für bytemalte_de entwickelt.
Dieses Projekt basiert auf dem Leptos Axum Starter Template. Die spezifische Chat-Logik, das JSON-CMS, das Styling und UI-Design wurden individuell für bytemalte_de entwickelt.
Entwickelt mit ❤️ von bytemalte