6.0 KiB
6.0 KiB
Agent-Richtlinien für dieses Projekt
Systemumgebung
- Betriebssystem: Windows – Alle Befehle und Pfade müssen Windows-kompatibel sein (z. B. Pfadtrennzeichen
\, PowerShell-Syntax).
Projektübersicht
- Statische Landingpage für Haus Schleusingen
- Reines HTML, CSS und JavaScript (kein Framework, kein Build-Step)
- Ausgeliefert über einen Nginx-Docker-Container (nginx:alpine)
- Git-Repository:
https://git.home.kies-media.de/greggy/landingpage-haus-schleusingen.git
Dateistruktur
| Pfad | Beschreibung |
|---|---|
haus-schleusingen.html |
Einstiegsseite (einzige HTML-Datei) |
css/haus-schleusingen.css |
Hauptstylesheet |
js/haus-schleusingen.js |
Haupt-JavaScript |
js/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) |
Code-Qualität & Linting
Wichtig: Linting nach jeder Codeänderung durchführen
Führe nach jeder Codeänderung npm run lint aus, um die Codequalität zu garantieren.
Das Projekt verwendet folgende Tools:
| Werkzeug | Zweck | Konfigurationsdatei | Befehl |
|---|---|---|---|
| HTMLHint | HTML-Linting | .htmlhintrc |
npm run lint:html |
| Stylelint | CSS-Linting | .stylelintrc.json |
npm run lint:css |
| ESLint | JavaScript-Linting | eslint.config.js |
npm run lint:js |
| Prettier | Code-Formatierung | .prettierrc |
npm run format |
| Husky | Git Hooks | .husky/pre-commit |
– |
| lint-staged | Gesteuerte Dateien | package.json |
– |
Alle Linter auf einmal ausführen:
npm run lint
ESLint-Regeln (besonders beachten)
no-unused-vars→ Warnung (ungenutzte Variablen vermeiden)no-undef→ Warnung (nur definierte Variablen verwenden)prettier/prettier→ Fehler (Prettier-Formatierung ist Pflicht)- Globale Variablen:
browserundjquerysind verfügbar *.min.js-Dateien werden ignoriert (nicht linten/bearbeiten)
HTMLHint-Regeln
- Tag-Paarung Pflicht (
tag-pair) - Tags & Attribute in Kleinschreibung (
tagname-lowercase,attr-lowercase) - Doctype an erster Stelle (
doctype-first) - Eindeutige IDs (
id-unique) alt-Attribut bei Bildern Pflicht (alt-require)<title>erforderlich (title-require)
Entwicklung
- Kein Build-Step erforderlich – statische Dateien
- Lokaler Entwicklungsserver:
npx serve .oder VS Code Live Server - Node.js ≥ 18, npm ≥ 9
Deployment
# Image bauen
docker build -t landingpage-haus-schleusingen .
# Container starten
docker run -d -p 8080:80 -v ${pwd}:/usr/share/nginx/html:ro landingpage-haus-schleusingen
Website erreichbar unter: http://localhost:8080
Wichtige Erkenntnisse
- jQuery wird als globale Bibliothek vorausgesetzt (in ESLint-Konfig definiert)
- Masonry (
masonry.pkgd.min.js) wird für Layout-Zwecke eingesetzt – nicht bearbeiten - Husky Pre-Commit-Hook führt automatisch lint-staged aus (kein manueller Schritt nötig beim Committen)
- Prettier-Formatierung ist verpflichtend – Code wird bei Commits automatisch formatiert
- Projekt ist
commonjs-Typ (kein ESM inpackage.json)
Agent-Erkenntnisse (Systemumgebung & Tools)
Terminal & Encoding (Windows)
- PowerShell-Encoding-Probleme: Terminal-Ausgabe über
run_terminal_commandzeigt UTF-8-Zeichen (z. B. deutsche Umlaute) oft falsch an. Die Datei selbst ist korrekt. Immer mitread_filestatt Terminal-Ausgabe prüfen. - Backtick-Konflikt: PowerShell nutzt Backtick (``) als Escape-Zeichen. Markdown-Backticks in Here-Strings (@"..."@) führen zu Fehlern. Für Dateien mit Backticks stattdessen Node.js-Skripte verwenden.
- Zuverlässige Dateierstellung: Bei Inhalten mit Sonderzeichen (Umlaute, Backticks, Emojis) Node.js-Skripte (
fs.writeFileSync) statt PowerShell-Befehle nutzen. Beispiel:const fs = require(`fs`); const B = String.fromCharCode(96); // Backtick vermeiden const lines = [`Zeile 1`, `Zeile 2`]; fs.writeFileSync(`datei.md`, lines.join(`\n`), `utf8`);
Datei-Tools
read_file-Anzeigegrenze: Lange Dateien werden in der Vorschau scheinbar abgeschnitten – die Datei selbst ist vollständig. Mitrun_terminal_commandundGet-Content -Tail Ndas Dateiende prüfen.create_new_file-Quoting: Inhalt darf nicht mit Anführungszeichen beginnen, da diese sonst als Teil des Inhalts übernommen werden. Immer die erstellte Datei verifizieren.single_find_and_replace: Exakte Stringübereinstimmung erforderlich. Zeilenumbrüche und Leerzeichen müssen exakt passen. Vor dem Ersetzen den Dateiinhalt mitread_fileoderread_file_rangeprüfen.edit_existing_file-Encoding: Kann UTF-8-Zeichen (Umlaute, Sonderzeichen) beschädigen. Für Dateien mit Nicht-ASCII-Zeichen stattdessen Node.js-Skripte verwenden.
Workflow-Empfehlungen
- Dateien lesen: Immer
read_fileoderread_file_rangenutzen (nicht Terminal). - Dateien schreiben/ändern:
edit_existing_fileodersingle_find_and_replacebevorzugen – aber Vorsicht bei Nicht-ASCII-Zeichen. - Komplexe Dateierstellung: Node.js-Skript über
create_new_file+run_terminal_commandausführen, danach Hilfsskript löschen. - Terminal-Ausgabe: Nur für Dateigrößen, Git-Befehle und npm-Skripte nutzen – nicht zur Inhaltsprüfung von Textdateien.