create snippet and filter for code blocks

Author: fershad

.eleventy.js

@@ -78,6 +78,20 @@ let markdownItAnchorOptions = {
       );
   });
 
+  eleventyConfig.addFilter("esmToCjs", async (sourceCode) => {
+    const { ImportTransformer } = await import('esm-import-transformer');
+		try {
+			let it = new ImportTransformer(sourceCode);
+			let outputCode = it.transformToRequire();
+
+			// lol
+			return outputCode.replace("export default ", "module.exports = ");
+		} catch(e) {
+			console.log( sourceCode );
+			throw e;
+		}
+	});
+
   eleventyConfig.addNunjucksFilter("getDocumentsFromCollection", function (collection, value) {
     const docs = collection.filter(doc => doc.data.repo === value)
     return docs

src/_includes/snippets/esmCjsTabs.njk

@@ -0,0 +1,27 @@
+{# This code is borrowed from the 11ty docs website #}
+<seven-minute-tabs persist="persist" sync="sync">
+    <ol role="tablist" aria-label="Select to view response for green, and not green URLs.">
+        <li>
+            <a href="{{ tabid }}-esm" role="tab" data-tabs-persist="group:esm" tabindex="-1" aria-controls="{{ tabid }}-esm">ESM</a>
+        </li>
+        <li>
+            <a href="{{ tabid }}-cjs" role="tab" data-tabs-persist="group:cjs" tabindex="-1" aria-controls="{{ tabid }}-cjs">CommonJS</a>
+        </li>
+    </ol>
+    <div id="{{ tabid }}-esm" role="tabpanel">
+        {% highlight "js" %}
+        {%- if codeContent %}
+            {{ codeContent | safe }}
+        {% endif %}
+        {% endhighlight %}
+    </div>
+    <div id="{{ tabid }}-cjs" role="tabpanel">
+        {% highlight "js" %}
+        {%- if codeContentCjs %}
+            {{ codeContentCjs | safe }}
+        {%- else if codeContent %}
+            {{ codeContent | esmToCjs | safe }}
+        {% endif %}
+        {% endhighlight %}
+    </div>
+</seven-minute-tabs>