ESM examples for filters 11ty/eleventy#836

11ty · Sep 24, 2024 · 9276e89 · 9276e89
1 parent 0119cae
commit 9276e89
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 39 deletions.
diff --git a/src/docs/filters/collection-items.md b/src/docs/filters/collection-items.md
@@ -15,12 +15,10 @@ eleventyNavigation:
 
 Fetch the previous and next items in a collection when you pass in the current `page` object.
 
-<seven-minute-tabs persist sync>
+<seven-minute-tabs persist sync class="tabs-flush">
  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "nextprev"} %}
  <div id="nextprev-liquid" role="tabpanel">
 
-{% codetitle "Liquid", "Syntax" %}
-
 ```liquid
 {% raw %}{% assign previousPost = collections.posts | getPreviousCollectionItem: page %}
 {% assign nextPost = collections.posts | getNextCollectionItem: page %}{% endraw %}
@@ -33,8 +31,6 @@ Fetch the previous and next items in a collection when you pass in the current `
  </div>
  <div id="nextprev-njk" role="tabpanel">
 
-{% codetitle "Nunjucks", "Syntax" %}
-
 ```jinja2
 {% raw %}{% set previousPost = collections.posts | getPreviousCollectionItem(page) %}
 {% set nextPost = collections.posts | getNextCollectionItem(page) %}{% endraw %}
@@ -47,18 +43,19 @@ Fetch the previous and next items in a collection when you pass in the current `
  </div>
  <div id="nextprev-js" role="tabpanel">
  <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+ <div id="nextprev-cjs" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
  </div>
 </seven-minute-tabs>
 
 Useful when you’d like to link to the previous or next template in your collection:
 
 <is-land on:visible import="/js/seven-minute-tabs.js">
-<seven-minute-tabs persist sync>
+<seven-minute-tabs persist sync class="tabs-flush">
  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "nextprevlink"} %}
  <div id="nextprevlink-liquid" role="tabpanel">
 
-{% codetitle "Liquid", "Syntax" %}
-
 {% raw %}
 
 ```liquid
@@ -71,8 +68,6 @@ Useful when you’d like to link to the previous or next template in your collec
  </div>
  <div id="nextprevlink-njk" role="tabpanel">
 
-{% codetitle "Nunjucks", "Syntax" %}
-
 {% raw %}
 
 ```jinja2
@@ -85,6 +80,9 @@ Useful when you’d like to link to the previous or next template in your collec
  </div>
  <div id="nextprevlink-js" role="tabpanel">
  <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+ <div id="nextprevlink-cjs" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
  </div>
 </seven-minute-tabs>
 </is-land>
@@ -96,12 +94,10 @@ The [Collections documentation](/docs/collections/#sorting) outlines the default
 The `getCollectionItemIndex` filter returns the 0-based numeric index of the current (or passed) page in the collection.
 
 <is-land on:visible import="/js/seven-minute-tabs.js">
-<seven-minute-tabs persist sync>
+<seven-minute-tabs persist sync class="tabs-flush">
  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "getitemindex"} %}
  <div id="getitemindex-liquid" role="tabpanel">
 
-{% codetitle "Liquid", "Syntax" %}
-
 {% raw %}
 
 ```liquid
@@ -116,8 +112,6 @@ Or pass it in:
  </div>
  <div id="getitemindex-njk" role="tabpanel">
 
-{% codetitle "Nunjucks", "Syntax" %}
-
 {% raw %}
 
 ```jinja2
@@ -132,6 +126,9 @@ Or pass it in:
  </div>
  <div id="getitemindex-js" role="tabpanel">
  <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+ <div id="getitemindex-cjs" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
  </div>
 </seven-minute-tabs>
 </is-land>
@@ -141,12 +138,10 @@ Or pass it in:
 For completeness, a `getCollectionItem` filter is also included that fetches the current page from a collection.
 
 <is-land on:visible import="/js/seven-minute-tabs.js">
-<seven-minute-tabs persist sync>
+<seven-minute-tabs persist sync class="tabs-flush">
  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "getitem"} %}
  <div id="getitem-liquid" role="tabpanel">
 
