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

<div align="right">
  <a href="screenshot-landingpage.png">
    <img src="screenshot-landingpage-thumb.png" alt="Screenshot der Landingpage – Haus Schleusingen" width="300" />
  </a>
</div>

---

## Inhaltsübersicht

- [Technologien](#technologien)
- [Projektstruktur](#projektstruktur)
- [Voraussetzungen](#voraussetzungen)
- [Lokale Entwicklung](#lokale-entwicklung)
- [Deployment mit Docker](#deployment-mit-docker)
- [Code-Qualität & Linting](#code-qualität--linting)
- [Git-Workflow](#git-workflow)
- [Konfigurationsdateien](#konfigurationsdateien)
- [Lizenz](#lizenz)

---

## Technologien

| Bereich      | Technologie                              |
| ------------ | ---------------------------------------- |
| Markup       | HTML5                                    |
| Styling      | CSS3                                     |
| Scripting    | JavaScript (Vanilla)                     |
| Layout       | [Masonry](https://masonry.desandro.com/) |
| Webserver    | Nginx (Alpine)                           |
| Container    | Docker                                   |
| Linting      | HTMLHint, Stylelint, ESLint              |
| Formatierung | Prettier                                 |
| Git Hooks    | Husky + lint-staged                      |

---

## Projektstruktur

```
├── haus-schleusingen.html      # Einstiegsseite (einzige HTML-Datei)
├── 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

```bash
npm install
```

### Lokalen Server starten

Entweder mit **npx serve**:

```bash
npx serve .
```

Oder mit dem **VS Code Live Server** Plugin.

### Linting ausführen

```bash
# Alle Linter auf einmal
npm run lint

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

### Code formatieren

```bash
npm run format
```

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

```bash
npm run format:check
```

---

## Deployment mit Docker

### Image bauen

```bash
docker build -t landingpage-haus-schleusingen .
```

### Container starten

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

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

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