Docs: getting started the VF's npm components (#1247)

tools/vf-component-library/src/site/_data/siteConfig.js

-const { DateTime } = require('luxon');
+const { DateTime } = require("luxon");
 
 // Some various reusable configuration
 module.exports = {
   siteInformation: {
     title: "The Visual Framework 2.0",
-    short_description: 'A front-end toolkit to quickly build better life science websites.',
+    short_description: "A front-end toolkit to quickly build better life science websites.",
     url: "https://stable.visual-framework.dev/",
     author: "Visual Framework system",
     email: "ken.hawkins@embl.de",
   },
   buildTime: DateTime.fromISO(new Date().toISOString()),
   // vfVersion: global.vfVersion,
-  vfVersion: 'v2.3.3-rc.3',
+  vfVersion: "v2.3.3-rc.3",
   sections: {
     about: {
-      url: '/about',
-      title: 'About'
+      url: "/about",
+      title: "About"
+    },
+    designtokens: {
+      url: "/design-tokens",
+      title: "Design tokens"
     },
     guidelines: {
-      url: '/guidelines',
-      title: 'Guidelines'
+      url: "/guidelines",
+      title: "Guidelines"
+    },
+    developing: {
+      url: "/developing",
+      title: "Developing"
     },
     patterns: {
-      url: '/patterns',
-      title: 'Patterns'
+      url: "/patterns",
+      title: "Patterns"
     },
     styles: {
-      url: '/styles',
-      title: 'Styles'
+      url: "/styles",
+      title: "Styles"
     },
     components: {
-      url: '/components',
-      title: 'Components'
+      url: "/components",
+      title: "Components"
     }
   }
 };

tools/vf-component-library/src/site/_includes/layouts/base.njk

@@ -51,7 +51,7 @@
         {% render '@vf-logo', {logo_href:  '/' | url, sreen_reader_text: 'Visual Framework 2.0', image: siteConfig.siteInformation.url + 'assets/vf-logo/assets/logo.svg', "hidden_text": true } %}
         <nav class="vf-navigation vf-navigation--global">
           <ul class="vf-navigation__list | vf-list--inline">
