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

This commit is contained in:
2026-04-22 19:13:11 +02:00
parent 63b1c563c1
commit 6224a25c38
3 changed files with 127 additions and 33 deletions

View File

@@ -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>

View File

@@ -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

View File

@@ -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
---
::