feature: tags for slides

renderer/fifty_ohm_html_slide_renderer.py

@@ -5,6 +5,7 @@ from renderer.fifty_ohm_html_renderer import FiftyOhmHtmlRenderer
 
 from .qso import Qso
 from .slide_break import SlideBreak
+from .tag import Tag
 
 
 class FiftyOhmHtmlSlideRenderer(FiftyOhmHtmlRenderer):
@@ -13,6 +14,7 @@ class FiftyOhmHtmlSlideRenderer(FiftyOhmHtmlRenderer):
         super().__init__(
             SlideBreak,
             Qso,
+            Tag,
             question_renderer=question_renderer,
             picture_handler=picture_handler,
             photo_handler=photo_handler,
@@ -38,10 +40,26 @@ class FiftyOhmHtmlSlideRenderer(FiftyOhmHtmlRenderer):
             return f'<section {token.attribute}>\n{inner}\n</section>\n'
 
     def render_qso(self, token):
-        qso = ""
+        qso = '<div class="qso r-fit-text">\n'
         for child in token.children:
             direction = "other" if child.received else "own"
             fade = "fragment fade-left" if child.received else "fragment fade-right"
             qso += f'<div class="qso_{direction} {fade}">{self.render_inner(child)}</div>\n'
+        qso += '</div>\n'
         return qso
 
+    def render_note(self, token):
+        return f'<aside class="notes">\n{self.render_inner(token)}\n</aside>\n'
+
+    def render_tag(self, token):
+        if token.tagtype == "fragment":
+            return f'<div class="fragment">\n{self.render_inner(token)}\n</div>\n'
+        if token.tagtype == "left":
+            return f'<div id="left">\n{self.render_inner(token)}\n</div>\n'
+        if token.tagtype == "right":
+            return f'<div id="right">\n{self.render_inner(token)}\n</div>\n'
+        elif token.tagtype == "note":
+            return f'<aside class="notes">\n{self.render_inner(token)}\n</aside>\n'
+        else:
+            return "" # Ignore other tags in slide context
+

renderer/slide_break.py

@@ -1,5 +1,4 @@
 
-# ^\s*---\s*(.*)\s*$
 import re
 
 from mistletoe.block_token import BlockToken, tokenize

renderer/tag.py

@@ -3,6 +3,7 @@ import re
 from mistletoe.block_token import BlockToken, tokenize
 
 captures = [
+    # Website:
     "margin",
     "indepth",
     "webmargin",
@@ -18,7 +19,11 @@ captures = [
     "webonly",
     "latexonly",
     "wordorigin",
+    # Slides:
+    "note",
     "fragment",
+    "left",
+    "right",
 ]
 
 

test/acceptanceTestSlides.md

@@ -1,3 +1,44 @@
+# Akzeptanztest
+
+--- style="font-size: 4pt;"
+
+## Kleinere Schrift
+* Längere
+* Liste
+
+---
+
+## Folie mit direktem Übergang
+Mit Text
+
+--- data-transition="none"
+
+## Folie mit direktem Übergang
+Mit anderem Text
+
+---
+
+## Externer Link und Formel
+
+[Link zum DARC](https://darc.de/)
+
+$\lambda[[\text{m}]] = \dfrac{300}{f[[\text{MHz}]]} = \dfrac{300}{145,3 \ \text{MHz}} \approx 2,06 \ \text{m}$
+
+---
+
+## Notes Test
+
+Diese Folie hat Notizen
+
+<note>
+Die Notiz wird nur in der Speaker-Ansicht angezeigt
+* Listen sind auch möglich
+* Am besten <u>kurz</u> halten
+* Der Platz ist *begrenzt*
+</note>
+
+---
+
 ## Fragment Test
 
 Dies ist ein Text der direkt da ist
@@ -19,6 +60,8 @@ CQ CQ hier ist DL1PZ mit einem allgemeinen Anruf, hier ist DL1PZ und hört.
 > DL1PZ hier ist DL9MJ bitte kommen
 </qso>
 
+---
+
 ## Slide mit Picture
 
 [picture:123:p_test:testbild]
@@ -62,4 +105,31 @@ Slide C
 
 ## Slide PINK
 
-PINK
+PINK
+
+## Iframe als Hintergrund
+
+--- data-background-iframe="https://f5len.org/tools/locator/" data-background-interactive
+
+---
+
+## Double Column
+
+<left>
+[photo:167:rufzeichen_flugzeug:Flugzeug mit dem Rufzeichen DEBPF]
+</left>
+<right>
+* Funkstationen verwenden Rufzeichen, um sich zu identifizieren
+* Folge von Buchstaben und Ziffern
+* Jedes mit Funk ausgerüstete Flugzeug und Schiff hat ein Rufzeichen
+</right>
+
+---
+
+## Folie mit direktem Übergang
+Mit Text
+
+--- data-transition="none"
+
+## Folie mit direktem Übergang
+Mit anderem Text ... keine ahnung ob das je ging?

test/test_html_slides.py

@@ -85,7 +85,8 @@ def question_stub(input):
         )
 
 def print_head():
-    return """<html><head>
+    return """<! DOCTYPE html>
+    <html lang="de"><head>
     <meta charset="utf-8">
 
     <title>DARC Ausbildungsplattform</title>