-            <li class="vf-navigation__item">
+            {# <li class="vf-navigation__item">
               <a href="{{ '/about' | url }}" class="vf-navigation__link">About</a>
             </li>
             <li class="vf-navigation__item">
@@ -59,12 +59,15 @@
             </li>
             <li class="vf-navigation__item">
               <a href="{{ '/patterns' | url }}" class="vf-navigation__link">Examples</a>
-            </li>
+            </li> #}
             <li class="vf-navigation__item">
               <a href="{{ '/search' | url }}" class="vf-navigation__link">Search</a>
             </li>
             <li class="vf-navigation__item">
-              <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ" class="vf-navigation__link">Help, chat</a>
+              <a href="https://github.com/visual-framework/vf-core" class="vf-navigation__link">GitHub</a>
+            </li>
+            <li class="vf-navigation__item">
+              <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ" class="vf-navigation__link">Slack</a>
             </li>
           </ul>
         </nav>

tools/vf-component-library/src/site/_includes/layouts/developing.njk

----
-layout: layouts/base.njk
-pageClass: developing
-templateEngineOverride: njk, md
----
-
-<section class="vf-intro | embl-grid embl-grid--has-centered-content">
-  <div></div>
-  <div>
-    <h1 class="vf-intro__heading">{{title}}</h1>
-    {% if subtitle %}
-<div class="vf-lede">{{subtitle | markdown | safe | replace("<p>", "<span class='vf-content'>") | replace("</p>", "</span>") }}</div>
-    {% endif %}
-    {% if intro %}
-<div class="vf-intro__text">{{intro | markdown | safe | replace("<p>", "<span class='vf-content'>") | replace("</p>", "</span>") }}</div>
-    {% endif %}
-  </div>
-</section>
-
-<main class="vf-content | embl-grid embl-grid--has-centered-content">
-<div></div>
-<div>
-
-  {{ content | safe }}
-  <cite class="vf-cite">
-    Last updated on <time datetime="{{ date }}">{{ date | dateDisplay }}</time>
-  </cite>
-</div>
-</main>
-
-<!-- layout: layouts/developing.njk -->

tools/vf-component-library/src/site/_includes/layouts/section.njk

@@ -25,7 +25,7 @@ templateEngineOverride: njk, md
 {%- endif %}
 
 {# See if a section has subposts. #}
-{# Unfortunately there's not a more elegent way to see how many posts there are with a data attribute without adding 11ty config overhead #}
+{# Unfortunately there's not a more elegant way to see how many posts there are with a data attribute without adding 11ty config overhead #}
 {% set sectionHasSubposts = false %}
 {%- for post in collections.posts %}
 {% if section == post.data.section %}

tools/vf-component-library/src/site/_includes/layouts/tokens.njk

----
-layout: layouts/base.njk
-pageClass: posts
-templateEngineOverride: njk, md
----
-
-{# Use this template for main tokens of a site. #}
-
-  <h1 class="vf-intro__heading" style="margin-bottom: 0 !important;">{{ title }}</h1>
-  <p class="vf-lede">{{ subtitle }}</p>
-  <nav class="vf-navigation vf-navigation--main">
-  <ul class="vf-navigation__list | vf-list--inline">
-    <li class="vf-navigation__item">
-      <a href="{{ '/design-tokens/' | url}}"class="vf-navigation__link">Overview</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="{{ '/design-tokens/theming' | url}}" class="vf-navigation__link">Theming</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="{{ '/design-tokens/colours' | url}}" class="vf-navigation__link">Colours</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="{{ '/design-tokens/spacing' | url}}" class="vf-navigation__link">Spacing</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="{{ '/design-tokens/typography' | url}}" class="vf-navigation__link">Typography</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="{{ '/design-tokens/breakpoints' | url}}" class="vf-navigation__link">Breakpoints</a>
-    </li>
-  </ul>
-</nav>
-  {%- if content | length > 1 -%}
-  {{ content | safe }}
-  {%- endif %}
-

tools/vf-component-library/src/site/building/index.njk

@@ -25,7 +25,7 @@ It's also a good introduction into integrating VF components into an application
 
 ## A pre-made boilerplate using VF components
 
-Uses the performant [11ty](https://www.11ty.io/) as a static site generator to build sites with VF components. This approach pre-integrates the VF Core, giving you easy access to component assets and a rollup build process to generate compiled CSS and JS.
+Uses the preferment [11ty](https://www.11ty.io/) as a static site generator to build sites with VF components. This approach pre-integrates the VF Core, giving you easy access to component assets and a rollup build process to generate compiled CSS and JS.
 
 [`vf-eleventy` boilerplate](https://github.com/visual-framework/vf-eleventy)
 
@@ -59,6 +59,6 @@ A demonstration React-based project using VF components.
 
 The most basic use of the Visual Framework components allows usage directly into your existing build environment. This approach gets you a components Sass, JS, template and any other assets and lets you build what you need.
 
-This approach is recommended for more advanced developers who are highly familar with Node and Sass.
+This approach is recommended for more advanced developers who are highly familiar with Node and Sass.
 
 -  `yarn add @visual-framework/vf-sass-config @visual-framework/vf-inlay`

tools/vf-component-library/src/site/components/index.njk

 ---
 is_index: true
-title: Component overview
+title: Component list
 subtitle: These components are available.
 date: 2019-04-09 12:24:50
 section: components

tools/vf-component-library/src/site/design-tokens/breakpoints.njk

 ---
-is_index: true
-title: Design Tokens
-subtitle: Breakpoints
+title: Breakpoints
 date: 2018-10-19 12:24:50
-section: components
+section: designtokens
 templateEngineOverride: njk
-layout: layouts/tokens.njk
-hideSubPosts: true
+tags:
+  - posts
+  - sections
+  - designtokens
+layout: layouts/base.njk
 ---
 
+<h1 class="vf-intro__heading">{{ title }}</h1>
+
 <main class="vf-grid vf-grid__col-3">
 {% for item in tokens.breakpoints.properties %}
 

tools/vf-component-library/src/site/design-tokens/colours.njk

 ---
-is_index: true
-title: Design Tokens
-subtitle: Colours
+title: Colours
 date: 2018-10-19 12:24:50
-section: components
+section: designtokens
 templateEngineOverride: njk
-layout: layouts/tokens.njk
-hideSubPosts: true
+tags:
+  - posts
+  - sections
+  - designtokens
+layout: layouts/base.njk
 ---
 
+<h1 class="vf-intro__heading">{{ title }}</h1>
+
 <main class="vf-grid vf-grid__col-3">
 
 {% for item in tokens.colours.properties %}

tools/vf-component-library/src/site/design-tokens/index.njk

 ---
 is_index: true
 title: Design Tokens
+subtitle: The colour, typography, spacing, and other stylistic decisions as design tokens for consumption.
 date: 2018-10-16 12:24:50
-section: components
-tags: sections
+section: designtokens
+tags:
+  - sections
+  - designtokens
 templateEngineOverride: njk
-layout: layouts/tokens.njk
-hideSubPosts: true
+layout: layouts/section.njk
+hideSubPosts: false
 ---
 
-<article class="vf-content">
-{% markdown %}
-
-These are the colour, typography, spacing, and other stylistic decisions as design tokens for consumption
-
 The Design Tokens used within `vf-core` are generated from several `.yml` files. These are then compiled into various Sass files as needed.
 
 In the future we hope to offer Sketch and Photoshop colour palettes.
@@ -27,6 +25,3 @@ If you required a different format (LESS, iOS, Android). Please get in touch.
 ## Building
 
 To update these run `gulp vf-tokens` from `./components/vf-design-tokens`.
-
-{% endmarkdown %}
-</article>

tools/vf-component-library/src/site/design-tokens/spacing.njk

 ---
-is_index: true
-title: Design Tokens
-subtitle: Spacing
+title: Spacing
 date: 2018-10-19 12:24:50
-section: components
+section: designtokens
 templateEngineOverride: njk
-layout: layouts/tokens.njk
-hideSubPosts: true
+tags:
+  - posts
+  - sections
+  - designtokens
+layout: layouts/base.njk
 ---
 
+<h1 class="vf-intro__heading">{{ title }}</h1>
+
 <main class="vf-grid vf-grid__col-3">
 {% for item in tokens.spacing.properties %}
 <article class="vf-card">

tools/vf-component-library/src/site/design-tokens/theming.njk

 ---
-is_index: true
-title: Design Tokens
-subtitle: Theming
+title: Theming
 date: 2018-10-19 12:24:50
-section: components
+section: designtokens
 templateEngineOverride: njk
-layout: layouts/tokens.njk
-hideSubPosts: true
+tags:
+  - posts
+  - sections
+  - designtokens
+layout: layouts/base.njk
 ---
 
+<h1 class="vf-intro__heading">{{ title }}</h1>
+
 
 <main class="vf-grid vf-grid__col-3">
 

tools/vf-component-library/src/site/design-tokens/typography.njk

 ---
-is_index: true
-title: Design Tokens
-subtitle: Typography
+title: Typography
 date: 2018-10-19 12:24:50
-section: components
+section: designtokens
 templateEngineOverride: njk
-layout: layouts/tokens.njk
-hideSubPosts: true
+tags:
+  - posts
+  - sections
+  - designtokens
+layout: layouts/base.njk
 ---
 
+<h1 class="vf-intro__heading">{{ title }}</h1>
 
 <main class="vf-grid vf-grid__col-3">
 {% for item in tokens.typographySans.properties %}

tools/vf-component-library/src/site/developing/components/components.11tydata.json

-{
-  "tags": ["documentation", "contributing components", "posts"]}

tools/vf-component-library/src/site/developing/components/creating-new-components.njk

@@ -3,8 +3,13 @@ title: Creating a new component
 subtitle: This codebase includes a folder and file creation tool.
 intro: It allows you to quickly create all the required files to make a component -- it gives you the option to create am element, block, or container.
 date: 2019-04-09 12:24:50
-layout: layouts/developing.njk
+layout: layouts/section.njk
+section: developing
 order: 1
+tags:
+  - contributing components
+  - developing
+  - documentation
 ---
 
 1. Install Yeoman

tools/vf-component-library/src/site/developing/components/deprecating-components.njk

 ---
 title: Deprecating components
-subtitle: Inevitably code will be replaced and improved, leaving components stale and or outdated. 
+subtitle: Inevitably code will be replaced and improved, leaving components stale and or outdated.
 intro: So we should tell developers to not use them.
 date: 2019-04-09 12:24:50
-layout: layouts/developing.njk
+layout: layouts/section.njk
+section: developing
 order: 3
+tags:
+  - contributing components
+  - developing
+  - documentation
 ---
 
 Here's what we need to make sure we do:

tools/vf-component-library/src/site/developing/components/updating-a-component.njk

@@ -3,8 +3,13 @@ title: Updating, versioning a component
 subtitle: "Like the Visual Framework 2.0, components follow [semantic versioning](https://semver.org/) by increasing their full version number every time they have breaking changes."
 intro: "However the version number of components its not tied to the version number of the Visual Framework's `vf-core`; that is:"
 date: 2019-04-09 12:24:50
-layout: layouts/developing.njk
+layout: layouts/section.njk
+section: developing
 order: 2
+tags:
+  - contributing components
+  - developing
+  - documentation
 ---
 
 - `vf-core​@2.1.2` might use `vf-button​@1.0.1` and `vf-component-x​@8.2.1`

tools/vf-component-library/src/site/developing/components/what-is-a-component.njk

 ---
 title: What's a component
-subtitle: Components are a modular set of extendable Sass/CSS styling, JavaScript and templating (Nunjucks). 
+subtitle: Components are a modular set of extendable Sass/CSS styling, JavaScript and templating (Nunjucks).
 intro: Think of components as lego blocks you can use to build the look, behaviour and content of your sites.
 date: 2019-04-09 12:24:49
-layout: layouts/developing.njk
+layout: layouts/section.njk
 templateEngineOverride: njk, md
+section: developing
 order: 1
+tags:
+  - contributing components
+  - developing
+  - documentation
 ---
 
 ## What's in a component?

tools/vf-component-library/src/site/developing/getting-started/code-of-conduct.njk

 ---
 title: Code of conduct
 date: 2019-04-09 12:24:50
-layout: layouts/developing.njk
+layout: layouts/section.njk
+section: developing
 order: 4
+tags:
+  - getting started
+  - developing
+  - documentation
 ---
 
 We don't yet have a full policy but, in general: be nice, respectful

tools/vf-component-library/src/site/developing/getting-started/getting-started.11tydata.json

-{
-  "tags": ["documentation", "getting started", "posts"]
-}