Compare commits
7 Commits
f69d989e86
...
feature/is
| Author | SHA1 | Date | |
|---|---|---|---|
| 1918e86717 | |||
| 214f401e71 | |||
| 7f4ad16318 | |||
| 78dd17da05 | |||
| be956a5b8f | |||
| 424d8e20b6 | |||
| 400ad464f3 |
@@ -1,6 +1,7 @@
|
||||
name: New MCP server
|
||||
version: 0.0.1
|
||||
schema: v1
|
||||
|
||||
mcpServers:
|
||||
- name: playwright
|
||||
command: npx
|
||||
@@ -10,3 +11,11 @@ mcpServers:
|
||||
command: npx
|
||||
args: ["-y", "@modelcontextprotocol/server-filesystem", "C:\\Users\\greggy\\Desktop\\landingpage-haus-schleusingen"]
|
||||
|
||||
- name: gitea
|
||||
command: npx
|
||||
args: ["-y", "@modelcontextprotocol/server-gitea"]
|
||||
env:
|
||||
GITEA_URL: "https://git.home.kies-media.de"
|
||||
GITEA_TOKEN: "5688416ff6b5805706f89178322de4e882692e34"
|
||||
GITEA_REPO: "greggy/haus-schleusingen"
|
||||
GITEA_BRANCH: "main"
|
||||
262
README.md
262
README.md
@@ -3,175 +3,203 @@
|
||||
Statische Landingpage für **Haus Schleusingen**.
|
||||
Das Projekt basiert auf reinem HTML, CSS und JavaScript und wird über einen Nginx-Container ausgeliefert.
|
||||
|
||||

