Beitragen

Es freut uns, dass du uns bei der Erstellung der Guide mithilfen möchtest! Wir haben hier einige Informationen für dich zusammengetragen, die dir einen Einstieg erleichtern sollen.

Seiten

Jede Seite besteht aus einer MDX-Datei (opens in a new tab), die man im Ordner pages/ finden kann. MDX-Dateien sind im Grunde nur Markdown, in denen React-Komponente sowie Html-Tags direkt genutzt werden können. Eine mögliche Seite könnte so aussehen:

# Seite Überschrift
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis malesuada
risus at volutpat. Pellentesque eget pretium diam. Maecenas lobortis gravida 
enim, non lobortis sapien maximus ut.
 
```py
a = 1
b = 2
c = a + b
```
 
## Abschnitt 1
 
```math
\pmatrix{
  1 & 2 & 3 \\
  4 & 5 & 6 \\
  7 & 8 & 9
}
```
 
## Abschnitt 2
 
Verweise auf [andere Websiten](https://bwinf.de) sind ebenfalls möglich. 

React-Komponenten

In MDX kann man React-Komponenten ohne Weiteres direkt verwenden, z.B.:

import IncompleteSection from '@components/IncompleteSection.tsx'
 
 
# Seite Überschrift
 
<IncompleteSection />

Literaturverweis

Man kann weiterführende Literatur bzw. Quelle für eine Seite angeben:

import { ReferenceList, ReferenceListItem } from '@components/ReferenceList.tsx'
 
<ReferenceList>
    <ReferenceListItem url="https://seite1.de" author="Seite 1" title="Beschreibung der Quelle." />
    <ReferenceListItem url="https://seite2.de" author="Seite 2" title="Beschreibung" />
</ReferenceList>

Ordnerstrukturen

Das Routing der Website folgt dem Pfad der MDX-Dateien in pages/. So wird z.B. die Datei pages/general/contribution.mdx unter der URL /general/contribution erreichbar sein.

Es ist möglich, die Überschrift der jeweiligen Seiten zu einem anderen als dem eigenen Datei-Namen zu ändern. Dazu fügt man einen Eintrag in der Datei pages/**/_meta.json wie folgt hinzu:

{
  "index": {
    "title": "Willkommen"
  },
  "contribution": {
    // NEU: 
    "title":"Beitragen"
  }
}

Mehr dazu findet man unter Nextra - Page Configuration (opens in a new tab).

Tech-Stack

Die Website basiert auf Nextra (opens in a new tab), einem React-Framework für die Erstellung von statischen Websites. Nextra nutzt Next.js (opens in a new tab) und MDX (opens in a new tab). Für CSS nutzen wir Tailwind (opens in a new tab).

Codekonventionen