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>