Gestalte Docs-Landing und Header im Nuxt-UI-Template-Stil

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>

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

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
+#links
-- Nachvollziehbare Versionierung der Doku
+  :::u-button
-- Einfache Aktualisierung bei Funktionsänderungen
+  ---
+  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
+#default
-- `docs/funktionen/backend-api.md`: Automatisch erzeugte API-Funktionsliste
+  :::prose-pre
-- `docs/funktionen/frontend-web.md`: Automatisch erzeugte Seiten-/Funktionsliste des Web-Frontends
+  ---
-- `docs/funktionen/mobile-app.md`: Automatisch erzeugte Screens-/Funktionsliste der Mobile-App
+  code: |
-- `docs/versionen/docs-versionen.md`: Versionierung der Dokumentation
+    node docs/scripts/sync-funktionsdoku.mjs
-- `docs/wartung/dokumentationsprozess.md`: Prozess, damit die Doku dauerhaft aktuell bleibt
+  filename: docs-sync.sh
-- `docs/scripts/sync-funktionsdoku.mjs`: Skript zur automatischen Aktualisierung
+  ---
 
-## 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
+#features
-node docs/scripts/sync-funktionsdoku.mjs
+  :::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
+  :::u-page-feature
-2. Falls nötig fachliche Texte in `docs/funktionen/uebersicht.md` ergänzen
+  ---
-3. Eintrag in `docs/versionen/docs-versionen.md` ergänzen
+  icon: i-lucide-shield-check
-4. Alles gemeinsam committen
+  ---
+  #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)
+  #description
-2. Navigation anhand der Ordner `funktionen`, `wartung`, `versionen` aufbauen
+  Änderungen an der Dokumentation sind nachvollziehbar versioniert.
-3. `backend-api.md`, `frontend-web.md`, `mobile-app.md` als referenzierende Funktionskataloge einbinden
+  :::
+::
 
-## Hinweis
+::u-page-section{class="dark:bg-gradient-to-b from-neutral-950 to-neutral-900"}
-
+  :::u-page-c-t-a
-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.
+  ---
+  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
+  ---
+::