Landingpage – Haus Schleusingen

Statische Landingpage für Haus Schleusingen.
Das Projekt basiert auf reinem HTML, CSS und JavaScript und wird über einen Nginx-Container ausgeliefert.

---

Inhaltsübersicht

• Technologien
• Projektstruktur
• Voraussetzungen
• Lokale Entwicklung
• Deployment mit Docker
• Code-Qualität & Linting
• Git-Workflow
• Konfigurationsdateien
• Lizenz

---

Technologien

Bereich	Technologie
Markup	HTML5
Styling	CSS3
Scripting	JavaScript (Vanilla)
Layout	Masonry
Webserver	Nginx (Alpine)
Container	Docker
Linting	HTMLHint, Stylelint, ESLint
Formatierung	Prettier
Git Hooks	Husky + lint-staged

---

Projektstruktur

├── public/index.php      # Einstiegsseite (PHP-Entry-Point)
├── css/
│   └── haus-schleusingen.css   # Hauptstylesheet
├── js/
│   ├── haus-schleusingen.js    # Haupt-JavaScript
│   └── masonry.pkgd.min.js    # Masonry-Layout-Bibliothek (nicht bearbeiten)
├── fonts/
│   └── fonts.css               # Schriftart-Einbindungen
├── bilder/                     # Bildressourcen
├── nginx.conf                  # Nginx-Konfiguration
├── Dockerfile                  # Docker-Image-Definition (nginx:alpine)
├── package.json                # Projekt-Metadaten & Skripte
├── eslint.config.js            # ESLint-Konfiguration
├── .htmlhintrc                 # HTMLHint-Regeln
├── .stylelintrc.json           # Stylelint-Regeln
├── .prettierrc                 # Prettier-Einstellungen
├── .prettierignore             # Prettier-Ausnahmen
├── .husky/pre-commit           # Git Pre-Commit Hook
├── .dockerignore               # Docker Build-Ausnahmen
└── AGENTS.md                   # Agent-Richtlinien

---

Voraussetzungen

• Node.js ≥ 18
• npm ≥ 9
• Docker (optional, für Container-Deployment)

---

Lokale Entwicklung

Kein Build-Step erforderlich – das Projekt besteht aus statischen Dateien.

Abhängigkeiten installieren

npm install

Lokalen Server starten

Entweder mit npx serve:

npx serve .

Oder mit dem VS Code Live Server Plugin.

Linting ausführen

# Alle Linter auf einmal
npm run lint

# Oder einzeln
npm run lint:html
npm run lint:css
npm run lint:js

Code formatieren

npm run format

Formatierung prüfen (ohne Änderung)

npm run format:check

---

Deployment mit Docker

Image bauen

docker build -t landingpage-haus-schleusingen .

Container starten

# PowerShell
docker run -d -p 8080:80 -v ${pwd}:/usr/share/nginx/html:ro landingpage-haus-schleusingen

Die Website ist danach erreichbar unter: http://localhost:8080

Hinweis: Die Website-Dateien werden per Volume-Mount eingebunden (-v), sodass Änderungen ohne Neubau des Images sofort wirksam werden.

---

Code-Qualität & Linting

Das Projekt verwendet mehrere Werkzeuge zur Sicherstellung der Code-Qualität:

Werkzeug	Zweck	Befehl
HTMLHint	HTML-Linting	npm run lint:html
Stylelint	CSS-Linting	npm run lint:css
ESLint	JavaScript-Linting	npm run lint:js
Prettier	Code-Formatierung	npm run format

Alle Linter auf einmal ausführen:

npm run lint

Wichtige Regeln

• Prettier-Formatierung ist Pflicht – Verstöße werden als Fehler gewertet.
• HTMLHint: Tag-Paarung, Kleinschreibung, eindeutige IDs, alt-Attribut bei Bildern und <title> sind Pflicht.
• ESLint: Ungenutzte Variablen (no-unused-vars) und undefinierte Variablen (no-undef) ergeben Warnungen.
• Globale Variablen: browser und jquery sind in der ESLint-Konfiguration freigegeben.
• Minifizierte Dateien (*.min.js, *.min.css) werden von Linting und Formatierung ausgeschlossen.

---

Git-Workflow

Pre-Commit Hooks aktivieren

Die Pre-Commit Hooks (Husky + lint-staged) werden automatisch beim Installieren der Abhängigkeiten eingerichtet:

npm install

Der prepare-Script in package.json ("prepare": "husky") sorgt dafür, dass Husky die Git Hooks im .husky/-Verzeichnis registriert. Nach npm install sind die Hooks aktiv – kein manueller Schritt nötig.

Falls Hooks nicht laufen: Prüfe ob .husky/pre-commit ausführbar ist (chmod +x .husky/pre-commit) und ob core.hooksPath nicht überschrieben wurde (git config core.hooksPath).

Was wird beim Commit geprüft?

Beim Committen führt Husky automatisch den Pre-Commit Hook (.husky/pre-commit) aus, der lint-staged startet.

lint-staged prüft automatisch:

Dateityp	Aktionen
*.html	HTMLHint + Prettier
*.css	Stylelint (--fix) + Prettier
*.js	ESLint (--fix) + Prettier
*.json, *.md	Prettier

Es ist kein manueller Schritt nötig – beim Committen werden nur die geänderten Dateien automatisch geprüft und formatiert.

---

Konfigurationsdateien

Datei	Beschreibung
.prettierrc	Prettier-Einstellungen (Semikolons, doppelte Anführungszeichen, 2er-Einrückung, LF-Zeilenenden)
.prettierignore	Ignoriert node_modules, *.min.js, *.min.css
.htmlhintrc	HTMLHint-Regeln (Tag-Paarung, Kleinschreibung, IDs, alt-Pflicht)
.stylelintrc.json	Stylelint mit stylelint-config-standard und Prettier-Plugin
eslint.config.js	ESLint-Flat-Config mit Prettier-Integration
.dockerignore	Schließt .git, Skripte und Docker-Dateien vom Build aus

---

Lizenz

ISC