README
eleventy-plugin-fluid
Eleventy plugin which provides common filters, shortcodes and transforms for Fluid Project websites.
Installation
Add eleventy-plugin-fluid
to your Eleventy-based static site by running:
npx install-peerdeps eleventy-plugin-fluid
(You can also run npm install --save eleventy-plugin-fluid
, but you'll then need to install the specified infusion
peer dependency in your project as well; the install-peerdeps
command handles both at the same time.)
Then, in your Eleventy configuration file (usually .eleventy.js
), load the plugin as follows:
const fluidPlugin = require("eleventy-plugin-fluid");
module.exports = function (config) {
config.addPlugin(fluidPlugin);
};
Usage
Filters
All examples use the Nunjucks template language. Eleventy supports a number of other template languages; see Eleventy's documentation on filters for usage with different template languages.
formatDate
Formats a date string.
{{ "Sun Jun 21 2020 18:00:00 GMT-0300 (Atlantic Daylight Time)" | formatDate }}
Output: June 21st, 2020
isoDate
Formats a date string to ISO 8601 format.
{{ "Sun Jun 21 2020 18:00:00 GMT-0300 (Atlantic Daylight Time)") | isoDate }}
Output: 2020-06-21T21:00:00.000Z
limit
Trims an array to the specified length.
{{ ["a", "b", "c"] | limit(2) | dump }}
Output: ["a", "b"]
markdown
Processes an input string using Markdown.
{{ "A paragraph with some _emphasis_." | markdown | safe }}
Output: <p>A paragraph with some <em>emphasis</em>.</p>\n
slug
Processes an input string by lowercasing it, replacing whitespace with hyphens, and stripping special characters to create a URL-safe version.
{{ "Here’s my title!" | slug }};
Output: heres-my-title
split
Splits an input string into an array based on a provided delimiter.
{{ "a,b,c" | split(",") | dump }}
Output: ["a", "b", "c"]
Shortcodes
All examples use the Nunjucks template language. Eleventy supports a number of other template languages; see Eleventy's documentation on shortcodes for usage with different template languages.
figure
Outputs a <figure>
element with a <figcaption>
. The first and second parameters in the opening tag of the shortcode
are the image URL and alternative text respectively. Caption content, which can use Markdown, goes in between the
opening and closing shortcode tags.
{% figure "/assets/image.png", "A description of this image." %}
An illustration of something, found [here](https://example.com).
{% endfigure %}
Output:
<figure>
<img src="/assets/image.png" alt="A description of this image." />
<figcaption>
<p>An illustration of something, found <a href="https://example.com">here</a>.</p>
</figcaption>
</figure>
uioStyles
Outputs links to the required CSS assets for an instance of Infusion User Interface Options.
{% uioStyles %}
Result:
<link href="/lib/infusion/src/framework/preferences/css/Enactors.css" rel="stylesheet">
<link href="/lib/infusion/src/framework/preferences/css/PrefsEditor.css" rel="stylesheet">
<link href="/lib/infusion/src/framework/preferences/css/SeparatedPanelPrefsEditor.css" rel="stylesheet">
uioScripts
Outputs links to the required JavaScript assets for an instance of Infusion User Interface Options.
{% uioScripts %}
Result:
<link rel="preload" href="/lib/infusion/infusion-uio.js" as="script" />
<script src="/lib/infusion/infusion-uio.js"></script>
uioTemplate
Outputs the required HTML template markup for an instance of Infusion User Interface Options. This should used
directly after the opening <body>
tag.
{% uioTemplate %}
Result:
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
<div class="fl-panelBar fl-panelBar-smallScreen" id ="Editorspace">
<span class="fl-prefsEditor-buttons">
<button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide"> Show/Hide</button>
<button class="flc-prefsEditor-reset fl-prefsEditor-reset"><span class="fl-icon-undo"></span> Reset</button>
</span>
</div>
<div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
<div class="fl-panelBar fl-panelBar-wideScreen">
<span class="fl-prefsEditor-buttons">
<button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide"> Show/Hide</button>
<button class="flc-prefsEditor-reset fl-prefsEditor-reset"><span class="fl-icon-undo"></span> Reset</button>
</span>
</div>
</div>
If you want to use a custom integration of User Interface Options, you can insert the required markup directly into your base template.
uioInit
Outputs the required JavaScript to initialize an instance of Infusion User Interface Options. This should used
directly before the closing </body>
tag.
{% uioInit %}
Result:
<script>
fluid.uiOptions.multilingual(".flc-prefsEditor-separatedPanel", {
"auxiliarySchema": {
"terms": {
"templatePrefix": "/lib/infusion/src/framework/preferences/html",
"messagePrefix": "/lib/infusion/src/framework/preferences/messages"
},
"fluid.prefs.tableOfContents": {
"enactor": {
"tocTemplate": "/lib/infusion/src/components/tableOfContents/html/TableOfContents.html",
"tocMessage": "/lib/infusion/src/framework/preferences/messages/tableOfContents-enactor.json",
"ignoreForToC": {
"ignoreClass": ".flc-toc-ignore"
}
}
}
},
"prefsEditorLoader": {
"lazyLoad": true
}
});
</script>
Optionally, to support localization, you can pass in locale and direction arguments.
{% uioInit "fa", "rtl" %}
Result:
<script>
fluid.uiOptions.multilingual(".flc-prefsEditor-separatedPanel", {
"auxiliarySchema": {
"terms": {
"templatePrefix": "/lib/infusion/src/framework/preferences/html",
"messagePrefix": "/lib/infusion/src/framework/preferences/messages"
},
"fluid.prefs.tableOfContents": {
"enactor": {
"tocTemplate": "/lib/infusion/src/components/tableOfContents/html/TableOfContents.html",
"tocMessage": "/lib/infusion/src/framework/preferences/messages/tableOfContents-enactor.json",
"ignoreForToC": {
"ignoreClass": ".flc-toc-ignore"
}
}
}
},
"prefsEditorLoader": {
"lazyLoad": true
},
"locale": "fa",
"direction": "rtl"
});
</script>
If you want to use a custom integration of User Interface Options, you can insert the required script tag directly into your base template.
Transforms
Coming soon.
Passthrough Copy
By default, eleventy-plugin-fluid
copies the required assets for an instance of
Infusion User Interface Options into the lib/infusion
directory of the build directory.
Development
Releasing
This package uses Conventional Commits, enforced with commitlint. This facilitates releasing new versions of the package. To cut a release, run:
npm run release
This will tag an appropriate semantic version based on the nature of the recent commits to the project and update the changelog.
You will then need to publish the updated version to the npm registry. This requires an npm account with appropriate maintainer permissions. To publish the package, run:
npm publish
For more information on publishing to npm, see the npm publish documentation.