Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashur/eleventy-plugin-define-page-data
🎈 Make any data available to Eleventy shortcodes using the page data object
https://github.com/ashur/eleventy-plugin-define-page-data
eleventy eleventy-plugin
Last synced: about 1 month ago
JSON representation
🎈 Make any data available to Eleventy shortcodes using the page data object
- Host: GitHub
- URL: https://github.com/ashur/eleventy-plugin-define-page-data
- Owner: ashur
- Created: 2021-12-14T21:43:59.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-22T18:25:44.000Z (almost 3 years ago)
- Last Synced: 2024-10-01T14:48:20.176Z (about 1 month ago)
- Topics: eleventy, eleventy-plugin
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# eleventy-plugin-define-page-data
An Eleventy data plugin to make any data available to shortcodes using the `page` data object.
## Setup
To install this plugin, run the following command at the root of your Eleventy project:
```
npm install --save @aaashur/eleventy-plugin-define-page-data
```
Next, import the plugin in your `.eleventy.js` config file:
```
const definePageData = require("@aaashur/eleventy-plugin-define-page-data");
```
Finally, register the plugin somewhere inside your exported configuration function:
```javascript
module.exports = eleventyConfig =>
{
eleventyConfig.addPlugin(definePageData);
// ...
};
```
## Usage
Create a new page data variable using the `definePageData` shortcode:
```nunjucks
{% definePageData key, value %}
```
For example:
```nunjucks
{% definePageData "prefersEmoji", false %}
```
Data added to the `page` object using `definePageData` is namespaced to prevent stomping over existing data properties that are created and used by Eleventy. By default, the `data` namespace is used:
```javascript
{
date: new Date(),
inputPath: "./current/page/myFile.md",
fileSlug: "myFile",
filePathStem: "/current/page/myFile",
url: "/current/page/myFile/",
outputPath: "./_site/current/page/myFile/index.html",
data: {
prefersEmoji: false
}
}
```
To access this data in your shortcode source, use `this.page.data`:
```javascript
/**
* Add random emoji to the end of a string
* @param {string} text
* @returns {string}
*/
eleventyConfig.addShortcode( "emojify", function(text)
{
if( !this.page.data.prefersEmoji )
{
return text;
}
else
{
// ...
}
});
```
> 🎈 **Note** — You must define your shortcode with a traditional `function()` rather than an arrow function in order for Eleventy to [bind page data](https://www.11ty.dev/docs/languages/nunjucks/#access-to-page-data-values) to your shortcode.
The `definePageData` shortcode also supports defining nested properties using dot notation:
```nunjucks
{% definePageData "user.preferences.prefersEmoji", false %}
```
```javascript
{
// ...
data: {
user: {
preferences: {
prefersEmoji: false
}
}
}
}
```
### Namespace
Pass an optional third argument to `definePageData` to specify a custom namespace instead of the default `data`:
```nunjucks
{% definePageData key, value, namespace %}
```
For example:
```nunjucks
{% definePageData "prefersEmoji", false, "customData" %}
```
```javascript
{
// ...
customData: {
prefersEmoji: false
}
}
```