Table of content links issue with fixed top nabvar

[fbeaufume]

Using Eleventy 1.0.2 to generate a site. The HTML layout uses a fixed top navbar from Bootstrap. A table of content is generated using the "eleventy-plugin-toc" plugin.

The problem I faced is that because of the fixed top navbar, the anchor links generated by the TOC plugin were incorrect. A click on a TOC link would scroll down a bit too far.

I "solved" this by :

• Wrapping my H3 titles by an extra HTML "section" element: <section id="foo"><h3>Foo</h3></section>
• Adding a bit of CSS: section { padding-top: 56px; margin-top: -56px; }
• Configuring the TOC plugin to use "section" rather than "h3": config.addPlugin(tocPlugin, { tags: ['section'], wrapper: '', ul: true });

It works from my Nunjucks templates but seems a bit complicated and more importantly I think this will not work in markdown templates.

So, are there better solutions ? Solutions that work with markdown templates ?

For example are there callbacks or APIs that allow me to preprocess or postprocess things myself to fix the links position ?

[btrem]

This sounds like a clash with a specific bootstrap layout and your page structure. Can you modify the css?

[btrem]

To put it another way, wouldn't the same problem arise in any webpage with a fixed top nav and in-page links, e.g., <a href="#foo">foo section</a>? I know I encounter this on certain websites (and curse the designer who made it).

[fbeaufume]

Indeed I fixed the issue using a bit of HTML and CSS. But this will not work with markdown templates.
My question is: are there ways with Eleventy to customize the HTML generated from a markdown template ?

[btrem]

I'm not sure what you mean by "customize the HTML generated from a markdown template." If you mean change what HTML is produced by e.g. ### Foo, not easily. Have you looked at markdown-it container?

Or perhaps a paired shortcode? I use that to wrap a markdown block into <section><h2>foo</h2><!-- markdown stuff like ol elements --></section>. You could do something similar to get a section in your HTML output.

I don't use bootstrap, but can you apply the padding to <h3> instead of <section>?

[fbeaufume]

Thank you for the ideas.

Basically, for a ### Some section title markdown piece of template, I'd like to generate <section id="some-section-title"><h3 class="py-3">Some section title</h3></section> rather than the default <h3>Some section title</h3> with the least intrusive solution possible on the markdown I have to write.

I'm ok to write some JavaScript, if it keeps my markdown templates clean. :) For example the shortcode approach is a bit too intrusive on the markdown, and also possibly not WYSIWYG-friendly with the IntelliJ (the text editor that I use) markdown editor plugin.

I didn't know about markdown-it-container. I'll have a look. Do you this it could meet my requirements ?

[fbeaufume]

I tried markdown-it-container. It seems to require using some ::: Some section title ::: rather than the regular ### Some section title. So far the shoft code is the best solution, but intrusive. I'll open an issue to try and get better solutions.

[btrem]

Here's my paired shortcode:

eleventyConfig.addPairedShortcode("directions", function(content) {
    return `<section>
<h2>Directions</h2>
<div class="directions">
    ${content}
</div>
</section>`;
});

And in a markdown file, I can do this:

{% directions %}

1. Step 1.
1. Step 2.
1. Step 3.

{% enddirections %}

The html output is this:

<section>
<h2>Directions</h2>
<div class="directions">
<ol>
    <li>Step 1.</li>
    <li>Step 2.</li>
    <li>Step 3.</li>
</ol>
</div>
</section>