This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Frontend-Dokumentation

Übersicht

Das Frontend besteht aus einer statischen Website, die durch ein Node.js-Build-System generiert wird. Content wird in Markdown/HTML verwaltet und zu fertigen HTML-Seiten kompiliert.

Build-System

Abhängigkeiten

• markdown-it: Markdown → HTML Konvertierung
• cross-env: Cross-Platform Environment-Variablen

Build-Script

Haupt-Script: scripts/build.mjs

Funktionen:

1. Content-Verarbeitung: Markdown/HTML → HTML mit Layout
2. Asset-Kopierung: Statische Dateien nach public/
3. Backend-Kopierung: PHP-Code nach public/backend/
4. Datenverzeichnis: Erstellt public/data/

Build ausführen

npm run build

Content-Management

globals.json

Zentrale Konfigurationsdatei:

{
  "event": {
    "date": "2025-11-08",
    "venue": "Sporthalle Buchenberg",
    "time": "10–13 Uhr",
    "notice": "Hinweis-Text (Markdown)"
  },
  "registration": {
    "status": "geplant",
    "link": "/anmeldung/"
  },
  "site": {
    "title": "Doberaner Zwergen-Börse",
    "subtitle": "Der Kinder-Flohmarkt in Bad Doberan",
    "description": "...",
    "organization": {
      "name": "Buchenberg-Schulverein BuSch e. V.",
      "address": "Ehm-Welk-Straße 24",
      "city": "18209 Bad Doberan"
    },
    "social": {
      "facebook": "https://..."
    },
    "navigation": [...],
    "tiles": [...],
    "cta": [...]
  }
}

pages.json

Seiten-Definitionen:

{
  "pages": [
    {
      "slug": "willkommen",
      "title": "Willkommen",
      "file": "willkommen.md",
      "type": "markdown"
    }
  ]
}

Felder:

• slug: URL-Pfad (z.B. /willkommen/)
• title: Seitentitel
• file: Datei in content/
• type: markdown oder html

Content-Dateien

Markdown (*.md):

• Unterstützt HTML innerhalb von Markdown
• Wird zu HTML konvertiert
• Erste Überschrift wird als H1 verwendet

HTML (*.html):

• Direktes HTML
• Erste <h1> wird entfernt (wird durch Layout-Titel ersetzt)

Layout-System

Layout-Funktion

layoutBase() in build.mjs generiert:

• HTML-Grundstruktur
• Header mit Logo und Navigation
• Footer mit Adresse und Links
• CSS/JS-Einbindung

Navigation

Wird aus globals.json → site.navigation generiert:

• Aktive Seite wird hervorgehoben
• Responsive Menü (Hamburger)

Header

Enthält:

• Logo
• Site-Titel und Untertitel
• Navigation

Footer

Enthält:

• Organisations-Adresse
• Social Media Links
• Rechtliche Links (Impressum, Datenschutz, Admin)
• Links werden aus globals.json → site.footer.legal generiert

Styling

CSS-Struktur

Hauptdatei: static/assets/styles.css

CSS-Variablen:

:root {
  --color-primary: #2563EB;
  --color-accent: #ff790a;
  --color-button: #e34519;
  --max-width: 960px;
  --radius: 6px;
}

Responsive Design

• Mobile-First Ansatz
• Breakpoints für verschiedene Bildschirmgrößen
• Hamburger-Menü für Mobile

Komponenten

• Hero-Section: Startseite mit Event-Info
• Tiles: Kacheln für Navigation
• Teaser: Beschreibungstext
• Page-Content: Hauptinhalt der Seiten

JavaScript

Hauptdatei: static/assets/script.js

Funktionen:

• Mobile-Menü Toggle
• Event-Handler
• Form-Validierung (falls nötig)

Assets

Bilder

• Logo: assets/logo/logo-svg-250x210px.png
• Hero: assets/hero-300dpi.png
• Favicon: favicon.png

Optimierung

• Bilder in verschiedenen Auflösungen
• SVG für Logo (skalierbar)
• PNG für komplexe Bilder

Neue Seite hinzufügen

1. Content erstellen

Markdown:

# Neue Seite

Inhalt der Seite...

Oder HTML:

<h1>Neue Seite</h1>
<p>Inhalt...</p>

Speichern als content/neue-seite.md oder .html

2. In pages.json eintragen

{
  "pages": [
    {
      "slug": "neue-seite",
      "title": "Neue Seite",
      "file": "neue-seite.md",
      "type": "markdown"
    }
  ]
}

3. Build ausführen

npm run build

Ergebnis: public/neue-seite/index.html

Anpassungen

Navigation ändern

Bearbeite content/globals.json → site.navigation:

"navigation": [
  { "title": "Neue Seite", "url": "/neue-seite/" }
]

Event-Daten aktualisieren

Bearbeite content/globals.json → event:

"event": {
  "date": "2025-11-08",
  "venue": "Neuer Ort",
  "time": "10–13 Uhr"
}

Styling anpassen

Bearbeite static/assets/styles.css:

• CSS-Variablen für Farben
• Komponenten-Styles
• Responsive Breakpoints

Nach Änderungen: npm run build

Deployment

Nach Änderungen:

1. npm run build ausführen
2. public/ auf Server deployen

Siehe auch: Deployment