Add support for icons in cards

Author: Andy2003

neoteroi/mkdocs/cards/html.py

@@ -2,6 +2,7 @@
 import xml.etree.ElementTree as etree
 from dataclasses import dataclass
 
+from neoteroi.mkdocs.markdown.images import build_icon_html
 from neoteroi.mkdocs.markdown.images import build_image_html
 
 from .domain import CardItem, Cards
@@ -64,7 +65,12 @@ def build_item_html(self, parent, item: CardItem):
 
         wrapper_element = etree.SubElement(first_child, "div", {})
 
-        self.build_image_html(wrapper_element, item)
+        if item.image:
+            self.build_image_html(wrapper_element, item)
+        elif item.icon:
+            build_icon_html(etree.SubElement(
+                wrapper_element, "div", {"class": "nt-card-icon"}
+            ), item.icon)
 
         text_wrapper = etree.SubElement(
             wrapper_element, "div", {"class": "nt-card-content"}

styles/cards.scss

@@ -112,6 +112,16 @@
     margin-top: 5px;
 }
 
+.nt-card .nt-card-icon {
+  text-align: center;
+  padding-top: 12px;
+  min-height: 120px;
+}
+
+.nt-card .nt-card-icon .icon {
+  font-size: 95px;
+  line-height: 1;
+}
 
 .nt-card a:hover,
 .nt-card a:focus {

tests/test_cards.py

@@ -67,6 +67,14 @@
 </div>
 """
 
+EXAMPLE_6 = """
+<div class="nt-cards nt-grid cols-3">
+<div class="nt-card"><a href="/some-path/a"><div><div class="nt-card-icon"><img alt="step icon" class="icon" src="/img/icons/icon.svg" /></div><div class="nt-card-content"><p class="nt-card-title">Title A</p><p class="nt-card-text">Lorem ipsum dolor sit amet 1.</p></div></div></a></div>
+<div class="nt-card"><a href="/some-path/b"><div><div class="nt-card-icon"><i class="fa-solid fa-star icon"></i></div><div class="nt-card-content"><p class="nt-card-title">Title B</p><p class="nt-card-text">Lorem ipsum dolor sit amet 2.</p></div></div></a></div>
+<div class="nt-card"><a href="/some-path/c"><div><div class="nt-card-icon"><span class="icon">:octicons-bug-16:</span></div><div class="nt-card-content"><p class="nt-card-title">Title C</p><p class="nt-card-text">Lorem ipsum dolor sit amet 3.</p></div></div></a></div>
+</div>
+"""
+
 
 def test_base_cards_processor_raises_for_not_list_input():
     processor = BaseCardsProcessor()
@@ -248,3 +256,36 @@ def test_cards_extension_image_tags(example, expected_result):
 def test_cards_extension(example, expected_result):
     html = markdown.markdown(example, extensions=[CardsExtension(priority=100)])
     assert equal_html(html, expected_result)
+
+
+@pytest.mark.parametrize(
+    "example,expected_result",
+    [
+        [
+            """
+            ::cards::
+
+            - title: Title A
+              url: /some-path/a
+              content: Lorem ipsum dolor sit amet 1.
+              icon: /img/icons/icon.svg
+
+            - title: Title B
+              url: /some-path/b
+              content: Lorem ipsum dolor sit amet 2.
+              icon: "fa-solid fa-star"
+
+            - title: Title C
+              url: /some-path/c
+              content: Lorem ipsum dolor sit amet 3.
+              icon: ":octicons-bug-16:"
+
+            ::/cards::
+            """,
+            EXAMPLE_6,
+        ],
+    ],
+)
+def test_cards_extension_icons(example, expected_result):
+    html = markdown.markdown(example, extensions=[CardsExtension(priority=100)])
+    assert html.strip() == expected_result.strip()