ESM config docs 11ty/eleventy#836

src/_includes/config/config-databasename.njk

@@ -0,0 +1,26 @@
+{%- set tabid = "config-databasename" %}
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs class="tabs-full tabs-flush" persist sync>
+ {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
+ <div id="{{ tabid }}-jsesm" role="tabpanel">
+
+```js
+export default function (eleventyConfig) {
+ // Looks for index.json and index.11tydata.json instead of using folder names
+ eleventyConfig.setDataFileBaseName("index");
+};
+```
+
+ </div>
+ <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+ // Looks for index.json and index.11tydata.json instead of using folder names
+ eleventyConfig.setDataFileBaseName("index");
+};
+```
+
+ </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/config/config-datafilters.njk

@@ -0,0 +1,26 @@
+{%- set tabid = "config-datafilters" %}
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs class="tabs-full tabs-flush" persist sync>
+ {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
+ <div id="{{ tabid }}-jsesm" role="tabpanel">
+
+```js
+export default function (eleventyConfig) {
+ eleventyConfig.dataFilterSelectors.add("page");
+ eleventyConfig.dataFilterSelectors.delete("page");
+};
+```
+
+ </div>
+ <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+ eleventyConfig.dataFilterSelectors.add("page");
+ eleventyConfig.dataFilterSelectors.delete("page");
+};
+```
+
+ </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/config/config-datasuffix.njk

@@ -0,0 +1,38 @@
+{%- set tabid = "config-datasuffix" %}
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs class="tabs-full tabs-flush" persist sync>
+ {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
+ <div id="{{ tabid }}-jsesm" role="tabpanel">
+
+```js
+export default function (eleventyConfig) {
+ // e.g. file.json and file.11tydata.json
+ eleventyConfig.setDataFileSuffixes([".11tydata", ""]);
+
+ // e.g. file.11tydata.json
+ eleventyConfig.setDataFileSuffixes([".11tydata"]);
+
+ // No data files are used.
+ eleventyConfig.setDataFileSuffixes([]);
+};
+```
+
+ </div>
+ <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+ // e.g. file.json and file.11tydata.json
+ eleventyConfig.setDataFileSuffixes([".11tydata", ""]);
+
+ // e.g. file.11tydata.json
+ eleventyConfig.setDataFileSuffixes([".11tydata"]);
+
+ // No data files are used.
+ eleventyConfig.setDataFileSuffixes([]);
+};
+```
+
+ </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/config/config-linters.njk

@@ -0,0 +1,40 @@
+{%- set tabid = "config-linters" %}
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs class="tabs-full tabs-flush" persist sync>
+ {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
+ <div id="{{ tabid }}-jsesm" role="tabpanel">
+
+```js
+export default function (eleventyConfig) {
+ // Sync or async
+ eleventyConfig.addLinter("linter-name", async function (content) {
+ console.log(this.inputPath);
+ console.log(this.outputPath);
+
+ // Eleventy 2.0+ has full access to Eleventy’s `page` variable
+ console.log(this.page.inputPath);
+ console.log(this.page.outputPath);
+ });
+};
+```
+
+ </div>
+ <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+ // Sync or async
+ eleventyConfig.addLinter("linter-name", async function (content) {
+ console.log(this.inputPath);
+ console.log(this.outputPath);
+
+ // Eleventy 2.0+ has full access to Eleventy’s `page` variable
+ console.log(this.page.inputPath);
+ console.log(this.page.outputPath);
+ });
+};
+```
+
+ </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/config/config-typedef.njk

@@ -0,0 +1,26 @@
+{%- set tabid = "config-typedef" %}
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs class="tabs-full tabs-flush" persist sync>
+ {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
+ <div id="{{ tabid }}-jsesm" role="tabpanel">
+
+```js
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+export default function (eleventyConfig) {
+ // …
+};
+```
+
+ </div>
+ <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+module.exports = function (eleventyConfig) {
+ // …
+};
+```
+
+ </div>
+</seven-minute-tabs>
+</is-land>