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