From 2b05db77a472f062084254c0fb21a6b5c4afd2f4 Mon Sep 17 00:00:00 2001
From: "Prof. Dr. Matthias Jung DL9MJ" <dl9mj@darc.de>
Date: Sat, 7 Dec 2024 20:20:49 +0100
Subject: [PATCH 1/4] feature: First tag implementation

---
 renderer/fifty_ohm_html_renderer.py |  9 +++++++--
 renderer/tag.py                     | 27 +++++++++++++++++++++++++++
 test/test_tag.py                    | 14 ++++++++++++++
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 renderer/tag.py
 create mode 100644 test/test_tag.py

diff --git a/renderer/fifty_ohm_html_renderer.py b/renderer/fifty_ohm_html_renderer.py
index fa6a6ab..0a73fed 100644
--- a/renderer/fifty_ohm_html_renderer.py
+++ b/renderer/fifty_ohm_html_renderer.py
@@ -1,12 +1,14 @@
 from mistletoe import HtmlRenderer
 
 from renderer.comment import Comment
+from renderer.tag import Tag
 from renderer.quote import Quote
+from renderer.underline import Underline
 
 
 class FiftyOhmHtmlRenderer(HtmlRenderer):
     def __init__(self):
-        super().__init__(Comment, Quote)
+        super().__init__(Comment, Quote, Underline, Tag)
 
     def render_comment():
         return None
@@ -15,4 +17,7 @@ class FiftyOhmHtmlRenderer(HtmlRenderer):
         return f"„{self.render_inner(token)}“"
 
     def render_underline(self, token):
-        return f"<u>{self.render_inner(token)}</u>"
\ No newline at end of file
+        return f"<u>{self.render_inner(token)}</u>"
+
+    def render_tag(self, token):
+        return f'<div class="{token.tagtype}">{self.render_inner(token)}</div>'
\ No newline at end of file
diff --git a/renderer/tag.py b/renderer/tag.py
new file mode 100644
index 0000000..05d089b
--- /dev/null
+++ b/renderer/tag.py
@@ -0,0 +1,27 @@
+import re
+
+from mistletoe.block_token import BlockToken, tokenize
+
+
+class Tag(BlockToken):
+
+    @staticmethod
+    def start(line):
+        return re.match(r"^\s*<[^>]+>", line)
+
+    @classmethod
+    def read(cls, lines):
+        child_lines = []
+        first_line = next(lines)
+
+        tagtype = re.match(r"^\s*<([^>]+)>", first_line).group(1)
+
+        for line in lines:
+            if line.startswith(f"</{tagtype}>"):
+                break
+            else :
+                child_lines.append(line)
+        return tagtype, tokenize(child_lines)
+
+    def __init__(self, match):
+        self.tagtype, self.children = match
\ No newline at end of file
diff --git a/test/test_tag.py b/test/test_tag.py
new file mode 100644
index 0000000..57b4bfe
--- /dev/null
+++ b/test/test_tag.py
@@ -0,0 +1,14 @@
+import mistletoe
+
+from renderer.fifty_ohm_html_renderer import FiftyOhmHtmlRenderer
+
+
+def test_tag_html() :
+
+    assertions = {
+        "<margin>\nFoo\n</margin>" : '<div class="margin"><p>Foo</p></div>\n',
+        "<indepth>\nFoo\n</indepth>" : '<div class="indepth"><p>Foo</p></div>\n',
+    }
+
+    for assertion in assertions:
+        assert mistletoe.markdown(assertion, FiftyOhmHtmlRenderer) == assertions[assertion]

From 17863ec1357d16ad627483181d050cd33ef1e42f Mon Sep 17 00:00:00 2001
From: "Prof. Dr. Matthias Jung DL9MJ" <dl9mj@darc.de>
Date: Sat, 7 Dec 2024 22:35:52 +0100
Subject: [PATCH 2/4] refactor: increase verbosoty of tests

---
 .vscode/settings.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3e99ede..ac3c7a4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
     "python.testing.pytestArgs": [
-        "."
+        ".",
+        "-vv"
     ],
     "python.testing.unittestEnabled": false,
     "python.testing.pytestEnabled": true

From de782b53766ff58e613716848544f3bcb5ae888a Mon Sep 17 00:00:00 2001
From: "Prof. Dr. Matthias Jung DL9MJ" <dl9mj@darc.de>
Date: Sat, 7 Dec 2024 22:36:25 +0100
Subject: [PATCH 3/4] feature: added thematic break and all tags

