dejanandClaude Opus 5
1359c6eba8
Der Stand hing am localStorage und damit an einem Rechner. Wer das Projekt woanders zog, sah einen anderen Stand. Jede Aenderung geht jetzt zusaetzlich in state/<projekt>.json, gebuendelt nach 600 ms. Beim Laden gewinnt die Datei, der localStorage ist nur noch der Rueckfall fuer den Fall, dass der Server nicht laeuft. Gibt es die Datei noch nicht, wird der vorhandene Browser-Stand einmalig hineingeschrieben. Ein Reload verschluckt nichts: was im Timer haengt, geht per sendBeacon raus. Der Server nimmt den Stand unter POST /state entgegen und loescht ihn unter DELETE /state. Der Projektname wird gegen ein enges Muster geprueft und der Zielpfad zusaetzlich gegen state/ gegengerechnet. Geschrieben wird erst in eine Nebendatei und dann umbenannt, eingerueckt und mit sortierten Schluesseln, damit git einen lesbaren Unterschied zeigt. state/*.json gehoeren ab jetzt in jeden Commit, sonst sieht die andere Maschine die Aenderung nicht. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
3.0 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, 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.
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.