eleventy-plugin-fluid

    0.2.1 • Public • Published

    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)") | }}

    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.min.js" as="script" />
    <script src="/lib/infusion/infusion-uio.min.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.prefsEditor(".flc-prefsEditor-separatedPanel", {
        terms: {
          "templatePrefix": "/lib/infusion/src/framework/preferences/html",
          "messagePrefix": "/lib/infusion/src/framework/preferences/messages"
        },
        "tocTemplate": "/lib/infusion/src/components/tableOfContents/html/TableOfContents.html",
        "tocMessage": "/lib/infusion/src/framework/preferences/messages/tableOfContents-enactor.json"
      });
    </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.

    Install

    npm i eleventy-plugin-fluid

    DownloadsWeekly Downloads

    30

    Version

    0.2.1

    License

    BSD-3-Clause

    Unpacked Size

    25.9 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar