Merge pull request #7 from photogabble/bugfix/remove-outer-html-tags

Feature: allow setting of embed render engine

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.0.2]
+
+- Allow setting of embed render engine (#7)
+
 ## [1.0.1]
 
 ### Fixed
@@ -19,3 +23,4 @@ First release
 
 [1.0.0]: https://github.com/photogabble/eleventy-plugin-font-subsetting/releases/tag/v1.0.0
 [1.0.1]: https://github.com/photogabble/eleventy-plugin-font-subsetting/releases/tag/v1.0.1
+[1.0.2]: https://github.com/photogabble/eleventy-plugin-font-subsetting/releases/tag/v1.0.2

README.md

@@ -15,24 +15,34 @@ npm i @photogabble/eleventy-plugin-interlinker
 
 ```ts
 type EleventyPluginInterlinkOptions = {
-    // defaultLayout is the optional default layout you would like
-    // to use for wrapping your embeds.
-    defaultLayout?: string,
-
-    // layoutKey is the front-matter value used for a per embed
-    // template, if found it will replace defaultLayout for
-    // that embed. This will always default to `embedLayout`.
-    layoutKey?: string,
-
-    // unableToLocateEmbedFn is invoked when an embed is unable
-    // to be found, this is normally due to a typo in the
-    // slug that you are using. This defaults to a function
-    // that returns [UNABLE TO LOCATE EMBED].
-    unableToLocateEmbedFn?: ErrorRenderFn,
-
-    // slugifyFn is used to slugify strings. If a function
-    // isn't set then the default 11ty slugify filter is used.
-    slugifyFn?: SlugifyFn
+  // defaultLayout is the optional default layout you would like
+  // to use for wrapping your embeds.
+  defaultLayout?: string,
+
+  // defaultLayoutLang is the optional default engine(s) used to render
+  // your embed layout. This defaults to your 11ty project default for
+  // the embed source file; typically: liquid,md.
+  defaultLayoutLang?: string,
+
+  // layoutKey is the front-matter value used for a per embed
+  // template, if found it will replace defaultLayout for
+  // that embed. This will always default to `embedLayout`.
+  layoutKey?: string,
+
+  // layoutTemplateLangKey is the front-matter value used for setting the
+  // layout engine(s) to render the embed's layout. This defaults to your
+  // 11ty project default for the embed source file; typically: liquid,md.
+  layoutTemplateLangKey?: string,
+
+  // unableToLocateEmbedFn is invoked when an embed is unable
+  // to be found, this is normally due to a typo in the
+  // slug that you are using. This defaults to a function
+  // that returns [UNABLE TO LOCATE EMBED].
+  unableToLocateEmbedFn?: ErrorRenderFn,
+
+  // slugifyFn is used to slugify strings. If a function
+  // isn't set then the default 11ty slugify filter is used.
+  slugifyFn?: SlugifyFn
 }
 ```
 
@@ -52,7 +62,7 @@ module.exports = (eleventyConfig) => {
 
 ### Internal Links / Wikilinks
 
-This plugin will now parse all Wiki Links formatted for example, `[[Eleventy.js Interlink Plugin]]` appears as [[Eleventy.js Interlink Plugin]].
+This plugin will now parse all Wiki Links formatted for example, `[[Eleventy.js Interlink Plugin]]` appears as [Eleventy.js Interlink Plugin](https://photogabble.co.uk/projects/eleventyjs-interlink-plugin/).
 
 Using the vertical bar (`|`) you can change the text used to display a link. This can be useful when you want to work a link into a sentence without using the title of the file, for example: `[[Eleventy.js Interlink Plugin|custom display text]]` appears as [custom display text](https://www.photogabble.co.uk/projects/eleventyjs-interlink-plugin/).
 
@@ -66,6 +76,33 @@ Embedding files allows you to reuse content across your website while tracking w
 
 To embed a file add an exclamation mark (`!`) in front of any wiki link for example: `![Artificial Intelligence]`. The embedded file will be rendered using 11ty's Template Engine. If you have defined a default embedding layout through `defaultLayout` or the page being embedded has front matter keyed as `layoutKey` then the embed will be rendered wrapped with the discovered template.
 
+For example, with the default `layoutKey` your front matter might look like:
+
+```yaml
+---
+embedLayout: 'layouts/bookmark-embed.liquid'
+---
+```
+
+When embedding that page its data and content will be injected in to `layouts/bookmark-embed.liquid`, rendered and replace the embed declaration.
+
+#### Inline Embeds
+
+When rendering each embed this plugin will use the template engine as set on the file being embedded.
+
+For most 11ty projects this defaults to `liquid,md`. The Markdown parser will wrap any inline html elements in a pair of `<p>` tags which may not be what you want to happen, especially if your using the embed inline within a paragraph of text. To overcome this you may define which template language(s) should be used to compile the embed layout by using front matter keyed as `layoutTemplateLangKey`.
+
+For example, you might have a folder of bookmarks that you would like to embed into other pages as inline links, your `bookmarks.11tydata.js` might look like the following:
+
+```js
+module.exports = {
+  embedLayout: 'layouts/bookmark-embed.liquid',
+  embedLayoutLanguage: 'liquid',
+}
+```
+
+This will disable the Markdown parser for the defined `embedLayout` resulting in the correct behaviour for inline embeds.
+
 ### Back Links
 
 A backlink for a page is a link from another page to that page; this plugin tracks all backlinks through either embedding or internal wikilinks. This data is made available to your page via its `backlinks` data value.

index.d.ts

@@ -2,10 +2,18 @@ type EleventyPluginInterlinkOptions = {
   // defaultLayout is the optional default layout you would like to use for wrapping your embeds.
   defaultLayout?: string,
 
+  // defaultLayoutLang is the optional default engine(s) used to render your embed layout. This
+  // defaults to your 11ty project default for the embed source file; typically: liquid,md.
+  defaultLayoutLang?: string,
+
   // layoutKey is the front-matter value used for a per embed template, if found it will replace defaultLayout for
   // that embed. This will always default to `embedLayout`.
   layoutKey?: string,
 
+  // layoutTemplateLangKey informs the template renderer which engines to use for rendering an embed's layout. This
+  // defaults to your 11ty projects default, typically: liquid,md
+  layoutTemplateLangKey?: string,
+
   // unableToLocateEmbedFn is invoked when an embed is unable to be found, this is normally due to a typo in the
   // slug that you are using. This defaults to a function that returns [UNABLE TO LOCATE EMBED].
   unableToLocateEmbedFn?: ErrorRenderFn,

index.js

@@ -14,7 +14,9 @@ module.exports = function (eleventyConfig, options = {}) {
   /** @var { import('@photogabble/eleventy-plugin-interlinker').EleventyPluginInterlinkOptions } opts */
   const opts = Object.assign({
     defaultLayout: null,
+    defaultLayoutLang: null,
     layoutKey: 'embedLayout',
+    layoutTemplateLangKey: 'embedLayoutLanguage',
     unableToLocateEmbedFn: () => '[UNABLE TO LOCATE EMBED]',
     slugifyFn: (input) => {
       const slugify = eleventyConfig.getFilter('slugify');
@@ -36,11 +38,17 @@ module.exports = function (eleventyConfig, options = {}) {
       ? data.data[opts.layoutKey]
       : opts.defaultLayout;
 
+    const language = (data.data.hasOwnProperty(opts.layoutTemplateLangKey))
+      ? data.data[opts.layoutTemplateLangKey]
+      : opts.defaultLayoutLang === null
+        ? data.page.templateSyntax
+        : opts.defaultLayoutLang;
+
     const tpl = layout === null
       ? frontMatter.content
       : `{% layout "${layout}" %} {% block content %} ${frontMatter.content} {% endblock %}`;
 
-    const fn = await rm.compile(tpl, data.page.templateSyntax, {templateConfig, extensionMap});
+    const fn = await rm.compile(tpl, language, {templateConfig, extensionMap});
     const result = await fn(data.data);
 
     compiledEmbeds.set(data.inputPath, result);