@@ -6,12 +6,12 @@
{% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
{% highlight "js" %}
-{{- configCodeContent | safe -}}
+{%- if codeContent %}{{ codeContent | safe }}{% endif %}
{% endhighlight %}
{% highlight "js" %}
-{{- configCodeContent | esmToCjs | safe -}}
+{%- if codeContent %}{{ codeContent | esmToCjs | safe }}{% endif %}
{% endhighlight %}
diff --git a/src/_includes/snippets/esmCjsTabs.njk b/src/_includes/snippets/esmCjsTabs.njk
new file mode 100644
index 0000000000..334cfb3bf4
--- /dev/null
+++ b/src/_includes/snippets/esmCjsTabs.njk
@@ -0,0 +1,17 @@
+{# uses codeContent #}
+{% set tabid %}tab-{% uid %}{% endset %}
+
+
+ {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
+
+ {% highlight "js" %}
+{%- if codeContent %}{{ codeContent | safe }}{% endif %}
+ {% endhighlight %}
+
+
+ {% highlight "js" %}
+{%- if codeContent %}{{ codeContent | esmToCjs | safe }}{% endif %}
+ {% endhighlight %}
+
+
+
\ No newline at end of file
diff --git a/src/docs/dev-server.md b/src/docs/dev-server.md
index 1f43c60996..4e16aa7dcf 100644
--- a/src/docs/dev-server.md
+++ b/src/docs/dev-server.md
@@ -29,7 +29,7 @@ _Read more detail on the [Eleventy Dev Server 1.0 release notes](https://github.
You can configure the server with the new `setServerOptions` Configuration API method.
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
eleventyConfig.setServerOptions({
// Default values are shown:
@@ -81,7 +81,7 @@ export default function(eleventyConfig) {
Expand to see the Full options list
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
eleventyConfig.setServerOptions({
// Change the name of the folder name used for injected scripts
@@ -123,7 +123,7 @@ Try out the [`devcert-cli`](https://github.com/davewasmer/devcert-cli) package t
{% addedin "3.0.0-alpha.7" %}{% addedin "Dev Server 2.0.0" %} Use the new `onRequest` object to configure some of your project to use on-request-time processing. The keys in this object represent strings from the [URL Pattern API](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API).
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
eleventyConfig.setServerOptions({
onRequest: {
@@ -152,7 +152,7 @@ export default function(eleventyConfig) {
Works great with the [`process.env.ELEVENTY_RUN_MODE` environment variable](/docs/environment-vars/#eleventy-supplied) to change how your server operates during`--serve` mode.
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
// Intercept all requests during --serve mode.
if(process.env.ELEVENTY_RUN_MODE === "serve") {
@@ -185,7 +185,7 @@ npm install @11ty/eleventy-server-browsersync
Then, enable it in your configuration file:
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
eleventyConfig.setServerOptions({
module: "@11ty/eleventy-server-browsersync",
diff --git a/src/docs/events.md b/src/docs/events.md
index 2153f911c6..6ba23b96d5 100644
--- a/src/docs/events.md
+++ b/src/docs/events.md
@@ -23,7 +23,7 @@ Asynchronous callback function support added in v1.0.
The `eleventy.before` event runs every time Eleventy starts building, so it will run before the start of each stand-alone build, as well as each time building starts as either part of `--watch` or `--serve`. To use it, attach the event handler to your Eleventy config:
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
// Async-friendly in 1.0+
// Arguments added in 2.0+
@@ -40,7 +40,7 @@ export default function(eleventyConfig) {
The `eleventy.after` event runs every time Eleventy finishes building, so it will run after the end of each stand-alone build, as well as each time building ends as either part of `--watch` or `--serve`. To use it, attach the event handler to your Eleventy config:
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
// Async-friendly in 1.0+
// Arguments added in 2.0+
@@ -58,7 +58,7 @@ export default function(eleventyConfig) {
Eleventy now provides an object with metadata on the build as an argument to the `eleventy.before` and `eleventy.after` event callbacks.
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
eleventyConfig.on("eleventy.before", async ({ dir, runMode, outputMode }) => {
// Read more below
@@ -101,7 +101,7 @@ export default function(eleventyConfig) {
The `eleventy.beforeWatch` event runs before a build is run _only_ if it's a re-run during `--watch` or `--serve`. This means it will neither run during the initial build nor during stand-alone builds. To use it, attach the event handler to your Eleventy config:
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
// Async-friendly in 1.0+
eleventyConfig.on("eleventy.beforeWatch", async (changedFiles) => {
@@ -119,7 +119,7 @@ The `changedFiles` parameter was {% addedin "0.11.1" %}.
This event facilitates the [i18n plugin](/docs/plugins/i18n/) (but is available independent of it).
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
// Async-friendly
eleventyConfig.on("eleventy.contentMap", async ({ inputPathToUrl, urlToInputPath }) => {
diff --git a/src/docs/languages/custom.md b/src/docs/languages/custom.md
index cb169ae7bc..39412c1787 100644
--- a/src/docs/languages/custom.md
+++ b/src/docs/languages/custom.md
@@ -20,10 +20,8 @@ Eleventy now allows the addition of custom template extensions, meaning that you
`clowd` is a pretend templating language that we’ve just created. It uses the `.clowd` file extension. The purpose of the language is to translate any occurrences of the word `cloud` to the word `butt` instead.
-{% codetitle ".eleventy.js" %}
-
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
// Add as a valid extension to process
// Alternatively, add this to the list of formats you pass to the `--formats` CLI argument
eleventyConfig.addTemplateFormats("clowd");
@@ -40,7 +38,8 @@ module.exports = function (eleventyConfig) {
},
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
{% callout "info", "md-block" -%}
Situations where you might want to use `addExtension` but probably shouldn’t:
@@ -53,13 +52,11 @@ Situations where you might want to use `addExtension` but probably shouldn’t:
For a more realistic sample, here’s an example of Eleventy looking for all `.scss` files in a project’s input directory to process them to your output directory.
-{% codetitle ".eleventy.js" %}
-
-```js
+{% set codeContent %}
// Don’t forget to `npm install sass`!
-const sass = require("sass");
+import sass from "sass";
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
eleventyConfig.addTemplateFormats("scss");
// Creates the extension for use
@@ -77,7 +74,8 @@ module.exports = function (eleventyConfig) {
},
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
We’re using `compileString` from the Sass library above for speed benefits over their asynchronous counterparts (reported by [the Sass documentation](https://sass-lang.com/documentation/js-api#usage)).
@@ -89,20 +87,11 @@ The above extension would process a file located at `subdir/test.scss` to the ou
You can pass in both the file’s `inputPath` and the Eleventy includes folder to provide a set of directories to look for when using Sass’ `@use`, `@forward`, and `@import` features. Read more about [`loadPaths` on the Sass documentation](https://sass-lang.com/documentation/js-api/interfaces/Options#loadPaths).
-{% codetitle ".eleventy.js" %}
-
-```js/10,11,15-18
-const sass = require("sass");
-const path = require("node:path");
+
+{% codetitle "eleventy.config.js" %}
-module.exports = function(eleventyConfig) {
- // add as a valid template language to process, e.g. this adds to --formats
- eleventyConfig.addTemplateFormats("scss");
-
- eleventyConfig.addExtension("scss", {
- outputFileExtension: "css", // optional, default: "html"
-
- // can be an async function
+```js/1,5-8
+ // some configuration truncated …
compile: function (inputContent, inputPath) {
let parsed = path.parse(inputPath);
@@ -117,8 +106,6 @@ module.exports = function(eleventyConfig) {
return result.css;
};
}
- });
-};
```
Make special note of the `this.config.dir.includes` folder above. Declaring your includes folder means that you don’t need to prefix any file paths with the includes folder name (e.g. `_includes/_code.scss` can be consumed with `@use "code"`).
@@ -177,8 +164,8 @@ This functionality is more-or-less identical to the [`compileOptions` `permalink
{% addedin "2.0.0-canary.19" %} If `key` is the _only_ property in the options object, we treat the extension as an alias and use the existing upstream template syntax.
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addExtension("11ty.jsx", {
key: "11ty.js",
});
@@ -188,7 +175,8 @@ module.exports = function (eleventyConfig) {
key: "11ty.js",
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
You can read about the above approach (and see more detailed examples of its usage) on the [TypeScript](/docs/languages/typescript/), [JSX](/docs/languages/jsx/), or [MDX](/docs/languages/mdx/) documentation pages.
@@ -200,10 +188,10 @@ You can read about the above approach (and see more detailed examples of its usa
In these example, we switch from the Eleventy default `markdown-it` to `marked` for markdown processing.
-```js
-const { marked } = require("marked");
+{% set codeContent %}
+import { marked } from "marked";
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
eleventyConfig.addExtension("md", {
compile: function (inputContent, inputPath) {
let html = marked.parse(inputContent);
@@ -220,7 +208,8 @@ module.exports = function (eleventyConfig) {
},
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
Note that overriding `md` opts-out of the default pre-processing by another template language [Markdown Files](/docs/config/#default-template-engine-for-markdown-files). As mentioned elsewhere, improvements to add additional hooks for preprocessing will likely come later.
@@ -245,11 +234,12 @@ You can override a template language once. Any attempts to override an more than
- a render function (also async-friendly)
```js
-compile: async (inputContent, inputPath) => {
- return async () => {
- return inputContent;
- };
-};
+ // some configuration truncated …
+ compile: async (inputContent, inputPath) => {
+ return async () => {
+ return inputContent;
+ };
+ },
```
The render function is passed the merged data object (i.e. the full Data Cascade available inside templates). The render function returned from `compile` is called once per output file generated (one for basic templates and more for [paginated templates](/docs/pagination/)).
@@ -271,11 +261,10 @@ An async-friendly function that runs _once_ (no matter how many files use the ex
Note that `init` will **not** re-run on watch/serve mode. If you’d like something that runs before _every_ build, use the [`eleventy.before` event](/docs/events/#eleventy.before).
```js
-{
+ // some configuration truncated …
init: async function() {
// has access to current configuration settings in `this.config`
},
-}
```
### `read`
@@ -285,9 +274,8 @@ Note that `init` will **not** re-run on watch/serve mode. If you’d like someth
Set to `false` to opt out of reading the contents of files from the file system. This is useful if you’re using an external bundler to read the files (e.g. the Vue plugin uses rollup to read and compile `.vue` files).
```js
-{
+ // some configuration truncated …
read: false,
-}
```
Use with `compileOptions.setCacheKey` to get more fine-grained control over how the template is cached.
@@ -305,23 +293,21 @@ Controls if and how additional data should be retrieved from a JavaScript object
Notably, this is separate from (in addition to) front matter parsing (which requires `read: true`). As an example, this is used by the Vue plugin to retrieve the return from the Vue `data()` function in the Vue component to feed back into the Data Cascade.
```js
-{
- // this is the default
- getData: false; // no additional data is used
-}
+ // some configuration truncated …
+ // `false` is the default
+ getData: false, // no additional data is used
```
```js
-{
+ // some configuration truncated …
getData: async function(inputPath) {
// DIY, this object will be merged into data cascade
return {};
},
-}
```
```js
-{
+ // some configuration truncated …
// get the `data` property from the instance.
getData: ["data"],
// * `getData: true` is aliased to ["data"]
@@ -332,7 +318,6 @@ Notably, this is separate from (in addition to) front matter parsing (which requ
let instance = doSomethingMyselfToFetchAJavaScriptObject(inputPath);
return instance;
}
-}
```
@@ -341,7 +326,7 @@ Notably, this is separate from (in addition to) front matter parsing (which requ
If the JavaScript object returned from `getInstanceFromInputPath` has an `eleventyDataKey` property, this is used to override the keys returned from the `getData` Array for this specific instance only. Anything you can pass into a [`new Set()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set) works here (Array, Map, another Set).
```js
-{
+ // some configuration truncated …
// if getData is `false`, `eleventyDataKey` will not be used.
getData: true,
@@ -360,8 +345,7 @@ If the JavaScript object returned from `getInstanceFromInputPath` has an `eleven
availableOnGlobalData: 123
}
}
- }
-}
+ },
```
In the above example, the data cascade will include a top-level variable `availableOnGlobalData` with a value of `123`. Using `eleventyDataKey` overrides any keys set in `getData`, which means (for this instance) `data` will be ignored and `notAvailableOnGlobalData` will not be present.
@@ -377,7 +361,7 @@ In the above example, the data cascade will include a top-level variable `availa
This has the same signature as the `compile` function and expects a reusable `render` function to be returned.
```js
-{
+ // some configuration truncated …
compileOptions: {
permalink: function(contents, inputPath) {
return (data) => {
@@ -385,8 +369,7 @@ This has the same signature as the `compile` function and expects a reusable `re
// Or `return;` (return undefined) to fallback to default behavior
}
}
- }
-}
+ },
```
- Don’t compile permalink strings in the parent template language
@@ -402,12 +385,10 @@ This has the same signature as the `compile` function and expects a reusable `re
This provides another way to implement Sass’ underscore convention to skip writing the file to the output directory:
-{% codetitle ".eleventy.js" %}
+{% codetitle "eleventy.config.js" %}
```js
-// … some configuration truncated
-
-{
+ // … some configuration truncated
compileOptions: {
permalink: function(contents, inputPath) {
let parsed = path.parse(inputPath);
@@ -415,8 +396,7 @@ This provides another way to implement Sass’ underscore convention to skip wri
return false;
}
}
- }
-}
+ },
```
#### `compileOptions.spiderJavaScriptDependencies`
@@ -441,7 +421,7 @@ You can also granularly control the caching key using a `getCacheKey` callback.
Expand to see the default getCacheKey implementation (you can override this!)
```js
-{
+ // some configuration truncated …
read: false,
compileOptions: {
cache: true,
@@ -457,8 +437,7 @@ You can also granularly control the caching key using a `getCacheKey` callback.
// return false;
// }
}
- }
-}
+ },
```
@@ -475,7 +454,7 @@ A callback used for advanced control of template dependency matching. This deter
Expand to see the default `isIncrementalMatch` implementation (you can override this!)
```js
-{
+ // some configuration truncated …
// Called once for each template (matching this custom template’s file extension) in your project.
isIncrementalMatch: function(modifiedFile) {
// is modifiedFile relevant to this.inputPath?
@@ -493,8 +472,7 @@ A callback used for advanced control of template dependency matching. This deter
// Skip it
return false;
- }
-}
+ },
```
diff --git a/src/docs/languages/ejs.md b/src/docs/languages/ejs.md
index 4f43f32659..a8d216e8a9 100644
--- a/src/docs/languages/ejs.md
+++ b/src/docs/languages/ejs.md
@@ -20,25 +20,28 @@ You can override a `.ejs` file’s template engine. Read more at [Changing a Tem
See “Options” on the [EJS home page](https://ejs.co/).
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.setEjsOptions({
// use instead of <% %>
delimiter: "?",
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
### Optional: Set your own Library instance {% addedin "0.3.0" %}
As an escape mechanism for advanced usage, pass in your own instance of the EJS library using the Configuration API.
-```js
-module.exports = function (eleventyConfig) {
- let ejs = require("ejs");
+{% set codeContent %}
+import ejs from "ejs";
+
+export default function (eleventyConfig) {
eleventyConfig.setLibrary("ejs", ejs);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
## Supported Features
diff --git a/src/docs/languages/haml.md b/src/docs/languages/haml.md
index f97e60d7b6..6f537dbc80 100644
--- a/src/docs/languages/haml.md
+++ b/src/docs/languages/haml.md
@@ -20,12 +20,14 @@ You can override a `.haml` file’s template engine. Read more at [Changing a Te
As an escape mechanism for advanced usage, pass in your own instance of the HAML library using the Configuration API.
-```js
-module.exports = function (eleventyConfig) {
- let haml = require("hamljs");
+{% set codeContent %}
+import haml from "hamljs";
+
+export default function (eleventyConfig) {
eleventyConfig.setLibrary("haml", haml);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
## Supported Features
diff --git a/src/docs/languages/handlebars.md b/src/docs/languages/handlebars.md
index 7d4bc33c9e..b2e409bb43 100644
--- a/src/docs/languages/handlebars.md
+++ b/src/docs/languages/handlebars.md
@@ -26,12 +26,13 @@ You can override a `.hbs` file’s template engine. Read more at [Changing a Tem
As an escape mechanism for advanced usage, pass in your own instance of the Handlebars library using the Configuration API.
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
let handlebars = require("handlebars");
eleventyConfig.setLibrary("hbs", handlebars);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
## Supported Features
@@ -51,16 +52,18 @@ Helpers are used to transform or modify content. You can add Handlebars specific
Read more about [Handlebars Helpers syntax](https://handlebarsjs.com/#helpers)
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Handlebars Helper
- eleventyConfig.addHandlebarsHelper("myHandlebarsHelper", function(value) { … });
+ eleventyConfig.addHandlebarsHelper("myHandlebarsHelper", function(value) { /* … */ });
// Universal filters (Adds to Liquid, Nunjucks, and Handlebars)
// Read the note about Universal Filters below: Use a shortcode instead!
- eleventyConfig.addFilter("myFilter", function(value) { … });
+ eleventyConfig.addFilter("myFilter", function(value) { /* … */ });
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
+
#### Usage
@@ -82,12 +85,13 @@ These are not supported by Handlebars. Read more at [this Handlebars issue](http
Universal filters have always been funneled into Handlebars helpers. However, shortcodes (Paired/Single) match better with the semantic footprint of Handlebars Helpers.
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Universal filters (Adds to Liquid, Nunjucks, and Handlebars)
- eleventyConfig.addFilter("myFilter", function(value) { … });
+ eleventyConfig.addFilter("myFilter", function(value) { /* … */ });
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
Moving forward for Handlebars content, using Universal Shortcodes are preferred to Universal Filters. We will continue to support funneling Universal filters to Handlebars helpers. This will not affect your template content as the syntax for Handlebars filters/helpers/shortcodes will continue to be the same. They’re all just helpers.
@@ -97,10 +101,10 @@ Shortcodes are basically reusable bits of content. You can add Handlebars specif
### Single Shortcode
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Handlebars Shortcode
- eleventyConfig.addHandlebarsShortcode("user", function(name, twitterUsername) { … });
+ eleventyConfig.addHandlebarsShortcode("user", function(name, twitterUsername) { /* … */ });
// Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)
eleventyConfig.addShortcode("user", function(name, twitterUsername) {
@@ -110,7 +114,8 @@ module.exports = function(eleventyConfig) {
`;
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
#### Usage
@@ -135,10 +140,10 @@ module.exports = function(eleventyConfig) {
### Paired Shortcode
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Handlebars Shortcode
- eleventyConfig.addPairedHandlebarsShortcode("user", function(bioContent, name, twitterUsername) { … });
+ eleventyConfig.addPairedHandlebarsShortcode("user", function(bioContent, name, twitterUsername) { /* … */ });
// Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)
eleventyConfig.addPairedShortcode("user", function(bioContent, name, twitterUsername) {
@@ -149,7 +154,8 @@ module.exports = function(eleventyConfig) {
`;
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
#### Usage
@@ -184,8 +190,8 @@ These are not supported by Handlebars. Read more at [this Handlebars issue](http
If you aren’t using an arrow function, Handlebars Shortcodes (and Nunjucks, Liquid, and 11ty.js JavaScript Functions) will have access to Eleventy [`page` data values](/docs/data-eleventy-supplied/#page-variable-contents) without needing to pass them in as arguments.
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addHandlebarsShortcode("myShortcode", function () {
// Available in 0.11.0 and above
console.log(this.page);
@@ -196,4 +202,5 @@ module.exports = function (eleventyConfig) {
console.log(this.page.fileSlug);
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
diff --git a/src/docs/languages/javascript.md b/src/docs/languages/javascript.md
index d7478b2915..4d3360d98c 100644
--- a/src/docs/languages/javascript.md
+++ b/src/docs/languages/javascript.md
@@ -34,86 +34,78 @@ Raw values will not have access to Data or [JavaScript Template Functions](#java
### String
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
-module.exports = "Zach
";
-```
+{% set codeContent %}
+export default "Zach
";
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
Or [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals):
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
-module.exports = `These can
+{% set codeContent %}
+export default `
These can
span
multiple
lines!
`;
-```
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
### Buffer
Some templating libraries return [Buffers](https://nodejs.org/api/buffer.html#buffer_class_method_buffer_from_string_encoding) (e.g. [viperHTML](https://github.com/WebReflection/viperHTML)).
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
-module.exports = Buffer.from("Zách
");
-```
+{% set codeContent %}
+export default Buffer.from("Zách
");
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
### Promise
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
-module.exports = new Promise((resolve, reject) => {
+{% set codeContent %}
+export default new Promise((resolve, reject) => {
setTimeout(function () {
resolve("Zach
");
}, 1000);
});
-```
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
## Function
Can return any [raw value](#raw-values) (e.g. String, Buffer, Promise). Use [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to embed data values without having to concatenate strings!
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
-module.exports = function (data) {
+{% set codeContent %}
+export default function (data) {
return `${data.name}
`;
};
-```
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
De-structuring syntax is a little bit easier to read:
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
-module.exports = function ({ name }) {
+{% set codeContent %}
+export default function ({ name }) {
return `${name}
`;
};
-```
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
Maybe you like arrow functions:
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
-module.exports = ({ name }) => `${name}
`;
-```
+{% set codeContent %}
+export default ({ name }) => `${name}
`;
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
`async` functions work too:
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
+{% set codeContent %}
const getAnAsyncThing = require("./lib/asyncThing");
-module.exports = async function (data) {
+export default async function (data) {
return `${await getAnAsyncThing()}
`;
};
-```
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
## Classes
@@ -121,9 +113,7 @@ Eleventy looks for classes that have a `render` method and uses `render` to retu
`render` can return any [raw value](#raw-values) (e.g. String, Buffer, Promise).
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
+{% set codeContent %}
class Test {
// or `async render({name}) {`
render({ name }) {
@@ -131,8 +121,9 @@ class Test {
}
}
-module.exports = Test;
-```
+export default Test;
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
### Optional `data` Method
@@ -140,9 +131,7 @@ module.exports = Test;
This data acts as Front Matter for the template and similarly to Front Matter will take precedence over all other data in the data cascade. The `data` method can be asynchronous `async data()` or it can be a getter `get data()`.
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
+{% set codeContent %}
class Test {
// or `async data() {`
// or `get data() {`
@@ -160,8 +149,9 @@ class Test {
}
}
-module.exports = Test;
-```
+export default Test;
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
### Permalinks
@@ -169,9 +159,7 @@ The `permalink` data key will work here. Permalinks can be a [raw value](#raw-va
#### Permalink String
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
+{% set codeContent %}
class Test {
data() {
return {
@@ -185,16 +173,15 @@ class Test {
}
}
-module.exports = Test;
-```
+export default Test;
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
#### Permalink Function
Permalink Functions can return any [raw value](#raw-values) (e.g. String, Buffer, Promise).
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
+{% set codeContent %}
class Test {
data() {
return {
@@ -209,16 +196,15 @@ class Test {
}
}
-module.exports = Test;
-```
+export default Test;
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
#### Permalink Function using a Filter
Universal filters, shortcodes, and other JavaScript Template Functions work here and are exposed on `this`. Read more about [Eleventy provided Universal Filters](/docs/filters/#eleventy-provided-universal-filters).
-{% codetitle "JavaScript", "Syntax" %}
-
-```js
+{% set codeContent %}
class Test {
data() {
return {
@@ -235,16 +221,15 @@ class Test {
}
}
-module.exports = Test;
-```
+export default Test;
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
### Markdown and JavaScript
Yes, you can use JavaScript as your preprocessor language for Markdown. Read more about [`templateEngineOverride`](/docs/languages/#overriding-the-template-language).
-{% codetitle "JavaScript and Markdown", "Syntax" %}
-
-```js
+{% set codeContent %}
class Test {
data() {
return {
@@ -258,8 +243,9 @@ class Test {
}
}
-module.exports = Test;
-```
+export default Test;
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
{% callout "info" %}While templateEngineOverride: 11ty.js,md works to add markdown support, the special behavior of JavaScript templates does not allow other template engines to be supported here (e.g. templateEngineOverride: njk,md). One workaround is to use the Render Plugin.{% endcallout %}
@@ -269,25 +255,20 @@ module.exports = Test;
A JavaScript Template Function allows you to extend your JavaScript templates with extra functionality. If you add any Universal Filters or Shortcodes, they will be exposed as JavaScript Template Functions.
-{% codetitle ".eleventy.js" %}
-
-```js
-module.exports = function(eleventyConfig) {
- eleventyConfig.addJavaScriptFunction("myFunction", function(a, b) { … });
+{% set codeContent %}
+export default function(eleventyConfig) {
+ eleventyConfig.addJavaScriptFunction("myFunction", function(a, b) { /* … */ });
};
-```
-
-{% codetitle "js-fn-example.11ty.js" %}
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
-{% raw %}
-
-```js
-module.exports = function (data) {
+js-fn-example.11ty.js
+{% set codeContent %}
+export default function (data) {
return `${this.myFunction(data.a, data.b)}
`;
};
-```
-
-{% endraw %}
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
### Asynchronous JavaScript Template Functions
@@ -295,27 +276,24 @@ This works the same as any `async` JavaScript function or function that returns
This is the same as the example above but adds `async` before the `function`.
-{% codetitle ".eleventy.js" %}
-
-```js
-module.exports = function(eleventyConfig) {
- eleventyConfig.addJavaScriptFunction("myAsyncFunction", async function(a, b) { … });
+{% set codeContent %}
+export default function(eleventyConfig) {
+ eleventyConfig.addJavaScriptFunction("myAsyncFunction", async function(a, b) { /* … */ });
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
This is the same as the example above but adds `await` before the function is called.
-{% codetitle "js-async-fn-example.11ty.js" %}
-{% raw %}
+{% codetitle "js-async-fn-example.11ty.js" %}
-```js
-module.exports = async function (data) {
+{% set codeContent %}
+export default async function (data) {
return `${await this.myAsyncFunction(data.a, data.b)}
`;
};
-```
-
-{% endraw %}
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
### Warning about Arrow Functions
@@ -325,42 +303,36 @@ Note that by definition ( {
+{% set codeContent %}
+export default (data) => {
// Using `this` in an arrow function will throw an error!
return `${this.myFunction(data.a, data.b)}
`;
};
-```
-
-{% endraw %}
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
### Relationship to Filters and Shortcodes
Any universal filters or shortcodes will also be available as JavaScript Template Functions.
-{% codetitle ".eleventy.js" %}
-
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Universal filters (Adds to Liquid, Nunjucks, 11ty.js, and Handlebars)
- eleventyConfig.addFilter("myFilter", function(myVariable) { … });
+ eleventyConfig.addFilter("myFilter", function(myVariable) { /* … */ });
// Universal Shortcodes (Adds to Liquid, Nunjucks, 11ty.js, Handlebars)
- eleventyConfig.addShortcode("user", function(firstName, lastName) { … });
+ eleventyConfig.addShortcode("user", function(firstName, lastName) { /* … */ });
// Universal Paired Shortcodes (Adds to Liquid, Nunjucks, 11ty.js, Handlebars)
- eleventyConfig.addPairedShortcode("pairedUser", function(content, firstName, lastName) { … });
+ eleventyConfig.addPairedShortcode("pairedUser", function(content, firstName, lastName) { /* … */ });
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
{% codetitle "universal-examples.11ty.js" %}
-{% raw %}
-
-```js
-module.exports = function (data) {
+{% set codeContent %}
+export default function (data) {
return `
${this.myFilter(data.myVar)}
${this.user(data.firstName, data.lastName)}
@@ -371,16 +343,15 @@ module.exports = function (data) {
)}
`;
};
-```
-
-{% endraw %}
+{% endset %}
+{% include "snippets/esmCjsTabs.njk" %}
### Access to `page` data values {% addedin "0.11.0" %}
If you aren’t using an arrow function, JavaScript Functions (and Nunjucks, Liquid, and Handlebars Shortcodes) will have access to Eleventy [`page` data values](/docs/data-eleventy-supplied/#page-variable-contents) without needing to pass them in as arguments.
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addJavaScriptFunction("myFunction", function () {
// Available in 0.11.0 and above
console.log(this.page);
@@ -391,4 +362,5 @@ module.exports = function (eleventyConfig) {
console.log(this.page.fileSlug);
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
\ No newline at end of file
diff --git a/src/docs/languages/jsx.md b/src/docs/languages/jsx.md
index b2503ad49e..d3b3dad173 100644
--- a/src/docs/languages/jsx.md
+++ b/src/docs/languages/jsx.md
@@ -23,7 +23,7 @@ layout: layouts/langs.njk
{% addedin "3.0.0-alpha.11" %}Here we use [`tsx`](https://tsx.is/node/esm) to process JSX files.
-{% codetitle "eleventy.config.js (ESM)" %}
+eleventy.config.js
```js
import "tsx/esm";
diff --git a/src/docs/languages/liquid.md b/src/docs/languages/liquid.md
index c05ec7fedb..765e957d87 100644
--- a/src/docs/languages/liquid.md
+++ b/src/docs/languages/liquid.md
@@ -30,26 +30,28 @@ Rather than constantly fixing outdated documentation, [find `getLiquidOptions` i
Surprising to JavaScript developers—in [LiquidJS both `""` and `0` are truthy values](https://liquidjs.com/tutorials/truthy-and-falsy.html)! If you’d like to switch to use more JS-familiar conventions, use the Liquid option `jsTruthy: true` in your Eleventy config:
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.setLiquidOptions({
jsTruthy: true,
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
### Use your own options {% addedin "0.2.15" %}
It’s recommended to use the Configuration API to override the default options above.
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.setLiquidOptions({
dynamicPartials: false,
strictFilters: false, // renamed from `strict_filters` in Eleventy 1.0
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
### Optional: Set your own Library instance {% addedin "0.3.0" %}
@@ -57,10 +59,10 @@ As an escape mechanism for advanced usage, pass in your own instance of the Liqu
{% callout "warn" %}Not compatible with setLiquidOptions above—this method will override any configuration set there.{% endcallout %}
-```js
-const { Liquid } = require("liquidjs");
+{% set codeContent %}
+import { Liquid } from "liquidjs";
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
let options = {
extname: ".liquid",
dynamicPartials: false,
@@ -70,7 +72,8 @@ module.exports = function (eleventyConfig) {
eleventyConfig.setLibrary("liquid", new Liquid(options));
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
## Supported Features
@@ -109,18 +112,19 @@ Read more about [LiquidJS Filter syntax](https://liquidjs.com/tutorials/register
Note that Liquid supports asynchronous filters out of the box (without any additional code or API method changes).
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Liquid Filter
- eleventyConfig.addLiquidFilter("myLiquidFilter", function(myVariable) { … });
+ eleventyConfig.addLiquidFilter("myLiquidFilter", function(myVariable) { /* … */ });
// Async-friendly too
- eleventyConfig.addLiquidFilter("myAsyncLiquidFilter", async function(myVariable) { … });
+ eleventyConfig.addLiquidFilter("myAsyncLiquidFilter", async function(myVariable) { /* … */ });
// Universal filters (Adds to Liquid, Nunjucks, and Handlebars)
- eleventyConfig.addFilter("myFilter", function(myVariable) { … });
+ eleventyConfig.addFilter("myFilter", function(myVariable) { /* … */ });
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
### Usage
@@ -134,8 +138,8 @@ module.exports = function(eleventyConfig) {
### Multiple Filter Arguments
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
// Liquid Filter
eleventyConfig.addLiquidFilter(
"concatThreeStrings",
@@ -144,7 +148,8 @@ module.exports = function (eleventyConfig) {
}
);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
{% raw %}
@@ -160,13 +165,11 @@ Shortcodes are basically reusable bits of content. You can add Liquid specific s
### Shortcode
-{% codetitle ".eleventy.js" %}
-
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Liquid Shortcode
// These can be async functions too
- eleventyConfig.addLiquidShortcode("user", function(name, twitterUsername) { … });
+ eleventyConfig.addLiquidShortcode("user", function(name, twitterUsername) { /* … */ });
// Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)
eleventyConfig.addShortcode("user", function(name, twitterUsername) {
@@ -176,7 +179,8 @@ module.exports = function(eleventyConfig) {
`;
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
`liquidjs` is already `Promise`-based internally, so an `async function` for a shortcode function works out of the box here.
@@ -204,11 +208,11 @@ module.exports = function(eleventyConfig) {
### Paired Shortcode
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Liquid Shortcode
// These can be async functions too
- eleventyConfig.addPairedLiquidShortcode("user2", function(bioContent, name, twitterUsername) { … });
+ eleventyConfig.addPairedLiquidShortcode("user2", function(bioContent, name, twitterUsername) { /* … */ });
// Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)
eleventyConfig.addPairedShortcode("user2", function(bioContent, name, twitterUsername) {
@@ -219,7 +223,8 @@ module.exports = function(eleventyConfig) {
`;
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
`liquidjs` is already `Promise`-based internally, so an `async function` for a shortcode function works out of the box here.
@@ -250,10 +255,8 @@ Nebraska beaches. {% enduser2 %}
Liquid is already promise-based internally so `async` functions with `await` work fine out of the box.
-{% codetitle ".eleventy.js" %}
-
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addLiquidShortcode(
"user",
async function (name, twitterUsername) {
@@ -268,7 +271,8 @@ module.exports = function (eleventyConfig) {
}
);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
#### Usage
@@ -287,8 +291,8 @@ Zach likes to take long walks on Nebraska beaches. {% enduser2 %}
If you aren’t using an arrow function, Liquid Shortcodes (and Nunjucks, Handlebars, and 11ty.js JavaScript Functions) will have access to Eleventy [`page` data values](/docs/data-eleventy-supplied/#page-variable-contents) without needing to pass them in as arguments.
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addLiquidShortcode("myShortcode", function () {
// Available in 0.11.0 and above
console.log(this.page);
@@ -299,4 +303,6 @@ module.exports = function (eleventyConfig) {
console.log(this.page.fileSlug);
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
+
diff --git a/src/docs/languages/markdown.md b/src/docs/languages/markdown.md
index cd38b6bcd6..22b4421a51 100644
--- a/src/docs/languages/markdown.md
+++ b/src/docs/languages/markdown.md
@@ -35,7 +35,7 @@ Starting in Eleventy 2.0, we’ve disabled the [Indented Code Blocks](#indented-
Pass in your own instance of the Markdown library using the Configuration API. See [all `markdown-it` options](https://github.com/markdown-it/markdown-it#init-with-presets-and-options).
-{% set configCodeContent %}
+{% set codeContent %}
import markdownIt from "markdown-it";
export default function (eleventyConfig) {
diff --git a/src/docs/languages/mustache.md b/src/docs/languages/mustache.md
index 2aa4399e19..96c4fa8a2e 100644
--- a/src/docs/languages/mustache.md
+++ b/src/docs/languages/mustache.md
@@ -20,12 +20,14 @@ You can override a `.mustache` file’s template engine. Read more at [Changing
As an escape mechanism for advanced usage, pass in your own instance of the Mustache library using the Configuration API.
-```js
-module.exports = function (eleventyConfig) {
- let mustache = require("mustache");
+{% set codeContent %}
+import mustache from "mustache";
+
+export default function (eleventyConfig) {
eleventyConfig.setLibrary("mustache", mustache);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
## Supported Features
diff --git a/src/docs/languages/nunjucks.md b/src/docs/languages/nunjucks.md
index ba39dd9512..c398d74b63 100644
--- a/src/docs/languages/nunjucks.md
+++ b/src/docs/languages/nunjucks.md
@@ -28,14 +28,15 @@ We use [Nunjucks defaults for all environment options](https://mozilla.github.io
It’s recommended to use the Configuration API to override the default Nunjucks options.
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.setNunjucksEnvironmentOptions({
throwOnUndefined: true,
autoescape: false, // warning: don’t do this!
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
### Advanced: Use your Nunjucks Environment {% addedin "0.3.0" %}
@@ -43,17 +44,18 @@ While it is preferred and simpler to use the Options-specific API method above (
{% callout "warn" %}Not compatible with setNunjucksEnvironmentOptions above—this method will override any configuration set there.{% endcallout %}
-```js
-let Nunjucks = require("nunjucks");
+{% set codeContent %}
+import Nunjucks from "nunjucks";
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
let nunjucksEnvironment = new Nunjucks.Environment(
new Nunjucks.FileSystemLoader("_includes")
);
eleventyConfig.setLibrary("njk", nunjucksEnvironment);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
## Supported Features
@@ -76,18 +78,19 @@ Filters are used to transform or modify content. You can add Nunjucks specific f
Read more about [Nunjucks Filter syntax](https://mozilla.github.io/nunjucks/templating.html#filters).
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Nunjucks Filter
- eleventyConfig.addNunjucksFilter("myNjkFilter", function(value) { … });
+ eleventyConfig.addNunjucksFilter("myNjkFilter", function(value) { /* … */ });
// Nunjucks Asynchronous Filter (read on below)
- eleventyConfig.addNunjucksAsyncFilter("myAsyncNjkFilter", function(value, callback) { … });
+ eleventyConfig.addNunjucksAsyncFilter("myAsyncNjkFilter", function(value, callback) { /* … */ });
// Universal filters (Adds to Liquid, Nunjucks, and Handlebars)
- eleventyConfig.addFilter("myFilter", function(value) { … });
+ eleventyConfig.addFilter("myFilter", function(value) { /* … */ });
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
### Usage
@@ -101,8 +104,8 @@ module.exports = function(eleventyConfig) {
### Multiple Filter Arguments
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
// Nunjucks Filter
eleventyConfig.addNunjucksFilter(
"concatThreeStrings",
@@ -111,7 +114,8 @@ module.exports = function (eleventyConfig) {
}
);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
{% raw %}
@@ -125,8 +129,8 @@ module.exports = function (eleventyConfig) {
By default, almost all templating engines are synchronous. Nunjucks supports some asynchronous behavior, like filters. Here’s how that works:
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addNunjucksAsyncFilter(
"myAsyncFilter",
function (value, callback) {
@@ -136,14 +140,15 @@ module.exports = function (eleventyConfig) {
}
);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
The last argument here is the callback function, the first argument of which is the error object and the second is the result data. Use this filter like you would any other: `{% raw %}{{ myValue | myAsyncFilter }}{% endraw %}`.
Here’s a Nunjucks example with 2 arguments:
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addNunjucksAsyncFilter(
"myAsyncFilter",
function (value1, value2, callback) {
@@ -153,7 +158,8 @@ module.exports = function (eleventyConfig) {
}
);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
Multi-argument filters in Nunjucks are called like this: `{% raw %}{{ myValue1 | myAsyncFilter(myValue2) }}{% endraw %}`.
@@ -163,10 +169,10 @@ Shortcodes are reusable bits of content. You can add Nunjucks specific shortcode
### Single Shortcode
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Nunjucks Shortcode
- eleventyConfig.addNunjucksShortcode("user", function(name, twitterUsername) { … });
+ eleventyConfig.addNunjucksShortcode("user", function(name, twitterUsername) { /* … */ });
// Universal Shortcodes (Adds to Liquid, Nunjucks, JavaScript, Handlebars)
eleventyConfig.addShortcode("user", function(name, twitterUsername) {
@@ -176,7 +182,8 @@ module.exports = function(eleventyConfig) {
`;
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
#### Nunjucks Template Usage
@@ -200,10 +207,10 @@ module.exports = function(eleventyConfig) {
### Paired Shortcode
-```js
-module.exports = function(eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Nunjucks Shortcode
- eleventyConfig.addPairedNunjucksShortcode("user", function(bioContent, name, twitterUsername) { … });
+ eleventyConfig.addPairedNunjucksShortcode("user", function(bioContent, name, twitterUsername) { /* … */ });
// Universal Shortcodes (Adds to Liquid, Nunjucks, Handlebars)
eleventyConfig.addPairedShortcode("user", function(bioContent, name, twitterUsername) {
@@ -214,7 +221,8 @@ module.exports = function(eleventyConfig) {
`;
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
#### Nunjucks Usage
@@ -244,8 +252,8 @@ Note that you can put any Nunjucks tags or content inside the `{% raw %}{% user
Creates a single argument object to pass to the shortcode.
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function(eleventyConfig) {
// Nunjucks Shortcode
eleventyConfig.addNunjucksShortcode("user", function (user) {
return `
@@ -254,7 +262,8 @@ ${user.twitter ? `` : ""}
`;
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
#### Nunjucks Usage
@@ -302,10 +311,8 @@ Importantly, this syntax means that any of the arguments can be optional (withou
Note that the configuration methods here to add asynchronous shortcodes are different than their synchronous counterparts. This is just another gentle reminder here that these API methods are pretty verbose and it’s probably easier to add a [Universal shortcode](/docs/shortcodes/) instead.
-{% codetitle ".eleventy.js" %}
-
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addNunjucksAsyncShortcode(
"user",
async function (name, twitterUsername) {
@@ -320,7 +327,8 @@ module.exports = function (eleventyConfig) {
}
);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
#### Nunjucks Usage
@@ -363,8 +371,8 @@ This is identical to the synchronous Nunjucks usage.
If you aren’t using an arrow function, Nunjucks Shortcodes (and Handlebars, Liquid, and 11ty.js JavaScript Functions) will have access to Eleventy [`page` data values](/docs/data-eleventy-supplied/#page-variable-contents) without needing to pass them in as arguments.
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addNunjucksShortcode("myShortcode", function () {
// Available in 0.11.0 and above
console.log(this.page);
@@ -375,17 +383,19 @@ module.exports = function (eleventyConfig) {
console.log(this.page.fileSlug);
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
### Generic Global {% addedin "1.0.0" %}
Nunjucks provides a custom way to [add globals](https://mozilla.github.io/nunjucks/api.html#addglobal) to templates. These can be any arbitrary JavaScript: functions, variables, etc. Note that this is not async-friendly (Nunjucks does not support `await` inside of templates).
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addNunjucksGlobal("fortythree", 43);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
{% raw %}
@@ -395,13 +405,14 @@ module.exports = function (eleventyConfig) {
{% endraw %}
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.addNunjucksGlobal("fortytwo", function () {
return 42;
});
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
{% raw %}
diff --git a/src/docs/languages/pug.md b/src/docs/languages/pug.md
index 33078be34a..c8a62699c1 100644
--- a/src/docs/languages/pug.md
+++ b/src/docs/languages/pug.md
@@ -22,22 +22,25 @@ You can override a `.pug` file’s template engine. Read more at [Changing a Tem
Set compile/render options using the Configuration API. See all [Pug options](https://pugjs.org/api/reference.html#options).
-```js
-module.exports = function (eleventyConfig) {
+{% set codeContent %}
+export default function (eleventyConfig) {
eleventyConfig.setPugOptions({ debug: true });
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
### Optional: Set your own Library instance {% addedin "0.3.0" %}
As an escape mechanism for advanced usage, pass in your own instance of the Pug library using the Configuration API.
-```js
-module.exports = function (eleventyConfig) {
- let pug = require("pug");
+{% set codeContent %}
+import pug from "pug";
+
+export default function (eleventyConfig) {
eleventyConfig.setLibrary("pug", pug);
};
-```
+{% endset %}
+{% include "snippets/configDefinition.njk" %}
## Supported Features
diff --git a/src/docs/languages/typescript.md b/src/docs/languages/typescript.md
index 5a88f4df51..381b37de48 100644
--- a/src/docs/languages/typescript.md
+++ b/src/docs/languages/typescript.md
@@ -24,7 +24,7 @@ layout: layouts/langs.njk
{% addedin "3.0.0-alpha.11" %}Here we use [`tsx`](https://tsx.is/node/esm) to process TypeScript files.
-{% codetitle "eleventy.config.js (ESM)" %}
+eleventy.config.js
```js
import "tsx/esm";
diff --git a/src/docs/languages/webc.md b/src/docs/languages/webc.md
index f8b1aed97c..6c7b954e33 100644
--- a/src/docs/languages/webc.md
+++ b/src/docs/languages/webc.md
@@ -75,7 +75,7 @@ npm install @11ty/eleventy-plugin-webc
To add support for `.webc` files in Eleventy, add the plugin in your Eleventy configuration file:
-{% set configCodeContent %}
+{% set codeContent %}
import pluginWebc from "@11ty/eleventy-plugin-webc";
export default function(eleventyConfig) {
@@ -89,7 +89,7 @@ _When using CommonJS remember that you’re only allowed one `module.exports` in
Full options list (defaults shown)
-{% set configCodeContent %}
+{% set codeContent %}
import pluginWebc from "@11ty/eleventy-plugin-webc";
export default function (eleventyConfig) {
@@ -170,7 +170,7 @@ A few drawbacks to the transform method:
The transform is disabled by default, you will need to use the useTransform option to enable it.
-{% set configCodeContent %}
+{% set codeContent %}
import pluginWebc from "@11ty/eleventy-plugin-webc";
export default function (eleventyConfig) {
@@ -973,7 +973,7 @@ This includes [`url`, `slugify`, `log`, and others](/docs/filters/#eleventy-prov
#### Supply your own Helper
-{% set configCodeContent %}
+{% set codeContent %}
export default function (eleventyConfig) {
// via Universal Filter
eleventyConfig.addFilter("alwaysRed", () => "Red");
@@ -1135,7 +1135,7 @@ We accept:
- Array (of file paths or globs) [{% addedin "@11ty/eleventy-plugin-webc@0.9.2" %}](https://github.com/11ty/eleventy-plugin-webc/releases/tag/v0.9.2)
- [`npm:` prefix aliases](#webcimport) [{% addedin "@11ty/eleventy-plugin-webc@0.9.2" %}](https://github.com/11ty/eleventy-plugin-webc/releases/tag/v0.9.2)
-{% set configCodeContent %}
+{% set codeContent %}
import pluginWebc from "@11ty/eleventy-plugin-webc";
export default function (eleventyConfig) {
diff --git a/src/docs/server-browsersync.md b/src/docs/server-browsersync.md
index a792e7c0c3..b990f3bac5 100644
--- a/src/docs/server-browsersync.md
+++ b/src/docs/server-browsersync.md
@@ -16,7 +16,7 @@ Starting with Eleventy 2.0, the [Eleventy Dev Server](/docs/dev-server/) is now
Useful if you want to change or override the default Browsersync configuration. Find the Eleventy defaults in [`EleventyServe.js`](https://github.com/11ty/eleventy/blob/master/src/EleventyServe.js). Take special note that Eleventy does not use Browsersync’s watch options and trigger reloads manually after our own internal watch methods are complete. See full options list on the [Browsersync documentation](https://browsersync.io/docs/options).
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
eleventyConfig.setBrowserSyncConfig({
notify: true,
@@ -29,7 +29,7 @@ export default function(eleventyConfig) {
New in [`browser-sync@2.27.1`](https://github.com/BrowserSync/browser-sync/issues/1882#issuecomment-867767056) {% addedin "1.0.0" %}. Opt-out of the JavaScript snippet normally injected by Browsersync. This disables Browsersync live-reloading.
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
eleventyConfig.setBrowserSyncConfig({
snippet: false,
diff --git a/src/docs/server-vite.md b/src/docs/server-vite.md
index 3d269fba86..a8037a89b1 100644
--- a/src/docs/server-vite.md
+++ b/src/docs/server-vite.md
@@ -30,7 +30,7 @@ A plugin to use [Vite](https://vitejs.dev/) with Eleventy 2.0+.
npm install @11ty/eleventy-plugin-vite
```
-{% set configCodeContent %}
+{% set codeContent %}
import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";
export default function (eleventyConfig) {
@@ -45,7 +45,7 @@ export default function (eleventyConfig) {
View the [full list of Vite Configuration options](https://vitejs.dev/config/).
-{% set configCodeContent %}
+{% set codeContent %}
import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";
export default function (eleventyConfig) {
diff --git a/src/docs/transforms.md b/src/docs/transforms.md
index e06dc10f83..70d4cedecf 100644
--- a/src/docs/transforms.md
+++ b/src/docs/transforms.md
@@ -11,7 +11,7 @@ Transforms can modify a template’s output. For example, use a transform to for
{% callout "info", "md" %}The provided transform function **must** return the original or transformed content.{% endcallout %}
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
// Can be sync or async
eleventyConfig.addTransform("transform-name", async function (content) {
diff --git a/src/docs/watch-serve.md b/src/docs/watch-serve.md
index fb13431975..cfa07f34b4 100644
--- a/src/docs/watch-serve.md
+++ b/src/docs/watch-serve.md
@@ -20,7 +20,7 @@ Starting in Eleventy v2.0, we bundle a [dedicated Development Server](/docs/dev-
The `addWatchTarget` config method allows you to manually add a file or directory for Eleventy to watch. When the file or the files in this directory change Eleventy will trigger a build. This is useful if Eleventy is not directly aware of any external file dependencies.
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
eleventyConfig.addWatchTarget("./src/scss/");
};
@@ -43,7 +43,7 @@ Previously, [the configuration API ignores for template processing](/docs/ignore
New in {{ "2.0.0-canary.18" | coerceVersion }}, watch target ignores now have their own dedicated API:
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
// Do not rebuild when README.md changes (You can use a glob here too)
eleventyConfig.watchIgnores.add("README.md");
@@ -60,7 +60,7 @@ The `watchIgnores` Set starts with a default `**/node_modules/**` entry.
When in `--watch` mode, Eleventy will spider the dependencies of your [JavaScript Templates](/docs/languages/javascript/) (`.11ty.js`), [JavaScript Data Files](/docs/data-js/) (`.11tydata.js` or `_data/**/*.js`), or Configuration File (usually `eleventy.config.js`) to watch those files too. Files in `node_modules` directories are ignored. This feature is _enabled by default_.
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
// Enabled by default
eleventyConfig.setWatchJavaScriptDependencies(false);
@@ -72,7 +72,7 @@ export default function(eleventyConfig) {
A hardcoded amount of time Eleventy will wait before triggering a new build when files have changes during `--watch` or `--serve` modes. You probably won’t need this, but is useful in some edge cases with other task runners (Gulp, Grunt, etc).
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
// default is 0
eleventyConfig.setWatchThrottleWaitTime(100); // in milliseconds
@@ -84,7 +84,7 @@ export default function(eleventyConfig) {
Advanced [`chokidar` options](https://github.com/paulmillr/chokidar) can be defined using the `setChokidarConfig` configuration API method:
-{% set configCodeContent %}
+{% set codeContent %}
export default function(eleventyConfig) {
eleventyConfig.setChokidarConfig({
usePolling: true,