Skip to content

Latest commit

 

History

History
175 lines (133 loc) · 7.8 KB

README.md

File metadata and controls

175 lines (133 loc) · 7.8 KB
Raw

Build Status

Webseite der Toolbox Bodensee e.V.

Toolbox

Status

Dies ist der Quellcode zur aktuellen Webseite des Maker- und Hackspace Toolbox Bodensee e.V., die unter toolbox-bodensee.de erreichbar ist.

Lektor CMS

Das CMS für diese Webseite ist Lektor.
Die Installationsanleitung gibt es hier.
Für Bilder im git verwenden wir git-lfs. Weitere Informationen dazu gibt es weiter untern.
Lektor ist auch als Python-Modul verfügbar und kann mit python2 -m lektor verwendet werden. Auch die Installation über pip (in einem virtuellen Enviroment ist möglich:

# create virtual enviroment
virtualenv venv
# activate virtual enviroment
. venv/bin/activate
# install lektor to virtual enviroment
pip install lektor

# install ruby-sass (for css styles)
gem install sass

Zum Starten von Lektor muss man mit der Komandozeile in das root-Verzeichnis der Webseite gehen und dort mit dem Befehl lektor server Lektor starten. Im Browser kann dann 127.0.0.1:5000 aufgerufen werden, um die Webseite zu bearbeiten. Die Versionskontrolle der Webseite findet über Git statt. Daher wenn möglich Bilder erst bearbeiten, bevor diese veröffentlicht werden!

Zur Webseite Beitragen

  1. Dieses Repository forken oder einen neuen Branch machen (übers GitHub Interface)
  2. Geforktes Repository Clonen (git lfs clone https://github.com/<Your_Name>/toolbox-webseite.git)
  3. Öffne deine Komandozeile im geklonten Repository-Fork (cd toolbox-webseite)
  4. Lektor starten (python2 -m lektor server)
  5. Webseite updaten... (http://localhost:5000/)
  6. Lektor Beenden (Strg. + C)
  7. Änderungen commiten (git add --all; git commit -m "An der Webseite habe ich _____ geändert")
  8. Änderungen hochladen (git push)
  9. Pull Request Stellen (übers GitHub Interface)

Bilder und große Dateien

Für große Dateien haben wir angefangen auf git-lfs zu setzen. Hierbei werden große Dateien nicht mehr ganz so schlimm in die History des git eingebaut. Das war mit mehreren MB großen Bildern schon schlimm, aber noch verkraftbar. Mit größeren Videos aber... Sollte man das halt echt nicht direkt ins git werfen!

Zur Verwendung von git-lfs muss die git-lfs command line extention installiert sein! Die geschieht auf den gängigsten Platformen zB. mit:

sudo apt install git-lfs

oder

sudo pacman -S git-lfs

Webseite übersetzen

Lektor bietet in der Admin-Oberfläche die Möglichkeit die Toolbox Webseiten ins Englische zu übersetzen. Diese Funktion befindet sich unter dem Punkt Alternative. Als Übersetzer mit guten Ergebnissen kann man beispielsweise deepl verwenden.
Links auf Seiten haben in der englischsprachigen Version ein /en/ vor der Adresse. So wird https://toolbox-bodensee.de/projekte/c3woc/ bspw. zu https://toolbox-bodensee.de/en/projekte/c3woc/.

Fork aktuell halten ohne neu zu forken

cd toolbox-webseite

# Das Original Repository der Toolbox einbinden:
git remote add upstream https://github.com/ToolboxBodensee/toolbox-webseite.git
git fetch upstream

# Deinen Fork lokal aktualisieren:
git pull upstream master
git reset --hard upstream/master

Pull Request Reviewen

Es gibt zwei Möglichkeiten Pull Requests zu reviewen:

Änderungen lokal Downloaden und Bewerten

  1. Die im Pull Request eingereihte Version clonen
# ID des Pull Request eintragen
PULLREQUEST=42
# Git-Repository clonen
git clone --depth=30 https://github.com/ToolboxBodensee/toolbox-webseite.git toolbox-pull-request
# In das Repo navigieren
cd toolbox-pull-request
# zum Pull Request wechseln
git fetch origin +refs/pull/$PULLREQUEST/merge:
git checkout -qf FETCH_HEAD
  1. Den geklonten Pull Request anschauen lektor server
  2. Änderungen requesten oder Pull Request approven

Änderungen online reviewen

Die eingereichten Pull Requests werden automatisiert durch ein Go-Skript und Travis auf ein Testsystem deployed. Nachdem die Travis-Checks durchgelaufen sind, kann man diesen Pull Request unter den von einem bot geposteten Link anschauen. Auf GitHub sieht man, welche Dateien hier betroffen sind. Auf dem Testsystem sieht man, wie das fertige Ergebnis aussieht.

Design

Das Websitelayout basiert auf HTML5UP, genauer gesagt auf dem Design Landed. Und wurde natürlich für die Toolbox-Webseite angepasst!

Bei der Farbwahl (z.B. Menüfarben) sollte das Toolbox Presse-Kit berücksichtigt werden. #E64F2D #E64F2D Orange und #9B160F #9B160F Rot sind hier die Primärfarben.

CSS

Das CSS-Design wird mit sass generiert. Das vereinfacht die Verständlichkeit der einzelnen Designelemente und ermöglicht auch das Anpassen des Designs durch das simple Verändern weniger Variablen. Example use and installation:

# Install sass:
gem install sass
# generate css from sass
make sass

Nützliche Tipps: Nahezu aller Style der Webseite wird über die main.css datei geregelt. Diese befindet sich jedoch nicht mehr im git sondern muss lokal gebaut werden. Das Lektor Template prüft, ob die Datei assets/css/main.min.css oder assets/css/main.css vorhanden ist. Sollte keine der genannten Dateien verfügbar sein, so wird diese von der offiziellen toolbox-bodensee.de Webseite eingebunden. Wenn sie lokal verfügbar ist, wird die lokale Datei eingebunden. Der lokale Lektor Server cached einige Dateien. So kann es sein, dass das nachträgliche hinzufügen der css Datei keine beachtung findet und nicht zum neu einbinden seitens lektor führt. Der lokale cache kann mit den folgenden Befehl geleert werden und anschließend der lokale Server wieder gestartet werden:

# generate non-minified css:
make sass-uncompressed

# clean lektor cache
lektor clear

# run lektor server
lektor server

Docker

Hat man auf seiner Host kein python oder will man keine zusätzliche Software installieren, so steht ein Docker Image toolboxbodensee/lektor:latest zur Verfügung.

Damit lässt sich das Projekt innerhalb eines Containers bauen und sogar der Lektor-Server ausführen.

Der Einfachheit halber stehen mehrere make docker- Befehle zur Verfügung. Der Projektordner sowie die Lektor-cache .cache/lektor werden als Volume zu der Container angehängt.

make docker-pull # lädt die Lektor Docker Image vom Docker Hub herunter
make docker-build # baut die Assets und die lektor cache (lektor build)
make docker-server # führt den Lektor Server auf localhost:5000 aus
make docker-shell # führt eine Shell aus innerhalb des Containers. Diese kann man zum Debuggen nutzen.

Tipp: Zum Verwenden von Docker muss docker installiert sein und als Service gestartet sein.
Außerdem muss dein User zur Gruppe docker gehören und sollte nicht als root ausgeführt werden!
Weitere Hinweise dazu u.a. auf wiki.archlinux.org.