Expose data from within markdown?

[ruiconti]

Hi all.

What I want: Ways to expose variables from within md, as its compiled result, and expose it to underlying nunjucks layouts.
Example: Consider that I have markdown-it-table-of-contents plugin, that strips out html of all headings of a markdown file.

filename: blog/post.md

---
layout: _include/layout.njk
---
{% set tableOfContents %}
  [[toc]]
{% endset %}

## Heading

{% set mainSnippet %}
\```tsx
const Component: React.FC = () => <div></div>
\```
{% endset %}

filename: _include/layout.njk

{{ tableOfContents }}
<article>
</article>
<div class="main-snippet">
{{ mainSnippet }}
</div>

filename: _site/blog/post.html

<div class="table-of-contents">
   <ul>
      <li><a href="#heading">Heading</a></li>
   </ul>
</div>
<article>
</article>
<div class="main-snippet">
 <code>
   <pre><span>const</span> <span>Component</span></pre>
 </code>
</div>

I've went through all of 11ty and nunjucks docs and couldn't find a good way to do this.

[pdehaan]

As far as I understand, if you use {% set %} in a template, the variable is local to that template, and doesn't pass around like if it was defined in front matter or in a directory/template data file. I can think of the following two suggestions/ideas:

1. If possible, set the [simple] values in front matter if you want to consume them in other templates/layouts.
2. Use something like Nunjuck's {% block %}…{% endblock %} tag to make blocks of content.

I'd have to try building everything locally, but I think the general syntax is something like this:

---
# filename: blog/post.md
---

{% extends "layout.njk" %}

{% block tableOfContents %}
  [[toc]]
{% endblock %}

{% block content %}
## Heading
{% endblock %}

{% block mainSnippet %}
\```tsx
const Component: React.FC = () => <div></div>
\```
{% endblock %}

---
# filename: _include/layout.njk
---

{% block tableOfContents %}{% endblock %}
<article>
{% block content %}{% endblock %}
</article>
<div class="main-snippet">
{% block mainSnippet %}{% endblock %}
</div>

[ruiconti]

Thanks for the quick reply, @pdehaan!

I should've mentioned it on the initial post, but I did try using {% block %} but I had issues with using the extends directive in a markdown file; apparently it is not compatible with the way 11ty does layout chaining internally? But I may be missing something. The only "unusual" frontmatter prop I'm setting is templateEngineOverride: md,njk.

Here's a screenshot of how it's being rendered:

I am leaning towards an approach of, instead of relying on doing the variable binding in markdown to be further processed in the right places on nunjuck layouts, to implement the transformations/bindings to work as filters that work on html instead of md.

[pdehaan]

Yeah, that's a bit tricky to debug without seeing the code.
I can see if I have any time this weekend to try creating a simpler test case w/ .md+njk files using {% block %} and {% extends %}.

[pdehaan]

It's not pretty, but shows some basic Nunjucks+Markdown+blocks usage: https://github.com/pdehaan/11ty-2521/

[ruiconti]

Thanks for taking the time to put up a quick demo! To get it to work with blocks I need to only use a mix of blocks/extends/input and forego any {{ content }} usage; right?

I was able to do it by stop using the layout in frontmatter & {{ content }} and leveraging block/extend/include.

Thanks again!