ESM docs for front matter data 11ty/eleventy#836 and 11ty/eleventy#2819

src/_includes/snippets/cascade/computed-more.njk

@@ -0,0 +1,44 @@
+{%- set tabid = "computed-more" %}
+<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 {
+	eleventyComputed: {
+		myTemplateString: "This is assumed to be a template string!",
+		myString: (data) => "This is a string!",
+		myFunction: (data) => `This is a string using ${data.someValue}.`,
+		myAsyncFunction: async (data) => await someAsyncThing(),
+		myPromise: (data) => {
+			return new Promise((resolve) => {
+				setTimeout(() => resolve("100ms DELAYED HELLO"), 100);
+			});
+		},
+	},
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = {
+	eleventyComputed: {
+		myTemplateString: "This is assumed to be a template string!",
+		myString: (data) => "This is a string!",
+		myFunction: (data) => `This is a string using ${data.someValue}.`,
+		myAsyncFunction: async (data) => await someAsyncThing(),
+		myPromise: (data) => {
+			return new Promise((resolve) => {
+				setTimeout(() => resolve("100ms DELAYED HELLO"), 100);
+			});
+		},
+	},
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/cascade/computed-nav.njk

@@ -0,0 +1,31 @@
+{%- set tabid = "computed-nav" %}
+<div class="codetitle codetitle-right-md">_data/eleventyComputed.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 {
+	eleventyNavigation: {
+		key: (data) => data.title,
+		parent: (data) => data.parent,
+	},
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = {
+	eleventyNavigation: {
+		key: (data) => data.title,
+		parent: (data) => data.parent,
+	},
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/cascade/computed-ref.njk

@@ -0,0 +1,50 @@
+{%- set tabid = "computed-ref" %}
+<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 {
+	eleventyComputed: {
+		myValue: () => "Hi",
+		myOtherValue: () => "Bye",
+		usesAllTheThings: (data) => {
+			// We detect this as a declared dependency
+			data.myValue;
+			// You can use as many as you want.
+			data.myOtherValue;
+			// You could use any valid JS syntax to access them.
+			[data.myValue, data.myOtherValue];
+
+			return `How are you?`;
+		},
+	},
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = {
+	eleventyComputed: {
+		myValue: () => "Hi",
+		myOtherValue: () => "Bye",
+		usesAllTheThings: (data) => {
+			// We detect this as a declared dependency
+			data.myValue;
+			// You can use as many as you want.
+			data.myOtherValue;
+			// You could use any valid JS syntax to access them.
+			[data.myValue, data.myOtherValue];
+
+			return `How are you?`;
+		},
+	},
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/cascade/computed.njk

@@ -0,0 +1,35 @@
+{%- set tabid = "computed" %}
+<div class="codetitle codetitle-right-md">posts/posts.11tydata.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 {
+	eleventyComputed: {
+		eleventyNavigation: {
+			key: (data) => data.title,
+			parent: (data) => data.parent,
+		},
+	},
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = {
+	eleventyComputed: {
+		eleventyNavigation: {
+			key: (data) => data.title,
+			parent: (data) => data.parent,
+		},
+	},
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/cascade/deepmerge.njk

@@ -0,0 +1,33 @@
+{%- set tabid = "deepmerge" %}
+<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) {
+	// defaults to true in 1.0, use false to opt-out
+	eleventyConfig.setDataDeepMerge(false);
+
+	// requires opt-in for 0.x
+	eleventyConfig.setDataDeepMerge(true);
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+	// defaults to true in 1.0, use false to opt-out
+	eleventyConfig.setDataDeepMerge(false);
+
+	// requires opt-in for 0.x
+	eleventyConfig.setDataDeepMerge(true);
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/frontmatter/default.njk

@@ -0,0 +1,29 @@
+{%- set tabid = "default" %}
+<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.setFrontMatterParsingOptions({
+		language: "js", // default is "yaml"
+	});
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+	eleventyConfig.setFrontMatterParsingOptions({
+		language: "js", // default is "yaml"
+	});
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/frontmatter/excerpts.njk

@@ -0,0 +1,33 @@
+{%- set tabid = "excerpts" %}
+<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.setFrontMatterParsingOptions({
+		excerpt: true,
+		// Optional, default is "---"
+		excerpt_separator: "<!-- excerpt -->",
+	});
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+	eleventyConfig.setFrontMatterParsingOptions({
+		excerpt: true,
+		// Optional, default is "---"
+		excerpt_separator: "<!-- excerpt -->",
+	});
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/frontmatter/excerptsloc.njk

@@ -0,0 +1,35 @@
+{%- set tabid = "excerptsloc" %}
+<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.setFrontMatterParsingOptions({
+		excerpt: true,
+		// Eleventy custom option
+		// The variable where the excerpt will be stored.
+		excerpt_alias: "my_custom_excerpt",
+	});
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+	eleventyConfig.setFrontMatterParsingOptions({
+		excerpt: true,
+		// Eleventy custom option
+		// The variable where the excerpt will be stored.
+		excerpt_alias: "my_custom_excerpt",
+	});
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/frontmatter/options.njk

@@ -0,0 +1,29 @@
+{%- set tabid = "options" %}
+<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.setFrontMatterParsingOptions({
+		/* … */
+	});
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+	eleventyConfig.setFrontMatterParsingOptions({
+		/* … */
+	});
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/frontmatter/toml.njk

@@ -0,0 +1,39 @@
+{%- set tabid = "toml" %}
+<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
+// Don’t forget to `npm install @iarna/toml`
+import toml from "@iarna/toml";
+
+export default function (eleventyConfig) {
+	eleventyConfig.setFrontMatterParsingOptions({
+		engines: {
+			toml: toml.parse.bind(toml),
+		},
+	});
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+// Don’t forget to `npm install @iarna/toml`
+const toml = require("@iarna/toml");
+
+module.exports = function (eleventyConfig) {
+	eleventyConfig.setFrontMatterParsingOptions({
+		engines: {
+			toml: toml.parse.bind(toml),
+		},
+	});
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>