Moved docs outside of the Commander

WORKSHOP.md

@@ -1,5 +1,7 @@
 # Workshop
 
+<img src="https://raw.githubusercontent.com/hundredrabbits/100r.co/master/media/content/characters/ronin.pose.png" width="300"/>
+
 This workshop is designed to go over the **most commonly used functions** with [Ronin](https://github.com/hundredrabbits/Ronin). The list of all available functions and their usage is located [here](https://github.com/hundredrabbits/Ronin/#library). You can also follow along our [video tutorial](https://youtu.be/SgAWGh1s9zg).
 
 - **Part 1**: [Images](#Images) `(open)`, `(import)`, `(crop)`, `(export)`
@@ -62,7 +64,7 @@ For example, a version of that same code with file paths, might look something l
 (export "~/Desktop/export.png")
 ```
 
-You could also **generate the export path from the import path**, like this:
+You could also **generate the export path from the import path**. To import `~/Desktop/photo.jpg`, and automatically generate the export path `~/Desktop/photo-export.jpg`, use this:
 
 ```lisp
 (def import-path $path)
@@ -70,8 +72,8 @@ You could also **generate the export path from the import path**, like this:
   (concat 
     (dirpath import-path) "/" 
     (filename import-path) "-export.jpg"))
-(import import-path) ; "~/Desktop/photo.jpg"
-(export export-path) ; "~/Desktop/photo-export.jpg"
+(import import-path)
+(export export-path)
 ```
 
 ## Draw
@@ -185,6 +187,8 @@ Custom convolve kernels can also be created like this:
 (convolve blur)
 ```
 
+<img src="https://raw.githubusercontent.com/hundredrabbits/100r.co/master/media/content/characters/ronin.idle.png" width="300"/>
+
 ## Events
 
 This section will demonstrate how to use events in Ronin to create interactive scripts.

desktop/sources/index.html

@@ -5,6 +5,7 @@
     <script type="text/javascript" src="scripts/lib/controller.js"></script>
     <script type="text/javascript" src="scripts/ronin.js"></script>
     <script type="text/javascript" src="scripts/source.js"></script>
+    <script type="text/javascript" src="scripts/docs.js"></script>
     <script type="text/javascript" src="scripts/commander.js"></script>
     <script type="text/javascript" src="scripts/surface.js"></script>
     <script type="text/javascript" src="scripts/lisp.js"></script>

desktop/sources/scripts/commander.js

@@ -1,4 +1,5 @@
 function Commander (ronin) {
+  this.docs = new Docs(ronin)
   this.el = document.createElement('div')
   this.el.id = 'commander'
   this._input = document.createElement('textarea')
@@ -224,47 +225,6 @@ function Commander (ronin) {
     setTimeout(() => { this._run.className = '' }, 150)
   }
 
-  // Docs micro-module
-
-  this.docs = {
-    dict: {},
-    load: function () {
-      const fs = require('fs')
-      const path = require('path')
-      const p = path.join(__dirname, 'scripts/', 'library.js')
-      if (!fs.existsSync(p)) { console.warn('Docs', 'File does not exist: ' + p); return }
-      const lines = fs.readFileSync(p, 'utf8').split('\n').filter((line) => { return line.substr(0, 7) === '  this.' })
-      return lines.map((line) => { return line.trim().substr(5).trim() })
-    },
-    install: function (payload = this.load()) {
-      for (const id in payload) {
-        const name = payload[id].substr(0, payload[id].indexOf(' = '))
-        const parent = payload[id].substr(payload[id].indexOf(' = ')).match(/\(([^)]+)\)/)
-        const params = parent ? parent[1].split(',').map((word) => { return word.indexOf(' = ') > -1 ? '~' + (word.split(' = ')[0]).trim() : word.trim() }) : []
-        const note = payload[id].indexOf('// ') > -1 ? payload[id].split('//')[1].trim() : ''
-        this.dict[name] = { note, params }
-        if (params.length < 1) { console.warn('Docs', 'Missing params for ' + name) }
-        if (note === '') { console.warn('Docs', 'Missing note for ' + name) }
-      }
-      console.log('Docs', `Loaded ${Object.keys(this.dict).length} functions.`)
-      console.log(this.toMarkdown())
-    },
-    toMarkdown: function () {
-      return Object.keys(this.dict).reduce((acc, item, key) => {
-        const example = `${item} ${this.dict[item].params.reduce((acc, item) => {
-          return `${acc}${item} `
-        }, '').trim()}`
-        return `${acc}- \`(${example.trim()})\` ${this.dict[item].note}\n`
-      }, '')
-    },
-    hasDocs: function (name) {
-      return !!this.dict[name]
-    },
-    print: function (name) {
-      return `(${name} ${this.dict[name].params.reduce((acc, item) => { return `${acc}${item} ` }, '').trim()})`
-    }
-  }
-
   // Splash
 
   this.splash = `; welcome to ronin

desktop/sources/scripts/docs.js

@@ -0,0 +1,38 @@
+function Docs (ronin) {
+  this.dict = {}
+  this.load = () => {
+    const fs = require('fs')
+    const path = require('path')
+    const p = path.join(__dirname, 'scripts/', 'library.js')
+    if (!fs.existsSync(p)) { console.warn('Docs', 'File does not exist: ' + p); return }
+    const lines = fs.readFileSync(p, 'utf8').split('\n').filter((line) => { return line.substr(0, 7) === '  this.' })
+    return lines.map((line) => { return line.trim().substr(5).trim() })
+  }
+  this.install = (payload = this.load()) => {
+    for (const id in payload) {
+      const name = payload[id].substr(0, payload[id].indexOf(' = '))
+      const parent = payload[id].substr(payload[id].indexOf(' = ')).match(/\(([^)]+)\)/)
+      const params = parent ? parent[1].split(',').map((word) => { return word.indexOf(' = ') > -1 ? '~' + (word.split(' = ')[0]).trim() : word.trim() }) : []
+      const note = payload[id].indexOf('// ') > -1 ? payload[id].split('//')[1].trim() : ''
+      this.dict[name] = { note, params }
+      if (params.length < 1) { console.warn('Docs', 'Missing params for ' + name) }
+      if (note === '') { console.warn('Docs', 'Missing note for ' + name) }
+    }
+    console.log('Docs', `Loaded ${Object.keys(this.dict).length} functions.`)
+    console.log(this.toMarkdown())
+  }
+  this.toMarkdown = () => {
+    return Object.keys(this.dict).reduce((acc, item, key) => {
+      const example = `${item} ${this.dict[item].params.reduce((acc, item) => {
+        return `${acc}${item} `
+      }, '').trim()}`
+      return `${acc}- \`(${example.trim()})\` ${this.dict[item].note}\n`
+    }, '')
+  }
+  this.hasDocs = (name) => {
+    return !!this.dict[name]
+  }
+  this.print = (name) => {
+    return `(${name} ${this.dict[name].params.reduce((acc, item) => { return `${acc}${item} ` }, '').trim()})`
+  }
+}