diff --git a/README.md b/README.md index 58a5249..36ab894 100644 --- a/README.md +++ b/README.md @@ -12,3 +12,194 @@ Das Projekt basiert auf reinem HTML, CSS und JavaScript und wird über einen Ngi --- ## 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 `