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_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:

View File

@ -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;