# Type Structure

## Übersicht

Die Typen sind in zwei Kategorien aufgeteilt:

### 1. CMS-Typen (`types/cms/`)
**Zweck:** Struktur, wie Daten vom CMS (Contentful) kommen

- `*Skeleton` - Wrapper mit `contentTypeId` und `fields`
- Verwendet `ComponentLayout` (ist jetzt ein Alias für `contentLayout`)
- Beispiel: `ComponentHeadlineSkeleton`, `HTMLSkeleton`, `MarkdownSkeleton`

**Verwendung:** Nur im Mapper (`mappers/pageMapper.ts`) und Mock-Daten (`adapters/Mock/_cms/`)

**Dateien:**
- `Headline.ts`, `Html.ts`, `Markdown.ts`, `Iframe.ts`, `ImageGallery.ts`, `Image.ts`, `Quote.ts`, `YoutubeVideo.ts`
- `Page.ts`, `Navigation.ts`, `SEO.ts`, `FullwidthBanner.ts`
- `Layout.ts` - `ComponentLayout` (Alias für `contentLayout`)
- `ContentType.enum.ts` - Enum für alle Content-Typen

### 2. Domain-Typen (`types/c_*.ts`, `types/page.ts`, etc.)
**Zweck:** Struktur, wie Daten in der App verwendet werden

- `c_*` - Content-Item-Typen mit `type`-Feld für Discriminated Union
- Verwendet `contentLayout` direkt
- Beispiel: `c_headline`, `c_html`, `c_markdown`, `c_iframe`, `c_imageGallery`, `c_image`, `c_quote`, `c_youtubeVideo`

**Verwendung:** Überall in der App (GraphQL Schema, Astro Components, etc.)

**Dateien:**
- `c_*.ts` - Alle Content-Item-Typen
- `page.ts` - Page-Typ mit `ContentItem` Union und `ContentRow`
- `contentLayout.ts` - Einheitlicher Layout-Typ
- `pageSeo.ts`, `navigation.ts`, `product.ts`, `user.ts` - Weitere Domain-Typen

## Mapping

Der `PageMapper` konvertiert von CMS-Typen zu Domain-Typen:

```typescript
// Beispiel: Headline
CMS: ComponentHeadlineSkeleton {
  contentTypeId: ContentType.headline,
  fields: {
    internal: string,
    text: string,
    tag: "h1" | "h2" | ...,
    align?: "left" | "center" | "right",
    layout: ComponentLayout
  }
}
↓ (PageMapper.mapContentItem)
Domain: c_headline {
  type: "headline",
  internal: string,
  text: string,
  tag: "h1" | "h2" | ...,
  align?: "left" | "center" | "right",
  layout: contentLayout
}
```

## Layout-Typen

- `ComponentLayout` (in `types/cms/Layout.ts`) = Alias für `contentLayout`
- `contentLayout` (in `types/contentLayout.ts`) = Einheitlicher Layout-Typ für alle Content-Items

**Struktur:**
```typescript
{
  mobile: string;        // z.B. "12", "6", "4"
  tablet?: string;       // Optional, z.B. "8", "6"
  desktop?: string;      // Optional, z.B. "6", "4"
  spaceBottom?: number;  // Optional, z.B. 0, 0.5, 1, 1.5, 2
}
```

**Warum:** Redundanz vermeiden - beide haben die gleiche Struktur. `ComponentLayout` ist nur ein Alias, um die Semantik klar zu machen (CMS vs Domain).

## Content-Items Union

Alle Content-Items werden in `types/page.ts` zu einer Union zusammengefasst:

```typescript
export type ContentItem =
  | c_html
  | c_markdown
  | c_iframe
  | c_imageGallery
  | c_image
  | c_quote
  | c_youtubeVideo
  | c_headline;
```

Dies ermöglicht Type-Safe Discriminated Unions über das `type`-Feld.