add convert admonition method to the semantic HTML 5 converter

asciidoctor · Dec 16, 2023 · fd266a1 · fd266a1
1 parent cc33772
commit fd266a1
Show file tree

Hide file tree

Showing 21 changed files with 638 additions and 1 deletion.
diff --git a/lib/asciidoctor/converter/semantic_html5.rb b/lib/asciidoctor/converter/semantic_html5.rb
@@ -69,7 +69,7 @@ def convert_paragraph node
 
   def convert_listing node
     caption = (caption = node.caption) ? %(<span class="label">#{caption}</span> ) : ''
-    title = node.title? ? %(<figcaption>#{caption}#{node.title}</figcaption>\n) : ''
+    title = node.title? ? %(<figcaption>#{caption}#{node.title}</figcaption>#{LF}) : ''
     attributes = common_html_attributes node.id, node.role, 'listing'
     nowrap = (node.option? 'nowrap') || !(node.document.attr? 'prewrap')
     if node.style == 'source'
@@ -96,6 +96,28 @@ def convert_thematic_break node
     '<hr>'
   end
 
+  def convert_admonition node
+    name = node.attr 'name'
+    text_label = node.attr 'textlabel'
+    attributes = common_html_attributes node.id, node.role, %(admonition #{name})
+    if node.document.attr? 'icons'
+      if (node.document.attr? 'icons', 'font') && !(node.attr? 'icon')
+        label = %(<span class="icon"><i class="fa icon-#{name}" title="#{text_label}"></i></span>)
+      else
+        label = %(<span class="icon"><img src="#{node.icon_uri name}" alt="#{text_label}"/></span>)
+      end
+    else
+      label = text_label
+    end
+    ret = []
+    ret << %(<admonition#{attributes}>)
+    ret << %(<strong class="label">#{label}</strong>)
+    # todo use whatever we decide on other blocks to display node.title
+    ret << node.content
+    ret << '</admonition>'
+    ret.join LF
+  end
+
   def convert_image node
     roles = []
     roles << node.role if node.role

diff --git a/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-id-title.adoc b/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-id-title.adoc
@@ -0,0 +1,34 @@
+[NOTE#the_note.role_1.role_2]
+====
+This is a note.
+
+The end.
+====
+
+[TIP#the_tip.role_1.role_2]
+====
+This is a tip.
+
+The end.
+====
+
+[IMPORTANT#the_important.role_1.role_2]
+====
+This is important.
+
+The end.
+====
+
+[CAUTION#the_caution.role_1.role_2]
+====
+This is a caution.
+
+The end.
+====
+
+[WARNING#the_warning.role_1.role_2]
+====
+This is a warning.
+
+The end.
+====
diff --git a/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-id-title.html b/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-id-title.html
@@ -0,0 +1,45 @@
+<admonition id="the_note" class="admonition note role_1 role_2">
+<strong class="label">Note</strong>
+<p>
+This is a note.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition id="the_tip" class="admonition tip role_1 role_2">
+<strong class="label">Tip</strong>
+<p>
+This is a tip.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition id="the_important" class="admonition important role_1 role_2">
+<strong class="label">Important</strong>
+<p>
+This is important.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition id="the_caution" class="admonition caution role_1 role_2">
+<strong class="label">Caution</strong>
+<p>
+This is a caution.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition id="the_warning" class="admonition warning role_1 role_2">
+<strong class="label">Warning</strong>
+<p>
+This is a warning.
+</p>
+<p>
+The end.
+</p>
+</admonition>
diff --git a/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-id.adoc b/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-id.adoc
@@ -0,0 +1,34 @@
+[NOTE#the_note]
+====
+This is a note.
+
+The end.
+====
+
+[TIP#the_tip]
+====
+This is a tip.
+
+The end.
+====
+
+[IMPORTANT#the_important]
+====
+This is important.
+
+The end.
+====
+
+[CAUTION#the_caution]
+====
+This is a caution.
+
+The end.
+====
+
+[WARNING#the_warning]
+====
+This is a warning.
+
+The end.
+====
diff --git a/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-id.html b/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-id.html
@@ -0,0 +1,45 @@
+<admonition id="the_note" class="admonition note">
+<strong class="label">Note</strong>
+<p>
+This is a note.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition id="the_tip" class="admonition tip">
+<strong class="label">Tip</strong>
+<p>
+This is a tip.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition id="the_important" class="admonition important">
+<strong class="label">Important</strong>
+<p>
+This is important.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition id="the_caution" class="admonition caution">
+<strong class="label">Caution</strong>
+<p>
+This is a caution.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition id="the_warning" class="admonition warning">
+<strong class="label">Warning</strong>
+<p>
+This is a warning.
+</p>
+<p>
+The end.
+</p>
+</admonition>
diff --git a/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-role.adoc b/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-role.adoc
@@ -0,0 +1,34 @@
+[NOTE.role_1.role_2]
+====
+This is a note.
+
+The end.
+====
+
+[TIP.role_1.role_2]
+====
+This is a tip.
+
+The end.
+====
+
+[IMPORTANT.role_1.role_2]
+====
+This is important.
+
+The end.
+====
+
+[CAUTION.role_1.role_2]
+====
+This is a caution.
+
+The end.
+====
+
+[WARNING.role_1.role_2]
+====
+This is a warning.
+
+The end.
+====
diff --git a/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-role.html b/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-role.html
@@ -0,0 +1,45 @@
+<admonition class="admonition note role_1 role_2">
+<strong class="label">Note</strong>
+<p>
+This is a note.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition class="admonition tip role_1 role_2">
+<strong class="label">Tip</strong>
+<p>
+This is a tip.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition class="admonition important role_1 role_2">
+<strong class="label">Important</strong>
+<p>
+This is important.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition class="admonition caution role_1 role_2">
+<strong class="label">Caution</strong>
+<p>
+This is a caution.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition class="admonition warning role_1 role_2">
+<strong class="label">Warning</strong>
+<p>
+This is a warning.
+</p>
+<p>
+The end.
+</p>
+</admonition>
diff --git a/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-title.adoc b/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-title.adoc
@@ -0,0 +1,39 @@
+[NOTE]
+.Here is a note
+====
+This is a note.
+
+The end.
+====
+
+[TIP]
+.Here is a tip
+====
+This is a tip.
+
+The end.
+====
+
+[IMPORTANT]
+.This is important
+====
+This is important.
+
+The end.
+====
+
+[CAUTION]
+.Here is a caution
+====
+This is a caution.
+
+The end.
+====
+
+[WARNING]
+.This is a warning
+====
+This is a warning.
+
+The end.
+====
diff --git a/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-title.html b/test/fixtures/semantic-html5-scenarios/admonitions-multi-with-title.html
@@ -0,0 +1,45 @@
+<admonition class="admonition note">
+<strong class="label">Note</strong>
+<p>
+This is a note.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition class="admonition tip">
+<strong class="label">Tip</strong>
+<p>
+This is a tip.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition class="admonition important">
+<strong class="label">Important</strong>
+<p>
+This is important.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition class="admonition caution">
+<strong class="label">Caution</strong>
+<p>
+This is a caution.
+</p>
+<p>
+The end.
+</p>
+</admonition>
+<admonition class="admonition warning">
+<strong class="label">Warning</strong>
+<p>
+This is a warning.
+</p>
+<p>
+The end.
+</p>
+</admonition>