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>