Improve Stacked HTML rendering code

iamgio · Jun 23, 2024 · ae954f9 · ae954f9
1 parent 3f0e044
commit ae954f9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
@@ -58,17 +58,18 @@ class QuarkdownHtmlNodeRenderer(context: Context) : BaseHtmlNodeRenderer(context
     override fun visit(node: Aligned) = div("align align-" + node.alignment.name.lowercase(), node.children)
 
     override fun visit(node: Stacked): CharSequence {
-        return tagBuilder("div", node.children)
-            .attribute("class", "stack stack-" + node.orientation.asCSS)
-            .style {
+        return div("stack stack-${node.orientation.asCSS}") {
+            +node.children
+
+            style {
                 "justify-content" value node.mainAxisAlignment
                 "align-items" value node.crossAxisAlignment
                 "gap" value node.gap
             }
-            .build()
+        }
     }
 
-    override fun visit(node: Clipped) = div("clip-" + node.clip.asCSS, node.children)
+    override fun visit(node: Clipped) = div("clip-${node.clip.asCSS}", node.children)
 
     override fun visit(node: Box) =
         div("box") {

diff --git a/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt b/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt
@@ -224,7 +224,7 @@ class FullPipelineTest {
             """.trimIndent(),
         ) {
             assertEquals(
-                "<div class=\"stack stack-horizontal\" style=\"justify-content: flex-start; align-items: center;\">" +
+                "<div style=\"justify-content: flex-start; align-items: center;\" class=\"stack stack-horizontal\">" +
                     "<p>Hello 1\nHello 2</p><p>Hello 3</p>" +
                     "</div>",
                 it,
@@ -242,7 +242,7 @@ class FullPipelineTest {
             """.trimIndent(),
         ) {
             assertEquals(
-                "<div class=\"stack stack-vertical\" style=\"justify-content: space-between; align-items: flex-start; gap: 1.0cm;\">" +
+                "<div style=\"justify-content: space-between; align-items: flex-start; gap: 1.0cm;\" class=\"stack stack-vertical\">" +
                     "<p>Hello 1</p>" +
                     "<h2>Hello 2</h2>" +
                     "<pre><code>Hello 3</code></pre>" +
@@ -272,11 +272,11 @@ class FullPipelineTest {
             """.trimIndent(),
         ) {
             assertEquals(
-                "<div class=\"stack stack-horizontal\" style=\"justify-content: center; align-items: center; gap: 200.0px;\">" +
-                    "<div class=\"stack stack-vertical\" style=\"justify-content: flex-start; align-items: flex-end;\">" +
+                "<div style=\"justify-content: center; align-items: center; gap: 200.0px;\" class=\"stack stack-horizontal\">" +
+                    "<div style=\"justify-content: flex-start; align-items: flex-end;\" class=\"stack stack-vertical\">" +
                     "<h1>Quarkdown</h1><p>A cool language</p>" +
                     "</div>" +
-                    "<div class=\"stack stack-vertical\" style=\"justify-content: flex-start; align-items: center; gap: 1.0cm;\">" +
+                    "<div style=\"justify-content: flex-start; align-items: center; gap: 1.0cm;\" class=\"stack stack-vertical\">" +
                     "<div class=\"clip-circle\">" +
                     "<p><img src=\"img1.png\" alt=\"\" /></p>" +
                     "</div>" +