# Ctdo Homepage

## Selbst bauen

Um das Projekt zu bauen, oder lokal daran zu entwickeln musst du `nodejs` und `yarn` installiert
haben. Falls du das eher möchtest, `npm` geht auch.

Um die Dependencies zu installieren führe einmal im Projektverzeichnis `yarn` aus.

Um die Webseite lokal zu testen führe danach `yarn develop` aus.
Es startet dann ein Entwicklungsserver auf `localhost:8000`.
Dann sollte auch Hot-Reloading funktionieren.

Für einen Produktivbuild führe `yarn build` aus.
Die fertig gebauten Dateien landen dann im Ordner `public/`.

## Eine Seite bearbeiten

Klicke bei der Seite, die du bearbeiten möchtest unten im Footer auf "Seite bearbeiten".
Nimm im Editor der sich öffnet die gewünschten Änderungen vor.
Wie die Seiten aufgebaut sind steht unten in der Sektion Seitenlayout.
Wie du deine Änderung veröffentlichst steht in der Sektion Deploy.

## Eine neue Seite erstellen

Um eine neue Seite zu erstellen lege eine neue Datei im `src/webpages` Ordner
[hier](https://repos.ctdo.de/neri/ctdo-homepage/_new/master/src/webpages) an.
Wie die Seite aufgebaut sein muss steht unten in der Sektion Seitenlayout.
Wie du deine Änderung veröffentlichst steht in der Sektion Deploy.

Um die neue Seite in die Navigation einzubinden füge ein neues Element in das Array `pages` in
[diese Datei](https://repos.ctdo.de/neri/ctdo-homepage/_edit/master/src/components/nav.js)
ein.

## Seitenlayout

Eine Seite muss mit folgendem Header beginnen:

```
---
path: ""
title: ""
edit: ""
---
```

In `path` muss stehen, unter welchem Pfad die Seite auf der Webseite erscheint.
Für die Home-Seite ist dies beispielsweise "/", für die "Zeiten & Location"-Seite "/treff/".  
In `title` steht der Text der im Browsertab angezeigt werden soll wenn die Seite offen ist.
Das `ctdo -` wid automatisch davorgepackt.  
In `edit` muss der Name der angelegten Datei stehen, dieser wird verwendet,
damit der "Seite bearbeiten"-Link richtig funktioniert.

Darunter wird die Seite in [Markdown](https://www.markdownguide.org/cheat-sheet/) definiert.

TODO: Erklärung für das Einbinden von Komponenten wie z.B. den Raumstatus

## Deploy

Wenn du mit deinen Änderungen fertig bist,
klicke auf Commit und gib eine Beschreibung deiner Änderungen ein.
Ungefähr 30 Sekunden später sollten deine Änderungen auf der Website sichtbar sein
(das funktioniert noch nicht, weil der deploy prozess noch nicht erstellt wurde).
Möglicherweise musst du einmal mit Shift+F5 deinen Browsercache ignorieren.