Support custom shortcode name

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

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,8 @@ Register it as a plugin in your Eleventy config:
 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>
@@ -35,6 +37,7 @@ 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.|

diff --git a/src/index.js b/src/index.js
@@ -4,8 +4,6 @@ const markdownIt = require('markdown-it');
 const outdent = require('outdent');
 const { parseCode, stringifyAttributes } = require('./utils');
 
-const SHORTCODE_NAME = 'codeDemo';
-
 /**
  * Higher-order function that takes user configuration options and returns the plugin shortcode.
  * @param {import('./typedefs').EleventyPluginCodeDemoOptions} options
@@ -18,7 +16,7 @@ const makeCodeDemoShortcode = (options) => {
    */
   const codeDemoShortcode = (source, title, props = {}) => {
     if (!title) {
-      throw new Error(`${SHORTCODE_NAME}: you must provide a non-empty title for the iframe.`);
+      throw new Error(`${options.name}: you must provide a non-empty title for the iframe.`);
     }
 
     const tokens = markdownIt().parse(source);
@@ -52,10 +50,11 @@ const makeCodeDemoShortcode = (options) => {
 
 /**
  * @param {import('@11ty/eleventy/src/UserConfig')} eleventyConfig
- * @param {EleventyPluginCodeDemoOptions} options
+ * @param {import('./typedefs').EleventyPluginCodeDemoOptions} options
  */
 const EleventyPluginCodeDemo = (eleventyConfig, options) => {
-  eleventyConfig.addPairedShortcode(SHORTCODE_NAME, makeCodeDemoShortcode(options));
+  const name = options.name ?? 'codeDemo';
+  eleventyConfig.addPairedShortcode(name, makeCodeDemoShortcode({ ...options, name }));
 };
 
 module.exports = { EleventyPluginCodeDemo };
diff --git a/src/typedefs.js b/src/typedefs.js
@@ -7,6 +7,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 {Record<string, unknown>} iframeAttributes Any HTML attributes you want to set on the `<iframe>`.