React-Frontend ausliefern, altes Vanilla-Frontend entfernt
- frontend.go: Seitenrouten liefern die index.html (no-cache), gehashte Assets unter /assets dauerhaft cachebar, sonst echtes 404 - /stats als Seite, /stats.html leitet per 301 weiter - Containerfile: Node-Stage baut das Frontend nach web/ - Vite baut nach ../web (gitignored); web/ (Vanilla-JS) gelöscht - notes/frontend.md, deploy.md angepasst Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TiXsPUqw7oeomZ8wZrQW5q
This commit is contained in:
irrlicht
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
728ac9b45e
commit
9cac33d167
+1
-1
@@ -16,4 +16,4 @@ migrate.sh
|
||||
Containerfile
|
||||
.containerignore
|
||||
frontend/node_modules/
|
||||
frontend/dist/
|
||||
web/
|
||||
|
||||
+1
-1
@@ -11,4 +11,4 @@ __pycache__/
|
||||
static/media/
|
||||
prod_backup/
|
||||
frontend/node_modules/
|
||||
frontend/dist/
|
||||
/web/
|
||||
|
||||
+11
-1
@@ -1,3 +1,13 @@
|
||||
# Frontend-Stage: React-Build nach /src/web (siehe frontend/vite.config.ts).
|
||||
# Erst nur die Paketdateien, damit npm ci bei reinen Code-Änderungen aus dem
|
||||
# Cache kommt.
|
||||
FROM docker.io/library/node:24-alpine AS frontend
|
||||
WORKDIR /src/frontend
|
||||
COPY frontend/package.json frontend/package-lock.json ./
|
||||
RUN npm ci
|
||||
COPY frontend/ ./
|
||||
RUN npm run build
|
||||
|
||||
# Build-Stage: statisches Binary, CGO aus (pgx und modernc.org/sqlite für den
|
||||
# einmaligen Import sind pures Go).
|
||||
FROM docker.io/library/golang:1.26-alpine AS build
|
||||
@@ -12,7 +22,7 @@ FROM docker.io/library/alpine:3.22
|
||||
RUN adduser -D -u 1000 kver
|
||||
WORKDIR /app
|
||||
COPY --from=build /kver /usr/local/bin/kver
|
||||
COPY web/ web/
|
||||
COPY --from=frontend /src/web web/
|
||||
COPY static/ static/
|
||||
# data: GeoLite2-ASN-DB (und die alte SQLite-DB für den Import);
|
||||
# static/media: Uploads. Beide als Volume persistieren.
|
||||
|
||||
@@ -150,12 +150,6 @@ func handleUserFeed(w http.ResponseWriter, r *http.Request) error {
|
||||
return nil
|
||||
}
|
||||
|
||||
// serveEntryPage liefert die statische Focus-Seite; das Frontend lädt die Daten
|
||||
// dann über /entry/{pid}/thread.
|
||||
func serveEntryPage(w http.ResponseWriter, r *http.Request) {
|
||||
http.ServeFile(w, r, "web/entry.html")
|
||||
}
|
||||
|
||||
var (
|
||||
errEntryNotFound = NotFound("entry.not_found", "Beitrag nicht gefunden")
|
||||
errEntryNotOwned = Forbidden("entry.not_owner", "Das ist nicht dein Beitrag.")
|
||||
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
"strings"
|
||||
)
|
||||
|
||||
// webDir enthält das gebaute React-Frontend (frontend/ -> npm run build):
|
||||
// index.html plus gehashte Dateien unter assets/.
|
||||
const webDir = "web"
|
||||
|
||||
// serveApp liefert die index.html des Frontends; das Routing übernimmt der
|
||||
// Client. Nur für die Seitenrouten des Frontends registriert (siehe routes) --
|
||||
// beliebige andere Pfade bleiben ein echtes 404, statt als Seite zu gelten und
|
||||
// in der Impression-Statistik zu landen. no-cache, damit nach einem Deploy
|
||||
// sofort die neue index.html mit den neuen Asset-Namen geladen wird.
|
||||
func serveApp(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Cache-Control", "no-cache")
|
||||
http.ServeFile(w, r, webDir+"/index.html")
|
||||
}
|
||||
|
||||
// serveAssets liefert die gebauten JS/CSS-Dateien. Ihre Namen enthalten einen
|
||||
// Inhalts-Hash, sie ändern sich also nie -> dauerhaft cachebar. Verzeichnisse
|
||||
// gibt es nicht zu sehen (kein Listing).
|
||||
func serveAssets() http.Handler {
|
||||
files := http.FileServer(http.Dir(webDir))
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
if strings.HasSuffix(r.URL.Path, "/") {
|
||||
http.NotFound(w, r)
|
||||
return
|
||||
}
|
||||
w.Header().Set("Cache-Control", "public, max-age=31536000, immutable")
|
||||
files.ServeHTTP(w, r)
|
||||
})
|
||||
}
|
||||
@@ -13,6 +13,13 @@ const proxy = { target: backend, changeOrigin: false };
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
// Das Go-Backend liefert das Build aus web/ aus (siehe frontend.go).
|
||||
// emptyOutDir muss explizit an sein, weil das Ziel außerhalb von frontend/
|
||||
// liegt.
|
||||
build: {
|
||||
outDir: "../web",
|
||||
emptyOutDir: true,
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": proxy,
|
||||
|
||||
@@ -19,9 +19,9 @@ import (
|
||||
)
|
||||
|
||||
func main() {
|
||||
// KVER_DIR: Verzeichnis mit web/ und static/. Per Chdir werden alle
|
||||
// relativen Pfade (auch Uploads) auf einmal verankert -- die App ist damit
|
||||
// nicht mehr an das Start-CWD gebunden.
|
||||
// KVER_DIR: Verzeichnis mit web/ (gebautes Frontend) und static/. Per
|
||||
// Chdir werden alle relativen Pfade (auch Uploads) auf einmal verankert --
|
||||
// die App ist damit nicht mehr an das Start-CWD gebunden.
|
||||
if dir := os.Getenv("KVER_DIR"); dir != "" {
|
||||
if err := os.Chdir(dir); err != nil {
|
||||
log.Fatalf("KVER_DIR: %v", err)
|
||||
@@ -102,8 +102,8 @@ func envOr(key, fallback string) string {
|
||||
// Tests identisch verwendet.
|
||||
//
|
||||
// Aufteilung: alles unter /api spricht ausschließlich JSON -- auch 404, 405,
|
||||
// Rate-Limit und Panics. Der Rest liefert die HTML-Seiten und Dateien des
|
||||
// Frontends.
|
||||
// Rate-Limit und Panics. Der Rest liefert das Frontend (frontend.go) und
|
||||
// statische Dateien.
|
||||
func routes() http.Handler {
|
||||
r := chi.NewRouter()
|
||||
// RealIP übernimmt X-Forwarded-For/X-Real-IP vom Reverse-Proxy, damit
|
||||
@@ -166,22 +166,27 @@ func routes() http.Handler {
|
||||
})
|
||||
})
|
||||
|
||||
// --- HTML-Seiten ---
|
||||
// Mit Impression-Tracking (anonymisiert, siehe stats.go). Nur echte
|
||||
// Seitenaufrufe, nicht API/Assets.
|
||||
r.With(trackImpression).Get("/", serveIndex)
|
||||
r.With(trackImpression).Get("/e/{pid}", serveEntryPage)
|
||||
r.With(trackImpression).Get("/u/{username}", serveUserPage)
|
||||
// --- Frontend (React) ---
|
||||
// Die Seitenrouten entsprechen denen des Client-Routers (frontend/src/
|
||||
// main.tsx) und liefern alle dieselbe index.html. Impression-Tracking
|
||||
// (anonymisiert, siehe stats.go) nur auf echten Seitenaufrufen, nicht auf
|
||||
// API/Assets; die Statistik-Seite zählt wie bisher nicht mit.
|
||||
r.With(trackImpression).Get("/", serveApp)
|
||||
r.With(trackImpression).Get("/e/{pid}", serveApp)
|
||||
r.With(trackImpression).Get("/u/{username}", serveApp)
|
||||
r.Get("/stats", serveApp)
|
||||
// Alte Adresse der Statistik-Seite (Lesezeichen, Links von außen).
|
||||
r.Get("/stats.html", func(w http.ResponseWriter, r *http.Request) {
|
||||
http.Redirect(w, r, "/stats", http.StatusMovedPermanently)
|
||||
})
|
||||
r.Handle("/assets/*", serveAssets())
|
||||
|
||||
// Hochgeladene Medien + alte statische Assets. nosniff (global via
|
||||
// secHeaders) verhindert, dass der Browser eine durchgereichte (nicht
|
||||
// re-kodierte) Datei als HTML/JS interpretiert -> schließt
|
||||
// Polyglot/Stored-XSS über Bild-Uploads.
|
||||
// Hochgeladene Medien + statische Dateien (Schriften, Rechtstexte).
|
||||
// nosniff (global via secHeaders) verhindert, dass der Browser eine
|
||||
// durchgereichte (nicht re-kodierte) Datei als HTML/JS interpretiert ->
|
||||
// schließt Polyglot/Stored-XSS über Bild-Uploads.
|
||||
r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
|
||||
|
||||
// Frontend-Dateien (JS, CSS, weitere Seiten)
|
||||
r.Handle("/*", http.FileServer(http.Dir("web")))
|
||||
|
||||
return r
|
||||
}
|
||||
|
||||
|
||||
+5
-2
@@ -27,8 +27,11 @@ Beim ersten Deployment: DB und Medien einmalig in die Volumes kopieren
|
||||
podman build -t kver .
|
||||
```
|
||||
|
||||
Multi-Stage-Build (`Containerfile`): statisches Go-Binary (CGO aus), Laufzeit-
|
||||
Image ist Alpine mit unprivilegiertem Nutzer.
|
||||
Multi-Stage-Build (`Containerfile`): das React-Frontend wird in einer
|
||||
Node-Stage gebaut (`npm ci && npm run build`), das Go-Binary statisch (CGO
|
||||
aus); das Laufzeit-Image ist Alpine mit unprivilegiertem Nutzer und enthält
|
||||
nur Binary, gebautes Frontend (`web/`) und `static/`. Auf dem Server wird
|
||||
also weder Node noch Go gebraucht, nur Podman.
|
||||
|
||||
Die Warnung `HEALTHCHECK is not supported for OCI image format` ist erwartbar:
|
||||
Podman baut OCI-Images, dort gibt es kein eingebettetes HEALTHCHECK. Der
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
# Frontend (React)
|
||||
|
||||
Quellcode in `frontend/`: Vite, React, TypeScript, React Router, TanStack Query.
|
||||
|
||||
**Optik:** bewusst brutalistisch-roh. Markup, IDs und Klassen entsprechen dem
|
||||
früheren Vanilla-Frontend, `frontend/src/app.css` ist das einzige Stylesheet.
|
||||
Umbauten ändern Funktion, nicht Aussehen.
|
||||
|
||||
## Entwickeln
|
||||
|
||||
Zwei Terminals:
|
||||
|
||||
```sh
|
||||
set -a; . ./dev.env; set +a; go run . # Backend auf :8081
|
||||
cd frontend && npm run dev # http://localhost:5173
|
||||
```
|
||||
|
||||
Vite reicht `/api` und `/static` ans Backend durch (`frontend/vite.config.ts`,
|
||||
`changeOrigin: false` ist Pflicht, sonst scheitert jeder POST am Origin-Check).
|
||||
|
||||
## Bauen
|
||||
|
||||
`npm run build` in `frontend/` prüft die Typen und schreibt nach `../web/`
|
||||
(gitignored). Von dort liefert das Go-Backend aus (`frontend.go`), lokal also
|
||||
auch ohne Vite: `npm run build`, dann `go run .`.
|
||||
|
||||
## Aufbau
|
||||
|
||||
| Datei | Zweck |
|
||||
|-------|-------|
|
||||
| `src/api.ts` | API-Client; jeder Nicht-2xx-Status wird zu `ApiError` |
|
||||
| `src/types.ts` | Typen der API-Antworten (Referenz: `notes/api.md`) |
|
||||
| `src/auth.ts` | `useMe()` (eigenes Konto oder `null`), `useAuthChanged()` |
|
||||
| `src/main.tsx` | Router, QueryClient |
|
||||
| `src/Layout.tsx` | Header, Headerbar |
|
||||
| `src/pages/*` | Startseite, Thread, Profil, Statistik |
|
||||
| `src/components/*` | Feed, Beitragskarte, Votes, Repost, Login, Beitrag verfassen |
|
||||
|
||||
Seitenrouten des Clients (`/`, `/e/:pid`, `/u/:username`, `/stats`) müssen
|
||||
auch in `routes()` (main.go) stehen, sonst liefert ein direkter Aufruf 404.
|
||||
|
||||
## Impressions
|
||||
|
||||
Das Backend zählt Seitenaufrufe beim Ausliefern der `index.html`. Navigation
|
||||
innerhalb der App lädt keine Seite mehr vom Server und wird deshalb nicht
|
||||
gezählt -- nur der erste Aufruf bzw. ein Reload.
|
||||
@@ -305,10 +305,3 @@ func handleStatsDetail(w http.ResponseWriter, r *http.Request) error {
|
||||
})
|
||||
return nil
|
||||
}
|
||||
|
||||
// serveIndex liefert die Startseite. Eigene Route (statt FileServer-Catch-All),
|
||||
// damit trackImpression nur echte Seitenaufrufe von "/" zählt und nicht jedes
|
||||
// Asset.
|
||||
func serveIndex(w http.ResponseWriter, r *http.Request) {
|
||||
http.ServeFile(w, r, "web/index.html")
|
||||
}
|
||||
|
||||
@@ -63,12 +63,6 @@ func idFromUsername(username string) int64 {
|
||||
return id
|
||||
}
|
||||
|
||||
// serveUserPage liefert die statische Profilseite; das Frontend lädt die Daten
|
||||
// dann über /u/{username}/info und /u/{username}/feed/{page}.
|
||||
func serveUserPage(w http.ResponseWriter, r *http.Request) {
|
||||
http.ServeFile(w, r, "web/user.html")
|
||||
}
|
||||
|
||||
func handleUserPage(w http.ResponseWriter, r *http.Request) error {
|
||||
username := chi.URLParam(r, "username")
|
||||
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
# Kontrollverlust — Responsible Disclosure
|
||||
# Siehe auch Beitragsordnung §7 (Technische Regeln).
|
||||
Contact: mailto:stress@bnd.wtf
|
||||
Expires: 2027-06-15T00:00:00.000Z
|
||||
Preferred-Languages: de, en
|
||||
Canonical: https://kver.xyz/.well-known/security.txt
|
||||
-395
@@ -1,395 +0,0 @@
|
||||
/* Designsprache aus der alten Python-Version (verwaiste Linie bb6b966):
|
||||
EB Garamond als Fließtext, Cheltenham Classic für die Überschrift,
|
||||
Concrete-Textur als Hintergrund, weiße zentrierte Inhaltsspalte. */
|
||||
|
||||
/* font-display: swap -> Text wird sofort mit System-Serife gezeichnet und
|
||||
wechselt zur Webschrift, sobald geladen (kein FOIT). Der Browser lädt nur
|
||||
das erste passende src-Format, daher .ttf als truetype korrekt deklarieren. */
|
||||
@font-face {
|
||||
font-family: "EB Garamond";
|
||||
src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf") format("truetype"),
|
||||
url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "EB Garamond";
|
||||
src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Italic.ttf") format("truetype"),
|
||||
url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Italic.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Cheltenham Classic";
|
||||
src: url("/static/assets/cheltenham/CheltenhamClassic.ttf") format("truetype"),
|
||||
url("/static/assets/cheltenham/CheltenhamClassic.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
html {
|
||||
--avatar-sm: 50px; /* Größe des Byline-Avatars; halbiert = Position des Thread-Strichs */
|
||||
--line-w: 3px; /* Dicke des Thread-Strichs */
|
||||
background-image: url("/static/assets/concrete/Concrete012_1024p_Color.jpg");
|
||||
font-family: "EB Garamond", serif;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- Kopf --- */
|
||||
header {
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Rechtliche Links über der Überschrift. */
|
||||
#legal {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
#legal a {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Klick auf die Überschrift führt zurück zum Feed. */
|
||||
header > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Cheltenham Classic", serif;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
margin: 0.2rem auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Cheltenham Classic", serif;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
|
||||
/* Kleine Statuszeile direkt unter dem Titel (Tage ohne Datenverlust + Kennzahlen). */
|
||||
.tagline {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Dezente Reihe anarchistischer Sigillen unter der Tagline. Einheitliche Höhe,
|
||||
gedämpft per opacity (die SVGs sind teils Strich-, teils Flächenzeichnungen,
|
||||
eine gemeinsame Farbe gäbe es nicht -> Transparenz vereinheitlicht den Look).
|
||||
aria-hidden im Markup: reine Dekoration, kein Vorlesen. */
|
||||
#sigils {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.2rem;
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
|
||||
#sigils img {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#headerbar {
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#headerbar a {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* --- Inhaltsspalte --- */
|
||||
main {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
main > section,
|
||||
main > div,
|
||||
main > h2,
|
||||
main > p {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
main > section {
|
||||
padding: 0rem 0.3rem;
|
||||
}
|
||||
|
||||
main > h2 {
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
/* Rechtstexte (Impressum/Datenschutz/Beitragsordnung): weiße Spalte mit etwas
|
||||
Innenabstand, damit der Fließtext nicht am Rand klebt. */
|
||||
.doc {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
span, a {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* --- Buttons --- */
|
||||
a.button, button {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid black;
|
||||
margin: 2px 0;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
background-color: white;
|
||||
font-family: "EB Garamond", serif;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.button:hover, button:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* --- Einträge --- */
|
||||
.card {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.2rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: #f7f7f5;
|
||||
}
|
||||
|
||||
.card .content {
|
||||
padding: 0.5rem 0;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
#focus .card {
|
||||
margin: 0rem 0.3rem ;
|
||||
}
|
||||
|
||||
/* Beitragsbild (nicht der Byline-Avatar). */
|
||||
.card img:not(.avatar) {
|
||||
display: block;
|
||||
max-width: 300px;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
|
||||
/* Fokussierter Beitrag zeigt das Bild in voller Breite. */
|
||||
#focus .card img:not(.avatar) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* --- Avatare --- */
|
||||
img.avatar {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
background-color: #eee;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
img.avatar-sm { width: var(--avatar-sm); height: var(--avatar-sm); }
|
||||
img.avatar-lg { width: 72px; height: 72px; }
|
||||
|
||||
/* Byline mit kleinem Avatar neben Name + Zeitstempel. Einheitliche 1rem für die
|
||||
ganze Meta-Zeile (Name, Datum, Repost-Cooldown), damit nichts größer rausfällt
|
||||
als die Links -- der Klartext würde sonst die 1.2rem der Card erben. */
|
||||
.byline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1rem;
|
||||
/* Versuchsweise die Titel-Display-Schrift (wie h1/h2) in der Meta-Zeile. */
|
||||
font-family: "Cheltenham Classic", serif;
|
||||
}
|
||||
|
||||
/* Die globale Regel `span, a { font-size: 1.2rem }` trifft das Datum/Cooldown-
|
||||
span direkt und macht es größer als den Username-Link (der über `.muted a`
|
||||
auf 1rem liegt). Hier explizit angleichen -> ganze Meta-Zeile gleich groß. */
|
||||
.byline span { font-size: 1rem; }
|
||||
|
||||
/* Profilkopf: großer Avatar links neben Name und "Mitglied seit". */
|
||||
.profile-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* --- Thread-Strich ---
|
||||
Der Strich ist ein eigenes Flex-Geschwister links neben dem Inhalt, nicht
|
||||
eine Border am Inhalt selbst. align-self: stretch macht ihn exakt so hoch
|
||||
wie der Inhalt (kein Über-/Unterstehen). Die Meta-Zeile (.byline) liegt
|
||||
außerhalb des Wrappers, also volle Breite über dem Strich.
|
||||
Standard (Feed/Fokus): Strich aus, Inhalt volle Breite. */
|
||||
.threadline-wrapper { display: flex; }
|
||||
.threadline { display: none; align-self: stretch; }
|
||||
.body { flex: 1; min-width: 0; margin-bottom: 1rem; }
|
||||
|
||||
/* Vorfahren UND direkte Antworten: gleiche Einrückung, Meta-Zeile bleibt links.
|
||||
Die Strich-Spalte ist halb so breit wie der Avatar, ihr rechter Rand (= der
|
||||
Strich) liegt damit unter der Mitte des Byline-Avatars. Der Abstand zum
|
||||
Inhalt ist ebenfalls die halbe Avatarbreite -> Inhalt beginnt unter dem
|
||||
rechten Avatarrand. Der .body füllt per flex:1 den Rest. */
|
||||
#ancestors .threadline,
|
||||
#replies .threadline {
|
||||
display: block;
|
||||
/* Box um die Linienbreite schmaler -> die rechts gezeichnete border-right
|
||||
landet genau auf der Avatarmitte statt rechts daneben. */
|
||||
flex: 0 0 calc(var(--avatar-sm) / 2 - var(--line-w));
|
||||
margin-right: calc(var(--avatar-sm) / 2);
|
||||
}
|
||||
|
||||
/* Nur die Vorfahren bilden einen Thread -> Linie. Antworten nur eingerückt. */
|
||||
#ancestors .threadline { border-right: var(--line-w) solid gray; }
|
||||
|
||||
/* Interaktionsleiste: Antworten-Button links, Vote-Buttons mittig, Repost
|
||||
rechts. Antwort- und Repost-Zahl stehen in den Buttons; der Repost-Cooldown
|
||||
wandert in die Byline (siehe setupBump). */
|
||||
.interactions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Bump-Button: tritt an die Stelle der früheren Bump-Kommentare. Im Cooldown
|
||||
gesperrt (gilt pro Beitrag für alle), der Button zeigt dann die Restzeit. */
|
||||
.bump:disabled {
|
||||
color: gray;
|
||||
border-color: #ccc;
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.muted { color: gray; }
|
||||
.muted a { color: gray; font-size: 1rem; }
|
||||
.ghost.selected { font-weight: bold; }
|
||||
.msg { color: red; }
|
||||
|
||||
p.warning {
|
||||
background-color: #faa;
|
||||
padding: 10px 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* --- Formulare --- */
|
||||
form {
|
||||
background-color: white;
|
||||
margin: auto;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
form input,
|
||||
form textarea {
|
||||
font-family: "EB Garamond", serif;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
form textarea {
|
||||
padding: 5px;
|
||||
border: 0;
|
||||
outline: 1px solid black;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
form input[type="file"] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* --- Statistik-Seite --- */
|
||||
.statgrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem 1.8rem;
|
||||
padding: 0.3rem 0.5rem 0.6rem;
|
||||
}
|
||||
.statgrid > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.statgrid .num {
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Horizontale Balken (Aufrufe/Tag, beliebteste Seiten). Breite wird per JS
|
||||
gesetzt (CSSOM, kein Inline-style -> CSP-konform). */
|
||||
.bars {
|
||||
padding: 0.3rem 0.5rem 0.6rem;
|
||||
}
|
||||
.bar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 0.15rem 0;
|
||||
}
|
||||
.bar-label {
|
||||
flex: 0 0 7rem;
|
||||
text-align: right;
|
||||
font-size: 0.95rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bar-track {
|
||||
flex: 1;
|
||||
background: #eee;
|
||||
}
|
||||
.bar-fill {
|
||||
height: 1.1rem;
|
||||
background: gray;
|
||||
}
|
||||
.bar-value {
|
||||
flex: 0 0 auto;
|
||||
text-align: right;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ASN-Namen sind länger als Datum/Pfad -> mehr Platz, Umbruch statt Ellipse. */
|
||||
#stat-asns .bar-label {
|
||||
flex-basis: 13rem;
|
||||
white-space: normal;
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kontrollverlust</title>
|
||||
<link rel="stylesheet" href="/css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav id="legal">
|
||||
<a href="/static/docs/impressum.html">Impressum</a> -
|
||||
<a href="/static/docs/datenschutz.html">Datenschutz</a> -
|
||||
<a href="/static/docs/beitragsordnung.html">Beitragsordnung</a> -
|
||||
<a href="/stats.html">Statistik</a>
|
||||
</nav>
|
||||
<a href="/"><h1>Kontrollverlust</h1></a>
|
||||
<div id="headerbar"><a class="button" href="/">zurück zum Feed</a></div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="ancestors"></section>
|
||||
<div id="focus"></div>
|
||||
|
||||
<!-- Nur für eingeloggte Nutzer -->
|
||||
<section id="reply-box" hidden>
|
||||
<form id="reply-form">
|
||||
<textarea name="content" rows="3" maxlength="1000" placeholder="Antworten…"></textarea>
|
||||
<p class="muted" id="reply-paste-msg"></p>
|
||||
<input name="file" type="file" accept="image/*">
|
||||
<button type="submit">Antworten</button>
|
||||
</form>
|
||||
<p class="msg" id="reply-msg"></p>
|
||||
</section>
|
||||
|
||||
<section id="replies"></section>
|
||||
</main>
|
||||
|
||||
<script src="/js/feed.js"></script>
|
||||
<script src="/js/entry.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,69 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kontrollverlust</title>
|
||||
<link rel="stylesheet" href="/css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav id="legal">
|
||||
<a href="/static/docs/impressum.html">Impressum</a> -
|
||||
<a href="/static/docs/datenschutz.html">Datenschutz</a> -
|
||||
<a href="/static/docs/beitragsordnung.html">Beitragsordnung</a> -
|
||||
<a href="/stats.html">Statistik</a>
|
||||
</nav>
|
||||
<a href="/"><h1>Kontrollverlust</h1></a>
|
||||
<p id="stats" class="tagline"></p>
|
||||
<div id="headerbar"></div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<noscript>
|
||||
<p class="msg">Diese Seite braucht JavaScript.</p>
|
||||
</noscript>
|
||||
|
||||
<!-- Login / Registrierung -->
|
||||
<section id="auth-box">
|
||||
<form id="login-form">
|
||||
<h2>Login</h2>
|
||||
<input name="user" placeholder="Nutzername" autocomplete="username">
|
||||
<input name="pass" type="password" placeholder="Passwort" autocomplete="current-password">
|
||||
<input name="timeout" type="hidden" value="86400">
|
||||
<button type="submit">Einloggen</button>
|
||||
<p class="muted">Noch kein Konto? <a href="#" id="show-register">Registrieren</a></p>
|
||||
</form>
|
||||
|
||||
<form id="register-form" hidden>
|
||||
<h2>Registrieren</h2>
|
||||
<input name="user" placeholder="Nutzername" autocomplete="username">
|
||||
<input name="pass1" type="password" placeholder="Passwort" autocomplete="new-password">
|
||||
<input name="pass2" type="password" placeholder="Passwort wiederholen" autocomplete="new-password">
|
||||
<button type="submit">Konto erstellen</button>
|
||||
<p class="muted">Schon registriert? <a href="#" id="show-login">Zum Login</a></p>
|
||||
</form>
|
||||
|
||||
<p class="msg" id="auth-msg"></p>
|
||||
</section>
|
||||
|
||||
<!-- Neuer Beitrag -->
|
||||
<section id="compose" hidden>
|
||||
<form id="entry-form">
|
||||
<textarea name="content" rows="4" maxlength="1000" placeholder="Was gibt's Neues?"></textarea>
|
||||
<p class="muted" id="paste-msg"></p>
|
||||
<input name="file" type="file" accept="image/*">
|
||||
<button type="submit">Eintrag erstellen</button>
|
||||
</form>
|
||||
<p class="msg" id="entry-msg"></p>
|
||||
</section>
|
||||
|
||||
<!-- Feed -->
|
||||
<section id="feed"></section>
|
||||
<div id="sentinel"></div>
|
||||
</main>
|
||||
|
||||
<script src="/js/feed.js"></script>
|
||||
<script src="/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
-122
@@ -1,122 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
// --- Headerbar (eingeloggt?) ---
|
||||
let loggedIn = false;
|
||||
|
||||
async function refreshHeader() {
|
||||
const me = await api.get("/user/info");
|
||||
loggedIn = me.ok;
|
||||
|
||||
document.getElementById("auth-box").hidden = loggedIn;
|
||||
document.getElementById("compose").hidden = !loggedIn;
|
||||
|
||||
const bar = document.getElementById("headerbar");
|
||||
if (loggedIn) {
|
||||
const user = encodeURIComponent(me.data.username);
|
||||
bar.innerHTML = `<a class="button" href="/u/${user}">mein Profil</a> <button id="logout-btn">Logout</button>`;
|
||||
document.getElementById("logout-btn").addEventListener("click", async () => {
|
||||
// POST statt GET: als GET wäre Logout per fremdem Link auslösbar (CSRF).
|
||||
await api.post("/auth/logout", new FormData());
|
||||
await refreshHeader();
|
||||
});
|
||||
} else {
|
||||
bar.innerHTML = "";
|
||||
showAuth("login");
|
||||
}
|
||||
}
|
||||
|
||||
// --- Login / Registrierung ---
|
||||
const loginForm = document.getElementById("login-form");
|
||||
const registerForm = document.getElementById("register-form");
|
||||
const authMsg = document.getElementById("auth-msg");
|
||||
|
||||
function showAuth(which) {
|
||||
loginForm.hidden = which !== "login";
|
||||
registerForm.hidden = which !== "register";
|
||||
authMsg.textContent = "";
|
||||
}
|
||||
|
||||
document.getElementById("show-register").addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
showAuth("register");
|
||||
});
|
||||
document.getElementById("show-login").addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
showAuth("login");
|
||||
});
|
||||
|
||||
loginForm.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const res = await api.post("/auth/login", new FormData(e.target));
|
||||
if (res.ok) {
|
||||
await refreshHeader();
|
||||
} else {
|
||||
authMsg.textContent = errMsg(res.data, "Login fehlgeschlagen.");
|
||||
}
|
||||
});
|
||||
|
||||
registerForm.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const data = new FormData(e.target);
|
||||
const res = await api.post("/auth/newuser", data);
|
||||
if (!res.ok) {
|
||||
// newuser meldet alle Feldfehler auf einmal (error.fields).
|
||||
authMsg.textContent = errMsg(res.data, "Registrierung fehlgeschlagen.");
|
||||
return;
|
||||
}
|
||||
// Direkt mit denselben Daten einloggen, damit der Nutzer gleich drin ist.
|
||||
const login = new FormData();
|
||||
login.append("user", data.get("user"));
|
||||
login.append("pass", data.get("pass1"));
|
||||
login.append("timeout", "86400");
|
||||
await api.post("/auth/login", login);
|
||||
await refreshHeader();
|
||||
});
|
||||
|
||||
// --- Feed ---
|
||||
const feed = createFeed(
|
||||
document.getElementById("feed"),
|
||||
document.getElementById("sentinel"),
|
||||
(page) => `/entry/feed/${page}`
|
||||
);
|
||||
|
||||
// --- Neuer Beitrag ---
|
||||
document.getElementById("entry-form").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const res = await api.post("/entry/create", new FormData(e.target));
|
||||
const msg = document.getElementById("entry-msg");
|
||||
if (res.ok) {
|
||||
msg.textContent = "";
|
||||
document.getElementById("paste-msg").textContent = "";
|
||||
e.target.reset();
|
||||
feed.reset();
|
||||
} else {
|
||||
msg.textContent = errMsg(res.data, "Beitrag fehlgeschlagen.");
|
||||
}
|
||||
});
|
||||
|
||||
// --- Bild aus der Zwischenablage einfügen ---
|
||||
setupClipboardPaste(
|
||||
document.getElementById("entry-form"),
|
||||
document.getElementById("paste-msg")
|
||||
);
|
||||
|
||||
// --- Statuszeile unter dem Titel ---
|
||||
// Tage ohne Datenverlust (fester Startpunkt, Kontinuität seit der alten
|
||||
// Version).
|
||||
const dataLossStart = new Date("2025-12-13T12:44:00").getTime();
|
||||
|
||||
function plural(n, one, many) {
|
||||
return `${n} ${n === 1 ? one : many}`;
|
||||
}
|
||||
|
||||
function renderStats() {
|
||||
const el = document.getElementById("stats");
|
||||
if (!el) return;
|
||||
const days = Math.floor((Date.now() - dataLossStart) / 86400000);
|
||||
el.textContent = `Ohne Datenverlust seit ${plural(days, "Tag", "Tagen")}`;
|
||||
}
|
||||
|
||||
// --- Start ---
|
||||
refreshHeader();
|
||||
renderStats();
|
||||
@@ -1,97 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
// pid aus dem Pfad /e/<pid>.
|
||||
const pid = location.pathname.split("/")[2] || "";
|
||||
|
||||
const replyForm = document.getElementById("reply-form");
|
||||
setupClipboardPaste(replyForm, document.getElementById("reply-paste-msg"));
|
||||
|
||||
replyForm.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const fd = new FormData(e.target);
|
||||
fd.append("reply_to", pid);
|
||||
const res = await api.post("/entry/create", fd);
|
||||
if (res.ok) {
|
||||
e.target.reset();
|
||||
document.getElementById("reply-msg").textContent = "";
|
||||
document.getElementById("reply-paste-msg").textContent = "";
|
||||
load();
|
||||
} else {
|
||||
document.getElementById("reply-msg").textContent =
|
||||
errMsg(res.data, "Antwort fehlgeschlagen.");
|
||||
}
|
||||
});
|
||||
|
||||
async function load() {
|
||||
const res = await api.get(`/entry/${pid}/thread`);
|
||||
|
||||
const focus = document.getElementById("focus");
|
||||
if (!res.ok) {
|
||||
focus.textContent = errMsg(res.data, "Beitrag konnte nicht geladen werden.");
|
||||
return;
|
||||
}
|
||||
const data = res.data;
|
||||
|
||||
// Ahnenkette (Root zuerst), dann der fokussierte Beitrag.
|
||||
const ancestors = document.getElementById("ancestors");
|
||||
ancestors.innerHTML = "";
|
||||
data.ancestors.forEach((a) => ancestors.appendChild(renderEntry(a)));
|
||||
|
||||
focus.innerHTML = "";
|
||||
focus.appendChild(renderEntry(data.entry));
|
||||
|
||||
// Eingeloggt? Reply-Box zeigen; eigener, nicht gelöschter Beitrag -> Bearbeiten/Löschen.
|
||||
// 401 heißt nicht angemeldet -> me bleibt leer.
|
||||
const meRes = await api.get("/user/info");
|
||||
const me = meRes.ok ? meRes.data : {};
|
||||
document.getElementById("reply-box").hidden = !me.uid;
|
||||
if (me.uid === data.entry.uid && !data.entry.deleted) {
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.textContent = "Bearbeiten";
|
||||
editBtn.addEventListener("click", () => {
|
||||
editBtn.disabled = true;
|
||||
const form = document.createElement("form");
|
||||
form.innerHTML = `
|
||||
<textarea name="content" rows="4" maxlength="1000"></textarea>
|
||||
<button type="submit">Speichern</button>
|
||||
<button type="button" class="cancel">Abbrechen</button>
|
||||
<p class="msg"></p>`;
|
||||
form.querySelector("textarea").value = data.entry.content;
|
||||
form.addEventListener("submit", async (ev) => {
|
||||
ev.preventDefault();
|
||||
const res = await api.post(`/entry/${pid}/edit`, new FormData(form));
|
||||
if (res.ok) load();
|
||||
else form.querySelector(".msg").textContent =
|
||||
errMsg(res.data, "Bearbeiten fehlgeschlagen.");
|
||||
});
|
||||
form.querySelector(".cancel").addEventListener("click", load);
|
||||
focus.appendChild(form);
|
||||
});
|
||||
|
||||
const delBtn = document.createElement("button");
|
||||
delBtn.textContent = "Löschen";
|
||||
delBtn.addEventListener("click", async () => {
|
||||
if (!confirm("Beitrag wirklich löschen?")) return;
|
||||
const res = await api.post(`/entry/${pid}/delete`, new FormData());
|
||||
if (res.ok) load();
|
||||
else alert(errMsg(res.data, "Löschen fehlgeschlagen."));
|
||||
});
|
||||
|
||||
focus.appendChild(editBtn);
|
||||
focus.appendChild(delBtn);
|
||||
}
|
||||
|
||||
// Direkte Antworten.
|
||||
const replies = document.getElementById("replies");
|
||||
replies.innerHTML = "";
|
||||
if (!data.replies.length) {
|
||||
const p = document.createElement("p");
|
||||
p.className = "muted";
|
||||
p.textContent = "Noch keine Antworten.";
|
||||
replies.appendChild(p);
|
||||
} else {
|
||||
data.replies.forEach((e) => replies.appendChild(renderEntry(e)));
|
||||
}
|
||||
}
|
||||
|
||||
load();
|
||||
-289
@@ -1,289 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
// Die API liegt unter /api und antwortet ausschließlich mit JSON. Ob ein Aufruf
|
||||
// geklappt hat, sagt der HTTP-Status (ok/status); data ist bei Fehlern das
|
||||
// Fehlerobjekt {"error": {...}}. Pfade werden ohne /api übergeben.
|
||||
const JSON_HEADERS = { Accept: "application/json" };
|
||||
|
||||
async function apiResult(r) {
|
||||
return { ok: r.ok, status: r.status, data: await r.json().catch(() => ({})) };
|
||||
}
|
||||
|
||||
const api = {
|
||||
async get(path) {
|
||||
return apiResult(await fetch(`/api${path}`, {
|
||||
credentials: "same-origin",
|
||||
headers: JSON_HEADERS,
|
||||
}));
|
||||
},
|
||||
async post(path, formData) {
|
||||
return apiResult(await fetch(`/api${path}`, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
credentials: "same-origin",
|
||||
headers: JSON_HEADERS,
|
||||
}));
|
||||
},
|
||||
};
|
||||
|
||||
// errMsg zieht die Nutzermeldung aus dem Fehlerformat der API:
|
||||
// {"error": {"code", "message", "field", "fields"}}. Liegen mehrere
|
||||
// Feldfehler vor (Registrierung), werden sie zu einem Satz zusammengezogen.
|
||||
// Der code ist bewusst nicht Teil der Anzeige -- er ist für Logik da, nicht
|
||||
// für Menschen.
|
||||
function errMsg(data, fallback) {
|
||||
const e = data && data.error;
|
||||
if (!e) return fallback;
|
||||
const fields = e.fields ? Object.values(e.fields) : [];
|
||||
if (fields.length) return fields.join(" ");
|
||||
return e.message || fallback;
|
||||
}
|
||||
|
||||
// Escaped für Text- UND Attributkontext. Der frühere textContent->innerHTML-
|
||||
// Trick ließ Anführungszeichen stehen (in Textknoten harmlos); linkify steckt
|
||||
// den Wert aber in ein href="..."-Attribut, wo ein " ausbrechen würde.
|
||||
function escapeHtml(s) {
|
||||
return String(s ?? "")
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// avatarUrl liefert den Bildpfad oder das Platzhalterbild bei leerem Avatar.
|
||||
function avatarUrl(path) {
|
||||
return path ? `/${path}` : "/static/assets/no_profile_pic.jpg";
|
||||
}
|
||||
|
||||
function linkify(s) {
|
||||
const escaped = escapeHtml(s);
|
||||
const url = /https?:\/\/[^\s<]+/g;
|
||||
return escaped
|
||||
.replace(url, (m) => `<a href="${m}" target="_blank" rel="noopener">${m}</a>`)
|
||||
.replace(/\n/g, "<br>");
|
||||
}
|
||||
|
||||
// setupClipboardPaste erlaubt Strg+V eines Bildes aus der Zwischenablage direkt
|
||||
// im Formular: das Bild wandert in den File-Input (über DataTransfer, weil sich
|
||||
// .files nicht direkt setzen lässt). Liegt kein Bild vor (Text o. Ä.), tun wir
|
||||
// nichts und lassen den normalen Paste durchlaufen -> preventDefault nur, wenn
|
||||
// wir wirklich ein Bild gegriffen haben. msgEl (optional) zeigt den Hinweis.
|
||||
function setupClipboardPaste(form, msgEl) {
|
||||
form.addEventListener("paste", (e) => {
|
||||
const item = [...(e.clipboardData?.items ?? [])].find(
|
||||
(it) => it.kind === "file" && it.type.startsWith("image/")
|
||||
);
|
||||
if (!item) return;
|
||||
|
||||
const original = item.getAsFile();
|
||||
if (!original) return;
|
||||
e.preventDefault();
|
||||
|
||||
// Browser benennt Clipboard-Bilder uneinheitlich ("grafik.png" o. Ä.) -> neu
|
||||
// verpacken mit sprechendem Namen. Endung aus dem MIME-Typ, sonst png.
|
||||
const ext = (original.type.split("/")[1] || "png").toLowerCase();
|
||||
const file = new File([original], `zwischenablage.${ext}`, { type: original.type });
|
||||
|
||||
const input = form.querySelector("input[name='file']");
|
||||
const dt = new DataTransfer();
|
||||
dt.items.add(file);
|
||||
input.files = dt.files;
|
||||
|
||||
if (msgEl) msgEl.textContent = "Bild aus Zwischenablage übernommen.";
|
||||
});
|
||||
}
|
||||
|
||||
function renderEntry(e) {
|
||||
const el = document.createElement("article");
|
||||
el.className = "card";
|
||||
|
||||
const when = new Date(e.created_at * 1000).toLocaleString("de-DE");
|
||||
|
||||
// Soft-gelöschter Beitrag: nur Platzhalter, damit der Thread navigierbar bleibt.
|
||||
if (e.deleted) {
|
||||
el.innerHTML = `
|
||||
<div class="muted byline"><span>[deleted] · ${when}</span></div>
|
||||
<div class="threadline-wrapper">
|
||||
<div class="threadline"></div>
|
||||
<div class="body">
|
||||
<div class="content">[deleted]</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
el.addEventListener("click", (ev) => {
|
||||
if (!ev.target.closest("a, button")) location.href = `/e/${e.pid}`;
|
||||
});
|
||||
return el;
|
||||
}
|
||||
|
||||
const user = encodeURIComponent(e.username);
|
||||
let media = "";
|
||||
if (e.filepath) {
|
||||
media = `<img src="/${e.filepath}" alt="" loading="lazy">`;
|
||||
}
|
||||
|
||||
// Antwort- und Repost-Zahl wandern in die Buttons unten; in der Byline bleibt
|
||||
// nur Name, Zeit und (im Cooldown) der Hinweis bis zum nächsten Repost.
|
||||
el.innerHTML = `
|
||||
<div class="muted byline">
|
||||
<a href="/u/${user}"><img class="avatar avatar-sm" src="${avatarUrl(e.avatar)}" alt="" loading="lazy"></a>
|
||||
<span><a href="/u/${user}">${escapeHtml(e.username)}</a> · ${when}<span class="cooldown"></span></span>
|
||||
</div>
|
||||
<div class="threadline-wrapper">
|
||||
<div class="threadline"></div>
|
||||
<div class="body">
|
||||
<div class="content">${linkify(e.content)}</div>
|
||||
${media}
|
||||
<div class="interactions">
|
||||
<a class="button reply" href="/e/${e.pid}">Antworten (${e.reply_count})</a>
|
||||
<div class="row">
|
||||
<button class="ghost" data-mode="left">Links</button>
|
||||
<span class="muted">– / –</span>
|
||||
<button class="ghost" data-mode="right">Rechts</button>
|
||||
</div>
|
||||
<button class="bump" type="button">Repost (${e.bump_count})</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
setupVoting(el, e.pid);
|
||||
setupBump(el, e);
|
||||
el.addEventListener("click", (ev) => {
|
||||
if (!ev.target.closest("a, button")) location.href = `/e/${e.pid}`;
|
||||
});
|
||||
return el;
|
||||
}
|
||||
|
||||
function setupVoting(el, pid) {
|
||||
const box = el.querySelector(".row");
|
||||
const counts = box.querySelector("span");
|
||||
const buttons = box.querySelectorAll(".ghost");
|
||||
|
||||
function render(res) {
|
||||
if (!res.ok) {
|
||||
counts.textContent = errMsg(res.data, "Fehler");
|
||||
return;
|
||||
}
|
||||
const state = res.data;
|
||||
counts.textContent = `${state.left} / ${state.right}`;
|
||||
buttons.forEach((b) =>
|
||||
b.classList.toggle("selected", b.dataset.mode === state.selected)
|
||||
);
|
||||
}
|
||||
|
||||
buttons.forEach((b) =>
|
||||
b.addEventListener("click", async () => {
|
||||
const fd = new FormData();
|
||||
fd.append("mode", b.dataset.mode);
|
||||
render(await api.post(`/entry/${pid}/vote`, fd));
|
||||
})
|
||||
);
|
||||
|
||||
api.get(`/entry/${pid}/votes`).then(render);
|
||||
}
|
||||
|
||||
// setupBump verdrahtet den Bump-Button. Der Cooldown wächst pro Beitrag linear
|
||||
// (Backend, siehe handleBump); hier wird nur angezeigt und auf 429 reagiert. Eine
|
||||
// Live-Aktualisierung gibt es bewusst nicht: der Zustand stammt aus den
|
||||
// Beitragsdaten beim Laden, plus die Antwort des eigenen Klicks.
|
||||
function setupBump(el, e) {
|
||||
const btn = el.querySelector(".bump");
|
||||
if (!btn) return;
|
||||
const cooldown = el.querySelector(".cooldown");
|
||||
|
||||
// sekunden bis zum nächsten erlaubten Bump aus den geladenen Daten.
|
||||
const nowSec = () => Math.floor(Date.now() / 1000);
|
||||
|
||||
// lock sperrt den Button; die Restzeit steht jetzt oben in der Byline, auf
|
||||
// Stunden aufgerundet (mindestens 1 -> nie "0h", solange Restzeit übrig ist).
|
||||
function lock(retryAfter) {
|
||||
btn.disabled = true;
|
||||
const hours = Math.max(1, Math.ceil(retryAfter / 3600));
|
||||
if (cooldown) cooldown.textContent = ` · Repost in ${hours}h`;
|
||||
}
|
||||
|
||||
const remaining = e.last_bump + e.bump_count * 86400 - nowSec();
|
||||
if (e.bump_count > 0 && remaining > 0) lock(remaining);
|
||||
|
||||
btn.addEventListener("click", async () => {
|
||||
const res = await api.post(`/entry/${e.pid}/bump`, new FormData());
|
||||
if (res.ok) {
|
||||
btn.textContent = `Repost (${res.data.bump_count})`;
|
||||
lock(res.data.retry_after || 86400);
|
||||
} else if (res.status === 429) {
|
||||
lock(res.data.retry_after || 86400);
|
||||
} else {
|
||||
// 401 (nicht angemeldet) o. Ä. -> Fehlertext zeigen, Button frei lassen.
|
||||
btn.textContent = errMsg(res.data, "Fehler");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// createFeed hängt Infinite-Scroll an feedEl/sentinelEl und lädt Seiten über
|
||||
// urlFor(page). Gibt { reset } zurück, um den Feed neu zu laden.
|
||||
function createFeed(feedEl, sentinelEl, urlFor) {
|
||||
let page = 0;
|
||||
let loading = false;
|
||||
let done = false;
|
||||
|
||||
async function loadMore() {
|
||||
if (loading || done) return;
|
||||
loading = true;
|
||||
|
||||
const res = await api.get(urlFor(page));
|
||||
if (!res.ok) {
|
||||
// Fehler nicht als "Ende" verbuchen: Meldung zeigen und weiteres
|
||||
// Nachladen stoppen, statt in einer Schleife neu anzufragen.
|
||||
done = true;
|
||||
const err = document.createElement("p");
|
||||
err.className = "msg";
|
||||
err.textContent = errMsg(res.data, "Feed konnte nicht geladen werden.");
|
||||
feedEl.appendChild(err);
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
const entries = res.data;
|
||||
if (!entries.length) {
|
||||
done = true;
|
||||
const end = document.createElement("p");
|
||||
end.className = "muted";
|
||||
end.textContent = "YOU REACHED THE END!";
|
||||
feedEl.appendChild(end);
|
||||
} else {
|
||||
entries.forEach((e) => feedEl.appendChild(renderEntry(e)));
|
||||
page++;
|
||||
}
|
||||
loading = false;
|
||||
|
||||
// Der IntersectionObserver feuert nur bei Zustandswechseln. Füllt die
|
||||
// gerade geladene Seite den Viewport nicht über den Sentinel hinaus, gäbe
|
||||
// es keinen Wechsel und nie ein Nachladen -> hier aktiv weiterladen, bis
|
||||
// der Sentinel aus dem Sichtbereich wandert oder das Ende erreicht ist.
|
||||
if (!done && sentinelVisible()) loadMore();
|
||||
}
|
||||
|
||||
function sentinelVisible() {
|
||||
return sentinelEl.getBoundingClientRect().top <= window.innerHeight;
|
||||
}
|
||||
|
||||
function reset() {
|
||||
page = 0;
|
||||
done = false;
|
||||
feedEl.innerHTML = "";
|
||||
loadMore();
|
||||
}
|
||||
|
||||
// rootMargin lädt schon kurz vor Erreichen des Sentinels nach (flüssiger und
|
||||
// robust gegen den Fall eines 0-hohen Sentinels exakt am Dokumentende).
|
||||
const observer = new IntersectionObserver(
|
||||
(items) => {
|
||||
if (items.some((i) => i.isIntersecting)) loadMore();
|
||||
},
|
||||
{ rootMargin: "300px" }
|
||||
);
|
||||
observer.observe(sentinelEl);
|
||||
|
||||
loadMore();
|
||||
return { reset };
|
||||
}
|
||||
-116
@@ -1,116 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
// Statistik-Seite: holt die Aggregate von /api/stats/detail und rendert Zahlen +
|
||||
// einfache CSS-Balken (keine Chart-Library, CSP-konform). Balkenbreiten werden
|
||||
// per CSSOM (el.style.width) gesetzt -> kein Inline-style-Attribut, daher von
|
||||
// der strikten CSP nicht betroffen.
|
||||
|
||||
function plural(n, one, many) {
|
||||
return `${n} ${n === 1 ? one : many}`;
|
||||
}
|
||||
|
||||
// numCard baut eine Kennzahl-Kachel: große Zahl + Beschriftung darunter.
|
||||
function numCard(value, label) {
|
||||
const cell = document.createElement("div");
|
||||
const num = document.createElement("span");
|
||||
num.className = "num";
|
||||
num.textContent = value;
|
||||
const cap = document.createElement("span");
|
||||
cap.className = "muted";
|
||||
cap.textContent = label;
|
||||
cell.append(num, cap);
|
||||
return cell;
|
||||
}
|
||||
|
||||
// renderBars zeichnet eine Liste {label, value} als horizontale Balken. Die
|
||||
// Breite ist relativ zum größten Wert.
|
||||
function renderBars(container, items, formatLabel) {
|
||||
container.textContent = "";
|
||||
if (items.length === 0) {
|
||||
const p = document.createElement("p");
|
||||
p.className = "muted";
|
||||
p.textContent = "Noch keine Daten.";
|
||||
container.append(p);
|
||||
return;
|
||||
}
|
||||
const max = Math.max(...items.map((it) => it.value), 1);
|
||||
// Wertespalte für alle Zeilen gleich breit: an der längsten Zahl ausrichten
|
||||
// (in ch), damit die Tracks bündig sind und nicht je nach Stellenzahl wandern.
|
||||
const valWidth = Math.max(...items.map((it) => String(it.value).length));
|
||||
for (const it of items) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "bar-row";
|
||||
|
||||
const label = document.createElement("span");
|
||||
label.className = "bar-label";
|
||||
label.textContent = formatLabel ? formatLabel(it.label) : it.label;
|
||||
|
||||
const track = document.createElement("div");
|
||||
track.className = "bar-track";
|
||||
const fill = document.createElement("div");
|
||||
fill.className = "bar-fill";
|
||||
fill.style.width = `${(it.value / max) * 100}%`;
|
||||
track.append(fill);
|
||||
|
||||
const val = document.createElement("span");
|
||||
val.className = "bar-value";
|
||||
val.style.width = `${valWidth}ch`;
|
||||
val.textContent = it.value;
|
||||
|
||||
row.append(label, track, val);
|
||||
container.append(row);
|
||||
}
|
||||
}
|
||||
|
||||
async function render() {
|
||||
const res = await api.get("/stats/detail");
|
||||
if (!res.ok) {
|
||||
const p = document.createElement("p");
|
||||
p.className = "msg";
|
||||
p.textContent = errMsg(res.data, "Statistik konnte nicht geladen werden.");
|
||||
document.getElementById("stat-overview").append(p);
|
||||
return;
|
||||
}
|
||||
const s = res.data;
|
||||
|
||||
// --- Auf einen Blick ---
|
||||
const overview = document.getElementById("stat-overview");
|
||||
overview.append(
|
||||
numCard(s.users ?? 0, s.users === 1 ? "Profil" : "Profile"),
|
||||
numCard(s.entries ?? 0, "Beiträge"),
|
||||
numCard(s.toplevel ?? 0, "davon Threads"),
|
||||
numCard(s.replies ?? 0, "davon Antworten"),
|
||||
numCard(s.votes?.left ?? 0, "Stimmen Links"),
|
||||
numCard(s.votes?.right ?? 0, "Stimmen Rechts"),
|
||||
);
|
||||
|
||||
// --- Reichweite ---
|
||||
document.getElementById("stat-reach").append(
|
||||
numCard(s.impressions_total ?? 0, "Aufrufe gesamt"),
|
||||
numCard(s.visitors_total ?? 0, "Netze gesamt"),
|
||||
);
|
||||
|
||||
// --- Netze nach Betreiber (ASN) ---
|
||||
renderBars(
|
||||
document.getElementById("stat-asns"),
|
||||
(s.top_asns ?? []).map((a) => ({ label: a.asn, value: a.hits })),
|
||||
);
|
||||
|
||||
// --- Aufrufe pro Tag (Backend liefert absteigend -> für die Achse drehen) ---
|
||||
const daily = (s.daily ?? []).slice().reverse();
|
||||
const dayAxis = (day) => day.slice(5); // "MM-DD" reicht auf der Achse
|
||||
renderBars(
|
||||
document.getElementById("stat-daily"),
|
||||
daily.map((d) => ({ label: d.day, value: d.impressions })),
|
||||
dayAxis,
|
||||
);
|
||||
|
||||
// --- Verschiedene Netze pro Tag ---
|
||||
renderBars(
|
||||
document.getElementById("stat-networks"),
|
||||
daily.map((d) => ({ label: d.day, value: d.visitors })),
|
||||
dayAxis,
|
||||
);
|
||||
}
|
||||
|
||||
render();
|
||||
@@ -1,69 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
// Nutzername aus dem Pfad /u/<name>.
|
||||
const username = decodeURIComponent(location.pathname.split("/")[2] || "");
|
||||
|
||||
document.getElementById("rename-form").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const res = await api.post("/user/rename", new FormData(e.target));
|
||||
if (res.ok) {
|
||||
location.href = `/u/${encodeURIComponent(res.data.username)}`;
|
||||
} else {
|
||||
document.getElementById("rename-msg").textContent =
|
||||
errMsg(res.data, "Umbenennen fehlgeschlagen.");
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("avatar-form").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const res = await api.post("/user/avatar", new FormData(e.target));
|
||||
if (res.ok) {
|
||||
// Cache umgehen, damit das neue Bild sofort erscheint.
|
||||
document.getElementById("profile-avatar").src = `${avatarUrl(res.data.avatar)}?t=${Date.now()}`;
|
||||
e.target.reset();
|
||||
document.getElementById("avatar-msg").textContent = "";
|
||||
} else {
|
||||
document.getElementById("avatar-msg").textContent =
|
||||
errMsg(res.data, "Hochladen fehlgeschlagen.");
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("delete-form").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
if (!confirm("Konto wirklich unwiderruflich löschen?")) return;
|
||||
const res = await api.post("/user/delete", new FormData(e.target));
|
||||
if (res.ok) {
|
||||
location.href = "/";
|
||||
} else {
|
||||
document.getElementById("delete-msg").textContent =
|
||||
errMsg(res.data, "Löschen fehlgeschlagen.");
|
||||
}
|
||||
});
|
||||
|
||||
async function init() {
|
||||
const res = await api.get(`/u/${encodeURIComponent(username)}/info`);
|
||||
if (!res.ok) {
|
||||
document.getElementById("profile-name").textContent =
|
||||
errMsg(res.data, "Profil konnte nicht geladen werden.");
|
||||
return;
|
||||
}
|
||||
const info = res.data;
|
||||
|
||||
document.getElementById("profile-name").textContent = info.username;
|
||||
document.getElementById("profile-avatar").src = avatarUrl(info.avatar);
|
||||
const since = new Date(info.created_at * 1000).toLocaleDateString("de-DE");
|
||||
document.getElementById("profile-info").textContent = `Mitglied seit ${since}`;
|
||||
|
||||
// Eigene Seite? -> Einstellungen einblenden.
|
||||
const me = await api.get("/user/info");
|
||||
const isOwner = me.ok && me.data.username === info.username;
|
||||
document.getElementById("settings").hidden = !isOwner;
|
||||
|
||||
createFeed(
|
||||
document.getElementById("feed"),
|
||||
document.getElementById("sentinel"),
|
||||
(page) => `/u/${encodeURIComponent(username)}/feed/${page}`
|
||||
);
|
||||
}
|
||||
|
||||
init();
|
||||
@@ -1,52 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Statistik – Kontrollverlust</title>
|
||||
<link rel="stylesheet" href="/css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav id="legal">
|
||||
<a href="/static/docs/impressum.html">Impressum</a> -
|
||||
<a href="/static/docs/datenschutz.html">Datenschutz</a> -
|
||||
<a href="/static/docs/beitragsordnung.html">Beitragsordnung</a> -
|
||||
<a href="/stats.html">Statistik</a>
|
||||
</nav>
|
||||
<a href="/"><h1>Kontrollverlust</h1></a>
|
||||
<div id="headerbar"><a class="button" href="/">zurück zum Feed</a></div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h2>Statistik</h2>
|
||||
|
||||
<h3>Auf einen Blick</h3>
|
||||
<div id="stat-overview" class="statgrid"></div>
|
||||
|
||||
<h3>Reichweite</h3>
|
||||
<p class="muted">
|
||||
Seitenaufrufe werden mit anonymisierten Netzen gezählt (IPv4 /16, IPv6 /32).
|
||||
„Netze" ist eine grobe Annäherung an Besucher, keine Personenzählung.
|
||||
</p>
|
||||
<div id="stat-reach" class="statgrid"></div>
|
||||
|
||||
<h3>Netze nach Betreiber</h3>
|
||||
<p class="muted">
|
||||
Aufrufe je autonomem System (Netzbetreiber), aufgelöst über GeoLite2-ASN.
|
||||
</p>
|
||||
<div id="stat-asns" class="bars"></div>
|
||||
|
||||
<h3>Aufrufe pro Tag</h3>
|
||||
<div id="stat-daily" class="bars"></div>
|
||||
|
||||
<h3>Verschiedene Netze pro Tag</h3>
|
||||
<div id="stat-networks" class="bars"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="/js/feed.js"></script>
|
||||
<script src="/js/stats.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,69 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kontrollverlust</title>
|
||||
<link rel="stylesheet" href="/css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav id="legal">
|
||||
<a href="/static/docs/impressum.html">Impressum</a> -
|
||||
<a href="/static/docs/datenschutz.html">Datenschutz</a> -
|
||||
<a href="/static/docs/beitragsordnung.html">Beitragsordnung</a> -
|
||||
<a href="/stats.html">Statistik</a>
|
||||
</nav>
|
||||
<a href="/"><h1>Kontrollverlust</h1></a>
|
||||
<div id="headerbar"><a class="button" href="/">zurück zum Feed</a></div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="profile">
|
||||
<div class="profile-head">
|
||||
<img id="profile-avatar" class="avatar avatar-lg" src="/static/assets/no_profile_pic.jpg" alt="">
|
||||
<div>
|
||||
<h2 id="profile-name"></h2>
|
||||
<p id="profile-info" class="muted"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nur für den Eigentümer sichtbar -->
|
||||
<div id="settings" hidden>
|
||||
<h2>Einstellungen</h2>
|
||||
<details>
|
||||
<summary>Profilbild ändern</summary>
|
||||
<form id="avatar-form">
|
||||
<input name="avatar" type="file" accept="image/*">
|
||||
<button type="submit">Bild hochladen</button>
|
||||
</form>
|
||||
<p class="msg" id="avatar-msg"></p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Name ändern</summary>
|
||||
<form id="rename-form">
|
||||
<input name="user" type="text" placeholder="Neuer Nutzername" autocomplete="username">
|
||||
<button type="submit">Namen ändern</button>
|
||||
</form>
|
||||
<p class="msg" id="rename-msg"></p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Konto löschen</summary>
|
||||
<form id="delete-form">
|
||||
<p class="muted">Löscht dein Konto samt Beiträgen und Votes unwiderruflich.</p>
|
||||
<input name="pass1" type="password" placeholder="Passwort bestätigen" autocomplete="current-password">
|
||||
<button type="submit">Konto endgültig löschen</button>
|
||||
</form>
|
||||
<p class="msg" id="delete-msg"></p>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div id="feed"></div>
|
||||
<div id="sentinel"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="/js/feed.js"></script>
|
||||
<script src="/js/user.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user