kashilo/AGENTS.md

AGENTS.md - AI Assistant Context

Dieses Dokument hilft AI-Assistenten (Amp, Copilot, etc.) das Projekt zu verstehen.

Projekt-Überblick

dgray.io ist eine Kleinanzeigen-PWA mit Monero-Bezahlung.

• Status: Early Development (Frontend-only)
• Ziel: Anonyme, dezentrale Marktplatz-Alternative

Tech-Stack

Layer	Technologie
Frontend	Vanilla JS, Web Components, CSS Custom Properties
Routing	Hash-basierter Client-Side Router (js/router.js)
i18n	Custom System (js/i18n.js), JSON-Dateien in /locales/
Theming	CSS Variables, Dark/Light Mode
Backend	Geplant: Directus

Häufige Befehle

# Lokaler Entwicklungsserver
python3 -m http.server 8080

# Oder mit Live-Reload
npx live-server

# Git Push (Token in URL)
git push origin master

Dateistruktur

js/
├── app.js              # Entry, lädt i18n, dann Shell
├── router.js           # Hash-Router mit :params
├── i18n.js             # t('key'), subscribe(), updateDOM()
└── components/
    ├── app-shell.js    # Layout, registriert Routes
    ├── app-header.js   # Header (Theme-Toggle, Lang-Dropdown)
    ├── app-footer.js   # Footer
    └── pages/          # Seiten als Web Components

css/
├── fonts.css           # @font-face Definitionen (Inter, Space Grotesk)
├── variables.css       # CSS Custom Properties (Farben, Spacing)
├── base.css            # Reset, Container
└── components.css      # UI-Komponenten (Buttons, Cards, etc.)

assets/
└── fonts/              # Self-hosted Fonts (Inter, Space Grotesk)

locales/
├── de.json             # Deutsch (Fallback)
├── en.json
└── fr.json

Konventionen

Web Components

• Custom Elements mit class extends HTMLElement
• Styles als <style> im document.head oder inline
• i18n: render() Methode, Subscribe auf Sprachwechsel

CSS

• Keine festen Farben - immer var(--color-*) nutzen
• Spacing: var(--space-xs|sm|md|lg|xl|2xl|3xl)
• Font-Size: var(--font-size-xs|sm|base|lg|xl|2xl|3xl)
• Font-Family: var(--font-family) für Body, var(--font-family-heading) für Headlines
• Border-Radius: var(--radius-sm|md|lg|xl|full)

i18n

• Schlüssel: section.key (z.B. home.title)
• Im HTML: data-i18n="key" oder ${t('key')}
• Placeholder: data-i18n-placeholder="key"
• Neue Texte in allen 3 Sprachen hinzufügen

Aktuelle Probleme / Hinweise

1. SSH funktioniert nicht mit diesem Repo auf gitea.pro - HTTPS mit Token nutzen
2. Service Worker kann lokale Änderungen cachen - bei Problemen Cache leeren
3. i18n muss vor Shell laden - siehe app.js (dynamischer Import)

Nächste Schritte

1. Suchseite (page-search.js) mit Filtern ausbauen
2. Anzeige-Detailseite (page-listing.js) gestalten
3. Anzeige-Erstellen-Formular (page-create.js) fertigstellen
4. Directus Backend aufsetzen

Farbpalette

Monochrome Theme - reine Graustufen

Light Mode:
- BG: #FAFAFA
- Text: #1A1A1A
- Primary: #555555
- Border: #D0D0D0

Dark Mode:
- BG: #141414
- Text: #F0F0F0
- Primary: #AAAAAA
- Border: #3A3A3A

Ansprechpartner

• Repo: https://gitea.pro/schmidt1024/dgray