This commit is contained in:
2026-05-10 12:59:08 +02:00
parent be956a5b8f
commit 78dd17da05

191
README.md
View File

@@ -12,3 +12,194 @@ Das Projekt basiert auf reinem HTML, CSS und JavaScript und wird über einen Ngi
--- ---
## Inhaltsübersicht ## 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