-{% codetitle "Liquid", "Syntax" %}
-
 ```liquid
 {% raw %}{% assign currentPost = collections.posts | getCollectionItem: page %}{% endraw %}
 
@@ -157,8 +152,6 @@ For completeness, a `getCollectionItem` filter is also included that fetches the
  </div>
  <div id="getitem-njk" role="tabpanel">
 
-{% codetitle "Nunjucks", "Syntax" %}
-
 ```jinja2
 {% raw %}{% set currentPost = collections.posts | getCollectionItem(page) %}{% endraw %}
 
@@ -169,6 +162,9 @@ For completeness, a `getCollectionItem` filter is also included that fetches the
  </div>
  <div id="getitem-js" role="tabpanel">
  <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+ <div id="getitem-cjs" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
  </div>
 </seven-minute-tabs>
 </is-land>

diff --git a/src/docs/filters/inputpath-to-url.md b/src/docs/filters/inputpath-to-url.md
@@ -20,12 +20,10 @@ _Inspired by [GitHub issue #84](https:/11ty/eleventy/issues/84)._
 ## Usage
 
 <is-land import="/js/seven-minute-tabs.js">
-<seven-minute-tabs persist sync>
+<seven-minute-tabs persist sync class="tabs-flush">
  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "inputpathtourl"} %}
  <div id="inputpathtourl-liquid" role="tabpanel">
 
-{% codetitle "Liquid", "Syntax" %}
-
 {% raw %}
 
 ```liquid
@@ -37,8 +35,6 @@ _Inspired by [GitHub issue #84](https:/11ty/eleventy/issues/84)._
  </div>
  <div id="inputpathtourl-njk" role="tabpanel">
 
-{% codetitle "Nunjucks", "Syntax" %}
-
 {% raw %}
 
 ```jinja2
@@ -50,26 +46,25 @@ _Inspired by [GitHub issue #84](https:/11ty/eleventy/issues/84)._
  </div>
  <div id="inputpathtourl-js" role="tabpanel">
 
-{% codetitle "JavaScript (CommonJS)", "Syntax" %}
-
 {% raw %}
 
 ```js
-module.exports = function (data) {
+export default function (data) {
  return `<a href="${this.inputPathToUrl("index.md")}">Home</a>`;
-};
+}
 ```
 
 {% endraw %}
 
-{% codetitle "JavaScript (ESM)", "Syntax" %}
+ </div>
+ <div id="inputpathtourl-cjs" role="tabpanel">
 
 {% raw %}
 
 ```js
-export default function (data) {
+module.exports = function (data) {
  return `<a href="${this.inputPathToUrl("index.md")}">Home</a>`;
-}
+};
 ```
 
 {% endraw %}

diff --git a/src/docs/filters/log.md b/src/docs/filters/log.md
@@ -12,12 +12,10 @@ eleventyNavigation:
 {% addedin "0.11.0" %} An easy way to <code>console.log</code> anything from inside of a template file.
 
 <is-land on:visible import="/js/seven-minute-tabs.js">
-<seven-minute-tabs persist sync>
+<seven-minute-tabs persist sync class="tabs-flush">
  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "log"} %}
  <div id="log-liquid" role="tabpanel">
 
-{% codetitle "Liquid", "Syntax" %}
-
 {% raw %}
 
 ```liquid
@@ -29,8 +27,6 @@ eleventyNavigation:
  </div>
  <div id="log-njk" role="tabpanel">
 
-{% codetitle "Nunjucks", "Syntax" %}
-
 {% raw %}
 
 ```jinja2
@@ -42,7 +38,19 @@ eleventyNavigation:
  </div>
  <div id="log-js" role="tabpanel">
 
-{% codetitle "JavaScript", "Syntax" %}
+{% raw %}
+
+```js
+module.exports = function (data) {
+ // Caveat: you have access to `console.log` here, so probably use that.
+ return this.log("My Title");
+};
+```
+
+{% endraw %}
+
+ </div>
+ <div id="log-cjs" role="tabpanel">
 
 {% raw %}
 
@@ -67,7 +75,7 @@ You can drop log in between any filter chain you already have and it will log th
 
 <is-land on:visible import="/js/seven-minute-tabs.js">
 <seven-minute-tabs persist sync>
- {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "log-chain-demo", subtractions: "js,hbs"} %}
+ {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "log-chain-demo", subtractions: "js,cjs,hbs"} %}
  <div id="log-chain-demo-liquid" role="tabpanel">
 
 {% codetitle "Liquid", "Syntax" %}