I'm using 11ty with Decap CMS for a client webiste.
I have several front-matter fields to add markdown content (I need to add Markdown content to boxes in several locations) .
I render the markdown content using a markdown-it filter. This is working very well.
However I also implemented shortcodes, for example to add YouTube iframes within the markdown. The shortcode render without a problem when they are in the markdown body, but not if they are in the front matter.
How to make sure they are rendered too?
CURRENT SETUP
.eleventy.js
// my youtube shortcode
//YouTube embed
eleventyConfig.addNunjucksShortcode("youtube", (classes, videoURL, title, caption) => {
const url = new URL(videoURL);
const id = url.searchParams.get("v");
var caption= mdSetup.render(caption);
return `
<figure class= "${classes}">
<iframe src="https://www.youtube-nocookie.com/embed/${id}" title="${
title ? ` for ${title}` : ""
}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<figcaption class="caption">
<span class="wrapper">${caption}</span>
</figcaption>
</figure>
`;
});
// to process markdown
eleventyConfig.addFilter("in_markdownify", (markdownString) =>
mdSetup.renderInline(markdownString)
);
My .md file with YAML front matter
---
title: Testing Image Compression
layout: layouts/banners.njk
banners:
- bg:
- label: White Background / Purple text
name: whitebg
imgstyle:
- label: Green text / Purple Shadow
value: img-green
id: banner1
boxes:
- type: dc-box
left: Test
right: >
{% youtube "Class" , "https://www.youtube.com/watch?v=JC7MNybwnTA" , "Comment" , "Caption" %}
## MARKDOWN
---
template .njk
<div class="doublec-box text">
<div class="leftc">
{{ box.left | markdownify | safe}}
</div>
<div class="rightc">
{{ box.right | markdownify | safe}}
</div>
</div>
My html output
<div class="doublec-box text">
<div class="leftc">
<p>Test</p>
</div>
<div class="rightc">
<p>
{% youtube “undefined” , “<a href="https://www.youtube.com/watch?v=JC7MNybwnTA">https://www.youtube.com/watch?v=JC7MNybwnTA</a>” , “Dead White man’s Clothes x Atmos” , “” %}
</p>
<h2 id="markdown" tabindex="-1">MARKDOWN</h2>
</div>
</div>
My expected output: rendered shortcode into youtube iframe
<p><figure class= "undefined">
<iframe src="https://www.youtube-nocookie.com/embed/JC7MNybwnTA" title=" title" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<figcaption class="caption">
<span class="wrapper"></span>
</figcaption>
</figure></p>
@zachleat (11ty maintainer) created an improvement of the Render Plugin that does what I wanted: follow here Ships in 11ty 3.0