eleventy-plugin-fluid

Eleventy plugin which provides common filters, shortcodes and transforms for Fluid Project websites.

Usage no npm install needed!

<script type="module">
  import eleventyPluginFluid from 'https://cdn.skypack.dev/eleventy-plugin-fluid';
</script>

README

eleventy-plugin-fluid

License: BSD 3-Clause Latest Release NPM Package

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.