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

This commit is contained in:
Amy G. Bowersox 2024-08-11 01:56:55 -06:00
parent 18f5f36072
commit dd01597ac5
2 changed files with 23 additions and 5 deletions

View File

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

View File

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