Custom Data Files ESM docs 11ty/eleventy#836

src/_includes/snippets/cascade/custom-exif.njk

@@ -0,0 +1,53 @@
+{%- set tabid = "customexif" %}
+<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">
+
+```js
+import exifr from "exifr";
+
+export default function (eleventyConfig) {
+	eleventyConfig.addDataExtension("png,jpeg", {
+		parser: async (file) => {
+			let exif = await exifr.parse(file);
+
+			return {
+				exif,
+			};
+		},
+
+		// Using `read: false` changes the parser argument to
+		// a file path instead of file contents.
+		read: false,
+	});
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+const exifr = require("exifr");
+
+module.exports = function (eleventyConfig) {
+	eleventyConfig.addDataExtension("png,jpeg", {
+		parser: async (file) => {
+			let exif = await exifr.parse(file);
+
+			return {
+				exif,
+			};
+		},
+
+		// Using `read: false` changes the parser argument to
+		// a file path instead of file contents.
+		read: false,
+	});
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/cascade/custom-json.njk

@@ -0,0 +1,29 @@
+{%- set tabid = "customjson" %}
+<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">
+
+```js
+export default function (eleventyConfig) {
+	eleventyConfig.addDataExtension("geojson", (contents) =>
+		JSON.parse(contents)
+	);
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+	eleventyConfig.addDataExtension("geojson", (contents) =>
+		JSON.parse(contents)
+	);
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/cascade/custom-order.njk

@@ -0,0 +1,39 @@
+{%- set tabid = "customorder" %}
+<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">
+
+```js
+import toml from "@iarna/toml";
+import yaml from "js-yaml";
+
+export default function (eleventyConfig) {
+	// Lower priority
+	eleventyConfig.addDataExtension("toml", (contents) => toml.parse(contents));
+
+	// Higher priority
+	eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents));
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+const toml = require("@iarna/toml");
+const yaml = require("js-yaml");
+
+module.exports = function (eleventyConfig) {
+	// Lower priority
+	eleventyConfig.addDataExtension("toml", (contents) => toml.parse(contents));
+
+	// Higher priority
+	eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents));
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/cascade/custom-toml.njk

@@ -0,0 +1,29 @@
+{%- set tabid = "customtoml" %}
+<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">
+
+```js
+import toml from "@iarna/toml";
+
+export default function (eleventyConfig) {
+	eleventyConfig.addDataExtension("toml", (contents) => toml.parse(contents));
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+const toml = require("@iarna/toml");
+
+module.exports = function (eleventyConfig) {
+	eleventyConfig.addDataExtension("toml", (contents) => toml.parse(contents));
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/cascade/custom-yaml.njk

@@ -0,0 +1,29 @@
+{%- set tabid = "customyaml" %}
+<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">
+
+```js
+import yaml from "js-yaml";
+
+export default function (eleventyConfig) {
+	eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents));
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+const yaml = require("js-yaml");
+
+module.exports = function (eleventyConfig) {
+	eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents));
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/cascade/custom.njk

@@ -0,0 +1,31 @@
+{%- set tabid = "custom" %}
+<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">
+
+```js
+export default function (eleventyConfig) {
+	// Receives file contents, return parsed data
+	eleventyConfig.addDataExtension("yml,yaml", (contents, filePath) => {
+		return {};
+	});
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+	// Receives file contents, return parsed data
+	eleventyConfig.addDataExtension("yml,yaml", (contents, filePath) => {
+		return {};
+	});
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/cascade/customopts.njk

@@ -0,0 +1,39 @@
+{%- set tabid = "customopts" %}
+<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">
+
+```js
+export default function (eleventyConfig) {
+	// or with options (new in 2.0)
+	eleventyConfig.addDataExtension("fileExtension", {
+		parser: (contents, filePath) => ({}),
+
+		// defaults are shown:
+		read: true,
+		encoding: "utf8",
+	});
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+	// or with options (new in 2.0)
+	eleventyConfig.addDataExtension("fileExtension", {
+		parser: (contents, filePath) => ({}),
+
+		// defaults are shown:
+		read: true,
+		encoding: "utf8",
+	});
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>