|
||||
<div align="right">
|
||||
<a href="screenshot-landingpage.png">
|
||||
<img src="screenshot-landingpage-thumb.png" alt="Screenshot der Landingpage – Haus Schleusingen" width="300" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
|
||||
```
|
||||
├── bilder/ # Bildressourcen
|
||||
├── haus-schleusingen.html # Einstiegsseite (einzige HTML-Datei)
|
||||
├── 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
|
||||
│ └── masonry.pkgd.min.js # Masonry-Layout-Bibliothek (nicht bearbeiten)
|
||||
├── fonts/
|
||||
│ └── fonts.css # Schriftart-Einbindungen
|
||||
├── bilder/ # Bildressourcen
|
||||
├── nginx.conf # Nginx-Konfiguration
|
||||
├── Dockerfile # Docker-Image (nginx:alpine)
|
||||
├── Dockerfile # Docker-Image-Definition (nginx:alpine)
|
||||
├── package.json # Projekt-Metadaten & Skripte
|
||||
├── 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
|
||||
├── .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
|
||||
|
||||
| Werkzeug | Version |
|
||||
| -------- | --------------- |
|
||||
| Node.js | ≥ 18 |
|
||||
| npm | ≥ 9 |
|
||||
| Docker | optional (≥ 20) |
|
||||
- **Node.js** ≥ 18
|
||||
- **npm** ≥ 9
|
||||
- **Docker** (optional, für Container-Deployment)
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
## Lokale Entwicklung
|
||||
|
||||
Kein Build-Step erforderlich – das Projekt besteht aus statischen Dateien.
|
||||
|
||||
### Abhängigkeiten installieren
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
---
|
||||
### Lokalen Server starten
|
||||
|
||||
## Entwicklung
|
||||
|
||||
### Lokaler Dateiserver
|
||||
|
||||
Für die Entwicklung empfiehlt sich ein lokaler Server, z. B.:
|
||||
Entweder mit **npx serve**:
|
||||
|
||||
```bash
|
||||
npx serve .
|
||||
```
|
||||
|
||||
Oder mit der in VS Code integrierten _Live Server_-Erweiterung.
|
||||
Oder mit dem **VS Code Live Server** Plugin.
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
### Linting ausführen
|
||||
|
||||
```bash
|
||||
# Alle Linter auf einmal
|
||||
npm run lint
|
||||
```
|
||||
|
||||
Dadurch werden nacheinander `lint:html`, `lint:css` und `lint:js` ausgeführt.
|
||||
|
||||
#### HTML linten
|
||||
|
||||
```bash
|
||||
# Oder einzeln
|
||||
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
|
||||
### Code formatieren
|
||||
|
||||
```bash
|
||||
npm run format
|
||||
```
|
||||
|
||||
Formatiert alle `html`, `css`, `js`, `json` und `md`-Dateien mit **Prettier** (in-place).
|
||||
|
||||
#### Formatierung prüfen (ohne Änderungen)
|
||||
### Formatierung prüfen (ohne Änderung)
|
||||
|
||||
```bash
|
||||
npm run format:check
|
||||
```
|
||||
|
||||
Prüft, ob alle Dateien den Prettier-Vorgaben entsprechen, ohne sie zu verändern.
|
||||
---
|
||||
|
||||
#### Husky Pre-Commit Hook
|
||||
## Deployment mit Docker
|
||||
|
||||
Bei jedem `git commit` werden automatisch **lint-staged**-Prüfungen ausgeführt:
|
||||
### Image bauen
|
||||
|
||||
| Dateityp | Aktionen |
|
||||
| -------------- | ------------------------------ |
|
||||
| `*.html` | HTMLHint + Prettier |
|
||||
| `*.css` | Stylelint (`--fix`) + Prettier |
|
||||
| `*.js` | ESLint (`--fix`) + Prettier |
|
||||
| `*.json, *.md` | Prettier |
|
||||
```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 `<title>` 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
|
||||
|
||||
BIN
docker-preview.png
Normal file
BIN
docker-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
@@ -88,7 +88,7 @@
|
||||
</p>
|
||||
<div class="intro-stats">
|
||||
<div>
|
||||
<div class="istat-val">113 m²</div>
|
||||
<div class="istat-val">154,9 m²</div>
|
||||
<div class="istat-label">Nutzfläche</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -103,7 +103,7 @@
|
||||
</div>
|
||||
<div class="intro-img" data-animate>
|
||||
<img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" />
|
||||
<div class="intro-img-badge">Wohnzimmer · 24,7 m²</div>
|
||||
<div class="intro-img-badge">Wohnzimmer · 42,6 m²</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
</div>
|
||||
<div class="grid-item" data-img="bilder/wohnzimmer2.png">
|
||||
<img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" />
|
||||
<span class="grid-item-label">Wohnzimmer · 24,7 m²</span>
|
||||
<span class="grid-item-label">Wohnzimmer · 42,6 m²</span>
|
||||
</div>
|
||||
<div class="grid-item" data-img="bilder/Küche 1.jpg">
|
||||
<img src="bilder/Küche 1.jpg" alt="Küche" />
|
||||
@@ -179,7 +179,7 @@
|
||||
<div class="floor-header">
|
||||
<span class="floor-title">Erdgeschoss</span>
|
||||
<div class="floor-size">
|
||||
<span>99,4 m²</span>
|
||||
<span>99,5 m²</span>
|
||||
<div class="floor-icon">+</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -228,7 +228,7 @@
|
||||
<div class="floor-header">
|
||||
<span class="floor-title">1. Obergeschoss</span>
|
||||
<div class="floor-size">
|
||||
<span>100,3 m²</span>
|
||||
<span>120,4 m²</span>
|
||||
<div class="floor-icon">+</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -240,7 +240,7 @@
|
||||
</div>
|
||||
<div class="room-chip">
|
||||
Wohnzimmer
|
||||
<span class="room-chip-area">24,7 m²</span>
|
||||
<span class="room-chip-area">42,6 m²</span>
|
||||
</div>
|
||||
<div class="room-chip">
|
||||
Gästezimmer
|
||||
@@ -305,7 +305,7 @@
|
||||
</div>
|
||||
<div class="room-chip">
|
||||
Dachterrasse
|
||||
<span class="room-chip-area">35,8 m²</span>
|
||||
<span class="room-chip-area">9,0 m²</span> <small>(25% von 35,8 m²)</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floor-plan floor-plan-multi">
|
||||
@@ -326,16 +326,24 @@
|
||||
<div class="floor-header">
|
||||
<span class="floor-title">Dachboden</span>
|
||||
<div class="floor-size">
|
||||
<span>52 m² Nutzfläche</span>
|
||||
<span>94 m² Nutzfläche</span>
|
||||
<div class="floor-icon">+</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floor-body">
|
||||
<div class="floor-rooms-grid">
|
||||
<div class="room-chip">
|
||||
Dachboden (ungeheizt)
|
||||
Dachboden unten (ungeheizt)
|
||||
<span class="room-chip-area">52 m²</span>
|
||||
</div>
|
||||
<div class="room-chip">
|
||||
Dachboden Mitte (ungeheizt)
|
||||
<span class="room-chip-area">31 m²</span>
|
||||
</div>
|
||||
<div class="room-chip">
|
||||
Dachboden oben (ungeheizt)
|
||||
<span class="room-chip-area">11 m²</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floor-plan floor-plan-multi">
|
||||
<img
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"lint:html": "htmlhint \"**/*.html\"",
|
||||
"lint:css": "stylelint \"css/**/*.css\" \"fonts/**/*.css\"",
|
||||
"lint:js": "eslint \"js/**/*.js\" --ignore-pattern \"**/*.min.js\"",
|
||||
"lint:css": "stylelint \"css/**/*.css\" \"fonts/**/*.css\" && echo Stylelint: No errors found",
|
||||
"lint:js": "eslint \"js/**/*.js\" --ignore-pattern \"**/*.min.js\" && echo ESLint: No errors found",
|
||||
"lint": "npm run lint:html && npm run lint:css && npm run lint:js",
|
||||
"format": "prettier --write \"**/*.{html,css,js,json,md}\" --ignore-path .prettierignore",
|
||||
"format:check": "prettier --check \"**/*.{html,css,js,json,md}\" --ignore-path .prettierignore",
|
||||
|
||||
BIN
page-preview.png
Normal file
BIN
page-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
screenshot-landingpage-thumb.png
Normal file
BIN
screenshot-landingpage-thumb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
Reference in New Issue
Block a user