Merge pull request #67 from photogabble/patch/v1.1.0/#66

BUGFIX: Render embed templates correctly

src/resolvers.js

@@ -38,24 +38,37 @@ export const defaultEmbedFn = async (link, currentPage, interlinker) => {
     ? page.data[interlinker.opts.layoutKey]
     : interlinker.opts.defaultLayout;
 
-  // TODO this should be based upon the layout extension
   const language = (page.data.hasOwnProperty(interlinker.opts.layoutTemplateLangKey))
     ? page.data[interlinker.opts.layoutTemplateLangKey]
     : interlinker.opts.defaultLayoutLang === null
       ? page.page.templateSyntax
       : interlinker.opts.defaultLayoutLang;
 
   // TODO: (#36) the layout below is liquid, will break if content contains invalid template tags such as passing njk file src
-  const tpl = layout === null
-    ? template.content
-    : `{% layout "${layout}" %} {% block content %} ${template.content} {% endblock %}`;
 
+  // This is the async compile function from the RenderPlugin.js bundled with 11ty. I'm using it directly here
+  // to compile the embedded content.
   const compiler = EleventyRenderPlugin.String;
 
-  const fn = await compiler(tpl, language, {
+  // Compile template.content
+  const contentFn = await compiler(template.content, language, {
     templateConfig: interlinker.templateConfig,
     extensionMap: interlinker.extensionMap
   });
 
-  return fn({content: template.content, ...page.data});
+  const content = await contentFn({...page.data});
+
+  // If we don't have an embed layout wrapping this content, return the compiled result.
+  if (layout === null) return content;
+
+  // The template string is just to invoke the embed layout, the content value is the
+  // compiled result of template.content.
+  const tpl = `{% layout "${layout}" %}`
+
+  const tplFn = await compiler(tpl, language, {
+    templateConfig: interlinker.templateConfig,
+    extensionMap: interlinker.extensionMap
+  });
+
+  return await tplFn({content, ...page.data});
 }

tests/eleventy.test.js

@@ -287,3 +287,15 @@ test("Stub URL Config (can be disabled)", async t => {
     `<div><p>Broken link with custom stub url [[ broken link ]].</p></div>`
   );
 })
+
+test("Embedded file shortcodes get run", async t => {
+  let elev = new Eleventy(fixturePath('website-with-liquid-embed-shortcode'), fixturePath('website-with-liquid-embed-shortcode/_site'), {
+    configPath: fixturePath('website-with-liquid-embed-shortcode/eleventy.config.js'),
+  });
+
+  const results = await elev.toJSON();
+  t.is(
+    normalize(findResultByUrl(results, '/').content),
+    `<h1>Embed Below</h1><p><figure>Hello world</figure></p><h1>Embed 2 Below</h1><p><div><figure>Hello world</figure></div></p>` // TODO: (#65) remove wrapping <p> from embed
+  );
+});

tests/fixtures/website-with-liquid-embed-shortcode/_layouts/test-embed.liquid

@@ -0,0 +1 @@
+<div>{{ content }}</div>

tests/fixtures/website-with-liquid-embed-shortcode/eleventy.config.js

@@ -0,0 +1,14 @@
+import WikiLinksPlugin from '../../../index.js';
+
+export default function (eleventyConfig) {
+  eleventyConfig.addPlugin(WikiLinksPlugin);
+
+  eleventyConfig.addPairedShortcode('sc', (content) => `<figure>${content}</figure>`);
+
+  return {
+    dir: {
+      includes: "_includes",
+      layouts: "_layouts",
+    }
+  }
+}

tests/fixtures/website-with-liquid-embed-shortcode/embed-with-template.md

@@ -0,0 +1,8 @@
+---
+title: Embedded Page with template
+embedLayout: _layouts/test-embed.liquid
+---
+
+{% sc %}
+Hello world
+{% endsc %}

tests/fixtures/website-with-liquid-embed-shortcode/embed.md

@@ -0,0 +1,7 @@
+---
+title: Embedded Page
+---
+
+{% sc %}
+Hello world
+{% endsc %}

tests/fixtures/website-with-liquid-embed-shortcode/index.md

@@ -0,0 +1,11 @@
+---
+title: Embed Page
+---
+
+# Embed Below
+
+![[Embedded Page]]
+
+# Embed 2 Below
+
+![[Embedded Page with template]]