Converted the Burst tutorial

Author: Sandstedt

Guide to convert old pages to markdown.md

@@ -1,17 +1,27 @@
 # Guide to convert jsx pages from the old mojs website to markdown
+In VS Code, use Find and Replace ()
 
 ## Use find and replace in the file:
- - `UniteLink` replace with `a`
- - `a link` replace with `a href`
- - `Cite` replace with `blockquote`
- - `<span className="highlight">(.+?)<\/span>` replace with `<code>$1</code>`
- - `<div className="post__header">(.+?)<\/div>` replace with `<h1>$1</h1>`
+ - `<UniteLink link="(.+?)">(.+?)</UniteLink>` replace with `[$2]($1)`
+ - `<Cite>` replace with `> ` (make sure to temove the newline too)
+ - `</Cite>` replace with ``
+ - `<span className="highlight">(.+?)</span>` replace with "`$1`"
+ - `<div className="post__header">(.+?)</div>` replace with `# $1`
  - `<ORXLine className="post__orx-line" />` replace with `<hr />`
  - `https://github.com/legomushroom/mojs/blob/master/api/` replace with `/api/`
- - `<Pen (.+?) />` replace with `<Pen $1></Pen>`
+ - `<Pen pen="(.+?)" height="(.+?)" />` and `<Pen pen="(.+?)" height="(.+?)"></Pen>` replace with
+ ```
+<Codepen
+  title="$1"
+  pen="$1"
+  user="sol0mka"
+  height="$2"
+/>
+[Link to pen](https://codepen.io/sol0mka/pen/$1)
+```
  - `<Gif className="gif--50-width" src="(.+?)" />` replace with `<img src="/assets$1" alt="Example gif" />`
- - `<CodeSample` replace with `<pre><code>`
- - `</CodeSample>` replace with `</code></pre>`
+ - `<CodeSample pen="(.+?)">` replace with `// pen $1 \n```js`
+ - `</CodeSample>` replace with "```"
  - `<Pen (.+?)" height="500</Pen>` replace with `<pre><code>$1</code></pre>` code
  - `<Pen (.+?)</Pen>` replace with `<pre><code>$1</code></pre>`
 

docs/.vuepress/components/MojsCode.vue

@@ -1,11 +1,12 @@
 /*
-A simplified version of MojsInteractive that cant be edited,
+A simplified version of MojsInteractive that can't be edited,
 but has more flexibility regarding the code.
 
 Usage:
 <MojsCode
   id="unique_id"
   height="200px"
+  :dark="true"
   code=
 "new mojs.Shape({
   parent:       '#unique_id',
@@ -28,7 +29,7 @@ new mojs.Shape({
       <slot></slot>
     </div>
     <p v-if="notice" class="mojs-interactive__clicknotice">{{this.notice}}</p>
-    <div :id="this.id" class="mojs-interactive__result" :class="this.className" :style="style">
+    <div :id="this.id" :class="'mojs-interactive__result ' + (dark ? 'mojs-interactive__result--dark' : '')" :style="style">
       <div v-if="controller" :id="this.id + '_controller'" class="mojs-interactive__controller"></div>
     </div>
   </div>
@@ -43,7 +44,7 @@ new mojs.Shape({
       controller: { type: [String, Boolean], default: false },
       height: { type: String, default: '300px' },
       code: { type: [String, Boolean], default: '' },
-      className: { type: String, default: '' },
+      dark: { type: Boolean, default: false }, // if you want the demo to be dark 🕶
       notice: { type: [String, Boolean], default: false }, // to show a "click somewhere to activate animation" text
     },
 

docs/.vuepress/config.js

@@ -39,6 +39,7 @@ module.exports = {
           '/tutorials/',
           '/tutorials/getting-started.md',
           '/tutorials/shape-swirl/',
+          '/tutorials/burst/',
         ]
       },
       {

docs/.vuepress/public/assets/burst/burst-pic.png

@@ -4,12 +4,13 @@
 
 `Property Map` array was designed to express sequential values. Often used with `Burst` and `Stagger` modules to generate values that repeat over children length. Basically it is just an array that maps its values to children based on child index with `mod` function. So if you have `property map` with `3 values` and `5 children`, then `4`th and `5`th items will recieve `0`th and `1`st values from the map respecively. Works with any values inside the array.
 
+You can provide a `null` value if you wanna use the default value.
 
 Full API reference:
 
 ```javascript
   // ...
-  property : [ 20, { 20 : 0 }, 'rand(0, 20)' ]
+  property : [ 20, { 20 : 0 }, 'rand(0, 20)', null ]
   // ...
 
 ```