From 6224a25c38b84264630925373f299f16f8af21c3 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Wed, 22 Apr 2026 19:13:11 +0200
Subject: [PATCH] Gestalte Docs-Landing und Header im Nuxt-UI-Template-Stil

---
 docs-site/app/components/PageHeaderLinks.vue |  23 ++++
 docs-site/app/pages/[...slug].vue            |  12 +-
 docs-site/content/index.md                   | 125 ++++++++++++++-----
 3 files changed, 127 insertions(+), 33 deletions(-)
 create mode 100644 docs-site/app/components/PageHeaderLinks.vue

diff --git a/docs-site/app/components/PageHeaderLinks.vue b/docs-site/app/components/PageHeaderLinks.vue
new file mode 100644
index 0000000..0bfd49f
--- /dev/null
+++ b/docs-site/app/components/PageHeaderLinks.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const repoBase = 'https://git.federspiel.tech/flfeders/FEDEO/src/branch/dev/docs'
+
+const sourceUrl = computed(() => {
+  if (route.path === '/') {
+    return `${repoBase}/README.md`
+  }
+  return `${repoBase}${route.path}.md`
+})
+</script>
+
+<template>
+  <UButton
+    color="neutral"
+    variant="outline"
+    icon="i-lucide-file-text"
+    label="Quelle"
+    :to="sourceUrl"
+    target="_blank"
+  />
+</template>
diff --git a/docs-site/app/pages/[...slug].vue b/docs-site/app/pages/[...slug].vue
index ad49719..87b02e3 100644
--- a/docs-site/app/pages/[...slug].vue
+++ b/docs-site/app/pages/[...slug].vue
@@ -44,7 +44,17 @@ const links = computed(() => {
       :title="page.title"
       :description="page.description"
       :headline="headline"
-    />
+    >
+      <template #links>
+        <UButton
+          v-for="(link, index) in page.links"
+          :key="index"
+          v-bind="link"
+        />
+
+        <PageHeaderLinks />
+      </template>
+    </UPageHeader>
 
     <UPageBody>
       <ContentRenderer
diff --git a/docs-site/content/index.md b/docs-site/content/index.md
index e3a802b..f9db0b9 100644
--- a/docs-site/content/index.md
+++ b/docs-site/content/index.md
@@ -1,46 +1,107 @@
-# FEDEO Funktionsdokumentation
+---
+seo:
+  title: FEDEO Dokumentation
+  description: Zentrale, versionierte Funktionsdokumentation für FEDEO.
+---
 
-Diese Dokumentation bildet alle Funktionen der Software zentral ab und ist für die Nutzung in der Nuxt-Content-Docs-Homepage vorbereitet.
+::u-page-hero{class="dark:bg-gradient-to-b from-neutral-900 to-neutral-950"}
+---
+orientation: horizontal
+---
+#title
+FEDEO [Dokumentation]{.text-primary}
 
-## Ziel
+#description
+Alle Funktionen von Backend, Web und Mobile an einem Ort. Versioniert, durchsuchbar und auf Basis von Nuxt UI + Nuxt Content aufgebaut.
 
-- Vollständige Übersicht über Funktionen in Backend, Web-Frontend und Mobile-App
-- Nachvollziehbare Versionierung der Doku
-- Einfache Aktualisierung bei Funktionsänderungen
+#links
+  :::u-button
+  ---
+  to: /funktionen
+  size: xl
+  trailing-icon: i-lucide-arrow-right
+  ---
+  Zu den Funktionen
+  :::
 
-## Struktur
+  :::u-button
+  ---
+  icon: i-simple-icons-github
+  color: neutral
+  variant: outline
+  size: xl
+  to: https://git.federspiel.tech/flfeders/FEDEO
+  target: _blank
+  ---
+  Repository öffnen
+  :::
 
-- `docs/funktionen/uebersicht.md`: Fachliche Gesamtübersicht der Bereiche
-- `docs/funktionen/backend-api.md`: Automatisch erzeugte API-Funktionsliste
-- `docs/funktionen/frontend-web.md`: Automatisch erzeugte Seiten-/Funktionsliste des Web-Frontends
-- `docs/funktionen/mobile-app.md`: Automatisch erzeugte Screens-/Funktionsliste der Mobile-App
-- `docs/versionen/docs-versionen.md`: Versionierung der Dokumentation
-- `docs/wartung/dokumentationsprozess.md`: Prozess, damit die Doku dauerhaft aktuell bleibt
-- `docs/scripts/sync-funktionsdoku.mjs`: Skript zur automatischen Aktualisierung
+#default
+  :::prose-pre
+  ---
+  code: |
+    node docs/scripts/sync-funktionsdoku.mjs
+  filename: docs-sync.sh
+  ---
 
-## Aktualisierung bei Funktionsänderungen
+  ```bash [docs-sync.sh]
+  node docs/scripts/sync-funktionsdoku.mjs
+  ```
+  :::
+::
 
-Bei jeder Funktionsänderung bitte ausführen:
+::u-page-section{class="dark:bg-neutral-950"}
+#title
+Struktur der Dokumentation
 
-```bash
-node docs/scripts/sync-funktionsdoku.mjs
-```
+#features
+  :::u-page-feature
+  ---
+  icon: i-lucide-layers
+  ---
+  #title
+  Funktionskatalog
 
-Danach:
+  #description
+  Technische Übersichten für Backend-API, Web-Frontend und Mobile-App.
+  :::
 
-1. Änderungen in `docs/funktionen/*.md` prüfen
-2. Falls nötig fachliche Texte in `docs/funktionen/uebersicht.md` ergänzen
-3. Eintrag in `docs/versionen/docs-versionen.md` ergänzen
-4. Alles gemeinsam committen
+  :::u-page-feature
+  ---
+  icon: i-lucide-shield-check
+  ---
+  #title
+  Wartungsprozess
 
-## Verwendung mit Nuxt Content
+  #description
+  Klarer Ablauf, damit Funktionsänderungen immer dokumentiert bleiben.
+  :::
 
-Empfohlene Vorgehensweise:
+  :::u-page-feature
+  ---
+  icon: i-lucide-git-branch
+  ---
+  #title
+  Versionierung
 
-1. `docs/` in das Content-Verzeichnis übernehmen (oder per Sync einbinden)
-2. Navigation anhand der Ordner `funktionen`, `wartung`, `versionen` aufbauen
-3. `backend-api.md`, `frontend-web.md`, `mobile-app.md` als referenzierende Funktionskataloge einbinden
+  #description
+  Änderungen an der Dokumentation sind nachvollziehbar versioniert.
+  :::
+::
 
-## Hinweis
-
-Die Dateien `backend-api.md`, `frontend-web.md` und `mobile-app.md` werden automatisch generiert. Manuelle Änderungen in diesen Dateien werden bei der nächsten Synchronisation überschrieben.
+::u-page-section{class="dark:bg-gradient-to-b from-neutral-950 to-neutral-900"}
+  :::u-page-c-t-a
+  ---
+  links:
+    - label: Funktionsübersicht öffnen
+      to: '/funktionen/uebersicht'
+      trailingIcon: i-lucide-arrow-right
+    - label: Versionshistorie
+      to: '/versionen/docs-versionen'
+      variant: subtle
+      icon: i-lucide-history
+  title: Bereit für die tägliche Doku-Arbeit?
+  description: Nutze die technische Übersicht für Änderungen und halte die Dokumentation mit einem festen Sync-Workflow aktuell.
+  class: dark:bg-neutral-950
+  ---
+::