D&D Aux: Odyssey of the Dragonlords

Hier sammeln wir die Recaps unserer Abenteuer in Odyssey of the Dragonlords.

Beiträge erstellen

Neue Beiträge werden in Markdown unter _posts erstellt, der Dateiname folgt
dem Schema 2020-04-11_aufbruch.md, wobei als Datum das der jeweiligen Session genommen
wird.

Weitere Metadaten

• title: Die Überschrift. Der Dateiname sollte ein slug zur Überschrift sein.
• excerpt: Kurze Zusammenfassung, die in der Beitragsübersicht zu sehen ist.
• layout: für gewöhnlich post.
• background: Titelbild zum Artikel
• game_date: Das Datum nach der Thyleanischen Zeitrechnung, z.B. 22. Sydion 499.

Tags

Nebst der normalen Formatierung mit Github flavoured
Markdown gibt es noch einige Tags, die wie
Macros automatisch Code für Infoboxen o.Ä. generieren.

• {% include glossary_link.html name="Grafton" title="den Zwerg"%} erstellt
  einen Verweis zum Glossar. Dabei muss name der Name des Artikels im Glossar
  sein. Wir im Fließtext eine Flektion davon gebraucht oder soll der Text einfach
  anders dort auftauchen, kann man mit title den gewünschten Linktext angeben,
  ansonsten wird der Name des Artikels genommen.
• Infoboxen: Um im Fließtext kleine Boxen zu erstellen, die wichtige Informationen
  wie erteilte Quests herausstellen, gibt es Infoboxen, deren HTML-Code etwa so
  aussehen sollte, damit das bestehende CSS sie richtig formattiert:

<div class="infobox quest">
  <h3>Das Buch finden</h3>
  <p>Wir wollen das gestohlene Buch wiederfinden.</p>
  <p class="reward">Ruhm und Ehre</p>
</div>

Bislang gibt es die Klassen quest und hint. Einen Absatz mit reward
hinzuzufügen ist dabei natürlich optional.

Hilfsmittel

Damit man nicht mühsam alle Glossar-Einträge selbst vornehmen muss, gibt es ein
Script, was man über den Markdown-Code laufen lassen kann. Das schleift dabei
über alle Worte und versucht, sie mit bestehenden Glossar-Einträgen zu
verknüpfen. Man kann es auch mehrmals laufen lassen - was bereits ein
Glossar-Link ist, wird nicht nochmal verschachtelt verlinkt. Weitere Logik gibt
es dahinter aber nicht - hat man ein Wort gebeugt oder anders formuliert und
hätte es trotzdem gerne zum Glossar verlinkt, muss man das von Hand machen.

$ git add _posts/2020-04-11_aufbruch_aus_waterdeep
$ ./glossary_preproc.rb _posts/2020-04-11_aufbruch_aus_waterdeep.md
$ git diff

Es empfiehlt sich, dabei die oben beschriebene Reihenfolge einzuhalten. Das Script
ändert die Markdown-Datei in place. Um kontrollieren zu können, ob dabei etwas
schief gegangen ist, kann man den fertig geschriebenen Artikel schon mal in den
Index schieben und danach den Unterschied zeigen lassen, bevor man auch diesen
zum Index hinzufügt und den Commit macht.

Spezialsektionen

Charaktere

Um einen Eintrag für einen Charakter anzulegen wird gebraucht:

• Token-Bild, am besten quadratisch, unter img/portraits/$charname.png
• Großes Hintergrundbild, z.B. 2610x1316 - Seitenverhältnis muss stimmen - unter img/portraits/$charname_bg.jpg. Hier kann der Dateiname, insbesondere die Endung, auch abweichen, weil der URI ausdrücklich in der Markdown-Datei gesetzt wird
• Charakterbeschreibung in _charaktere/$charname.md

Für das große Hintergrundbild gibt es kein Patentrezept, weil sich die Bilder
dafür zu sehr voneinander unterscheiden. Ein Lösungsvorschlag ist, irgendein
großes Bild des Charakters auf die Höhe des Bildes zu skalieren und die
leeren Flächen mit weichgezeichnetem Hintergrund auszufüllen. Dazu kann man das
ganze Originalbild nochmal als eigene Ebene im Hintergrund einfügen,
proportional so skalieren, dass auch die Breite ausgefüllt wird, dann mit der
ersten Ebene vereinen, die dann einzige Ebene nochmal duplizieren, zuoberst auf
den Stapel legen, stark weichzeichnen und dann eine Ebenenmaske anlegen. Mit
Hilfe der Ebenenmaske kann man dann einen etwas weichen Übergang des scharfen
Chars in der Mitte und des weichen Hintergrunds drum herum herstellen.

Charaktere werden in ihren _charaktere/$charname.md beschrieben. Dort können
auch einige Metadaten gesetzt werden, im YAML Front matter:

---
title: Grafton
race: Zwerg
player: Florian
player_link: https://twitter.com/heinlef
layout: charakter
background: /img/portraits/grafton_bg.jpg
---

Notwendige Attribute sind title und layout, alles weitere ist optional.

Hinweis:: jekyll ermittelt bei Änderungen innerhalb einer collection wie
den Characteren nicht automatische alle notwendigen Neu-Generierungen. Wenn sich
die /charaktere/-Seite nach einer Änderung an einem /_charaktere/$charname.md
nicht aktualisiert, muss _site/charaktere/index.html gelöscht werden, um das
erneute Generieren der Seite zu erzwingen.

Bilder

Bilder werden in img/* abgelegt und können in den Markdown files mit <img> tags
normal referenziert werden. Große Bilder sollten vorher etwas kleiner skaliert werden.
700px entspricht aktuell der Maximalbreite von Bildern in Beiträgen:

convert img/posts/eber.png -resize x700 -strip -quality 85 img/posts/eber_low_res.png

Development

• Install rbenv + ruby (see .ruby-version for version information)
• Install NodeJS 16.x or similar
• Run bundle
• Open a terminal and run
  • make serve or bundle exec jekyll server --watch --livereload
• Open the local version in your Browser: http://127.0.0.1:4000/
• Whenever you make a content change, it will automatically be built, served locally and reload your tab.
• Please note that you must restart the server when making changes to _config.yml (i.e. when adding a new icon).

TL;DR neuer Eintrag

• Eintrag als Markdown in ./_posts anlegen und befüllen
• Bilder nach ./img/posts/ legen und verkleinern: convert img/posts/$NAME.png -resize x700 -strip -quality 85 img/posts/$NAME_low_res.png
• Änderungen committen und Glossar verlinken: ./glossary_preproc.rb _posts/$POST.md
• Rendering lokal prüfen, Typos finden: bundle exec jekyll server --watch --livereload
• Commiten, Pushen