Slidify für Veranstaltungswebsites

[cnoss]

Jede Session/veranstaltung im Zeitplan hat in der Regel eine eigene Page. Hier gibt es oftmal Anweisungen zu Übungen und weitere Erklärungen. Es wäre hilfreich, wenn man diese direkt als Reveal.js Folien zeigen könnte. Hier ein Beispiel einer solchen Seite: HTML Basics in Frontend Development. Eine basale MI-Reveal Lib ist auch schon vorhanden. Zu konzipieren und entwickeln ist hier eine „Slidify” Funktion, wo mit einem Knopfdruck die entsprechende Seite als Foliensatz dargestellt wird.

Aufwand/Budget(Std.): Recherche/Basiskonzept 8 Std., danach bitte noch mal mit mir verhandeln.

[mariofaske]

Folgende Idee versuche ich gerade umzusetzen:

Sobald jekyll die Seite generiert, kann man über ein Plugin vor dem build npm start ausführen:

module RunNodeBefore
    def self.process(site, payload)
      return if @processed
      system "npm start" 
      @processed = true
    end
  end

  Jekyll::Hooks.register :site, :pre_render do |site, payload|
    RunNodeBefore.process(site, payload)
  end

Damit möchte ich die Generierung der slides vor den build-Prozess legen, ohne das der Nutzer eine zusätzliche Aktion durchführen muss. Ich bin gerade dabei, Teile des mi-slides repos in das wtw repo zu integrieren, dafür muss ich aber auch die mi-slides.js umschreiben, da ich keinen command prompt benötige und ich muss die slide-generierung für jede markdown seite ausführen und im finalen Ordner der Seite speichern, damit ich diese dann später für die jeweiligen Veranstaltungsseiten aufrufen kann.

TODO:

• [x] mi-slides repo mit allen Abhängigkeiten etc integrieren (reveal, node modules etc)
• [x] mi-slides.js für das Projekt anpassen (command prompt entfernen etc)
• [x] markdowns anpassen für mi-slides
• [ ] generierte sldies im Ordner der Seite zwischen speichern
• [x] Veranstaltungsseiten anpassen um den Aufruf der slides zu ermöglichen (Button o.ä.)

Punkt 4 (generierte sldies im Ordner der Seite zwischen speichern) gestaltet sich schwierig, da jekyll den Ordner _site komplett überschreibt (vll sogar vorher löscht) so dass die gespeicherten slides, nach dem jeykll fertig ist mit der Generierung, verschwunden sind.

Die generierten slides werden nun im Order _lehrveranstaltungen gespeichert, wo auch die jeweiligen markdown Dateien der einzelnen Lehrveranstaltungen liegen. Jekyll nimmt diese dann und kopiert sie in den Ordner _site/lehrveranstaltungen. Das Problem hierbei ist aber, dass dadurch 5k+ neue Dateien entstehen, da für jede markdown Datei eine komplette Ordnerstruktur erstellt wird.

• [ ] Ich werde versuchen, dir Ordnerstruktur nur einmal zu generieren und alle aus den markdnwon Dateien generierten index.html's referenzieren darauf.

Hat leider alles nicht so geklappt wie geplant, als Proof of Concept funktoniert das bisher erreichte aber: https://github.com/mariofaske/mi-bachelor-webdevelopment

Aktuelle Funktionsweise:

Bevor jekyll die eigentlichen Seiten generiert, wird mittels eines plugins node ausgeführt, genauer gesagt npm start static, wodurch die slides für jede markdown Datei im Ordner "lehrveranstaltungen" erzeugt werden. Für einen ersten Proof of Concept beschränkt sich die slide-Erzeugung zunächst auf fd1-04-05.md. Damit die mi-slides.js library erkennt, welcher Teil der markdown Datei in slides verwandelt werden soll, wurde slide-is:start hinzugefügt. Das heißt, ab dieser Zeile verarbeitet reveal die markdown Datei und generiert die slides. Über einen Button auf der Veranstaltungsseite kann diese erzeugte slide nun aufgerufen werden, jedoch gibt es noch ein paar Probleme:

• Die slides, und notwendige styles, werden im Ordner lehrveranstaltungen gespeichert, dieser wird von jekyll auch in den Ordner _site/lehrveranstaltungen kopiert, aber direkt wieder gelöcht. Wenn jedoch ein "Regenerating" getriggert wird, kopiert jekyll brav den Ordner. Abhilfe sollte hier ein AJAX Request schaffen, obwohl das unterbringen der slides im "working-Folder" der webseite eleganter wäre.
• Aktuell habe ich es noch nicht hinbekommen, die notwendige CSS für die slides bereitzustellen, dadurch können diese zwar geöffnet werden, entsprechen aber nicht dem geplanten style. Auch hier kann ein AJAX Request Abhilfe schaffen, obwohl ein bisschen rumspielen mit der Pfadangabe ausreichen sollte.