website-and-documentation/LIKEC4-QUICKSTART.md

# LikeC4 Integration - Quick Start

Dieses Repository enthält jetzt die LikeC4-Architekturdokumentation aus edp-doc mit vollständiger Git-Historie.

## Was wurde gemacht?

1. ✅ **LikeC4-Modelle migriert** - `resources/likec4/` enthält alle C4-Modelle mit Git-Historie
2. ✅ **Hugo-Integration erstellt** - CSS, JS und Loader-Scripte für Hugo/Docsy
3. ✅ **Beispielseiten erstellt** - Dokumentation unter `content/en/docs/architecture/`
4. ✅ **Konfiguration** - `hugo.toml` und Layout-Hooks konfiguriert

## Nächste Schritte

### 1. Webcomponent generieren

```bash
cd resources/likec4

# Dependencies installieren (nur einmalig)
npm install

# Webcomponent generieren
npx likec4 codegen webcomponent \
  --webcomponent-prefix likec4 \
  --outfile ../../static/js/likec4-webcomponent.js
```

Dies erzeugt `static/js/likec4-webcomponent.js` (~2-3 MB).

### 2. Hugo Server starten

```bash
# Im Repository-Root
hugo server -D

# Öffne http://localhost:1313/docs/architecture/highlevelarch/
```

### 3. Änderungen committen

```bash
git add resources/likec4/
git add static/
git add layouts/
git add content/en/docs/architecture/
git add hugo.toml
git commit -m "feat: integrate LikeC4 architecture documentation from edp-doc"
```

## Verfügbare Seiten

- `/docs/architecture/` - Architektur-Übersicht
- `/docs/architecture/highlevelarch/` - High-Level Architektur mit interaktivem Diagramm
- `/docs/architecture/setup/` - Setup und Verwendungs-Anleitung

## Workflow für Architektur-Änderungen

1. **Modelle bearbeiten**: `.c4` Dateien in `resources/likec4/models/` oder `views/`
2. **Vorschau**: `cd resources/likec4 && npx likec4 start` (öffnet http://localhost:5173)
3. **Generieren**: Webcomponent neu generieren (siehe oben)
4. **Testen**: Hugo Server starten und Seiten prüfen
5. **Committen**: Sowohl `.c4` Dateien als auch `static/js/likec4-webcomponent.js`

## Technische Details

### Integration-Komponenten

- `resources/likec4/` - LikeC4 Quellcode (migriert mit Git-Historie)
- `static/js/likec4-loader.js` - Dynamischer Module Loader
- `static/css/likec4-styles.css` - Styling inkl. Dark Mode
- `layouts/partials/hooks/head-end.html` - Hugo Hook für JS/CSS Einbindung
- `hugo.toml` - Konfiguration (`params.likec4.enable = true`)

### Verwendung in Markdown

```html
<div class="likec4-container">
    <div class="likec4-header">
        Dein Diagramm-Titel
    </div>
    <likec4-view view-id="otc-faas" browser="true"></likec4-view>
    <div class="likec4-loading" id="likec4-loading">
        Loading...
    </div>
</div>
```

### Verfügbare View-IDs finden

```bash
cd resources/likec4
grep -r "view\s\+\w" views/ models/ --include="*.c4"
```

## Häufige View-IDs

- `otc-faas` - OTC FaaS Deployment
- `edp` - EDP Übersicht
- `landscape` - Developer Landscape
- `edpbuilderworkflow` - Builder Workflow
- `keycloak`, `forgejo`, `argoCD`, etc. - Komponenten-Views

## Migration von edp-doc

Dieses Repository ist jetzt die primäre Quelle für LikeC4-Architektur. Das edp-doc Repository kann diese Modelle bei Bedarf als Git Submodule referenzieren.

## Support

Bei Problemen siehe:
- `resources/likec4/INTEGRATION.md` - Detaillierte Integration-Dokumentation
- `content/en/docs/architecture/setup.md` - Setup-Anleitung
- https://likec4.dev/ - LikeC4 Dokumentation