diff --git a/documentation/sections/overview.md b/documentation/sections/overview.md
index c6898c53..31ff0c80 100644
--- a/documentation/sections/overview.md
+++ b/documentation/sections/overview.md
@@ -1,6 +1,6 @@
## Overview
-_CoffeeScript on the left, compiled JavaScript output on the right._
+_CoffeeScript on the left, compiled JavaScript output on the right. The CoffeeScript is editable!_
```
codeFor('overview', 'cubes', false)
diff --git a/documentation/v2/code.coffee b/documentation/v2/code.coffee
new file mode 100644
index 00000000..449f2f27
--- /dev/null
+++ b/documentation/v2/code.coffee
@@ -0,0 +1,20 @@
+fs = require 'fs'
+CoffeeScript = require '../../lib/coffee-script'
+
+
+module.exports = ->
+ (file, executable = no, showLoad = yes) ->
+ cs = fs.readFileSync "documentation/examples/#{file}.coffee", 'utf-8'
+ js = CoffeeScript.compile cs, bare: yes
+ """
+
+ """
diff --git a/documentation/v2/docs.coffee b/documentation/v2/docs.coffee
index d5090ff7..bae12e6b 100644
--- a/documentation/v2/docs.coffee
+++ b/documentation/v2/docs.coffee
@@ -12,3 +12,35 @@ $(window).on 'activate.bs.scrollspy', (event, target) -> # Why `window`? https:/
$target = $(".nav-link[href='#{target.relatedTarget}']")
# Update the browser address bar on scroll or navigation
window.history.pushState {}, $target.text(), $target.prop('href')
+
+
+# Initialize CodeMirror for code examples; https://codemirror.net/doc/manual.html
+editors = []
+lastCompilationElapsedTime = 200
+$('textarea').each (index) ->
+ mode = if $(@).hasClass('javascript-output') then 'javascript' else 'coffeescript'
+
+ editors[index] = editor = CodeMirror.fromTextArea @,
+ mode: mode
+ theme: 'default' # TODO: Change
+ indentUnit: 2
+ tabSize: 2
+ lineWrapping: on
+ lineNumbers: off
+ inputStyle: 'contenteditable'
+ # readOnly: (if mode is 'coffeescript' then no else 'nocursor')
+ viewportMargin: Infinity
+
+ if mode is 'coffeescript'
+ pending = null
+ editor.on 'change', (instance, change) ->
+ clearTimeout pending
+ pending = setTimeout ->
+ lastCompilationStartTime = Date.now()
+ try
+ output = CoffeeScript.compile editor.getValue(), bare: yes
+ lastCompilationElapsedTime = Math.max(200, Date.now() - lastCompilationStartTime)
+ catch exception
+ output = "#{exception}"
+ editors[index + 1].setValue output
+ , lastCompilationElapsedTime
diff --git a/documentation/v2/docs.css b/documentation/v2/docs.css
index ce7cbd26..613751db 100644
--- a/documentation/v2/docs.css
+++ b/documentation/v2/docs.css
@@ -1,6 +1,7 @@
/* Adapted from https://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css */
body {
+ /* Required for Scrollspy */
position: relative;
}
@@ -8,8 +9,8 @@ body {
* Sidebar
*/
-/* Hide for mobile, show later */
.sidebar {
+ /* Hide for mobile, show later */
display: none;
}
@media (min-width: 768px) {
@@ -28,16 +29,17 @@ body {
}
}
-/* Sidebar navigation */
.nav-link.active,
.nav-link.active, a:hover,
.nav-link.active, a:focus {
color: indianred;
}
+
.nav .nav {
margin-left: 1em;
}
+
/*
* Main content
*/
@@ -51,3 +53,18 @@ body {
padding-left: 2em;
}
}
+
+
+/*
+ * Code examples
+ */
+
+textarea {
+ position: absolute;
+ left: -99999px; /* Hide off canvas, while still remaining visible */
+}
+
+.CodeMirror {
+ /* https://codemirror.net/demo/resize.html */
+ height: auto;
+}
diff --git a/documentation/v2/scripts.html b/documentation/v2/scripts.html
index d9814c9b..4e849a1d 100644
--- a/documentation/v2/scripts.html
+++ b/documentation/v2/scripts.html
@@ -3,8 +3,9 @@
window.Tether = {}; // Remove if we want to use Bootstrap tooltips
-
+
+
diff --git a/documentation/v2/styles.html b/documentation/v2/styles.html
index 517c1d1c..e10a46e2 100644
--- a/documentation/v2/styles.html
+++ b/documentation/v2/styles.html
@@ -1,4 +1,5 @@
+