Neato Polyester Material


    2.0.0-alpha.2 • Public • Published


    This project supports sites using Visual Framework components, like vf-eleventy It has reusable componentised code, Gulp tasks, modules and config.

    What's here and what it does

    Gulp tasks

    in ./gulp-tasks/

    • gulp-build-search-index.js: scans compiled html to make a JS object search index
      • requires yarn add strip-js striptags node-html-parser
      • Elements wrapped with class="vf-search-client-side--no-index" will not be logged in the index
    • _gulp_rollup.js: require this bundle and get the files below
      • gulp-eleventy.js: specific to running Eleventy
      • gulp-fractal.js: specific to running Fractal
      • gulp-util.js: utility tasks


    in /11ty

    • eleventy-cmd.js: a fork of the default Eleventy cmd.js
    • index.js: reusable extensions/config for Eleventy and to load the below tags and filters
      • vfEleventyCommonPlugin.js: Reusable config for sane defaults

    Nunjucks tags

    in ./tags/

    • codeblock.js: outputs highlight code markup
    • markdwon_tag.js: process a text area as markdown
    • render.js: port-fork-enhancement of the Fractal render extension for Nunjucks for 11ty and the VF
      • {% render '@'+variant.handle, variant.context, true, { escape: false, beautify: true, codetype: 'html', highlight: true } %}
      • second property is for merging the parent context to set defaults
      • third option set escaping of code, beautify (formatting), code type (default: html) and highlighting (hljs)
    • spaceless.js: trim unneeded whitespace

    Nunjucks filters

    in ./filters/

    • markdown.js: process a string as markdown
    • section.js: split the content into excerpt and remainder
    • path.js: catch references to the "path" filter which is not part of 11ty and results in obtuse error codes

    Assorted utilities

    In ./utils/

    • minify-html.js: pass in html content and minify

    Usage with Eleventy

    Note: Projects utilising vf-eleventy make use of this package by default.

    1. a project based off vf-eleventy

    2. yarn add @visual-framework/vf-extensions

    3. in eleventy.js you should have:

      const vfEleventyExtension = require("@visual-framework/vf-extensions\/11ty");
    1. in gulpfile.js you should have:
    require('./node_modules/\@visual-framework/vf-extensions/gulp-tasks/_gulp_rollup.js')(gulp, path, componentPath, componentDirectories, buildDestionation);


    npm i @visual-framework/vf-extensions

    DownloadsWeekly Downloads






    Unpacked Size

    33.2 kB

    Total Files


    Last publish


    • pacope92
    • ebiwebdev
    • nitinja
    • sandykadam
    • khawkins98