---
 renderer/fifty_ohm_html_renderer.py | 59 ++++++++++++++++++++++++++++-
 test/test_tag.py                    | 35 ++++++++++++++---
 2 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/renderer/fifty_ohm_html_renderer.py b/renderer/fifty_ohm_html_renderer.py
index 0a73fed..0695e89 100644
--- a/renderer/fifty_ohm_html_renderer.py
+++ b/renderer/fifty_ohm_html_renderer.py
@@ -1,4 +1,5 @@
 from mistletoe import HtmlRenderer
+import textwrap
 
 from renderer.comment import Comment
 from renderer.tag import Tag
@@ -7,6 +8,10 @@ from renderer.underline import Underline
 
 
 class FiftyOhmHtmlRenderer(HtmlRenderer):
+
+    margin_anchor_id = 0
+    margin_id = 0
+
     def __init__(self):
         super().__init__(Comment, Quote, Underline, Tag)
 
@@ -19,5 +24,57 @@ class FiftyOhmHtmlRenderer(HtmlRenderer):
     def render_underline(self, token):
         return f"<u>{self.render_inner(token)}</u>"
 
+    def render_thematic_break(self, token):
+        self.margin_anchor_id += 1
+        return f'<a id="margin_{self.margin_anchor_id}"></a>'
+
+    @staticmethod
+    def render_tag_helper(type, content, margin_id, margin_anchor_id):
+        """ This function is used to render the different types of tags. It is
+        used in the HtmlRenderer class and also in the test class """
+        return textwrap.dedent(f'''\
+            <div class="margin {type}" id="margin_for_{margin_id}">
+                {content}
+            </div>
+            <a id="margin_orig_{margin_id}"></a>
+            <script>
+            (() => {{
+                function moveFunc() {{
+                    const targetEl = document.getElementById(
+                        window.innerWidth > 800 ? "margin_{margin_anchor_id}" : "margin_orig_{margin_id}"
+                    );
+                    targetEl.parentNode.insertBefore(
+                        document.getElementById("margin_for_{margin_id}"),
+                        targetEl
+                    );
+                }}
+                addEventListener("resize", moveFunc);
+                moveFunc();
+            }})();
+            </script>
+        ''')
+
     def render_tag(self, token):
-        return f'<div class="{token.tagtype}">{self.render_inner(token)}</div>'
\ No newline at end of file
+        if(token.tagtype == "latexonly"):
+            return ""
+        elif(token.tagtype == "webonly"):
+            return self.render_inner(token)
+
+        self.margin_id += 1
+
+        if(token.tagtype == "webmargin"):
+            type = "margin"
+        elif(token.tagtype == "webtip"):
+            type = "tipp"
+        elif(token.tagtype == "webindepth"):
+            type = "indepth"
+        else :
+            type = token.tagtype
+
+        return self.render_tag_helper(
+            type,
+            self.render_inner(token),
+            self.margin_id,
+            self.margin_anchor_id
+        )
+    
\ No newline at end of file
diff --git a/test/test_tag.py b/test/test_tag.py
index 57b4bfe..7843bff 100644
--- a/test/test_tag.py
+++ b/test/test_tag.py
@@ -2,13 +2,38 @@ import mistletoe
 
 from renderer.fifty_ohm_html_renderer import FiftyOhmHtmlRenderer
 
-
-def test_tag_html() :
-
+def test_thematic_break_html() :
     assertions = {
-        "<margin>\nFoo\n</margin>" : '<div class="margin"><p>Foo</p></div>\n',
-        "<indepth>\nFoo\n</indepth>" : '<div class="indepth"><p>Foo</p></div>\n',
+        "---" : '<a id="margin_1"></a>\n',
+        "---\n---" : '<a id="margin_1"></a>\n<a id="margin_2"></a>\n',
     }
 
     for assertion in assertions:
         assert mistletoe.markdown(assertion, FiftyOhmHtmlRenderer) == assertions[assertion]
