dejanandClaude Opus 5
1cce5ec492
Wie viele Slides ein Post hat, stand bisher im Code. SLIDES war ein festes Array, der Stand speicherte nur Einstellungen dazu, und die durchgehende Flaeche lag als 5400 px in der CSS. Jetzt entsteht SLIDES aus einem Deck. Jeder Eintrag ist entweder eine mitgelieferte Vorlage (ref) oder eine selbst angelegte Slide; eigene Texte liegen als Ueberschreibung daneben. Fuer Vorlagen wandert damit nur ein Verweis in den Stand, keine Kopie -- eine Aenderung an der Vorlage im Code kommt weiterhin bei allen an, die sie nicht angefasst haben. Haette man die Slides vollstaendig in den Stand geschrieben, waeren sie dort eingefroren. Unter der Slide-Auswahl stehen vier Knoepfe: neu, kopieren, loeschen, verschieben. Die Felder pro Slide (Verschiebungen, Muster, Layout) wandern im Gleichschritt mit. Bleibt eine einzige Slide uebrig, ist der Post ein Einzelbild: die Kopfzeile sagt es und der ZIP-Knopf verschwindet. Neu ist die Gruppe "Inhalt (nur diese Slide)" mit Tag, Ueberschrift, Fließtext und der Auswahl des Screenshots. Getippt wird Text, nicht Auszeichnung: *Wort* setzt den Akzent, ein Zeilenumbruch bricht die Zeile um. Gespeichert wird trotzdem fertiges Markup, weil die Vorlagen es so mitbringen. Beim Bildwechsel folgt das Rahmenformat dem Seitenverhaeltnis der Aufnahme, sonst stuende ein Hochformat in einem Querformat-Rahmen. Alle Screens werden vorgeladen, nicht nur die gerade benutzten -- ein Bild, das erst beim Auswaehlen geladen wuerde, fehlte im Export. Der Stand steht auf v6. Ein Stand ohne Deck stammt aus der Zeit fester fuenf Slides und behaelt die Vorlagen. Dabei abgesichert: Der Tastaturschutz rief e.target.matches auf. Ist nichts fokussiert, ist das Ziel das Dokument und hat kein matches. Seit der Neuaufbau den zuletzt fokussierten Knopf entfernt, ist das erreichbar. Geprueft mit 17 Faellen ueber das DevTools-Protokoll: anlegen, tippen, Screenshot tauschen, kopieren, schieben, loeschen, Neustart. Dazu ein Export einer selbst angelegten Slide und der volle Durchlauf der bestehenden elf. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
4.6 KiB
HiveGrid Social — Design-Library & Post-Generator
Eigenständige Werkbank für HiveGrid-Social-Grafiken. Slides werden im Browser als HTML gebaut, im Canvas bearbeitet und pixelgenau als Instagram-taugliche PNGs exportiert.
Das Repo ist bewusst autark. Keine CDN-Verweise, keine Google-Fonts zur Laufzeit, keine Pfade in andere Repos. Alles, was ein Post braucht — Schrift, Logos, Mockups, Screenshots, Bibliotheken — liegt hier.
Starten
./serve.sh # http://127.0.0.1:4321
Downloads landen direkt in ~/Downloads, ohne Browser-Dialog.
Projekte
| Projekt | Datei | Inhalt |
|---|---|---|
| Post 1 · Lösung | post1.html |
Carousel, Anzahl frei |
Slides anlegen und wegnehmen
Wie viele Slides ein Post hat, steht nicht fest. Unter der Slide-Auswahl:
| Knopf | Wirkung |
|---|---|
+ Neu |
leere Slide dahinter einfügen |
Kopie |
die gewählte Slide samt Text, Bild und Verschiebungen verdoppeln |
Löschen |
die gewählte Slide wegnehmen (die letzte bleibt stehen) |
← → |
eine Position nach vorn oder hinten |
Bei einer einzigen Slide ist der Post ein Einzelbild — die Kopfzeile sagt es, und der ZIP-Knopf verschwindet.
Unter Inhalt (nur diese Slide) stehen Tag, Überschrift, Fließtext und die
Auswahl des Screenshots. Getippt wird Text, keine Auszeichnung: *Wort* setzt
den Akzent, ein Zeilenumbruch bricht die Zeile um. Das Rahmenformat folgt beim
Wechsel automatisch dem Seitenverhältnis der gewählten Aufnahme.
Die Tags sind gestalterisch ausgeblendet (
visibility: hiddenauf.badge). Der eingetippte Tag beschriftet deshalb vorerst nur den Slide-Knopf im Bedienfeld.
Mitgelieferte Slides bleiben Vorlagen. Der Stand speichert für sie nur einen Verweis und die Felder, die du überschrieben hast — eine Änderung an der Vorlage im Code kommt dadurch weiterhin bei allen an, die sie nicht angefasst haben. Selbst angelegte Slides stehen vollständig im Stand.
Das Projekt speichert seinen Stand — Einstellungen, Layouts, Muster und alle Verschiebungen aus dem Canvas überleben einen Reload. „Projekt zurücksetzen" wirft ihn weg.
Der Stand liegt im Repo
Nicht nur im Browser: jede Änderung landet auch in state/<projekt>.json.
Diese Dateien gehören mit in den Commit. Nur so hat die andere Maschine
nach git pull denselben Stand.
state/post1.json Post 1 · Lösung
state/post1-merk.json Rückfallpunkt
Beim Laden gewinnt die Datei, der localStorage ist nur der Rückfall, wenn der Server nicht läuft. Wer den Stand ändert, muss also committen und pushen — sonst sieht ihn niemand sonst. Gibt es die Datei noch nicht, wird der Stand aus dem Browser einmalig hineingeschrieben.
Bedienung
| Taste | Wirkung |
|---|---|
← → |
Slide wechseln (im Bearbeiten-Modus: Element verschieben) |
E |
Bearbeiten an/aus |
W |
Streifen ⇄ Einzelansicht |
V |
Variante hell/dunkel |
L M I |
Layout · Muster · Intensität |
C G T |
Durchgehend · Tag-Ausrückung · Perspektive |
D A |
Slide laden · alle als ZIP |
Im Bearbeiten-Modus lassen sich Elemente ziehen, mit den Pfeiltasten
pixelweise schieben (⇧ = 10 px) und über A−/A+ in der Größe ändern.
Auf der Fläche bewegen
| Maus | Wirkung |
|---|---|
| Ziehen | Ausschnitt schieben |
| Rad | Zoomen, auf den Zeiger zu |
⇧ + Rad |
Waagerecht schieben |
| Leertaste-Ziehen, mittlere Taste | Schieben, auch im Bearbeiten-Modus |
Ein gewöhnliches Mausrad genügt, ohne Zusatztaste. Im Bearbeiten-Modus zieht
die linke Taste das Element unter dem Zeiger — die Fläche schiebt man dort mit
gedrückter Leertaste oder der mittleren Taste. Fit unten rechts setzt den
Maßstab zurück.
Aufbau
assets/
├── brand/ Wortmarke hell/dunkel, G-Marke (SVG + PNG), Wabe, Geerkens
├── partner/ DATEV, KWP, Google Calendar, Google Drive, MS Outlook, MS Teams
├── mockups/ Geräte-Mockups (Displays ausgeknockt, Screenshot liegt dahinter)
├── screens/ Software-Screenshots
└── fonts/ Manrope 400–800, lokal
vendor/ html-to-image, JSZip
state/ Projektstände, gehören ins Repo
serve.py Statischer Server + /save- und /state-Endpunkt
rules.md Gestaltungsregeln, Farbwerte, Export-Wissen
Regeln
rules.md ist die Arbeitsgrundlage. Farbwerte, Geometrie, Typografie,
Layout-Template, Instagram-Export und die Liste der Fallen, in die wir schon
getappt sind. Vor jeder Änderung an der Gestaltung dort nachsehen.
Marken-Werte stammen aus der Website (HiveGrid-Website) und sind hier
gespiegelt, nicht verlinkt. Ändert sich dort etwas, muss es hier
nachgezogen werden.