Combine renderHead and renderBody into renderDocument

AleksandrHovhannisyan · Dec 7, 2022 · 641cea6 · 641cea6
1 parent 1cf40dd
commit 641cea6
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 18 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -5,8 +5,16 @@ const { EleventyPluginCodeDemo } = require('./src');
  */
 module.exports = (eleventyConfig) => {
   eleventyConfig.addPlugin(EleventyPluginCodeDemo, {
-    renderHead: ({ css }) => `<style>${css}</style>`,
-    renderBody: ({ html, js }) => `${html}<script>${js}</script>`,
+    renderDocument: ({ html, css, js }) => `
+    <html>
+      <head>
+        <style>${css}</style>
+      </head>
+      <body>
+        ${html}
+        <script>${js}</script>
+      </body>
+    </html>`,
     iframeAttributes: {
       height: '100',
     },

diff --git a/README.md b/README.md
@@ -18,10 +18,17 @@ const { EleventyPluginCodeDemo } = require('eleventy-plugin-code-demo');
 eleventyConfig.addPlugin(EleventyPluginCodeDemo, {
   // Use any shortcode name you want
   name: 'shortcodeName',
-  // Render whatever content you want to go in the <head>
-  renderHead: ({ css }) => `<style>${css}</style>`,
-  // Render whatever content you want to go in the <body>
-  renderBody: ({ html, js }) => `${html}<script>${js}</script>`,
+  // Render whatever document structure you want (other than doctype); the HTML, CSS, and JS parsed from the shortcode's body are supplied to this function as an argument, so you can position them wherever you want, or add class names or data-attributes to html/body
+  renderDocument: ({ html, css, js }) => `
+  <html>
+    <head>
+      <style>${css}</style>
+    </head>
+    <body>
+      ${html}
+      <script>${js}</script>
+    </body>
+  </html>`,
   // key-value pairs for HTML attributes; these are applied to all code previews
   iframeAttributes: {
     height: '300',
@@ -37,10 +44,9 @@ See [example usage](#example-usage) for how to use the shortcode.
 
 |Name|Type|Description|
 |----|----|-----------|
-|`name`|`string`|The name to use for the shortcode. Defaults to `'codeDemo'` if not specified.|
-|`renderHead`|`(args: { css: string; js: string }) => string`|A render function to return custom markup for the iframe `<head>`'s children.|
-|`renderBody`|`(args: { html: string; js: string }) => string`|A render function to return custom markup for the iframe `<body>`'s children.|
-|`iframeAttributes`|`Record<string, unknown>`|Any HTML attributes you want to set globally on all code demos.|
+|`name`|`string\|undefined`|Optional. The name to use for the shortcode. Defaults to `'codeDemo'` if not specified.|
+|`renderDocument`|`(args: { html: string; css: string; js: string }) => string`|A render function to return custom markup for the document body of each iframe. This function will be called with the HTML, CSS, and JS parsed from your shortcode's children. Do not include a doctype declaration.|
+|`iframeAttributes`|`Record<string, unknown>\|undefined`|Optional. Any HTML attributes you want to set globally on all code demos.|
 
 ### Shortcode Arguments
 

diff --git a/src/index.js b/src/index.js
@@ -25,12 +25,7 @@ const makeCodeDemoShortcode = (options) => {
     const js = parseCode(tokens, 'js');
     const iframeAttributes = stringifyAttributes({ ...options.iframeAttributes, ...props });
 
-    let srcdoc = `
-  <!DOCTYPE html>
-  <html>
-    <head>${options.renderHead({ css, js })}</head>
-    <body>${options.renderBody({ html, js })}</body>
-  </html>`;
+    let srcdoc = `<!DOCTYPE html>${options.renderDocument({ html, css, js })}`;
 
     // Convert all the HTML/CSS/JS into one long string with zero non-essential white space, comments, etc. Also escape HTML tags.
     srcdoc = escape(

diff --git a/src/typedefs.js b/src/typedefs.js
@@ -8,8 +8,7 @@
 /**
  * @typedef EleventyPluginCodeDemoOptions
  * @property {string} name The shortcode name to use.
- * @property {(args: Pick<RenderArgs, 'css' | 'js'>) => string} renderHead A render function to render a custom HTML `<head>`.
- * @property {(args: Pick<RenderArgs, 'html' | 'js'>) => string} renderBody A render function to render a custom HTML `<body>`'s contents.
+ * @property {(args: RenderArgs) => string} renderDocument A render function to render the iframe's document definition.
  * @property {Record<string, unknown>} iframeAttributes Any HTML attributes you want to set on the `<iframe>`.
  */