Einbau-Skript news.js für Kundenwebsites

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-30 17:16:37 +00:00
1 parent 5a09d060a1
commit 035d1d5517
@@ -0,0 +1,63 @@
+# News-Pinnwand auf der Kundenwebsite einbauen
+
+Anleitung für das WEBklar-Team. Die Pinnwand zeigt die Beiträge, die der Kunde im Portal (Tab „Funktionen“) schreibt. Den `siteKey` findest Du im Portal-Admin beim Projekt (16 Zeichen, a–z und 2–7).
+
+## 1. Die Stelle auf der Seite
+
+```html
+<div data-webklar-news="SITEKEY" data-api="https://project.webklar.com">
+  <!-- statischer Leerzustand, siehe unten -->
+</div>
+```
+
+- `data-webklar-news`: der siteKey des Projekts (Pflicht).
+- `data-api`: Herkunft des Portals. Ohne Angabe nimmt das Skript die Herkunft aus der Adresse des Skripts.
+- `data-signature` (optional): Unterschrift unter jedem Zettel, z. B. `data-signature="Opa Martin"`. Ohne Attribut gibt es keine Unterschrift.
+
+## 2. Das Skript (einmal pro Seite, vor `</body>`)
+
+```html
+<script src="https://project.webklar.com/embed/news.js" defer></script>
+```
+
+Keine Abhängigkeiten, keine Cookies, kein Browser-Speicher. Kundentexte werden nur als Text eingesetzt, nie als HTML. Das Skript wird 5 Minuten gecacht und darf von jeder Domain geladen werden.
+
+## 3. Statischer Leerzustand
+
+Alles, was im `div` steht, gehört der Kundenwebsite. Das Skript ersetzt es nur, wenn die API mindestens einen Beitrag liefert. Bei 0 Beiträgen, Fehler, ausgeschaltetem JavaScript oder unbekanntem Schlüssel bleibt es stehen. Beispiel:
+
+```html
+<div data-webklar-news="SITEKEY" data-api="https://project.webklar.com">
+  <h3>Hier hängt bald was Neues.</h3>
+  <p>Neuigkeiten findest Du bald an dieser Pinnwand.</p>
+</div>
+```
+
+Gestalte den Leerzustand im Stil der Kundenseite. Das Skript fasst ihn nicht an.
+
+## 4. Aussehen anpassen (CSS-Variablen)
+
+Setze sie auf dem `div` oder in der Seiten-CSS, z. B. `[data-webklar-news]{ --wkn-frame:#2f5d50; }`.
+
+| Variable | Standard |
+| --- | --- |
+| `--wkn-board` (Korkfläche) | `#C08A52` |
+| `--wkn-frame` (Holzrahmen) | `#A8733F` |
+| `--wkn-font-display` (Überschriften) | `"Fredoka", system-ui, sans-serif` |
+| `--wkn-font-body` (Text) | `"Nunito", system-ui, sans-serif` |
+| `--wkn-paper-sun` | `#FFF6D6` |
+| `--wkn-paper-sky` | `#DDEEFB` |
+| `--wkn-paper-coral` | `#FFE1DA` |
+| `--wkn-paper-white` | `#fff` |
+
+Die Schriften lädt das Skript nicht selbst. Sind sie auf der Kundenseite nicht eingebunden, greift die Systemschrift. Setze dann die Variablen auf die Schriften der Kundenseite.
+
+Das Layout richtet sich nach der Breite des `div` (Container Query), nicht nach dem Bildschirm: ab 701 px Breite ein Korkbrett mit drei Spalten, darunter eine Wischreihe mit Punkten. Sechs Beiträge pro Seite, „Ältere Neuigkeiten ansehen“ lädt die nächsten nach. Alle Klassen beginnen mit `wkn-`, die Styles stehen einmalig in `<style id="wkn-style">`.
+
+## 5. Datenschutzerklärung des Kunden
+
+Das Skript lädt Beiträge und Bilder von `project.webklar.com`. Dabei sieht der Server die IP-Adresse des Besuchers. Die Datenschutzerklärung des Kunden braucht deshalb den Absatz aus `docs/funktionen/website-datenschutz-absatz.md`. Bau die Pinnwand erst ein, wenn der Absatz dort steht.
+
+## 6. Testen
+
+`/embed/news-demo.html` auf dem Portal ist eine nicht verlinkte Testseite. Automatische Prüfung: `node test/ui/embed.ui.mjs`.