# 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.

![Screenshot der Landingpage – Haus Schleusingen](screenshot-landingpage.png)

---

## 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

```bash
# 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.:

```bash
npx serve .
```

Oder mit der in VS Code integrierten _Live Server_-Erweiterung.

---

## Deployment mit Docker

Das Projekt enthält ein vorkonfiguriertes Nginx-Image.

```bash
# 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

```bash
npm run lint
```

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

#### HTML linten

```bash
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

```bash
npm run lint:css
```

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

#### JavaScript linten

```bash
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

```bash
npm run format
```

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

#### Formatierung prüfen (ohne Änderungen)

```bash
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                       |