Mark quotes with localized labels as 'labeled' for CSS styling

iamgio · Sep 24, 2024 · 87a66a4 · 87a66a4
1 parent 8b84216
commit 87a66a4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 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
@@ -318,9 +318,15 @@ class QuarkdownHtmlNodeRenderer(context: Context) : BaseHtmlNodeRenderer(context
             // and a localized label is shown (e.g. 'Tip:' for English).
             node.type?.asCSS?.let { type ->
                 `class`(type)
-                // The localized label is set as a CSS variable.
-                // Themes can customize label appearance and formatting.
-                style { "--quote-type-label" value context.localizeOrNull(type)?.let { "'$it'" } }
+                // The type is associated to a localized label
+                // only if the documant language is set and the set language is supported.
+                context.localizeOrNull(type)?.let { localizedLabel ->
+                    // The localized label is set as a CSS variable.
+                    // Themes can customize label appearance and formatting.
+                    style { "--quote-type-label" value "'$localizedLabel'" }
+                    // The quote is marked as labeled to allow further customization.
+                    attribute("data-labeled", "")
+                }
             }
 
             +node.children

diff --git a/core/src/main/resources/render/theme/global.css b/core/src/main/resources/render/theme/global.css
@@ -109,7 +109,7 @@ blockquote[class] {
     --quote-type-label: "";
 }
 
-blockquote[class] :first-child::before {
+blockquote[class][data-labeled] :first-child::before {
     content: var(--quote-type-label) var(--qd-quote-type-label-suffix);
     font-weight: bold;
 }

diff --git a/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt b/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt
@@ -182,7 +182,7 @@ class FullPipelineTest {
             """.trimIndent(),
         ) {
             assertEquals(
-                "<blockquote class=\"tip\" style=\"--quote-type-label: 'Consiglio';\">" +
+                "<blockquote class=\"tip\" style=\"--quote-type-label: 'Consiglio';\" data-labeled=\"\">" +
                     "<p>you could try Quarkdown.<br />" +
                     "It&rsquo;s a cool language!</p>" +
                     "<p class=\"attribution\"><strong>iamgio</strong></p>" +