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>