113 lines
3.2 KiB
Markdown
113 lines
3.2 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```
|
|
Light Mode:
|
|
- BG: #FAF8FC (Lavender Tint)
|
|
- Text: #2A2633
|
|
- Primary: #6B5B95 (Amethyst)
|
|
|
|
Dark Mode:
|
|
- BG: #1A1424 (Deep Purple)
|
|
- Text: #F5F2FA
|
|
- Primary: #B8A5D6 (Soft Lilac)
|
|
```
|
|
|
|
## Ansprechpartner
|
|
|
|
- Repo: https://gitea.pro/schmidt1024/dgray
|