title:Dokumentationen rund um das Föderale Entwicklungsportal
title:Dokumentationen rund um das Föderale Entwicklungsportal
---
---
**Willkommen im Wiki des Föderalen Entwicklungsportals!**
Beim Föderalen Entwicklungsportal (FEP) handelt es sich um ein Verzeichnis von **Ressourcen** und **FIT-Standards**.
**Willkommen im Wiki des Föderalen Entwicklungsportals!**
# Inhaltsverzeichnis
Diese Seite bietet einen thematisch geordneten Überblick über die vorhandenen Dokumente.
\[\[\_toc\_\]\]
# Seiten
Hier zunächst ein Überblick über die **Seiten**:
## pages Verzeichnis
### Top-Level Pages (Verzeichnis `pages`)
1.**\_app.tsx**: Die Haupt-App-Komponente ([`App`](pages/_app.tsx:7)), die alle Seiten umschließt, das globale Layout ([`Layout`](components/layout.tsx:9)) einrichtet und einen PlausibleProvider für Webanalyse ([`PlausibleProvider`](pages/_app.tsx:10)) integriert.
2.**\_document.tsx**: Passt die `Document`-Komponente von Next.js an ([`CustomizedDocument`](pages/_document.tsx:25)), um das `lang`-Attribut im `<html>`-Tag basierend auf der aktuellen Sprache zu setzen und das Favicon ([`Favicon`](components/Favicon.tsx:42)) einzubinden.
3.**404.tsx**: Definiert die benutzerdefinierte 404-Fehlerseite ([`NotFound`](pages/404.tsx:9)) der Anwendung, die eine "Seite nicht gefunden"-Nachricht und Links zu anderen Bereichen der Website anzeigt.
4.**index.tsx**: Die Haupt-Landing-Page der Anwendung ([`IndexPage`](pages/index.tsx:20)), die mittels [`getStaticProps`](pages/index.tsx:11) Inhalte abruft und verschiedene Ansichten wie [`Hero`](pages/index.tsx:32), [`Organisators`](pages/index.tsx:33) und [`FeaturedApiModules`](pages/index.tsx:34) sowie einen [`ScrollToTopButton`](components/ScrollToTopButton.tsx:35) rendert.
### \[lang\] Verzeichnis
1.**\[lang\]/index.tsx**: Eine dynamische Route für die Landing-Page ([`IndexPage`](pages/%5Blang%5D/index.tsx:47)), die mehrere Sprachen unterstützt. Sie verwendet [`getStaticPaths`](pages/%5Blang%5D/index.tsx:29) zur Definition der unterstützten Sprachen und [`getStaticProps`](pages/%5Blang%5D/index.tsx:12) zum Abrufen von Inhalten basierend auf der aktuellen Sprache.
2.**\[lang\]/search.tsx**: Diese Seite ([`SearchPage`](pages/%5Blang%5D/search.tsx:22)) implementiert die Suchfunktionalität. Sie nutzt Fuse.js für eine clientseitige Suche, unterstützt die Filterung nach Ressourcentyp und beinhaltet eine Paginierung ([`Pagination`](components/Pagination.tsx:221)). Die Suchindexdaten werden sprachbasiert über [`getStaticProps`](pages/%5Blang%5D/search.tsx:245) geladen.
3.**\[lang\]/resources/\[resourceName\].tsx**: Eine dynamische Route ([`default`](pages/%5Blang%5D/resources/%5BresourceName%5D.tsx:12)) zur Anzeige detaillierter Informationen über eine spezifische Ressource. Sie verwendet [`getStaticPaths`](pages/%5Blang%5D/resources/%5BresourceName%5D.tsx:66) zur Generierung von Pfaden für alle Ressourcen in allen unterstützten Sprachen und [`getStaticProps`](pages/%5Blang%5D/resources/%5BresourceName%5D.tsx:54) zum Abrufen der Inhalte für die jeweilige Ressource und Sprache.
4.**\[lang\]/resources/index.tsx**: Diese Seite ([`default`](pages/%5Blang%5D/resources/index.tsx:33)) listet alle Ressourcen auf und unterstützt mehrere Sprachen. Sie beinhaltet Filterung ([`FlexFilter`](components/FlexFilter.tsx:328)), Sortierung ([`ListSort`](components/ListSort.tsx:337)) und Paginierung ([`Pagination`](components/Pagination.tsx:469)). Alle Ressourceninhalte werden in [`getStaticProps`](pages/%5Blang%5D/resources/index.tsx:490) abgerufen und die Filterung, Sortierung sowie Paginierung clientseitig gehandhabt.
## Inhaltsverzeichnis
### fit-standards Verzeichnis
1.**fit-standards/\[resourceName\].tsx**: Eine dynamische Route ([`default`](pages/fit-standards/%5BresourceName%5D.tsx:20)) zur Anzeige detaillierter Informationen über einen spezifischen FIT-Standard. Sie ist ähnlich der Ressourcendetailseite, aber speziell für FIT-Standards angepasst und verwendet Komponenten wie [`BreadcrumbNav`](components/fit-standards/BreadcrumbNav.tsx:48) und [`InfoBoxes`](components/fit-standards/InfoBoxes.tsx:79). [`getStaticPaths`](pages/fit-standards/%5BresourceName%5D.tsx:160) generiert Pfade für alle FIT-Standards und [`getStaticProps`](pages/fit-standards/%5BresourceName%5D.tsx:151) ruft die Inhalte ab.
2.**fit-standards/changelog.tsx**: Diese Seite ([`default`](pages/fit-standards/changelog.tsx:12)) zeigt das Änderungsprotokoll für die FIT-Standards an. Sie verwendet [`getStaticProps`](pages/fit-standards/changelog.tsx:41), um den Inhalt des Änderungsprotokolls aus einer Markdown-Datei zu laden und vorzubereiten, und rendert diesen dann als HTML.
3.**fit-standards/hilfe.tsx**: Diese Seite ([`default`](pages/fit-standards/hilfe.tsx:12)) zeigt die Hilfeinhalte für FIT-Standards an. Ähnlich der Changelog-Seite verwendet sie [`getStaticProps`](pages/fit-standards/hilfe.tsx:41), um Hilfeinhalte aus einer Markdown-Datei zu laden und vorzubereiten, und rendert diese als HTML.
4.**fit-standards/index.tsx**: Diese Seite ([`default`](pages/fit-standards/index.tsx:58)) listet alle FIT-Standards auf. Sie ist in ihrer Funktionalität der Ressourcen-Indexseite sehr ähnlich und beinhaltet Filterung ([`FlexFilter`](components/FlexFilter.tsx:343)), Sortierung ([`ListSort`](components/ListSort.tsx:359)) und Paginierung ([`Pagination`](components/Pagination.tsx:548)). Die Inhalte der FIT-Standards werden über [`getStaticProps`](pages/fit-standards/index.tsx:573) aus einer JSON-Datei abgerufen, während Filterung, Sortierung und Paginierung clientseitig erfolgen.
### resources Verzeichnis
1.**resources/\[resourceName\].tsx**: Eine dynamische Route ([`default`](pages/resources/%5BresourceName%5D.tsx:11)) zur Anzeige detaillierter Informationen über eine spezifische Ressource, ähnlich zu `pages/[lang]/resources/[resourceName].tsx`, jedoch ohne explizites Sprachsegment in der URL (wahrscheinlich mit einer Standardsprache oder interner Sprachbehandlung). Sie verwendet [`getStaticPaths`](pages/resources/%5BresourceName%5D.tsx:64) zur Pfadgenerierung und [`getStaticProps`](pages/resources/%5BresourceName%5D.tsx:54) zum Abrufen der Inhalte.
2.**resources/index.tsx**: Diese Seite ([`default`](pages/resources/index.tsx:35)) listet alle Ressourcen auf, ähnlich zu `pages/[lang]/resources/index.tsx`, jedoch wahrscheinlich für eine Standardsprache oder mit interner Sprachbehandlung. Sie beinhaltet ebenfalls Filterung ([`FlexFilter`](components/FlexFilter.tsx:318)), Sortierung ([`ListSort`](components/ListSort.tsx:337)) und Paginierung ([`Pagination`](components/Pagination.tsx:469)). Die Ressourceninhalte werden in [`getStaticProps`](pages/resources/index.tsx:490) abgerufen, die weitere Verarbeitung erfolgt clientseitig.
# Komponentenbeschreibungen
## components
-**Badge.tsx**: Stellt ein Abzeichen ([`Badge`](components/Badge.tsx:106)) mit Symbol und Text dar, das mit Tailwind-Farbklassen angepasst und optional als Link konfiguriert werden kann.
-**Chip.tsx**: Eine einfache Komponente ([`default`](components/Chip.tsx:6)) zur Darstellung eines stilisierten Textchips mit anpassbarem Aussehen.
-**Favicon.tsx**: Fügt ein Favicon-Link ([`default`](components/Favicon.tsx:3)) zum Dokument-Header hinzu, wobei der Basispfad dynamisch ermittelt wird.
-**FilterAccordion.tsx**: Erzeugt eine Akkordeon-Benutzeroberfläche für Filter ([`FilterAccordion`](components/FilterAccordion.tsx:10)) mit ein- und ausklappbaren Abschnitten und einem Zurücksetzen-Button.
-**FilterLabel.tsx**: Ein Wrapper um die Label-Komponente ([`FilterLabel`](components/FilterLabel.tsx:16)), der Filterpillen-Funktionalität mit aktiven/inaktiven Zuständen hinzufügt.
-**FlexFilter.tsx**: Eine komplexe Komponente ([`FlexFilter`](components/FlexFilter.tsx:258)) zur Datenfilterung mit Checkboxen und Suchfunktion, die den Filterzustand in URL-Parametern speichert.
-**IconRenderer.tsx**: Rendert verschiedene Arten von Icons ([`IconRenderer`](components/IconRenderer.tsx:19)) (Tabler-Icons) mit anpassbaren Eigenschaften.
-**Label.tsx**: Stellt ein Textlabel ([`Label`](components/Label.tsx:94)) dar, das einen Geltungsbereich haben kann (durch '::' getrennt) und ein Icon enthalten kann. Beispiele:\
-**LanguageChooser.tsx**: Eine Dropdown-Komponente ([`LanguageChooser`](components/LanguageChooser.tsx:7)) zur Auswahl der Website-Sprache.
-**layout.tsx**: Die Haupt-Layout-Komponente ([`Layout`](components/layout.tsx:9)), die den Anwendungsinhalt mit Navigationsheader, Sucheingabe und Fußzeile umschließt.
-**ListSort.tsx**: Eine Komponente ([`ListSort`](components/ListSort.tsx:156)) zum Sortieren von Datenlisten mit konfigurierbaren Sortieroptionen.
-**Pagination.tsx**: Verwaltet die Seitennavigation ([`Pagination`](components/Pagination.tsx:70)) mit Seitenwechsel und Auswahl der Elemente pro Seite.
-**RenderIcon.tsx**: Eine flexible Komponente ([`RenderIcon`](components/RenderIcon.tsx:37)) zum Rendern verschiedener Icon-Typen (Tabler-Icons, SVG-Inhalte oder Bilder).
-**ResourceCard.tsx**: Zeigt detaillierte Informationen über eine Ressource ([`default`](components/ResourceCard.tsx:36)) mit Titel, Beschreibung, Logo und untergeordneten Ressourcen an.
-**ScrollToTopButton.tsx**: Eine Schaltfläche ([`ScrollToTopButton`](components/ScrollToTopButton.tsx:19)), die beim Scrollen nach unten erscheint und es ermöglicht, zum Seitenanfang zurückzukehren.
-**SearchInput.tsx**: Ein Sucheingabefeld ([`SearchInput`](components/SearchInput.tsx:69)) mit automatischen Vorschlägen, das Fuse.js für unscharfe Suche verwendet.
-**SearchResultItem.tsx**: Stellt ein einzelnes Suchergebnis ([`SearchResultItem`](components/SearchResultItem.tsx:105)) mit Name, Typ, Beschreibung und Link dar.
-**ServiceTag.tsx**: Rendert ein Tag für Dienste ([`default`](components/ServiceTag.tsx:11)) mit entsprechender Stilisierung basierend auf dem Tag-Typ.
## components/fit-standards
-**BreadcrumbNav.tsx**: Eine Navigationskomponente, die den aktuellen Pfad anzeigt ([`default`](components/fit-standards/BreadcrumbNav.tsx:4)) und einen Link zurück zur Übersicht bietet.
-**ContactInformation.tsx**: Erstellt eine Informationsbox ([`ContactInformation`](components/fit-standards/ContactInformation.tsx:18)), die Kontaktdetails für verschiedene Rollen eines FIT-Standards wie Initiator, Produktverantwortlicher und Betreiber anzeigt.
-**ContactInfoSingle.tsx**: Rendert einen einzelnen Kontakteintrag ([`ContactInfoSingle`](components/fit-standards/ContactInfoSingle.tsx:26)) mit Details wie Name, E-Mail und Telefon für eine spezifische Rolle im Zusammenhang mit einem FIT-Standard.
-**FinancingInformation.tsx**: Erzeugt eine Informationsbox ([`FinancingInformation`](components/fit-standards/FinancingInformation.tsx:16)) speziell für die Anzeige von Finanzierungsinformationen eines FIT-Standards.
-**InfoBoxes.tsx**: Eine umfassende Komponente, die mehrere Informationsboxen ([`InfoBoxes`](components/fit-standards/InfoBoxes.tsx:49)) für einen FIT-Standard rendert, einschließlich Kontaktinformationen, Support-Links, Artefakte, verbundene Standards, Framework, Gültigkeit und letztes Update.
-**LifecyclePicture.tsx**: Zeigt ein Bild an ([`default`](components/fit-standards/LifecyclePicture.tsx:11)), das die aktuelle Lebenszyklusphase eines FIT-Standards repräsentiert.
-**PageHeaderCard.tsx**: Rendert den Kopfbereich einer FIT-Standard-Seite ([`default`](components/fit-standards/PageHeaderCard.tsx:22)), einschließlich Titel, Beschreibung, Lebenszyklusphase und Kontext-Labels.
Diese Seite bietet einen thematisch geordneten Überblick über die vorhandenen Dokumente.
1.**Core**
# Sonstige Dokumente
* Komponenten
***\<Label\>**
[Label-Komponente, unterstützt Scoped-Labels und vorangestellte Symbole in Form von svg-Grafiken](https://gitlab.opencode.de/fitko/docs/portal/-/blob/feature_schema-erweiterung_JVo/components/fit-standards/Label.tsx?ref_type=heads), Beispiele:
[Cache- und Update-Mechanismus für den Trivy security scanner](https://gitlab.opencode.de/fitko/docs/portal/-/wikis/Dokumentation-des-Trivy-Filesystem-Scan-Scripts)
[Cache- und Update-Mechanismus für den Trivy security scanner](https://gitlab.opencode.de/fitko/docs/portal/-/wikis/Dokumentation-des-Trivy-Filesystem-Scan-Scripts)
3.**Konzepte**\
2.**Konzepte**\
[OpenProject als Datenbasis für das Föderale Entwicklungsportal](https://gitlab.opencode.de/fitko/docs/portal/-/wikis/OpenProject-Infoplattform)
[OpenProject als Datenbasis für das Föderale Entwicklungsportal](https://gitlab.opencode.de/fitko/docs/portal/-/wikis/OpenProject-Infoplattform)
