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	Übergabe
Post 1 · Lösung	post1.html	Carousel, Anzahl frei
Post 2 · Die Geschichte	post2.html	Carousel, 6 Slides, erscheint 12.08.	POST-2.md
Post 2 · Alternative	post2-alt.html	Derselbe Beitrag im Theme modern
Post 3 · Verbinden statt ersetzen	post3.html	Einzelbild, Theme modern, erscheint 17.08.

Alle Streifen nebeneinander zeigt uebersicht.html, erreichbar über Projekt → Alle Projekte im Streifen. Die Seite baut die Slides nicht selbst nach: jedes Projekt kommt als iframe mit ?nur=streifen, und in diesem Modus blendet die Post-Seite ihre Bedienoberfläche aus, zeigt den Streifen in natürlicher Größe und speichert nichts — drei Kacheln, die beim Schließen ihren Stand zurückschreiben, wären genau die Falle aus POST-2.md §6. Jeder Streifen ist auf die Fensterbreite eingepasst, gescrollt wird nur hoch und runter — kein Zoom, weder außen noch im Streifen.

Post 2 gibt es zweimal, in zwei Themes. Projekt und Theme sind zwei verschiedene Dinge: das Projekt sagt, welcher Beitrag, das Theme, wie er aussieht. notebook ist die Zeichenblock-Optik mit Raster und Marker, modern der ruhige Grund mit farbigem Akzentwort und schwebenden Karten. Beide zeigen denselben Beitrag mit denselben Texten.

Die Themes stehen in rules.md §1a mit ihren Unterschieden. Wer eine Visualisierung ändert, muss an beide Dateien denken.

Post 3 ist ein Einzelbild, keine Slidefolge: eine Haltung, die man durchwischen muss, ist keine. Sein Bild ist das Wabenfeld der Startseite, nachgebaut aus HoneycombSection.tsx — dieselbe Achsrechnung, dieselben Zellnummern, dieselbe Belegung, damit es wiedererkennbar bleibt und keine Anmutung davon ist. Die vier Waben „In Arbeit" fehlen: auf der Startseite sind sie ein Versprechen, im Beitrag wären sie ein Eingeständnis.

Die vierzehn Partner-Marken liegen unter assets/partner/ und sind, wie alles andere hier, aus der Website gespiegelt statt verlinkt. Sechs davon sind PNG und damit dieselbe Wette wie ein Screenshot (§7 in rules.md), deshalb prüft der Export sie einzeln nach — wabenZonen() in post3.html.

Der Redaktionsplan für alle weiteren Beiträge liegt in redaktionsplan/, gebaut mit python3 redaktionsplan/bauen.py.

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: hidden auf .badge). Der eingetippte Tag beschriftet deshalb vorerst nur den Slide-Knopf im Bedienfeld.

Eigene Bilder importieren

Unter Eigene Bilder wählst du Dateien aus dem Finder, oder du ziehst sie direkt auf eine Slide. Beim Ablegen wird das Bild dort zum zweiten Bild und lässt sich im Bearbeiten-Modus frei schieben und in der Größe ändern; über den Knopf importierst du nur und ordnest danach unter Inhalt zu.

Die Datei geht byteweise unverändert an den Server und liegt danach unter assets/eigene/. Nichts wird neu kodiert, skaliert oder umbenannt — nur Zeichen, die in einem Dateinamen nichts zu suchen haben, weichen einem Bindestrich.

assets/eigene/    importierte Bilder, gehören mit in den Commit

Der Umweg über den Server ist Absicht. Ein Foto als Base64 im Projektstand wäre größer als der gesamte übrige Stand und machte jeden Diff unlesbar. So steht dort nur der Pfad.

Die Auswahllisten unter Inhalt holt der Generator beim Start vom Server (/bilder), importierte Bilder stehen deshalb sofort darin — mit ★ gekennzeichnet.

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 und mit den Pfeiltasten pixelweise schieben (⇧ = 10 px).

Ein angeklicktes Element öffnet sein eigenes Feld rechts. Damit ist die Oberfläche geteilt: links die Slide und alles Allgemeine, rechts das eine Element.

Im Element-Feld	Wirkung
Text	Beschriftung des Elements, *Wort* setzt den Akzent
Schrift / Breite, A− A+	Größe
X Y	Stelle auf der Slide, gezählt ab der Mitte, bezogen auf die obere linke Ecke
Ebene	wie z-index — höher liegt weiter vorn. Leer heißt Standard
Links Mitte Rechts, Oben Mitte Unten	an der Slide ausrichten, 92 px Rand
Position / Größe angleichen	denselben Wert auf allen Slides
Löschen	nimmt es aus der Slide. Es taucht darunter als „… zurück" wieder auf

Der Streifen ist eine durchgehende Fläche. Jede Slide trägt das gesamte Blatt, ein Element lässt sich also über den ganzen Post schieben und nicht nur in die Nachbar-Slide.

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/    die 14 Marken des Wabenfelds (DATEV, KWP, pds, Bauhow, Aircall,
│              Onepage, PandaDoc, Hallo Petra, Claude, OpenAI, Google Drive,
│              Google Calendar, MS Outlook, MS Teams)
├── mockups/    Geräte-Mockups (Displays ausgeknockt, Screenshot liegt dahinter)
├── screens/    Software-Screenshots
├── eigene/     selbst importierte Bilder
└── fonts/      Manrope 400–800, lokal
vendor/         html-to-image, JSZip
state/          Projektstände, gehören ins Repo
serve.py        Statischer Server + /save, /state, /upload, /bilder
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.