69 lines
4.8 KiB
Markdown
69 lines
4.8 KiB
Markdown
# CLAUDE.md · Website Friseur-Team VK
|
|
|
|
Architekturfakten für Agenten und Entwickler. Gestaltung: `DESIGN.md`. Entscheidungen: `DECISIONS.md`.
|
|
|
|
## Überblick
|
|
|
|
- Statische Website für Friseur-Team VK (Kastanienallee 1, 21255 Tostedt), gebaut von Heidrich Digital.
|
|
- **Astro 5**, `output: 'static'`, Vanilla CSS, kein Framework, kein Tailwind. Zwei kleine Skripte (Menü-Escape, Anfrageformular, Vorher/Nachher-Regler).
|
|
- Vorschau: https://vk-friseur.heidrich-digital.de (noindex). Repo: `till/vk-friseur` auf git.heidrich-digital.de.
|
|
- Deployment: Coolify-App `n101smck3800u4ajngvm2yjg`, Build über `Dockerfile` (node:22-alpine baut, nginx:1.27-alpine liefert auf Port 80).
|
|
|
|
## Befehle
|
|
|
|
```bash
|
|
npm ci
|
|
npm run dev # http://localhost:4321
|
|
npm run build # nach dist/
|
|
```
|
|
|
|
## Struktur
|
|
|
|
```
|
|
src/
|
|
data/site.ts EINZIGE Quelle für Adresse, Telefon, Öffnungszeiten, Team, Preise, Anliegen, Endpunkte
|
|
styles/tokens.css Farben (OKLCH), Schrift, Skala, Abstände, Bewegung
|
|
styles/global.css Grundlage, Typo, Knöpfe, Layout-Helfer, Scroll-Einblendung
|
|
styles/form.css Formular-Bausteine (nur Anfrage-Seite)
|
|
layouts/Base.astro <head>, Meta, noindex, JSON-LD (HairSalon + Breadcrumb + seiteneigene), Header/Footer/Leiste
|
|
components/ Header, Footer, MobileBar, Shot (Fotofläche), Reels, Rating, CtaBand, PageHero,
|
|
Steps, Faq, PriceList, LoyaltyCard, BeforeAfter, Hours, Pic, Icon, Logo, DraftNote
|
|
scripts/anfrage.ts Formularlogik (schrittweise, Prüfung, fetch, Bestätigung)
|
|
pages/ index, brautservice, balayage-farbe, haarverlaengerung, team, leistungen-preise,
|
|
kundenkarte, anfrage/index, anfrage/danke, kontakt, impressum, datenschutz, 404
|
|
assets/img, assets/logo Ausgangsbilder, werden von astro:assets zu AVIF/WebP/JPG in mehreren Breiten
|
|
public/
|
|
fonts/ Bodoni Moda + Archivo, selbst gehostet, beschnitten (LICENSE-FONTS.txt)
|
|
robots.txt, llms.txt, og.jpg, favicon.svg, favicon-32.png, apple-touch-icon.png, logo-vk.png
|
|
deploy/security-headers.conf CSP, HSTS, nosniff, Referrer-Policy, X-Robots-Tag
|
|
nginx.conf Caching, 301 alter Adressen, ohne Schrägstrich am Ende, 404
|
|
```
|
|
|
|
## Regeln
|
|
|
|
- Fakten nur in `src/data/site.ts` ändern. Footer, Kontakt, Impressum, Schema und Formular lesen von dort.
|
|
- Preise sind „ab“-Richtwerte (Platzhalter). Ein Wert in `priceGroups` ändert Preisliste und Premium-Seiten. Die Hinweise im Formular stehen in `anliegen[].hint` und müssen mitgezogen werden.
|
|
- Keine Inline-Styles und keine Inline-Skripte: Die CSP erlaubt nur `'self'`. Werte zur Laufzeit per `el.style.setProperty()` (CSSOM ist erlaubt). `build.inlineStylesheets: 'never'`, CSS als eine Datei (`cssCodeSplit: false`).
|
|
- Keine Fremdanfragen. Karten, Instagram, Google-Bewertungen sind nur Links. Neue Fremdquellen erfordern CSP- und Datenschutz-Änderung.
|
|
- Bilder immer über `Pic.astro` (astro:assets) mit `sizes`; Hero mit `eager`.
|
|
- Fehlende Arbeitsfotos über `Shot.astro` mit Motiv und Bildidee. Wenn Fotos kommen: Datei nach `src/assets/img/`, `Shot` durch `Pic` in `.frame` ersetzen (Bogen: Klasse `arch`).
|
|
- Texte: Stimme des Salons („wir“, „Sie“), konkret, keine Superlative, keine erfundenen Zahlen oder Zitate, keine Gedankenstriche.
|
|
|
|
## Anfrageformular
|
|
|
|
- `POST https://vk-karte.heidrich-digital.de/api/anfrage`, `multipart/form-data`. Feldnamen exakt wie im Backend: `anliegen, kundenstatus, haarlaenge, ausgangslage, wunsch, zeitraum, hochzeitsdatum, ort, personen, warteliste, preis_ok, name*, telefon*, email, rueckruf, datenschutz*, fotos (0 bis 3, je ≤ 6 MB), website (Honeypot)`.
|
|
- Ohne JS: normaler Submit, Backend antwortet mit 303 auf `/anfrage/danke`.
|
|
- Mit JS: Prüfung im Browser, `fetch` mit `Accept: application/json`, Antwort `{ok:true,id}` oder `{ok:false,error}`. Honeypot gefüllt: nichts senden, Bestätigung zeigen.
|
|
- Vorauswahl per `?anliegen=braut|balayage|verlaengerung|typveraenderung|schnitt|sonstiges`.
|
|
- Backend muss CORS für `https://vk-friseur.heidrich-digital.de` erlauben (und später für die Live-Domain).
|
|
|
|
## Livegang (Checkliste)
|
|
|
|
1. In `src/layouts/Base.astro` die Zeile `<meta name="robots" content="noindex, nofollow" />` löschen.
|
|
2. In `deploy/security-headers.conf` die Zeile `add_header X-Robots-Tag ...` löschen.
|
|
3. `site` in `astro.config.mjs` und `SITE_URL` in `src/data/site.ts` auf die Live-Domain setzen; `robots.txt` und `llms.txt` anpassen.
|
|
4. CORS und CSP (`connect-src`, `form-action`) für die Live-Domain prüfen.
|
|
5. Footer-Hinweis „Vorschau der neuen Website …“ in `Footer.astro` entfernen, Entwurfshinweise in Impressum und Datenschutz durch geprüfte Texte ersetzen.
|
|
6. 301-Weiterleitungen in `nginx.conf` mit der URL-Liste der Altseite abgleichen.
|
|
7. Preise, Öffnungszeiten, Team, WhatsApp-Nummer und Bildrechte vom Salon bestätigen lassen.
|