Use clsx to chain class name attributes

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

Hide file tree

Showing 7 changed files with 37 additions and 7 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -17,6 +17,7 @@ module.exports = (eleventyConfig) => {
     </html>`,
     iframeAttributes: {
       height: '100',
+      class: 'code-demo',
     },
   });
 

diff --git a/README.md b/README.md
@@ -121,6 +121,8 @@ button.addEventListener('click', () => {
 {% endcodeDemo %}
 ````
 
+If you're using Nunjucks, you'll need to use [the `safe` filter](https://mozilla.github.io/nunjucks/templating.html#autoescaping) to opt out of auto-escaping the HTML.
+
 ### Setting HTML Attributes on the Code Demo
 
 As we saw, you can set HTML attributes globally on all code demos in your `.eleventy.js` config using the `iframeAttributes` option, but you can also pass in attributes on a case-by-case basis. The example below leverages Nunjucks's support for [keyword arguments](https://mozilla.github.io/nunjucks/templating.html#keyword-arguments) to create a code demo that is 400 pixels tall:

diff --git a/demo/index.md b/demo/index.md
@@ -2,17 +2,17 @@
 permalink: /
 ---
 
-Below is an interactive code demo:
-
-{% codeDemo 'Code demo', height="400" %}
+{% set html %}
 ```html
 <div class="buttons">
     <button aria-label="Increment" data-step="1">&plus;</button>
     <button aria-label="Decrement" data-step="-1">&minus;</button>
 </div>
 <output>0</output>
 ```
+{% endset %}
 
+{% set css %}
 ```css
 * {
     box-sizing: border-box;
@@ -38,7 +38,9 @@ button {
     line-height: 1;
 }
 ```
+{% endset %}
 
+{% set js %}
 ```js
 const buttons = document.querySelectorAll('[data-step]');
 const output = document.querySelector('output');
@@ -48,6 +50,20 @@ buttons.forEach((button) => {
         count += Number(button.getAttribute('data-step'));
         output.innerHTML = count;
     });
-});;
+});
 ```
-{% endcodeDemo %}
+{% endset %}
+
+Below is an interactive code demo:
+
+{% codeDemo 'Code demo', height="400", class="another-class" %}
+{{ html | safe }}
+{{ css | safe }}
+{{ js | safe }}
+{% endcodeDemo %}
+
+Code blocks used:
+
+{{ html | safe }}
+{{ css | safe }}
+{{ js | safe }}
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "@minify-html/node": "^0.10.3",
+    "clsx": "^1.2.1",
     "lodash.escape": "^4.0.1",
     "markdown-it": "^13.0.1",
     "outdent": "^0.8.0"

diff --git a/src/index.js b/src/index.js
@@ -3,12 +3,15 @@ const minifyHtml = require('@minify-html/node');
 const markdownIt = require('markdown-it');
 const outdent = require('outdent');
 const { parseCode, stringifyAttributes } = require('./utils');
+const clsx = require('clsx');
 
 /**
  * Higher-order function that takes user configuration options and returns the plugin shortcode.
  * @param {import('./typedefs').EleventyPluginCodeDemoOptions} options
  */
 const makeCodeDemoShortcode = (options) => {
+  const sharedIframeAttributes = options.iframeAttributes;
+
   /**
    * @param {string} source The children of this shortcode, as Markdown code blocks.
    * @param {string} title The title to set on the iframe.
@@ -23,7 +26,9 @@ const makeCodeDemoShortcode = (options) => {
     const css = parseCode(tokens, 'css');
     const html = parseCode(tokens, 'html');
     const js = parseCode(tokens, 'js');
-    const iframeAttributes = stringifyAttributes({ ...options.iframeAttributes, ...props });
+
+    const className = clsx(sharedIframeAttributes?.class, props.class);
+    const iframeAttributes = stringifyAttributes({ ...sharedIframeAttributes, ...props, class: className });
 
     let srcdoc = `<!DOCTYPE html>${options.renderDocument({ html, css, js })}`;
 

diff --git a/src/typedefs.js b/src/typedefs.js
@@ -9,7 +9,7 @@
  * @typedef EleventyPluginCodeDemoOptions
  * @property {string} name The shortcode name to use.
  * @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>`.
+ * @property {Record<string, unknown>} [iframeAttributes] Any HTML attributes you want to set on the `<iframe>` (optional).
  */
 
 module.exports = {};
diff --git a/yarn.lock b/yarn.lock
@@ -644,6 +644,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"