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, 5 Slides
Post 2 · Statement	index.html	Einzelbild

Oben im Bedienfeld wechselt man zwischen ihnen. Jedes 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-alt.json  Post 1 · Alt
state/post2.json      Post 2 · Statement

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.