diff --git a/src/dragonglass/mparse.py b/src/dragonglass/mparse.py index 4c21ed6..3951269 100644 --- a/src/dragonglass/mparse.py +++ b/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: diff --git a/src/dragonglass/style.py b/src/dragonglass/style.py index 48f1799..398871b 100644 --- a/src/dragonglass/style.py +++ b/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;