8b73603293
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 23s
Accessibility improvements per WCAG 2.1 AA: - Skip-to-content link (TA-1) - ARIA landmarks and roles for nav, main, sections, footer (TA-2) - Accordion keyboard navigation + aria-expanded (TA-3) - Lightbox focus trap + focus management + dialog role (TA-4) - Gallery grid items keyboard accessible (TA-5) - Improved alt texts for all images (TA-6) - Focus-visible styles for all interactive elements (TA-7) - Darker --stone color for WCAG AA contrast compliance (TA-8) Fix #18
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.
Inhaltsübersicht
- Technologien
- Projektstruktur
- Voraussetzungen
- Lokale Entwicklung
- Deployment mit Docker
- Code-Qualität & Linting
- Git-Workflow
- Konfigurationsdateien
- Lizenz
Technologien
| Bereich | Technologie |
|---|---|
| Markup | HTML5 |
| Styling | CSS3 |
| Scripting | JavaScript (Vanilla) |
| Layout | Masonry |
| 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
npm install
Lokalen Server starten
Entweder mit npx serve:
npx serve .
Oder mit dem VS Code Live Server Plugin.
Linting ausführen
# Alle Linter auf einmal
npm run lint
# Oder einzeln
npm run lint:html
npm run lint:css
npm run lint:js
Code formatieren
npm run format
Formatierung prüfen (ohne Änderung)
npm run format:check
Deployment mit Docker
Image bauen
docker build -t landingpage-haus-schleusingen .
Container starten
# 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:
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:
browserundjquerysind 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