Eleventy boilerplate for Visual Framework 2.0

This allows you to use the 11ty static site generator with direct access to Visual Framework 2.0 components.

1. Creating a new project powered by vf-eleventy

There are two methods you can use:

1. Use the interactive npm template [RECOMMENDED]
   • If you don't have npm, install it
   • The create-vf-eleventy project allows you to interactively create a new site by typing
     npm init @visual-framework/vf-eleventy your-new-site-name
   • Follow the prompts
2. The GitHub template
   • Click the "Use this template" method; quick url: https://github.com/visual-framework/vf-eleventy/generate
   • Follow the prompts and then clone the new project to your local machine

2. Configuring your new site

• In package.json update vfConfig
• In elevnety.js update pathPrefix
• Update ./src/site/_data/siteConfig.js

Otherwise configure gulp and eleventy as you would for any other project.

3. Developing your new site

1. You'll need to install npm
2. If you don't have yarn, install it
   • https://yarnpkg.com/lang/en/docs/install/
3. Install all the things
   • yarn install
4. Generate the site in /build
   • gulp dev renders and serves
   • gulp build build static assets

4. Adding Visual Framework components

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.

By package

• installation: yarn add @visual-framework/vf-logo
• updating components: yarn upgrade-interactive --latest
  • alias: npm run update-components

Manual installation for customisation

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

Create 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 already placed in ./src/components

4. Footnotes

• Why yarn and not npm? For the particular structure of the Visual Framework components, Yarn is considerably faster at installing and does so more efficiently (about half the total file size). You'll also be able to use yarn upgrade-interactive --latest, which makes it easier to update VF components.