diff --git a/README.md b/README.md index 3ac85d9..58a5249 100644 --- a/README.md +++ b/README.md @@ -3,175 +3,12 @@ Statische Landingpage für **Haus Schleusingen**. Das Projekt basiert auf reinem HTML, CSS und JavaScript und wird über einen Nginx-Container ausgeliefert. -![Screenshot der Landingpage – Haus Schleusingen](screenshot-landingpage.png) +
+ + Screenshot der Landingpage – Haus Schleusingen + +
--- ## Inhaltsübersicht - -``` -├── bilder/ # Bildressourcen -├── css/ -│ └── haus-schleusingen.css # Hauptstylesheet -├── fonts/ -│ └── fonts.css # Schriftart-Einbindungen -├── js/ -│ ├── haus-schleusingen.js # Haupt-JavaScript -│ └── masonry.pkgd.min.js # Masonry-Layout-Bibliothek -├── haus-schleusingen.html # Einstiegsseite -├── nginx.conf # Nginx-Konfiguration -├── Dockerfile # Docker-Image (nginx:alpine) -├── eslint.config.js # ESLint-Konfiguration -├── .stylelintrc.json # Stylelint-Konfiguration -├── .htmlhintrc # HTMLHint-Konfiguration -├── .prettierrc # Prettier-Konfiguration -├── .husky/pre-commit # Husky Git-Hook (lint-staged) -└── package.json # Projekt-Metadaten & Skripte -``` - ---- - -## Voraussetzungen - -| Werkzeug | Version | -| -------- | --------------- | -| Node.js | ≥ 18 | -| npm | ≥ 9 | -| Docker | optional (≥ 20) | - ---- - -## Installation - -```bash -# Repository klonen -git clone https://git.home.kies-media.de/greggy/landingpage-haus-schleusingen.git -cd landingpage-haus-schleusingen - -# Abhängigkeiten installieren -npm install -``` - ---- - -## Entwicklung - -### Lokaler Dateiserver - -Für die Entwicklung empfiehlt sich ein lokaler Server, z. B.: - -```bash -npx serve . -``` - -Oder mit der in VS Code integrierten _Live Server_-Erweiterung. - ---- - -## Deployment mit Docker - -Das Projekt enthält ein vorkonfiguriertes Nginx-Image. - -```bash -# Image bauen -docker build -t landingpage-haus-schleusingen . - -# Container starten (Website-Dateien per Volume einbinden) -docker run -d \ - -p 8080:80 \ - -v $(pwd):/usr/share/nginx/html:ro \ - landingpage-haus-schleusingen -``` - -Die Seite ist danach unter **http://localhost:8080** erreichbar. - ---- - -## Code-Qualität & Linting - -Das Projekt nutzt eine Kombination aus mehreren Linting- und Formatierungswerkzeugen, um eine einheitliche Code-Qualität sicherzustellen: - -| Werkzeug | Zweck | Konfigurationsdatei | -| --------------- | ---------------------------------- | ------------------- | -| **ESLint** | JavaScript-Linting | `eslint.config.js` | -| **Stylelint** | CSS-Linting | `.stylelintrc.json` | -| **HTMLHint** | HTML-Linting | `.htmlhintrc` | -| **Prettier** | Code-Formatierung | `.prettierrc` | -| **Husky** | Git Hooks (Pre-Commit) | `.husky/pre-commit` | -| **lint-staged** | Linting nur für gesteuerte Dateien | `package.json` | - -### Befehle - -#### Alle Linter auf einmal ausführen - -```bash -npm run lint -``` - -Dadurch werden nacheinander `lint:html`, `lint:css` und `lint:js` ausgeführt. - -#### HTML linten - -```bash -npm run lint:html -``` - -Prüft alle `.html`-Dateien mit **HTMLHint**. - -Regeln (`.htmlhintrc`): - -- Tag-Paarung (`tag-pair`) -- Kleinschreibung von Tags & Attributen (`tagname-lowercase`, `attr-lowercase`) -- Doctype zuerst (`doctype-first`) -- Eindeutige IDs (`id-unique`) -- `alt`-Attribut bei Bildern (`alt-require`) -- Titel erforderlich (`title-require`) - -#### CSS linten - -```bash -npm run lint:css -``` - -Prüft alle CSS-Dateien in `css/` und `fonts/` mit **Stylelint** (basiert auf `stylelint-config-standard`). - -#### JavaScript linten - -```bash -npm run lint:js -``` - -Prüft alle `.js`-Dateien in `js/` mit **ESLint** (minimierte Dateien werden ignoriert). - -Regeln (`eslint.config.js`): - -- `no-unused-vars` → Warnung -- `no-undef` → Warnung -- Prettier-Integration (`prettier/prettier` → Fehler) - -#### Code formatieren - -```bash -npm run format -``` - -Formatiert alle `html`, `css`, `js`, `json` und `md`-Dateien mit **Prettier** (in-place). - -#### Formatierung prüfen (ohne Änderungen) - -```bash -npm run format:check -``` - -Prüft, ob alle Dateien den Prettier-Vorgaben entsprechen, ohne sie zu verändern. - -#### Husky Pre-Commit Hook - -Bei jedem `git commit` werden automatisch **lint-staged**-Prüfungen ausgeführt: - -| Dateityp | Aktionen | -| -------------- | ------------------------------ | -| `*.html` | HTMLHint + Prettier | -| `*.css` | Stylelint (`--fix`) + Prettier | -| `*.js` | ESLint (`--fix`) + Prettier | -| `*.json, *.md` | Prettier | diff --git a/_resize.cjs b/_resize.cjs deleted file mode 100644 index fcbe88d..0000000 --- a/_resize.cjs +++ /dev/null @@ -1,23 +0,0 @@ -const fs = require("fs"); -const { execSync } = require("child_process"); - -// Read PNG dimensions -const buf = fs.readFileSync("screenshot-landingpage.png"); -const width = buf.readUInt32BE(16); -const height = buf.readUInt32BE(20); -console.log("Original size: " + width + "x" + height); - -console.log("Installing sharp for resizing..."); -execSync("npm install sharp --no-save --silent", { stdio: "inherit" }); - -const sharp = require("sharp"); -sharp("screenshot-landingpage.png") - .resize(300) - .toFile("screenshot-landingpage-thumb.png") - .then(function (info) { - console.log("Thumbnail created: " + info.width + "x" + info.height); - }) - .catch(function (err) { - console.error("Error:", err); - process.exit(1); - }); \ No newline at end of file diff --git a/docker-preview.png b/docker-preview.png new file mode 100644 index 0000000..47c3221 Binary files /dev/null and b/docker-preview.png differ diff --git a/haus-schleusingen.html b/haus-schleusingen.html index 94e9445..3989196 100644 --- a/haus-schleusingen.html +++ b/haus-schleusingen.html @@ -440,7 +440,7 @@