Technologie-Stack

Modernes Frontend-Stack mit SvelteKit 2, Svelte 5 Runes und Tailwind CSS 4.

Architektur

graph TB
    subgraph Framework ["SvelteKit 2"]
        Routes["Routes<br/>+page.svelte"]
        Layout["+layout.svelte"]
        Lib["lib/<br/>Komponenten"]
    end

    subgraph UI ["UI Framework"]
        Shadcn["shadcn-svelte<br/>Badge, Button, Card"]
        Tailwind["Tailwind CSS 4"]
        Lucide["Lucide Icons"]
    end

    subgraph PWA ["PWA"]
        VitePWA["@vite-pwa/sveltekit"]
        Manifest["Web Manifest"]
        Workbox["Workbox SW"]
    end

    subgraph Build ["Build"]
        Vite["Vite 8"]
        Static["adapter-static<br/>SPA Fallback"]
        Define["Define Constants<br/>Versions-Info"]
    end

    Routes --> Lib
    Routes --> Shadcn
    Layout --> ModeWatcher["mode-watcher"]
    Lib --> Tailwind
    Lib --> Lucide
    Vite --> Static
    Vite --> Define
    Vite --> VitePWA
    VitePWA --> Manifest
    VitePWA --> Workbox

Abhangigkeiten

Kategorie	Paket	Version	Zweck
Framework	@sveltejs/kit	2.x	SvelteKit Framework
Framework	svelte	5.x	UI Library (Runes)
Styling	tailwindcss	4.x	Utility-First CSS
Styling	@fontsource/inter	5.x	Inter Schriftart
UI	bits-ui	2.x	Headless UI Primitives
UI	lucide-svelte	1.x	Icon-Bibliothek
PWA	@vite-pwa/sveltekit	1.x	PWA-Unterstutzung
Mode	mode-watcher	1.x	Dark/Light/System
Build	vite	8.x	Build-Tool
Test	vitest	4.x	Unit Tests
Test	@testing-library/svelte	5.x	Component Tests
Lint	eslint	10.x	Linter
Lint	prettier	3.x	Formatter

Komponenten-Struktur

src/
├── routes/
│   ├── +layout.svelte        # Root-Layout (ModeWatcher, Meta)
│   └── +page.svelte          # Dashboard-Hauptseite
├── lib/
│   ├── components/
│   │   ├── version-card.svelte     # Karten-Komponente
│   │   ├── git-info-row.svelte     # Label-Value Zeile
│   │   ├── mode-toggle.svelte      # Dark/Light Toggle
│   │   └── ui/                     # shadcn-svelte
│   │       ├── badge/
│   │       ├── button/
│   │       ├── card/
│   │       └── separator/
│   ├── version-info.ts       # Build-Time Konstanten
│   ├── utils.ts              # cn() Helper
│   └── icon.ts               # LucideIcon Type
└── app.css                   # Tailwind + Theme Variables

Svelte 5 Runes

Die Anwendung nutzt Svelte 5 Runes statt klassischer Reactivity:

Rune	Verwendung
`$state()`	Reaktiver State (copied, pending)
`$props()`	Komponenten-Props
`$effect()`	Side Effects

PWA-Konfiguration

{
  "name": "Janus Home",
  "short_name": "Janus",
  "display": "standalone",
  "theme_color": "#09090b",
  "background_color": "#ffffff"
}

Registrierung: autoUpdate - Service Worker aktualisiert automatisch
Caching: Workbox cached js, css, html, svg, webmanifest
Scope: / mit SPA-Fallback

Dark Mode

Unterstützt drei Modi über mode-watcher:

System: OS-Einstellung folgen
Light: Heller Modus
Dark: Dunkler Modus

Farbvariablen in OKLCH-Farbraum fur präzise Steuerung in app.css.