Reusable componentised code, modules and config for vf-eleventy based projects.
npm install @visual-framework/vf-extensionsThis project supports sites using Visual Framework components, like vf-eleventy
It has reusable componentised code, Gulp tasks, modules and config.
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
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
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
In ./utils/
- minify-html.js: pass in html content and minify
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:
``js`
const vfEleventyExtension = require("@visual-framework/vf-extensions\/11ty");
config.addPlugin(vfEleventyExtension);
4. in gulpfile.js you should have:
`js``
require('./node_modules/\@visual-framework/vf-extensions/gulp-tasks/_gulp_rollup.js')(gulp, path, componentPath, componentDirectories, buildDestionation);