Catalog – Item-Verwaltung

Der Catalog ist das Herzstück von Art.Works! Studio. Hier organisierst du alle deine Artworks, Assets und Projekte.

Konzept

Jedes Item im Catalog hat:

  • Sidecar-Datei – Metadaten als JSON
  • Artwork-Ordner – Dein Creative Code
  • Attachments – Zusätzliche Dateien
  • Snapshots – Gespeicherte Zustände

Verzeichnisstruktur

workspace/catalog/items/
├── item-001/
│   ├── sidecar.json         # Metadaten
│   ├── Artwork/             # Creative Code
│   │   ├── package.json
│   │   ├── src/
│   │   └── dist/
│   ├── Attachments/         # PDFs, Bilder, etc.
│   └── Snapshots/           # Gespeicherte States
├── item-002/
└── ...

Items erstellen

Via UI

  1. Klicke auf + Neu in der Toolbar
  2. Wähle Template (Blank, Particles, Grid, etc.)
  3. Gib Namen und Labels ein
  4. Klicke Erstellen

Via CLI

npm run create:artwork -- --name "Mein Artwork" --template particles

Sidecar-Datei

Die sidecar.json enthält alle Metadaten:

{
  "id": "item-001",
  "name": "Entities",
  "alias": "entities-001",
  "type": "cc-artwork",
  "labels": ["generative", "particles"],
  "tags": ["animation", "interactive"],
  "created": "2024-01-15T10:30:00Z",
  "modified": "2024-06-20T14:22:00Z",
  "description": "Agent-basiertes Partikelsystem",
  "thumbnail": "Snapshots/thumb.png"
}

Labels & Tags

Konzept Zweck Beispiele
Labels Kategorisierung generative, plotter, interactive
Tags Freie Schlagworte animation, p5js, wip

Filter verwenden

// Nach Labels filtern
const filtered = items.filter(item => 
  item.labels.includes('generative')
);

// Nach Tags suchen
const tagged = items.filter(item =>
  item.tags.some(tag => tag.includes('animation'))
);

Aliases

Aliases ermöglichen lesbare URLs:

ID Alias
item-001 entities-001
item-002 particles-wind

Mapping in index.json:

{
  "aliases": {
    "entities-001": "item-001",
    "particles-wind": "item-002"
  }
}

Nummernkreis

IDs werden automatisch vergeben:

item-001, item-002, item-003, ...

Der NummernkreisManager verwaltet die Sequenz und vermeidet Konflikte.

Import / Export

Export

# Als ZIP exportieren
npm run export:item -- item-001 --output ./exports/

Import

# ZIP importieren
npm run import:item -- ./exports/item-001.zip