This is a great opportunity to use a mixin, with javascript to transform your headline into an id-safe string.
Additionally, you can add a level parameter and use tag name interpolation to support multiple levels of headings.
Mixin:
mixin h(level, headline)
- let id = headline.toLowerCase().replace(' ', '-').replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');
section(id= id)
#{'h' + level}= headline
if block
block
Usage:
+h(2, 'Section A')
+h(2, 'Section B')
p Lorem ipsum dolor amit
+h(2, 'Section C')
p Lorem ipsum dolor amit
+h(3, 'Section C, Subsection A')
p Lorem ipsum dolor amit
Compiles to:
<section id="section-a">
<h2>Section A</h2>
</section>
<section id="section-b">
<h2>Section B</h2>
<p>Lorem ipsum dolor amit</p>
</section>
<section id="section-c">
<h2>Section C</h2>
<p>Lorem ipsum dolor amit</p>
<section id="section-c-subsection-a">
<h3>Section C, Subsection A</h3>
<p>Lorem ipsum dolor amit</p>
</section>
</section>