Einstieg für technische Entwicklung

Im Rahmen der openCode Tools & Services bieten wir insbesondere für den Webentwicklungsbereich einige spannende Werkzeuge an. So gibt es

• für das Dokumentationssystem Nextra ein Kern UX sowie ein Bundes Theme (Theme-Repository),
• eine Kern UX React-Komponentenbibliothek (Kern UX React Bibliothek)
• sowie eine CLI zum leichten ausprobieren und entwickeln.

Architektur

EasyWebseite kann in zwei Modi verwendet werden:

• Easy Mode: Hier schreiben die AutorInnen Markdown und es kann aus vorgefertigten Komponenten und Themes ausgewählt werden. Anpassungen wie eigenes CSS sind hier nicht vorgesehen. Die AutorInnen sehen keinen “Code” und müssen sich nicht mit technischen Details beschäftigen.

  Wie die Grafik unten zeigt, wird das @document-writing-tools/markdown-webbook Package bzw. dessen CLI genutzt um die Inhalte des Projekts zu rendern.

  • Beispiel Projekt das diesen Ansatz nutzt: gitlab.opencode.de/open-code/werkzeugkasten/easywebsite/easywebsite-dokumentation
  • Markdown-Webbook Package: gitlab.opencode.de/open-code/document-writing-tools/markdown-webbook/-/tree/v1/packages/markdown-webbook
  • Template das von der CLI gentzt wird. Die Inhalte werden in dieses Template Projekt injiziert und gerendert: gitlab.opencode.de/open-code/document-writing-tools/markdown-webbook/-/tree/v1/packages/markdown-webbook/template

• Developer Mode: Hier können EntwicklerInnen die volle Kontrolle über das Projekt übernehmen. Die EntwicklerInnen setzen ein eigenes NextJS-/ React-Projekt auf und verwenden die Packages @document-writing-tools/kernux-nextra-theme und @document-writing-tools/kernux-react als Abhängigkeiten. Hier sind alle Anpassungen möglich, aber es ist auch mehr technisches Wissen erforderlich.

  • Beispiel Projekt das diesen Ansatz nutzt: gitlab.opencode.de/open-code/badgebackend/gitlab-profile
  • Beispiel Projekt das diesen Ansatz nutzt: gitlab.opencode.de/open-code/werkzeugkasten/opencode-tools-and-services-webseite
  • @document-writing-tools/kernux-nextra-theme: gitlab.opencode.de/open-code/document-writing-tools/markdown-webbook/-/tree/v1/packages/kernux-nextra-theme
  • @document-writing-tools/kernux-react: gitlab.opencode.de/open-code/document-writing-tools/markdown-webbook/-/tree/v1/packages/kernux-react

  Hinweis: Die Packages werden aktuell in der GitLab Package Registry des openCode Repositories veröffentlicht. Mit dem Kommando
  echo "@document-writing-tools:registry=https://gitlab.opencode.de/api/v4/projects/2542/packages/npm/" > .npmrc
  kann die Registry in der .npmrc Datei des Projekts hinzugefügt werden.

Genutzte Technologien

Technisch basiert EasyWebseite vor allem auf den folgenden Open Source Technologien:

• Nextra statischer Seitengenerator basierend auf Next.js
• Next.js als React Framework
• React