Eleventy for the VF 1.3 + 2.0

This allows using the 11ty static site generator with direct access to Visual Framework 2.0 and 1.3 code.

Quickstart


  yarn init @visual-framework/vf-eleventy your-new-site-name ebi-eleventy-boilerplate

This will install a new ebi-eleventy-boilerplate to a folder named your-new-site-name.

Then follow the onscreen prompts and links below to develop and configure.

Longer install?

The above too easy or have questions? Read this guide.

What you get

  • the Eleventy static site generator
  • access to the Visual Framework component system

Component installation

To add a component you can use npm/Yarn or install it manually.

In either case you'll need to re-run gulp dev to ensure the component is fully loaded.

  • installation: yarn add @visual-framework/vf-logo
  • updating: yarn upgrade-interactive --latest

Manual installation for customisation

  1. Download a pattern
  2. Copy it to ./src/components/vf-component-name

Add your own local component

You can add a custom VF-compatible component to ./src/components and use it in your site.

  • gulp vf-component

You'll find a vf-sample component there, we've used it below:

Code: {% render "@vf-sample", {text: "with some text"} %}

Returns: I'm a sample with some text