forked from BRETT/BRETT
102 lines
5.4 KiB
Markdown
102 lines
5.4 KiB
Markdown
# BRETT
|
|
|
|
Ein Imageboard-artiges Upload- und Diskussions-Tool, gebaut mit **Nuxt 4** und **shadcn-vue**. Nutzer können Dateien oder URLs hochladen, in Threads kommentieren, mit Discord-artigen Reactions antworten und aus über einem Dutzend Themes wählen.
|
|
|
|
## Features
|
|
|
|
- **Uploads:** Drag & Drop (Seiten-Dropzone + Upload-Popover), Datei- oder URL-Upload, Thumbnails für Bilder, eingebetteter Plyr-Videoplayer, YouTube-Embeds und Link-Preview-Cards
|
|
- **Threads & Kommentare:** Jeder Upload ist ein Thread mit Kommentarfunktion, Discord-Style-Reactions (Toggle, Zähler, Tooltips) und Live-Updates per WebSocket
|
|
- **Auth & Rollen:** Session-Cookie-Login (30 Tage), der erste registrierte Nutzer wird automatisch Admin; Admin-Panel mit Rollenverwaltung und **pro Rolle konfigurierbaren Berechtigungen** (`admin.access`, `roles.manage`, `users.manage`, `comment.delete`, `upload.delete`) — die `admin`-Rolle darf immer alles
|
|
- **Favoriten & Notifications:** Uploads favorisieren, Benachrichtigungs-Glocke mit Live-Events
|
|
- **Themes:** 15+ Themes (Standard, Discord, Cyberpunk, Spring, Terminal, Infoseer, Homebrew, Florense, Kawi Green, Clo.nz, Clawmorphism, Realmorphism, Amber, Neo, Neo Pink, Neo Mint), umgeschaltet über `data-theme` auf `<html>`, persistiert per Cookie
|
|
- **Layouts:** Umschaltbares Bento-/Uniform-Grid für die Upload-Übersicht
|
|
|
|
## Tech-Stack
|
|
|
|
| Bereich | Technologie |
|
|
|---|---|
|
|
| Framework | Nuxt 4 / Nitro, Vue 3 (`<script setup>` + TS) |
|
|
| UI | shadcn-vue (`shadcn-nuxt`), Reka UI, Tailwind CSS v4, Lucide-Icons, vue-sonner |
|
|
| Datenbank | MariaDB 11 + Drizzle ORM |
|
|
| Realtime | Nitro WebSocket (`crossws`) |
|
|
| Medien | `@nuxt/image`, Plyr |
|
|
| State | Nuxt `useState`-Composables, VueUse |
|
|
|
|
## Projektstruktur
|
|
|
|
```
|
|
app/
|
|
assets/css/tailwind.css # Tailwind v4 Entry + alle Theme-Token ([data-theme="…"])
|
|
components/ # App-Komponenten (Header, Dropzone, Tiles, Comments, …)
|
|
ui/ # shadcn-vue Basis-Komponenten
|
|
composables/ # useAuth, useTheme, useLiveComments, useCommentReactions, …
|
|
layouts/ middleware/ plugins/ pages/
|
|
index.vue # Upload-Grid / Startseite
|
|
thread/[id].vue # Thread-Detailseite mit Kommentaren
|
|
admin.vue user/[id].vue settings.vue login.vue register.vue
|
|
server/
|
|
api/ # Nitro-Endpoints (auth, uploads, comments, notifications, admin, …)
|
|
db/schema.ts # Drizzle-Schema (users, sessions, uploads, comments,
|
|
# comment_reactions, favorites, link_previews,
|
|
# notifications, roles, user_roles)
|
|
db/migrations/ # Generierte SQL-Migrationen
|
|
plugins/migrate.ts # Führt Migrationen beim Server-Start aus (Dev)
|
|
routes/_ws.ts # WebSocket-Route für Live-Events
|
|
utils/ # auth, db, roles, uploads, notifications, linkPreview
|
|
scripts/migrate.ts # Manueller Migrations-Runner (npm run db:migrate)
|
|
shared/utils/ # Gemeinsame Utilities (Client & Server)
|
|
public/uploads/ # Upload-Ziel (gitignored)
|
|
docker-compose.yml # MariaDB-Container
|
|
```
|
|
|
|
## Setup
|
|
|
|
**Voraussetzungen:** Node.js ≥ 20, Docker (für die mitgelieferte MariaDB) oder eine eigene MySQL/MariaDB-Instanz.
|
|
|
|
```bash
|
|
# 1. Datenbank starten
|
|
docker compose up -d
|
|
|
|
# 2. Umgebung konfigurieren
|
|
cp .env.example .env # enthält DATABASE_URL, passt zum Docker-Setup
|
|
|
|
# 3. Abhängigkeiten installieren
|
|
npm install
|
|
|
|
# 4. ffmpeg-Binary nachinstallieren (wird für Sprachnachrichten → MP3 gebraucht;
|
|
# der Download läuft über das postinstall-Skript von ffmpeg-static, das je
|
|
# nach npm-Konfiguration ggf. geblockt ist)
|
|
node node_modules/ffmpeg-static/install.js
|
|
|
|
# 5. Dev-Server starten (Migrationen laufen automatisch)
|
|
npm run dev
|
|
```
|
|
|
|
Die App läuft auf <http://localhost:3000>. Der **erste registrierte Account erhält automatisch die Admin-Rolle** und kann danach im Admin-Panel weitere Rollen (`moderator`, …) anlegen und vergeben.
|
|
|
|
### Ohne Docker
|
|
|
|
Eigene MariaDB/MySQL-Instanz bereitstellen und `DATABASE_URL` in `.env` anpassen:
|
|
|
|
```
|
|
DATABASE_URL=mysql://user:pass@host:3306/datenbank
|
|
```
|
|
|
|
## NPM-Scripts
|
|
|
|
| Befehl | Zweck |
|
|
|---|---|
|
|
| `npm run dev` | Dev-Server mit HMR, Auto-Migrationen |
|
|
| `npm run build` | Production-Build |
|
|
| `npm run preview` | Build lokal ausführen |
|
|
| `npm run db:generate` | Neue Drizzle-Migration aus Schema-Änderung erzeugen |
|
|
| `npm run db:migrate` | Migrationen manuell anwenden |
|
|
| `npm run db:studio` | Drizzle Studio (DB-GUI) |
|
|
|
|
## Entwicklung
|
|
|
|
- **Schema ändern:** `server/db/schema.ts` anpassen → `npm run db:generate` → Migration committen. Im Dev-Betrieb wendet `server/plugins/migrate.ts` sie beim Start automatisch an.
|
|
- **Neues Theme hinzufügen:** `[data-theme="…"]`-Block mit den CSS-Variablen in `app/assets/css/tailwind.css` anlegen, den Namen in der `ThemeName`-Union in `app/composables/useTheme.ts` ergänzen und einen Eintrag in `app/components/ThemeSelector.vue` hinzufügen. Themes können auch die `shadow-*`-Tokens überschreiben (Glow-, Offset- oder Flach-Schatten) sowie `font-sans`/`font-heading`/`font-mono`; `--font-logo` bleibt bewusst theme-unabhängig.
|
|
- **Konventionen:** Semantische Tokens statt hartcodierter Farben (`primary`, `accent`, `muted` …), `rounded-md`/`rounded-sm` skalieren über `--radius` mit dem Theme. Details stehen in `AGENTS.md`.
|
|
- **Health-Check:** `GET /api/health` meldet den DB-Verbindungsstatus.
|