ESM docs for template languages 11ty/eleventy#836

src/_includes/snippets/configDefinition.njk

@@ -1,17 +1,17 @@
-{# uses configCodeContent #}
+{# uses codeContent #}
 {% set tabid %}tab-{% uid %}{% endset %}
 <div class="codetitle codetitle-right-md">eleventy.config.js</div>
 <is-land on:visible import="/js/seven-minute-tabs.js">
 <seven-minute-tabs class="tabs-flush" persist sync>
   {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
   <div id="{{ tabid }}-jsesm" role="tabpanel">
   {% highlight "js" %}
-{{- configCodeContent | safe -}}
+{%- if codeContent %}{{ codeContent | safe }}{% endif %}
   {% endhighlight %}
   </div>
   <div id="{{ tabid }}-jscjs" role="tabpanel">
   {% highlight "js" %}
-{{- configCodeContent | esmToCjs | safe -}}
+{%- if codeContent %}{{ codeContent | esmToCjs | safe }}{% endif %}
   {% endhighlight %}
   </div>
 </seven-minute-tabs>

src/_includes/snippets/esmCjsTabs.njk

@@ -0,0 +1,17 @@
+{# uses codeContent #}
+{% set tabid %}tab-{% uid %}{% endset %}
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs class="tabs-flush" persist sync>
+  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
+  <div id="{{ tabid }}-jsesm" role="tabpanel">
+  {% highlight "js" %}
+{%- if codeContent %}{{ codeContent | safe }}{% endif %}
+  {% endhighlight %}
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+  {% highlight "js" %}
+{%- if codeContent %}{{ codeContent | esmToCjs | safe }}{% endif %}
+  {% endhighlight %}
+  </div>
+</seven-minute-tabs>
+</is-land>

src/docs/dev-server.md

@@ -29,7 +29,7 @@ _Read more detail on the [Eleventy Dev Server 1.0 release notes](https://github.
 
 You can configure the server with the new `setServerOptions` Configuration API method.
 
-{% set configCodeContent %}
+{% set codeContent %}
 export default function(eleventyConfig) {
 	eleventyConfig.setServerOptions({
 		// Default values are shown:
@@ -81,7 +81,7 @@ export default function(eleventyConfig) {
 <details>
 <summary><strong>Expand to see the Full options list</strong></summary>
 
-{% set configCodeContent %}
+{% set codeContent %}
 export default function(eleventyConfig) {
 	eleventyConfig.setServerOptions({
 		// Change the name of the folder name used for injected scripts
@@ -123,7 +123,7 @@ Try out the [`devcert-cli`](https://github.com/davewasmer/devcert-cli) package t
 
 {% addedin "3.0.0-alpha.7" %}{% addedin "Dev Server 2.0.0" %} Use the new `onRequest` object to configure some of your project to use on-request-time processing. The keys in this object represent strings from the [URL Pattern API](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API).
 
-{% set configCodeContent %}
+{% set codeContent %}
 export default function(eleventyConfig) {
 	eleventyConfig.setServerOptions({
 		onRequest: {
@@ -152,7 +152,7 @@ export default function(eleventyConfig) {
 
 Works great with the [`process.env.ELEVENTY_RUN_MODE` environment variable](/docs/environment-vars/#eleventy-supplied) to change how your server operates during`--serve` mode.
 
-{% set configCodeContent %}
+{% set codeContent %}
 export default function(eleventyConfig) {
 	// Intercept all requests during --serve mode.
 	if(process.env.ELEVENTY_RUN_MODE === "serve") {
@@ -185,7 +185,7 @@ npm install @11ty/eleventy-server-browsersync
 
 Then, enable it in your configuration file:
 
-{% set configCodeContent %}
+{% set codeContent %}
 export default function(eleventyConfig) {
 	eleventyConfig.setServerOptions({
 		module: "@11ty/eleventy-server-browsersync",

src/docs/events.md

@@ -23,7 +23,7 @@ Asynchronous callback function support added in v1.0.
 
 The `eleventy.before` event runs every time Eleventy starts building, so it will run before the start of each stand-alone build, as well as each time building starts as either part of `--watch` or `--serve`. To use it, attach the event handler to your Eleventy config:
 
-{% set configCodeContent %}
+{% set codeContent %}
 export default function(eleventyConfig) {
 	// Async-friendly in 1.0+
 	// Arguments added in 2.0+
@@ -40,7 +40,7 @@ export default function(eleventyConfig) {
 
 The `eleventy.after` event runs every time Eleventy finishes building, so it will run after the end of each stand-alone build, as well as each time building ends as either part of `--watch` or `--serve`. To use it, attach the event handler to your Eleventy config:
 
-{% set configCodeContent %}
+{% set codeContent %}
 export default function(eleventyConfig) {
 	// Async-friendly in 1.0+
 	// Arguments added in 2.0+
@@ -58,7 +58,7 @@ export default function(eleventyConfig) {
 
 Eleventy now provides an object with metadata on the build as an argument to the `eleventy.before` and `eleventy.after` event callbacks.
 
-{% set configCodeContent %}
+{% set codeContent %}
 export default function(eleventyConfig) {
 	eleventyConfig.on("eleventy.before", async ({ dir, runMode, outputMode }) => {
 		// Read more below
@@ -101,7 +101,7 @@ export default function(eleventyConfig) {
 
 The `eleventy.beforeWatch` event runs before a build is run _only_ if it's a re-run during `--watch` or `--serve`. This means it will neither run during the initial build nor during stand-alone builds. To use it, attach the event handler to your Eleventy config:
 
-{% set configCodeContent %}
+{% set codeContent %}
 export default function(eleventyConfig) {
 	// Async-friendly in 1.0+
 	eleventyConfig.on("eleventy.beforeWatch", async (changedFiles) => {
@@ -119,7 +119,7 @@ The `changedFiles` parameter was {% addedin "0.11.1" %}.
 
 This event facilitates the [i18n plugin](/docs/plugins/i18n/) (but is available independent of it).
 
-{% set configCodeContent %}
+{% set codeContent %}
 export default function(eleventyConfig) {
 	// Async-friendly
 	eleventyConfig.on("eleventy.contentMap", async ({ inputPathToUrl, urlToInputPath }) => {