220 lines
6.9 KiB
Markdown
Executable File
220 lines
6.9 KiB
Markdown
Executable File
# 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="docs/screenshot-landingpage.png">
|
||
<img src="docs/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
|
||
|
||
### Pre-Commit Hooks aktivieren
|
||
|
||
Die Pre-Commit Hooks (Husky + lint-staged) werden automatisch beim Installieren der Abhängigkeiten eingerichtet:
|
||
|
||
```bash
|
||
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
|