Fuß und Radentscheid Dresden - Webseite

Using this repo

we are using Jekyll, a static website generator to build this page. It's very easy to use and we don't need a giant bunch of dependencies while using wordpress, typo3 or other dynamic site generators.

All pages relying on simple markdown files

Used Theme: Minimal-Mistakes

Installation

Windows

More info: https://jekyllrb.com/docs/installation/windows

Download latest Ruby+DevKit and run it.
If the RubyInstaller2 does not open, do it manually by issuing the command ridk install
Enter 1,2,3 to install MSYS2 base, MINGW development toolchain and update MSYS2.
Close your terminal windows and reopen it.
VSCodium/VSCode (oder andere IDE) neu starten.
Issue the command gem gem install jekyll bundler.
After the install finished, try jekyll -v
now clone this repo in a folder of choice. For example via git clone https://github.com/RobTranquillo/fuss-und-radentscheid-dresden.git
enter the new folder and run bundle install
starting your live webserver with bundle exec jekyll serve
open the page with http://127.0.0.1:4000/

When the system has run successfully the first time, the last two points are then sufficient to start the server and see the page.

Linux

Die Schritte sind im Grunde die gleichen, wie bei Windows, ausgenommen die Installatin von Ruby. In Linux ruby 3.0.0 comes up with an error in pathutil therefore ruby 2.7 is recomended(!) for jekyll.

WSL

Wenn Du Windows Subsystem für Linux verwendest müssen noch ein paar Pakete installiert sein.

sudo apt install openssl make gcc g++ ruby-full
ruby --version

Fedora

sudo dnf install openssl make gcc g++
sudo dnf module install ruby:2.7/default
ruby --version

Ubuntu

sudo apt update
sudo apt install openssl make gcc g++ ruby-full
ruby --version

Contribution

To contribute to this project you need to understand what git is: https://www.youtube.com/watch?v=MgnRFZJ7M2s
you need a git client: https://git-scm.com/book/de/v2/Erste-Schritte-Git-installieren or https://desktop.github.com/
if you had cloned the repository (see here under installation) you can make an change in the files and commit it to the repo
For easy internationalisation should all UI texts only resides in: _data\ui-text.yml

My recommendation for use is https://code.visualstudio.com/ with the following extensions:

https://github.com/gitkraken/vscode-gitlens
https://github.com/enyancc/vscode-ext-color-highlight
https://github.com/panoply/vscode-liquid
https://github.com/TheRealSyler/vscode-sass-indented
https://github.com/TheRealSyler/vscode-sass-indented All are not mandatory but make it much more pleasant to work.

Anpassung

Inhalt

Wie bei Lego werden bei Jekyll + minimal-mistakes Seiten meistens auf vielen vorhandenen Bausteinen einfach zusammen gesetzt. MMistakes bietet dafür schon die gängisten Seitenlayouts inclusive der wichtigsten Funktionen leist zu nutzen an: https://mmistakes.github.io/minimal-mistakes/docs/layouts/

Design

Alle CSS Änderungen fangen in der Datei _sass\minimal-mistakes.scss an. In dieser werden alle Dateien des Unterordners _sass\minimal-mistakes eingebunden. In diesen können alle Änderungen vor genommen werden. Weitere Dateien können erzeugt und in der minimal-mistakes.scss eingefügt werden.

Wir verwenden einen eigenen Color-Skin diese befindet sich hier _sass\minimal-mistakes\skins\_fussradentscheid.scss.

Alle Bilder befinden sich im Ordner assets/images sowie alle Javascript Dateien in assets/js

Mehr Informationen finden sich hier:

Navigation

Die Einträge des Hauptmenus im Kopf der Seite werden durch die Datei _data/navigation.yml gesteuert. Konkret durch den Aufbau von mainmenu.

In der Datei _includes\masthead.html wird dieses ausgelesen und in ein Menü zusammengebaut.

Erstellen einer neuen Seite bestehend aus einzelnen Karten (Cards)

In unserem System können wir ein Seite aus beliebig vielen Einzeldateien, den Cards, zusammensetzen. Um eine neue Seite mit Karten zu erstellen gehe wie folgt vor.

erzeuge die gewünschte neue Seite im Ordner pages
damit die Seite für NutzerInnen erreichbar ist, sollte sie auch in der _data/navigation.ymlverlinkt sein
Im Front Matter der neuen Seite wird auf die gewünschten Karten verwiesen: cards: Bezeichner
Achte auch darauf hier ein Seiten Layout zu verwenden, welches Cards anzeigt. ZB layout: splash
Im ordner _cards wird ein neuer Ordner angelegt passend zum Bezeichner
Darin liegen nun alle gewünschten Karten
Damit Jekyll den neuen Ordner verwendet muss es neugestartet werden bundle exec jekyll serve
Im Front Matter jeder Card wird auf die zugehörige page verwiesen mittels: page: Bezeichner

Einen neuen Kartentyp erstellen

Alle verfügbaren Kartentypen sind im Verzeichnis _layout/cards. Hier muss nur eine neue Karte erzeugt werden mit dem entsprechenden Titel und mit dem gewünnschten HTML gefüllt werden. Am einfachsten ist evtl. einfach eine vorhandene Karte zu kopieren und zu verändern.

Um auf die Daten aus dem Front Matter und dem Inhalt der Markdowndatei zu zugreifen, die auf die neue Karte verweist, sind wieder alle Liquid Variablen möglich. Also zB. {{ page.title }} oder {{ content }}

RobTranquillo/fuss-und-radentscheid-dresden