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

├── bilder/                     # Bildressourcen
├── css/
│   └── haus-schleusingen.css   # Hauptstylesheet
├── fonts/
│   └── fonts.css               # Schriftart-Einbindungen
├── js/
│   ├── haus-schleusingen.js    # Haupt-JavaScript
│   └── masonry.pkgd.min.js     # Masonry-Layout-Bibliothek
├── haus-schleusingen.html      # Einstiegsseite
├── nginx.conf                  # Nginx-Konfiguration
├── Dockerfile                  # Docker-Image (nginx:alpine)
├── eslint.config.js            # ESLint-Konfiguration
├── .stylelintrc.json           # Stylelint-Konfiguration
├── .htmlhintrc                 # HTMLHint-Konfiguration
├── .prettierrc                 # Prettier-Konfiguration
├── .husky/pre-commit           # Husky Git-Hook (lint-staged)
└── package.json                # Projekt-Metadaten & Skripte

---

Voraussetzungen

Werkzeug	Version
Node.js	≥ 18
npm	≥ 9
Docker	optional (≥ 20)

---

Installation

# Repository klonen
git clone https://git.home.kies-media.de/greggy/landingpage-haus-schleusingen.git
cd landingpage-haus-schleusingen

# Abhängigkeiten installieren
npm install

---

Entwicklung

Lokaler Dateiserver

Für die Entwicklung empfiehlt sich ein lokaler Server, z. B.:

npx serve .

Oder mit der in VS Code integrierten Live Server-Erweiterung.

---

Deployment mit Docker

Das Projekt enthält ein vorkonfiguriertes Nginx-Image.

# Image bauen
docker build -t landingpage-haus-schleusingen .

# Container starten (Website-Dateien per Volume einbinden)
docker run -d \
  -p 8080:80 \
  -v $(pwd):/usr/share/nginx/html:ro \
  landingpage-haus-schleusingen

Die Seite ist danach unter http://localhost:8080 erreichbar.

---

Code-Qualität & Linting

Das Projekt nutzt eine Kombination aus mehreren Linting- und Formatierungswerkzeugen, um eine einheitliche Code-Qualität sicherzustellen:

Werkzeug	Zweck	Konfigurationsdatei
ESLint	JavaScript-Linting	eslint.config.js
Stylelint	CSS-Linting	.stylelintrc.json
HTMLHint	HTML-Linting	.htmlhintrc
Prettier	Code-Formatierung	.prettierrc
Husky	Git Hooks (Pre-Commit)	.husky/pre-commit
lint-staged	Linting nur für gesteuerte Dateien	package.json

Befehle

Alle Linter auf einmal ausführen

npm run lint

Dadurch werden nacheinander lint:html, lint:css und lint:js ausgeführt.

HTML linten

npm run lint:html

Prüft alle .html-Dateien mit HTMLHint.

Regeln (.htmlhintrc):

• Tag-Paarung (tag-pair)
• Kleinschreibung von Tags & Attributen (tagname-lowercase, attr-lowercase)
• Doctype zuerst (doctype-first)
• Eindeutige IDs (id-unique)
• alt-Attribut bei Bildern (alt-require)
• Titel erforderlich (title-require)

CSS linten

npm run lint:css

Prüft alle CSS-Dateien in css/ und fonts/ mit Stylelint (basiert auf stylelint-config-standard).

JavaScript linten

npm run lint:js

Prüft alle .js-Dateien in js/ mit ESLint (minimierte Dateien werden ignoriert).

Regeln (eslint.config.js):

• no-unused-vars → Warnung
• no-undef → Warnung
• Prettier-Integration (prettier/prettier → Fehler)

Code formatieren

npm run format

Formatiert alle html, css, js, json und md-Dateien mit Prettier (in-place).

Formatierung prüfen (ohne Änderungen)

npm run format:check

Prüft, ob alle Dateien den Prettier-Vorgaben entsprechen, ohne sie zu verändern.

Husky Pre-Commit Hook

Bei jedem git commit werden automatisch lint-staged-Prüfungen ausgeführt:

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