handled basic display of folded and non-folded callouts, without the active bits

src/dragonglass/mparse.py

@@ -867,7 +867,10 @@ class ObsidianStyleBlockquotes(Extension):
         CALLOUT = re.compile(r'^\[!([a-z]+)\]([-+])?(?:[ ]+(.*))?')
         CALLOUT_DEFICON = 'pencil'
         CALLOUT_ICONS = {
+            'faq': 'circle-help',
+            'help': 'circle-help',
             'info': 'info',
+            'question': 'circle-help',
             'tip': 'flame'
         }
 
@@ -888,20 +891,35 @@ class ObsidianStyleBlockquotes(Extension):
         def callout_block(self, parent: etree.Element, lines: list[str]) -> None:
             m = self.CALLOUT.match(lines[0])
             callout_type = m.group(1)
-            # folding = m.group(2)
+            folding = m.group(2)
             title = m.group(3)
             if not title:
                 title = callout_type.title()
-            base_div = etree.SubElement(parent, 'div', {'class': 'callout', 'data-callout': callout_type})
+            baseclass = 'callout'
+            if folding:
+                baseclass = f"{baseclass} is-collapsible"
+                if folding == '-':
+                    baseclass = f"{baseclass} is-collapsed"
+            base_div = etree.SubElement(parent, 'div', {'class': baseclass, 'data-callout': callout_type})
             title_div = etree.SubElement(base_div, 'div', {'class': 'callout-title'})
             icon_div = etree.SubElement(title_div, 'div', {'class': 'callout-icon'})
             etree.SubElement(icon_div, 'span',
                              {'data-lucide': self.CALLOUT_ICONS.get(callout_type, self.CALLOUT_DEFICON)})
             inner_title_div = etree.SubElement(title_div, 'div', {'class': 'callout-title-inner'})
             inner_title_div.text = title
+            if folding:
+                baseclass = 'callout-fold'
+                if folding == '-':
+                    baseclass = f"{baseclass} is-collapsed"
+                fold_div = etree.SubElement(title_div, 'div', {'class': baseclass})
+                etree.SubElement(fold_div, 'span',
+                                 {'data-lucide': 'chevron-right' if folding == '-' else 'chevron-down'})
             lines.pop(0)
             if len(lines) > 0:
                 content_div = etree.SubElement(base_div, 'div', {'class': 'callout-content'})
+                if folding:
+                    styleval = 'display: none;' if folding == '-' else ''
+                    content_div.attrib['style'] = styleval
                 first = True
                 for line in lines:
                     if first:

src/dragonglass/style.py

@@ -52,7 +52,6 @@ th {
 }
 .callout {
     --callout-color: 8, 109, 221;
-    --callout-icon: lucide-pencil;
     display: block;
     overflow: hidden;
     border-style: solid;
@@ -64,13 +63,14 @@ th {
     background-color: rgba(var(--callout-color), 0.1);
     padding: 12px 12px 12px 24px;
 }
+.callout[data-callout="question"], .callout[data-callout="help"], .callout[data-callout="faq"] {
+    --callout-color: 236, 117, 0;
+}
 .callout[data-callout="info"] {
     --callout-color: 8, 109, 221;
-    --callout-icon: lucide-info;
 }
 .callout[data-callout="tip"] {
     --callout-color: 0, 191, 188;
-    --callout-icon: lucide-flame;
 }
 .callout-title {
     padding: 0;