docs overhaul with examples cleanup

.babelrc

@@ -1,4 +1,5 @@
 {
   "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-export-extensions"],
   "comments": false
 }

build/build.js

@@ -18,11 +18,6 @@ console.log(
 var spinner = ora('building for production...')
 spinner.start()
 
-var assetsPath = path.join(config.docs.assetsRoot, config.docs.assetsSubDirectory)
-rm('-rf', assetsPath)
-mkdir('-p', assetsPath)
-cp('-R', 'static/*', assetsPath)
-
 webpack(webpackConfig, function (err, stats) {
   spinner.stop()
   if (err) throw err

build/webpack.base.conf.js

@@ -24,8 +24,10 @@ module.exports = {
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
       'vue$': 'vue/dist/vue',
+      'vue-validations/lib/validators': path.resolve(__dirname, '../src/validators'), // for consistent docs
       'src': path.resolve(__dirname, '../src'),
-      'assets': path.resolve(__dirname, '../src/assets'),
+      'assets': path.resolve(__dirname, '../docs/assets'),
+      'examples': path.resolve(__dirname, '../docs/partials/examples'),
       'components': path.resolve(__dirname, '../src/components')
     }
   },
@@ -44,7 +46,7 @@ module.exports = {
         test: /\.js$/,
         loader: 'eslint',
         include: projectRoot,
-        exclude: /node_modules/
+        exclude: [/node_modules/, /docs\/assets/]
       }
     ],
     loaders: [

config/index.js

@@ -24,7 +24,6 @@ module.exports = {
     env: require('./prod.env'),
     index: path.resolve(__dirname, '../gh-pages/index.html'),
     assetsRoot: path.resolve(__dirname, '../gh-pages'),
-    assetsSubDirectory: 'static',
     assetsPublicPath: '',
     productionSourceMap: true
   },

docs/_mixins.pug

@@ -0,0 +1,50 @@
+- function grabTemplate (path) {
+-   return require('!!raw!vue-loader/lib/selector?type=template!examples/' + path + '.vue')
+- }
+- function grabScript (path) {
+-   return require('!!raw!vue-loader/lib/selector?type=script!examples/' + path + '.vue').replace(/^[\/\n]*/m,'')
+- }
+- function hyphenate (path) {
+-  return path
+-   .replace(/^[A-Z]/, x => x.toLowerCase())
+-   .replace(/[A-Z ]/g, x => '-' + x.toLowerCase())
+-   .replace(/[^A-Za-z]/g, '-')
+-   .replace(/-{2,}/g, '-')
+- }
+
+mixin section(name)
+  .grid__row
+    .grid__column
+      section.docs(id=hyphenate(name))
+        h1.typo__h1=name
+        hr.typo__hr
+        if block
+          block
+
+mixin subsection(name)
+  .grid__row
+    .grid__column
+      h2.typo__h2(id='sub-' + hyphenate(name))=name
+      if block
+        block
+
+mixin nav-section(name)
+  li.list__heading
+    a.link.blank__link(href="#" + hyphenate(name))=name
+
+mixin nav-subsection(name)
+  li.list__element
+    a.link.list__link(href="#sub-" + hyphenate(name))=name
+
+mixin example(path)
+  .example
+    if block
+      block
+    .grid__column.grid__unit--md-5
+      #{hyphenate(path)}
+    .grid__column.grid__unit--md-7
+      label.typo__label Code sample
+      pre(v-pre).language-jade
+        code=grabTemplate(path)
+      pre(v-pre).language-javascript
+        code=grabScript(path)

docs/docs.scss

@@ -97,6 +97,11 @@ body {
   }
 }
 
+.blank__link {
+  color: inherit;
+  text-decoration: none;
+}
+
 .version {
   position: absolute;
   bottom: rem(-7px);

docs/index.pug

@@ -4,7 +4,7 @@ html(lang="en")
     meta(charset='utf-8')
     meta(name='viewport', content='width=device-width,initial-scale=1,maximum-scale=1')
     title vue-validation | A Vue.js library
-    link(rel='icon', href='static/vue-logo.png', type='image/x-icon')
+    link(rel='icon', href=require('assets/vue-logo.png'), type='image/x-icon')
     meta(name='description', content='Simple, lightweight model-based validation for Vue.js')
     meta(property='og:title', content='vue-validation | A Vue.js library.')
     meta(property='og:site_name', content='vue-validation | A Vue.js library.')
@@ -16,6 +16,7 @@ html(lang="en")
     meta(property='twitter:description', content='Simple, lightweight model-based validation for Vue.js')
   body
     #app
+      include ./_mixins
       include ./partials/_start
 
       .grid__row.docs
@@ -24,16 +25,9 @@ html(lang="en")
         .grid__columns.grid__unit--sm-12.grid__unit--md-9
           include ./partials/_getting-started
 
-          hr.typo__hr
-          h1.typo__h1 Examples
+          include ./partials/examples/_examples
 
-          hr.typo__hr
-          include ./partials/examples/_basic
-
-          include ./partials/api/_props
-          include ./partials/api/_events
-          include ./partials/api/_slots
+          include ./partials/api/_api
 
       include ./partials/_footer
-
-    script(src='static/prism.js')
+    script(src=require('url?limit=1!assets/prism.js'))

docs/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Validation from '../src/index'
-import { required, minLength, sameAs, between } from '../src/validators'
+
+import * as examples from './partials/examples'
 
 Vue.use(Validation)
 
@@ -24,72 +25,14 @@ const SL = ', 100%, 85%'
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
+  components: {
+    ...examples
+  },
   data () {
     return {
       isNavSticky: false,
       firstColor: Math.floor(Math.random() * 255),
-      secondColor: Math.floor(Math.random() * 255),
-      name: '',
-      age: 0,
-      email: '',
-      password: '',
-      repeatPassword: '',
-      form: {
-        nestedA: '',
-        nestedB: ''
-      },
-      flatA: '',
-      flatB: '',
-      forGroup: {
-        nested: ''
-      },
-
-      people: [{
-        name: 'john'
-      }, {
-        name: ''
-      }]
-    }
-  },
-  validations: {
-    name: {
-      required,
-      minLength: minLength(4)
-    },
-    age: {
-      between: between(20, 30)
-    },
-    password: {
-      required,
-      minLength: minLength(6)
-    },
-    repeatPassword: {
-      sameAsPassword: sameAs('password')
-    },
-
-    form: {
-      nestedA: {
-        required
-      },
-      nestedB: {
-        required
-      }
-    },
-
-    flatA: { required },
-    flatB: { required },
-    forGroup: {
-      nested: { required }
-    },
-    validationGroup: ['flatA', 'flatB', 'forGroup.nested'],
-
-    people: {
-      minLength: minLength(1),
-      $each: {
-        name: {
-          required
-        }
-      }
+      secondColor: Math.floor(Math.random() * 255)
     }
   },
   computed: {

docs/partials/_footer.pug

@@ -9,4 +9,4 @@ section.utils--center
     strong
       a.typo__link.monterail-link(href='http://monterail.com', target='_BLANK')  Monterail
   a(href='http://monterail.com', target='_BLANK')
-    img.monterail-logo(src='static/monterail-logo.png')
+    img.monterail-logo(src=require('assets/monterail-logo.png'))

docs/partials/_getting-started.pug

@@ -1,28 +1,14 @@
-.grid__row
-  .grid__column
-    section.docs#getting-started
-      h1.typo__h1 Getting started
-      hr.typo__hr
-
-      .grid__row
-        .grid__column
-          h2.typo__h2 Installation
-          pre.language-bash
-            code.
-              npm install vue-validation --save
-
-        .grid__column
-          h2.typo__h2 Basic usage
-          pre.language-javascript
-            code.
-              import Vue from 'vue'
-              import Validation from 'vue-validation'
-              Vue.use(Validation)
-
-      .grid__row
-        .grid__column
-          h2.typo__h2 Package content
-
-        .grid__column.grid__unit--md-5
-          p.typo__p
-            | Simple, lightweight model-based validation for Vue.js
++section('Getting started')
+  +subsection('Installation')
+    pre.language-bash
+      code.
+        npm install vue-validation --save
+  +subsection('Basic usage')
+    pre.language-javascript
+      code.
+        import Vue from 'vue'
+        import Validation from 'vue-validation'
+        Vue.use(Validation)
+  +subsection('Package content')
+    p.typo__p
+      | Simple, lightweight model-based validation for Vue.js

docs/partials/_nav.pug

@@ -1,17 +1,19 @@
-mixin nav-element(componentName, href)
-  li.list__element
-    a.link.list__link(href="#" + href)= componentName
-
 ul.list(
   :class="{ 'list--sticky': isNavSticky }"
 )
-  li.list__heading Setup
-  +nav-element('Getting Started', 'getting-started')
+  +nav-section('Getting Started')
+  +nav-subsection('Installation')
+  +nav-subsection('Basic usage')
+  +nav-subsection('Package content')
 
-  li.list__heading Examples
-  +nav-element('Basic', 'basic')
+  +nav-section('Examples')
+  +nav-subsection('Basic form')
+  +nav-subsection('Contextified validators')
+  +nav-subsection('Data nesting')
+  +nav-subsection('Validation Groups')
+  +nav-subsection('Collections validation')
 
-  li.list__heading API
-  +nav-element('Props', 'props')
-  +nav-element('Events', 'events')
-  +nav-element('Slots', 'slots')
+  +nav-section('API')
+  +nav-subsection('Props')
+  +nav-subsection('Events')
+  +nav-subsection('Slots')

docs/partials/_start.pug

@@ -1,7 +1,7 @@
 section.start(v-bind:style="gradient")
   .center-vertically
     h1.typo__h1
-      img.logo(src="./static/vue-logo.png")
+      img.logo(src=require('assets/vue-logo.png'))
       | vue-validation
       small.version (0.1.0)
     h3.typo__h3

docs/partials/api/_api.pug

@@ -0,0 +1,4 @@
++section('API')
+  include ./_props
+  include ./_events
+  include ./_slots

docs/partials/api/_events.pug

@@ -1,5 +1,4 @@
-h2.typo__h2#events Events
-.grid__row
++subsection('Events')
   .table__container
     table.table.table--full-size
       thead

docs/partials/api/_props.pug

@@ -1,5 +1,4 @@
-h2.typo__h2#props Props
-.grid__row
++subsection('Props')
   .table__container
     table.table.table--full-size.table--fixed
       thead

docs/partials/api/_slots.pug

@@ -1,5 +1,4 @@
-h2.typo__h2#slots Slots
-.grid__row
++subsection('Slots')
   .table__container
     table.table.table--full-size.table--fixed
       thead

docs/partials/examples/ExampleBasic.vue

@@ -0,0 +1,39 @@
+<template lang="pug">
+  div
+    .form-group(v-bind:class="{ 'form-group--error': $v.name.$error }")
+      label.form__label Name
+      input.form__input(v-model="name" @input="$v.name.$touch()")
+    span.form-group__message(v-if="!$v.name.required") Field is required
+    span.form-group__message(v-if="!$v.name.minLength") Name must be longer than 6 letters.
+    pre
+      | name: {{ $v.name }}
+
+    .form-group(v-bind:class="{ 'form-group--error': $v.age.$error }")
+      label.form__label Age
+      input.form__input(v-model="age" @blur="$v.age.$touch()")
+    span.form-group__message(v-if="!$v.age.between") Must be between 20 and 30
+    pre
+      | age: {{ $v.age }}
+</template>
+
+<script>
+import { required, minLength, between } from 'vue-validations/lib/validators'
+
+export default {
+  data () {
+    return {
+      name: '',
+      age: 0
+    }
+  },
+  validations: {
+    name: {
+      required,
+      minLength: minLength(4)
+    },
+    age: {
+      between: between(20, 30)
+    }
+  }
+}
+</script>