+
+def test_tag_html() :
+
+    assertions = {
+        "<margin>\nFoo\n</margin>" : FiftyOhmHtmlRenderer.render_tag_helper("margin","<p>Foo</p>",1,0)+'\n',
+        "<indepth>\nFoo\n</indepth>" : FiftyOhmHtmlRenderer.render_tag_helper("indepth","<p>Foo</p>",1,0)+'\n',
+        "<webmargin>\nFoo\n</webmargin>" : FiftyOhmHtmlRenderer.render_tag_helper("margin","<p>Foo</p>",1,0)+'\n',
+        "<tipp>\nFoo\n</tipp>" : FiftyOhmHtmlRenderer.render_tag_helper("tipp","<p>Foo</p>",1,1)+'\n',
+        "<webtipp>\nFoo\n</webtipp>" : FiftyOhmHtmlRenderer.render_tag_helper("webtipp","<p>Foo</p>",1,0)+'\n',
+        "<webindepth>\nFoo\n</webindepth>" : FiftyOhmHtmlRenderer.render_tag_helper("indepth","<p>Foo</p>",1,0)+'\n',
+        "<webonly>\nFoo\n</webonly>" : '<p>Foo</p>\n',
+        "<latexonly>\nFoo\n</latexonly>" : "",
+    }
+
+    for assertion in assertions:
+        assert mistletoe.markdown(assertion, FiftyOhmHtmlRenderer) == assertions[assertion]
+
+def test_thematic_break_and_tag_html() :
+
+    assertions = {
+        "---\n<margin>\nFoo\n</margin>" : '<a id="margin_1"></a>\n'+FiftyOhmHtmlRenderer.render_tag_helper("margin","<p>Foo</p>",1,1)+'\n',
+        "---\n<margin>\nFoo\n</margin>\n<margin>\nFoo\n</margin>" : '<a id="margin_1"></a>\n'+FiftyOhmHtmlRenderer.render_tag_helper("margin","<p>Foo</p>",1,1)+'\n'+FiftyOhmHtmlRenderer.render_tag_helper("margin","<p>Foo</p>",2,1)+'\n',
+        "---\n<margin>\nFoo\n</margin>\n---\n<margin>\nFoo\n</margin>" : '<a id="margin_1"></a>\n'+FiftyOhmHtmlRenderer.render_tag_helper("margin","<p>Foo</p>",1,1)+'\n<a id="margin_2"></a>\n'+FiftyOhmHtmlRenderer.render_tag_helper("margin","<p>Foo</p>",2,2)+'\n',
+    }
+
+    for assertion in assertions:
+        assert mistletoe.markdown(assertion, FiftyOhmHtmlRenderer) == assertions[assertion]
\ No newline at end of file

From cdd61d463f48ce17696a91e9e0cb32842e272dee Mon Sep 17 00:00:00 2001
From: "Prof. Dr. Matthias Jung DL9MJ" <dl9mj@darc.de>
Date: Sat, 7 Dec 2024 23:35:15 +0100
Subject: [PATCH 4/4] feature: add unit and danger tests

---
 test/test_tag.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/test_tag.py b/test/test_tag.py
index 7843bff..ba6ab95 100644
--- a/test/test_tag.py
+++ b/test/test_tag.py
@@ -17,9 +17,11 @@ def test_tag_html() :
         "<margin>\nFoo\n</margin>" : FiftyOhmHtmlRenderer.render_tag_helper("margin","<p>Foo</p>",1,0)+'\n',
         "<indepth>\nFoo\n</indepth>" : FiftyOhmHtmlRenderer.render_tag_helper("indepth","<p>Foo</p>",1,0)+'\n',
         "<webmargin>\nFoo\n</webmargin>" : FiftyOhmHtmlRenderer.render_tag_helper("margin","<p>Foo</p>",1,0)+'\n',
-        "<tipp>\nFoo\n</tipp>" : FiftyOhmHtmlRenderer.render_tag_helper("tipp","<p>Foo</p>",1,1)+'\n',
+        "<tipp>\nFoo\n</tipp>" : FiftyOhmHtmlRenderer.render_tag_helper("tipp","<p>Foo</p>",1,0)+'\n',
         "<webtipp>\nFoo\n</webtipp>" : FiftyOhmHtmlRenderer.render_tag_helper("webtipp","<p>Foo</p>",1,0)+'\n',
         "<webindepth>\nFoo\n</webindepth>" : FiftyOhmHtmlRenderer.render_tag_helper("indepth","<p>Foo</p>",1,0)+'\n',
+        "<unit>\nFoo\n</unit>" : FiftyOhmHtmlRenderer.render_tag_helper("unit","<p>Foo</p>",1,0)+'\n',
+        "<danger>\nFoo\n</danger>" : FiftyOhmHtmlRenderer.render_tag_helper("danger","<p>Foo</p>",1,0)+'\n',
         "<webonly>\nFoo\n</webonly>" : '<p>Foo</p>\n',
         "<latexonly>\nFoo\n</latexonly>" : "",
     }