Updated the getting started guide and added mo-js as a dependency

Author: Sandstedt

docs/.vuepress/components/ExampleCircle.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="interactive-code">
+    <slot></slot>
+    <div id="circle-anim" class="example-anim"></div>
+  </div>
+</template>
+
+<script>
+  import mojs from 'mo-js';
+
+  export default {
+
+    mounted: function () {
+      var circle = new mojs.Shape({
+        parent:       '#circle-anim',
+        shape:        'circle',
+        fill:         {'#F64040': '#FC46AD'},
+        radius:       {20: 80},
+        duration:     2000,
+        isYoyo:       true,
+        easing:       'elastic.inout',
+        repeat:       999,
+      })
+      .play();
+    }
+
+  }
+</script>
+
+<style>
+.test {
+  background: #f1e2d7;
+  width: 100%;
+  height: 400px;
+  position: relative;
+}
+.test svg {
+  overflow: visible
+}
+
+</style>

docs/.vuepress/components/ExampleSpinner.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="interactive-code">
+    <slot></slot>
+    <div :id="this.id" class="example-anim" :style="style"></div>
+  </div>
+</template>
+
+<script>
+  import mojs from 'mo-js';
+
+  export default {
+    props: {
+      id: { type: String, default: '#code-example' },
+      height: { type: String, default: '300px' },
+    },
+
+    computed: {
+      style () {
+        return 'height: ' + this.height;
+      }
+    },
+
+    mounted: function () {
+      var loader = new mojs.Shape({
+        parent:       '#' + this.id,
+        shape:            'circle',
+        stroke:           '#FC46AD',
+        strokeDasharray:  '125, 125',
+        strokeDashoffset: {'0': '-125'},
+        strokeWidth:      4,
+        fill:             'none',
+        left:             '50%',
+        top:              '50%',
+        angle:            {'-90': '270'},
+        radius:           20,
+        isShowStart:      true,
+        duration:         2000,
+        easing:           'back.in',
+      })
+      .then({
+        angle:            {'-90': '270'},
+        strokeDashoffset: {'-125': '-250'},
+        duration:         3000,
+        easing:           'cubic.out',
+        onComplete () {
+          loader.replay(0); // create an infinite loop
+        }
+      })
+      .play();
+    }
+
+  }
+
+  
+</script>

docs/.vuepress/styles/index.styl

@@ -66,13 +66,18 @@ html, body {
       background-color transparent
       border 1px solid $c-orange
       border-radius 3px
-      user-select all
+      user-select all // autoselect smaller inline styles but not larger code blocks that has a language specified
     }
     pre {
       code {
         border none
       }
     }
+    .language-javascript, .language-js, .language-jsx {
+      code {
+        user-select auto
+      }
+    }
   }
 
 }
@@ -97,3 +102,12 @@ hr
     background: $c-purple url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjY0cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDY0IDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjIgKDEyMDQzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5VbnRpdGxlZCA3PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0xMSIgc3Ryb2tlPSIjRkYzQzQwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiBjeD0iNyIgY3k9IjciIHI9IjYiPjwvY2lyY2xlPgogICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtNTMiIHN0cm9rZT0iIzUwRTNDMiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgeD0iMjYiIHk9IjEiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+PC9yZWN0PgogICAgICAgIDxnIGlkPSJQYXRoLTI4LSstUGF0aC0yOSIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTEuMDAwMDAwLCAxLjAwMDAwMCkiIHN0cm9rZT0iI0ZGRDk0QiI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjM2MDY3NzA4MywwLjM5NDUzMTI1IEwxMS45MTUzNjQ2LDExLjc2MDQxNjciIGlkPSJQYXRoLTI4IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjcwODMzMzMzMywxMS41NTcyOTE3IEwxMi4wNTk4OTU4LDAuNTUyMDgzMzMzIiBpZD0iUGF0aC0yOSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') no-repeat
 
 
+.example-anim {
+  background: #f1e2d7;
+  width: 100%;
+  height: 300px;
+  position: relative;
+  svg {
+    overflow: visible // for overshoots animations
+  }
+}

docs/.vuepress/styles/palette.styl

@@ -14,7 +14,7 @@ $c-purple-light = #4E214D
 $c-purple-dark = #2b062a
 $c-white    = #FDF7F7
 
-$c-creamy   = rgb(241, 226, 215)
+$c-creamy   = rgb(241, 226, 215) // #f1e2d7
 
 $c-orange-semi = rgba($c-orange, 0.5)
 // c-white-transparent = rgba(white, .2)

docs/tutorials/getting-started.md

@@ -1,12 +1,66 @@
+
 # Getting started
 
-## Setup mo · js in your project
-- Run `npm i @mojs/mojs -D` OR `yarn add -D @mojs/mojs`
-- Import it `import mojs from 'mojs'`
+## Setup mo.js in your project
+- Run `npm i mo-js` OR `yarn add mo-js`
+- Import it `import mojs from 'mo-js'`
+
+  Or use the minified CDN version:
+  ```js
+  <script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
+  ```
+
+- Create your animations. What about a bouncy circle?
+
+<ExampleCircle>
+```js
+var circle = new mojs.Shape({
+  parent:       '#circle-anim',
+  shape:        'circle',
+  fill:         {'#F64040': '#FC46AD'},
+  radius:       {20: 80},
+  duration:     2000,
+  isYoyo:       true,
+  easing:       'elastic.inout',
+  repeat:       999,
+})
+.play();
+```
+</ExampleCircle>
 
-Or use the minified CDN version:
+Or maybe a loading animation?
+
+<ExampleSpinner height="200px" id="spinner">
 ```js
-<script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
+var loader = new mojs.Shape({
+  parent:           '#spinner',
+  shape:            'circle',
+  stroke:           '#FC46AD',
+  strokeDasharray:  '125, 125',
+  strokeDashoffset: {'0': '-125'},
+  strokeWidth:      4,
+  fill:             'none',
+  left:             '50%',
+  top:              '50%',
+  angle:            {'-90': '270'},
+  radius:           20,
+  isShowStart:      true,
+  duration:         2000,
+  easing:           'back.in',
+})
+.then({
+  angle:            {'-90': '270'},
+  strokeDashoffset: {'-125': '-250'},
+  duration:         3000,
+  easing:           'cubic.out',
+  onComplete () {
+    loader.replay(0); // create an infinite loop
+  }
+})
+.play();
 ```
+</ExampleSpinner>
+
+Go creative!
 
 See the [API](/api/README.md) for more info.

docs/tutorials/shape-swirl.md

@@ -2,3 +2,5 @@
 
 - [CodePen Example](https://codepen.io/sol0mka/pen/pbebwQ?editors=0010)
 - [API reference](api/shape-swirl)
+
+Coming soon

package-lock.json

@@ -9,5 +9,8 @@
   "devDependencies": {
     "vuepress": "^1.0.0-alpha.47"
   },
-  "deploy": "npm run build"
+  "deploy": "npm run build",
+  "dependencies": {
+    "mo-js": "^0.288.2"
+  }
 }