adding some real code styling to the docs to make them legible and starting to add the docs code content

scripts/site.js

@@ -0,0 +1,58 @@
+$(document).ready(function() {
+
+  // Variables
+  var codeIsActive = true,
+      $codeSnippets = $('.code-example-body'),
+      $sections = $('.docs-section'),
+      $window = $(window),
+      entityMap = {
+        "&": "&",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': '&quot;',
+        "'": '&#39;',
+        "/": '&#x2F;'
+      }
+
+  function init() {
+    $('.code-toggler').on('click', toggleCode)
+    buildSnippets();
+  }
+
+  function escapeHtml(string) {
+    return String(string).replace(/[&<>"'\/]/g, function (s) {
+      return entityMap[s];
+    });
+  }
+
+  function buildSnippets() {
+    $codeSnippets.each(function() {
+      var newContent = escapeHtml($(this).html())
+      $(this).html(newContent)
+    })
+  }
+
+  function toggleCode() {
+    var windowScrollTop = $window.scrollTop()
+    var offsetHeight = windowScrollTop
+    $sections.each(function (i) { 
+      if($(this).children('.code-example').length > 0) {
+        var codeExampleHeight = $(this).children('.code-example').outerHeight(true),
+            sectionBottomPadding = parseInt($('.docs-section').css('padding-bottom'))
+        if(windowScrollTop > $(this).offset().top + $(this).outerHeight() - sectionBottomPadding) {
+          if(codeIsActive == false) {
+            offsetHeight += codeExampleHeight
+          } else {
+            offsetHeight -= codeExampleHeight
+          }
+        }
+      }
+    })
+    $('body').toggleClass('code-snippets-visible')
+    codeIsActive = !codeIsActive
+    $window.scrollTop(offsetHeight)
+  }
+
+  init();
+
+});