diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5d0eda6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+public
+.DS_Store
\ No newline at end of file
diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000..01fef01
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+ruby-in-the-browser.my-codeworks.com
\ No newline at end of file
diff --git a/css/highlight.css b/css/highlight.css
new file mode 100644
index 0000000..fb6f145
--- /dev/null
+++ b/css/highlight.css
@@ -0,0 +1,182 @@
+/*
+
+Railscasts-like style (c) Visoft, Inc. (Damien White)
+
+*/
+
+pre code {
+  display: block;
+  padding: 0.5em;
+  background: #232323;
+  color: #E6E1DC;
+}
+
+pre .comment,
+pre .template_comment,
+pre .javadoc,
+pre .shebang {
+  color: #BC9458;
+  font-style: italic;
+}
+
+pre .keyword,
+pre .ruby .function .keyword,
+pre .request,
+pre .status,
+pre .nginx .title,
+pre .method,
+pre .list .title {
+  color: #C26230;
+}
+
+pre .string,
+pre .number,
+pre .regexp,
+pre .tag .value,
+pre .cdata,
+pre .filter .argument,
+pre .attr_selector,
+pre .apache .cbracket,
+pre .date,
+pre .tex .command,
+pre .markdown .link_label {
+  color: #A5C261;
+}
+
+pre .subst {
+  color: #519F50;
+}
+
+pre .tag,
+pre .tag .keyword,
+pre .tag .title,
+pre .doctype,
+pre .sub .identifier,
+pre .pi,
+pre .input_number {
+  color: #E8BF6A;
+}
+
+pre .identifier {
+  color: #D0D0FF;
+}
+
+pre .class .title,
+pre .haskell .type,
+pre .smalltalk .class,
+pre .javadoctag,
+pre .yardoctag,
+pre .phpdoc {
+  text-decoration: none;
+}
+
+pre .constant {
+  color: #DA4939;
+}
+
+
+pre .symbol,
+pre .built_in,
+pre .ruby .symbol .string,
+pre .ruby .symbol .identifier,
+pre .markdown .link_url,
+pre .attribute {
+  color: #6D9CBE;
+}
+
+pre .markdown .link_url {
+  text-decoration: underline;
+}
+
+
+
+pre .params,
+pre .variable,
+pre .clojure .attribute {
+  color: #D0D0FF;
+}
+
+pre .css .tag,
+pre .rules .property,
+pre .pseudo,
+pre .tex .special {
+  color: #CDA869;
+}
+
+pre .css .class {
+  color: #9B703F;
+}
+
+pre .rules .keyword {
+  color: #C5AF75;
+}
+
+pre .rules .value {
+  color: #CF6A4C;
+}
+
+pre .css .id {
+  color: #8B98AB;
+}
+
+pre .annotation,
+pre .apache .sqbracket,
+pre .nginx .built_in {
+  color: #9B859D;
+}
+
+pre .preprocessor,
+pre .preprocessor *
+pre .pragma {
+  color: #8996A8 !important;
+}
+
+pre .hexcolor,
+pre .css .value .number {
+  color: #A5C261;
+}
+
+pre .title,
+pre .decorator,
+pre .css .function {
+  color: #FFC66D;
+}
+
+pre .diff .header,
+pre .chunk {
+  background-color: #2F33AB;
+  color: #E6E1DC;
+  display: inline-block;
+  width: 100%;
+}
+
+pre .diff .change {
+  background-color: #4A410D;
+  color: #F8F8F8;
+  display: inline-block;
+  width: 100%;
+}
+
+pre .addition {
+  background-color: #144212;
+  color: #E6E1DC;
+  display: inline-block;
+  width: 100%;
+}
+
+pre .deletion {
+  background-color: #600;
+  color: #E6E1DC;
+  display: inline-block;
+  width: 100%;
+}
+
+pre .coffeescript .javascript,
+pre .javascript .xml,
+pre .tex .formula,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .xml .css,
+pre .xml .cdata {
+  opacity: 0.7;
+}
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..29ce18a
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,119 @@
+body {
+  padding: 0;
+  margin: 0;
+  background: url('/img/bkg.png');
+  font-family: 'Questrial';
+  font-size: 145%;
+}
+
+h1, h2, h3, h4 {
+  font-family: 'Pacifico';
+}
+
+h1 > span, h2 > span, h3 > span, h4 > span {
+  display: block;
+  font-size: 60%;
+}
+
+h1.hero {
+  font-size: 250%;
+  text-align: center;
+  color: #f68d20;
+  text-shadow: 3px  3px 0 rgba(170, 170, 170, 0.5),
+               0    5px 0 rgba(136, 136, 136, 0.5),
+              -3px  3px 0 rgba(153, 153, 153, 0.5),
+              -3px -3px 0 rgba(221, 221, 221, 0.5),
+               0   -5px 0 rgba(255, 255, 255, 0.5),
+               3px -3px 0 rgba(238, 238, 238, 0.5);
+}
+
+a {
+  color: #f68d20;
+  text-decoration: none;
+}
+
+a:active, a:hover {
+  outline: 0;
+}
+
+article {
+  width: 800px;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  -o-border-radius: 15px;
+  border-radius: 15px;
+  border: 5px solid #D6CD79;
+  position: relative;
+  margin: 0 auto 10% auto;
+  padding: 2em;
+  background: #fffbd8;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: -moz-radial-gradient(center, ellipse cover, rgba(255, 251, 216, 0) 0%, rgba(255, 251, 216, 0) 40%, #DFD9A6 100%);
+  background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255, 251, 216, 0)), color-stop(40%,rgba(255, 251, 216, 0)), color-stop(100%,#DFD9A6));
+  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(255, 251, 216, 0) 0%, rgba(255, 251, 216, 0) 40%, #DFD9A6 100%);
+  background-image: -o-radial-gradient(center, ellipse cover, rgba(255, 251, 216, 0) 0%, rgba(255, 251, 216, 0) 40%,#DFD9A6 100%);
+  background-image: -ms-radial-gradient(center, ellipse cover, rgba(255, 251, 216, 0) 0%, rgba(255, 251, 216, 0) 40%,#DFD9A6 100%);
+  background-image: radial-gradient(ellipse at center, rgba(255, 251, 216, 0) 0%, rgba(255, 251, 216, 0) 40%,#DFD9A6 100%);
+  -webkit-box-shadow: 0 0 150px black;
+  -moz-box-shadow: 0 0 150px black;
+  box-shadow: 0 0 150px black;
+}
+
+article hr {
+  border: 0;
+  border-bottom: 5px solid rgba(214, 205, 121, 0.5);
+  width: calc( 100% + 4em );
+  margin-left: -2em;
+}
+
+article p {
+  line-height: 1.4;
+}
+
+article p code {
+  background: #232323;
+  padding: .1em .3em;
+  border-radius: 3px;
+  color: #E6E1DC;
+}
+
+article pre > code {
+  font-family: "Source Code Pro", monospace;
+  font-size: 12pt;
+  border-radius: 3px;
+  padding: 8px 16px;
+  overflow-wrap: break-word;
+  overflow: hidden;
+}
+
+.edit {
+  position: relative;
+  left: -2em;
+  padding: 2em 2em .5em 2em;
+  background: rgba(81,52,23,.3);
+  width: 100%;
+  border-bottom: 1px solid #513417;
+}
+
+.edit::before {
+  content: '';
+  background: transparent;
+  width: 100%;
+  position: absolute;
+  left: -1.9em;
+  top: -.5em;
+  border: 30px solid #513417;
+  border-right: 20px solid #513417;
+  border-left-color: transparent;
+  max-height: 0px;
+  box-shadow: 0 5px 15px rgba(81, 52, 23, 0.86)
+}
+
+.edit::after {
+  content: 'Edit';
+  color: orange;
+  position: absolute;
+  top: 0;
+  padding: .3em 0;
+}
diff --git a/css/prism.css b/css/prism.css
new file mode 100644
index 0000000..f452c29
--- /dev/null
+++ b/css/prism.css
@@ -0,0 +1,125 @@
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+
+	-moz-tab-size: 2;
+	-o-tab-size: 2;
+	tab-size: 2;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.builtin {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #a67f59;
+	background: hsla(0,0%,100%,.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+
+.token.regex,
+.token.important {
+	color: #e90;
+}
+
+.token.important {
+	font-weight: bold;
+}
+
+.token.entity {
+	cursor: help;
+}
+
diff --git a/google3812ec1f474aa1fa.html b/google3812ec1f474aa1fa.html
new file mode 100644
index 0000000..b3a2e09
--- /dev/null
+++ b/google3812ec1f474aa1fa.html
@@ -0,0 +1 @@
+google-site-verification: google3812ec1f474aa1fa.html
\ No newline at end of file
diff --git a/img/bkg.png b/img/bkg.png
new file mode 100644
index 0000000..cbe5761
Binary files /dev/null and b/img/bkg.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7ca6fbf
--- /dev/null
+++ b/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Ruby.js</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+    <link href="css/main.css" rel="stylesheet" type="text/css">
+  </head>
+   <body>
+   	<h1 class="hero">Ruby.js</h1>
+		<article>
+      <a href="https://github.com/my-codeworks/ruby-in-the-browser">
+        <img style="position: absolute; top: -6px; right: -6px; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+      </a>
+
+			<h1>Ruby in the browser</h1>
+
+			<p>This is a collection of demos of what you can currently do in the area of using ruby as the scripting language of the browser. As a replacement, kinda, of javascript if you will.</p>
+
+			<p>This is an area where a lot of people have done a lot of work over the years and one where we will probably end up having binary modules for our browsers to run whatever scripting language we want in the end.</p>
+
+			<p>Sadly that's still a long ways off and here is what you can do for now:</p>
+
+			<h2>What you really want<span>(but can only use for embedded applications)</span></h2>
+
+			<p>What we really want is to use Ruby just like we use Javascript today and you can. Head over to <a href="http://trydecaf.org/">trydecaf.org/</a> and enjoy the bliss! Or check out <a href="https://github.com/timahoney/decaf">the Github project</a>.</p>
+
+			<p>But since this requires you to download another browser it's only really viable when you deliver your product as a desktop app ...</p>
+
+			<p>There are also some work on building a native code extension for Chrome of the Ruby runtime. I have not seen it available in any other form <a href="https://github.com/ruby/ruby/commit/76bc2d1ed7f13fb329c33f48756ea3c24c59a6ea">than code</a>, so I haven't tried it. It's a bit better than Decaf if it get's into the app store, it means you can use it for backend type apps without much problem.</p>
+
+			<h2>What we got so far<span>(and it's pretty awesome!)</span></h2>
+
+			<p>So no full replacement of Javascript any time soon then? Well, nearly. There are two other approaches to this problem:</p>
+
+			<h3>Ruby VM in Javascript</h3>
+
+			<p>The traditional approach here is to use LLVM/Clang to compile the Ruby source to LLVM bytecode and convert that to Javascript.</p>
+
+			<p>Currently we have the full (almost) port of Ruby 1.8.7 that Replit did (<a href="https://github.com/replit/emscripted-ruby">replit/emscripted-ruby</a>). But that is 5 years old at the time of writing (early 2017) and never mind 1.9.x we have 2.4 now and 2.5 coming so it is seriously dated.</p>
+
+			<p>Enter the work that Matz(tm) is doing with mRuby and the similar convertion of that through LLVM/Clang called Webruby (<a href="https://github.com/xxuejie/webruby">xxuejie/webruby</a>).</p>
+
+			<p>That project is, relatively, updated and compatible with a large part of the Ruby ISO standard. So it is your best bet unless you want to set up Emscripetn/LLVM on your own.</p>
+
+			<p>You can look at that code under the <code>webruby</code> directory.</p>
+
+			<h3>Ruby runtime implemented in Javascript</h3>
+
+			<p>This is where Opal (<a href="http://opalrb.org">opalrb.org</a>) comes in. This is a two part project that consists of a Ruby parser/converter and a Javascript runtime for that.</p>
+
+			<p>Basically it takes Ruby source code and transforms it to Javascript, making a few assumptions along the way.</p>
+
+			<p>These assumptions are then delivered by the Opal Ruby runtime that is basically reimplementing Ruby core and stdlib in Javascript.</p>
+
+			<p>You'll the Opal test code in the <code>opal</code> directory.</p>
+
+			<h2>Face off</h2>
+
+			<p>Well, it depends...</p>
+
+			<p>Webruby is larger (but not by a huge factor) and slower (it's a full VM on top of another VM) but supports ISO Ruby better.</p>
+
+			<p>Opal is a bit smaller and a lot faster. It also integrates better with Javascript (see the opal-jquery plugin) but it isn't really Ruby, it's close but not quite.</p>
+
+			<p>What do I mean? Well it uses Javascripts data types to it's using <code>Boolean</code> instead of <code>TrueClass</code>/<code>FalseClass</code> and throws around a bit of <code>null</code> and <code>undefined</code> at times.</p>
+
+			<p>That said it's close enough and probably easier to live with in a mixed Ruby/Javascript project, like most are bound to be.</p>
+
+			<aside class="edit">
+
+				<p>Opal has matured a lot since I originally wrote this exploration. If I was going to do a ruby in the browser project today I would definatly use Opal over the LLVM/Emscripten ports of real ruby.</p>
+
+				<p>The community is vibrant and there are a lot of libraries and frameworks to use Opal in a professional manner. Go have a look at it if you are at all interested, which I assume you are since you read this far :)</p>
+
+			</aside>
+
+			<h2>The proof is in the eating</h2>
+
+			<p>To see what we can do I have make a couple of pages where you can see the same Ruby code being excercised by the different engines. I try to keep the examples as close to each other as possible but library diffrences makes that impossible in some cases.</p>
+
+			<p>To look at and see Webruby in action have a look under the <a href="webruby/">/webruby</a> path.</p>
+
+			<p>And to look at and see Opal in action have a look under the <a href="opal/">/opal</a> path.</p>
+
+			<h2>After ever after</h2>
+
+			<p>I'll add more tests and play around a bit more with real website programming and we'll see what wins out in the end...</p>
+
+			<h1>Help</h1>
+
+			<p>Do you know of any other way of running Ruby in the browser without any binary dependencies? Fork and add code for it as well or just open an issue and I'll add it as soon as possible.</p>
+
+			<p>Many thanks for your time and I hope you enjoy the simple demos I have put together to show what you can do with Ruby in the browser!</p>
+		</article>
+	</body>
+</html>
diff --git a/js/highlight.js b/js/highlight.js
new file mode 100644
index 0000000..069e4fe
--- /dev/null
+++ b/js/highlight.js
@@ -0,0 +1 @@
+var hljs=new function(){function l(o){return o.replace(/&/gm,"&amp;").replace(/</gm,"&lt;").replace(/>/gm,"&gt;")}function b(p){for(var o=p.firstChild;o;o=o.nextSibling){if(o.nodeName.toUpperCase()=="CODE"){return o}if(!(o.nodeType==3&&o.nodeValue.match(/\s+/))){break}}}function h(p,o){return Array.prototype.map.call(p.childNodes,function(q){if(q.nodeType==3){return o?q.nodeValue.replace(/\n/g,""):q.nodeValue}if(q.nodeName.toUpperCase()=="BR"){return"\n"}return h(q,o)}).join("")}function a(q){var p=(q.className+" "+(q.parentNode?q.parentNode.className:"")).split(/\s+/);p=p.map(function(r){return r.replace(/^language-/,"")});for(var o=0;o<p.length;o++){if(e[p[o]]||p[o]=="no-highlight"){return p[o]}}}function c(q){var o=[];(function p(r,s){for(var t=r.firstChild;t;t=t.nextSibling){if(t.nodeType==3){s+=t.nodeValue.length}else{if(t.nodeName.toUpperCase()=="BR"){s+=1}else{if(t.nodeType==1){o.push({event:"start",offset:s,node:t});s=p(t,s);o.push({event:"stop",offset:s,node:t})}}}}return s})(q,0);return o}function j(p,r,v){var q=0;var y="";var s=[];function u(){if(!p.length||!r.length){return p.length?p:r}if(p[0].offset!=r[0].offset){return(p[0].offset<r[0].offset)?p:r}return r[0].event=="start"?p:r}function t(A){function z(B){return" "+B.nodeName+'="'+l(B.value)+'"'}y+="<"+A.nodeName.toLowerCase()+Array.prototype.map.call(A.attributes,z).join("")+">"}function x(z){y+="</"+z.nodeName.toLowerCase()+">"}function o(z){(z.event=="start"?t:x)(z.node)}while(p.length||r.length){var w=u();y+=l(v.substr(q,w[0].offset-q));q=w[0].offset;if(w==p){s.reverse().forEach(x);do{o(w.splice(0,1)[0]);w=u()}while(w==p&&w.length&&w[0].offset==q);s.reverse().forEach(t)}else{if(w[0].event=="start"){s.push(w[0].node)}else{s.pop()}o(w.splice(0,1)[0])}}return y+l(v.substr(q))}function f(r){function o(s){return(s&&s.source)||s}function p(t,s){return RegExp(o(t),"m"+(r.cI?"i":"")+(s?"g":""))}function q(z,x){if(z.compiled){return}z.compiled=true;var u=[];if(z.k){var s={};function A(B,t){if(r.cI){t=t.toLowerCase()}t.split(" ").forEach(function(C){var D=C.split("|");s[D[0]]=[B,D[1]?Number(D[1]):1];u.push(D[0])})}z.lR=p(z.l||"\\b"+hljs.IR+"\\b(?!\\.)",true);if(typeof z.k=="string"){A("keyword",z.k)}else{for(var y in z.k){if(!z.k.hasOwnProperty(y)){continue}A(y,z.k[y])}}z.k=s}if(x){if(z.bWK){z.b="\\b("+u.join("|")+")\\b(?!\\.)\\s*"}z.bR=p(z.b?z.b:"\\B|\\b");if(!z.e&&!z.eW){z.e="\\B|\\b"}if(z.e){z.eR=p(z.e)}z.tE=o(z.e)||"";if(z.eW&&x.tE){z.tE+=(z.e?"|":"")+x.tE}}if(z.i){z.iR=p(z.i)}if(z.r===undefined){z.r=1}if(!z.c){z.c=[]}for(var w=0;w<z.c.length;w++){if(z.c[w]=="self"){z.c[w]=z}q(z.c[w],z)}if(z.starts){q(z.starts,x)}var v=[];for(var w=0;w<z.c.length;w++){v.push(o(z.c[w].b))}if(z.tE){v.push(o(z.tE))}if(z.i){v.push(o(z.i))}z.t=v.length?p(v.join("|"),true):{exec:function(t){return null}}}q(r)}function d(E,G,C,M){function o(r,P){for(var O=0;O<P.c.length;O++){var N=P.c[O].bR.exec(r);if(N&&N.index==0){return P.c[O]}}}function s(N,r){if(N.e&&N.eR.test(r)){return N}if(N.eW){return s(N.parent,r)}}function t(r,N){return !C&&N.i&&N.iR.test(r)}function y(O,r){var N=H.cI?r[0].toLowerCase():r[0];return O.k.hasOwnProperty(N)&&O.k[N]}function I(){var N=l(w);if(!B.k){return N}var r="";var Q=0;B.lR.lastIndex=0;var O=B.lR.exec(N);while(O){r+=N.substr(Q,O.index-Q);var P=y(B,O);if(P){v+=P[1];r+='<span class="'+P[0]+'">'+O[0]+"</span>"}else{r+=O[0]}Q=B.lR.lastIndex;O=B.lR.exec(N)}return r+N.substr(Q)}function z(){if(B.sL&&!e[B.sL]){return l(w)}var N=B.subLanguageMode=="continuous"?B.top:undefined;var r=B.sL?d(B.sL,w,true,N):g(w);if(B.r>0){v+=r.keyword_count;A+=r.r}B.top=r.top;return'<span class="'+r.language+'">'+r.value+"</span>"}function L(){return B.sL!==undefined?z():I()}function K(O,r){var N=O.cN?'<span class="'+O.cN+'">':"";if(O.rB){x+=N;w=""}else{if(O.eB){x+=l(r)+N;w=""}else{x+=N;w=r}}B=Object.create(O,{parent:{value:B}})}function D(N,r){w+=N;if(r===undefined){x+=L();return 0}var P=o(r,B);if(P){x+=L();K(P,r);return P.rB?0:r.length}var Q=s(B,r);if(Q){var O=B;if(!(O.rE||O.eE)){w+=r}x+=L();do{if(B.cN){x+="</span>"}A+=B.r;B=B.parent}while(B!=Q.parent);if(O.eE){x+=l(r)}w="";if(Q.starts){K(Q.starts,"")}return O.rE?0:r.length}if(t(r,B)){throw new Error('Illegal lexem "'+r+'" for mode "'+(B.cN||"<unnamed>")+'"')}w+=r;return r.length||1}var H=e[E];if(!H){throw new Error('Unknown language: "'+E+'"')}f(H);var B=M||H;var x="";for(var F=B;F!=H;F=F.parent){if(F.cN){x='<span class="'+F.cN+'">'+x}}var w="";var A=0;var v=0;try{var u,q,p=0;while(true){B.t.lastIndex=p;u=B.t.exec(G);if(!u){break}q=D(G.substr(p,u.index-p),u[0]);p=u.index+q}D(G.substr(p));for(var F=B;F.parent;F=F.parent){if(F.cN){x+="</span>"}}return{r:A,keyword_count:v,value:x,language:E,top:B}}catch(J){if(J.message.indexOf("Illegal")!=-1){return{r:0,keyword_count:0,value:l(G)}}else{throw J}}}function g(s){var o={keyword_count:0,r:0,value:l(s)};var q=o;for(var p in e){if(!e.hasOwnProperty(p)){continue}var r=d(p,s,false);r.language=p;if(r.keyword_count+r.r>q.keyword_count+q.r){q=r}if(r.keyword_count+r.r>o.keyword_count+o.r){q=o;o=r}}if(q.language){o.second_best=q}return o}function i(q,p,o){if(p){q=q.replace(/^((<[^>]+>|\t)+)/gm,function(r,v,u,t){return v.replace(/\t/g,p)})}if(o){q=q.replace(/\n/g,"<br>")}return q}function m(r,u,p){var v=h(r,p);var t=a(r);if(t=="no-highlight"){return}var w=t?d(t,v,true):g(v);t=w.language;var o=c(r);if(o.length){var q=document.createElementNS("http://www.w3.org/1999/xhtml","pre");q.innerHTML=w.value;w.value=j(o,c(q),v)}w.value=i(w.value,u,p);var s=r.className;if(!s.match("(\\s|^)(language-)?"+t+"(\\s|$)")){s=s?(s+" "+t):t}r.innerHTML=w.value;r.className=s;r.result={language:t,kw:w.keyword_count,re:w.r};if(w.second_best){r.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function n(){if(n.called){return}n.called=true;Array.prototype.map.call(document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml","pre"),b).filter(Boolean).forEach(function(o){m(o,hljs.tabReplace)})}function k(){window.addEventListener("DOMContentLoaded",n,false);window.addEventListener("load",n,false)}var e={};this.LANGUAGES=e;this.highlight=d;this.highlightAuto=g;this.fixMarkup=i;this.highlightBlock=m;this.initHighlighting=n;this.initHighlightingOnLoad=k;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.REGEXP_MODE={cN:"regexp",b:/\//,e:/\/[gim]*/,i:/\n/,c:[this.BE,{b:/\[/,e:/\]/,r:0,c:[this.BE]}]};this.inherit=function(q,r){var o={};for(var p in q){o[p]=q[p]}if(r){for(var p in r){o[p]=r[p]}}return o}}();hljs.LANGUAGES.ruby=function(e){var a="[a-zA-Z_][a-zA-Z0-9_]*(\\!|\\?)?";var j="[a-zA-Z_]\\w*[!?=]?|[-+~]\\@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?";var g={keyword:"and false then defined module in return redo if BEGIN retry end for true self when next until do begin unless END rescue nil else break undef not super class case require yield alias while ensure elsif or include"};var c={cN:"yardoctag",b:"@[A-Za-z]+"};var k=[{cN:"comment",b:"#",e:"$",c:[c]},{cN:"comment",b:"^\\=begin",e:"^\\=end",c:[c],r:10},{cN:"comment",b:"^__END__",e:"\\n$"}];var d={cN:"subst",b:"#\\{",e:"}",l:a,k:g};var i=[e.BE,d];var b=[{cN:"string",b:"'",e:"'",c:i,r:0},{cN:"string",b:'"',e:'"',c:i,r:0},{cN:"string",b:"%[qw]?\\(",e:"\\)",c:i},{cN:"string",b:"%[qw]?\\[",e:"\\]",c:i},{cN:"string",b:"%[qw]?{",e:"}",c:i},{cN:"string",b:"%[qw]?<",e:">",c:i,r:10},{cN:"string",b:"%[qw]?/",e:"/",c:i,r:10},{cN:"string",b:"%[qw]?%",e:"%",c:i,r:10},{cN:"string",b:"%[qw]?-",e:"-",c:i,r:10},{cN:"string",b:"%[qw]?\\|",e:"\\|",c:i,r:10},{cN:"string",b:/\B\?(\\\d{1,3}|\\x[A-Fa-f0-9]{1,2}|\\u[A-Fa-f0-9]{4}|\\?\S)\b/}];var h={cN:"function",bWK:true,e:" |$|;",k:"def",c:[{cN:"title",b:j,l:a,k:g},{cN:"params",b:"\\(",e:"\\)",l:a,k:g}].concat(k)};var f=k.concat(b.concat([{cN:"class",bWK:true,e:"$|;",k:"class module",c:[{cN:"title",b:"[A-Za-z_]\\w*(::\\w+)*(\\?|\\!)?",r:0},{cN:"inheritance",b:"<\\s*",c:[{cN:"parent",b:"("+e.IR+"::)?"+e.IR}]}].concat(k)},h,{cN:"constant",b:"(::)?(\\b[A-Z]\\w*(::)?)+",r:0},{cN:"symbol",b:":",c:b.concat([{b:j}]),r:0},{cN:"symbol",b:a+":",r:0},{cN:"number",b:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",r:0},{cN:"variable",b:"(\\$\\W)|((\\$|\\@\\@?)(\\w+))"},{b:"("+e.RSR+")\\s*",c:k.concat([{cN:"regexp",b:"/",e:"/[a-z]*",i:"\\n",c:[e.BE,d]},{cN:"regexp",b:"%r{",e:"}[a-z]*",i:"\\n",c:[e.BE,d]},{cN:"regexp",b:"%r\\(",e:"\\)[a-z]*",i:"\\n",c:[e.BE,d]},{cN:"regexp",b:"%r!",e:"![a-z]*",i:"\\n",c:[e.BE,d]},{cN:"regexp",b:"%r\\[",e:"\\][a-z]*",i:"\\n",c:[e.BE,d]}]),r:0}]));d.c=f;h.c[1].c=f;return{l:a,k:g,c:f}}(hljs);hljs.LANGUAGES.javascript=function(a){return{k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const",literal:"true false null undefined NaN Infinity"},c:[a.ASM,a.QSM,a.CLCM,a.CBLCLM,a.CNM,{b:"("+a.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[a.CLCM,a.CBLCLM,a.REGEXP_MODE,{b:/</,e:/>;/,sL:"xml"}],r:0},{cN:"function",bWK:true,e:/{/,k:"function",c:[{cN:"title",b:/[A-Za-z$_][0-9A-Za-z$_]*/},{cN:"params",b:/\(/,e:/\)/,c:[a.CLCM,a.CBLCLM],i:/["'\(]/}],i:/\[|%/}]}}(hljs);
\ No newline at end of file
diff --git a/public/js/jquery.min.js b/js/jquery.min.js
similarity index 100%
rename from public/js/jquery.min.js
rename to js/jquery.min.js
diff --git a/js/loader.js b/js/loader.js
new file mode 100644
index 0000000..745403e
--- /dev/null
+++ b/js/loader.js
@@ -0,0 +1,35 @@
+function run_ruby( src ){
+  var el;
+
+  src = src.replace(/^\s+/gm, '');
+  src = src.replace(/\$\(/g,'jQuery(');
+
+  el = $('<pre><code class="language-ruby"></code></pre>');
+  el.find('code').text( src );
+
+  $('article').append( '<hr/>' );
+  $('article').append( el );
+
+  if ( hljs ){ hljs.highlightBlock( el[0] ); }
+
+  execute( src );
+}
+
+$(document).ready(function() {
+
+  $('script[type="application/ruby"]').each(function( idx, script ){
+    $script = $(script);
+
+    if( $script.attr('src') ){
+      $.ajax({
+        url: $script.attr('src'),
+        success: run_ruby
+      });
+    } else {
+      var s;
+      s = $script.text();
+      run_ruby( s );
+    }
+  });
+
+});
\ No newline at end of file
diff --git a/js/prism.js b/js/prism.js
new file mode 100644
index 0000000..d44cea3
--- /dev/null
+++ b/js/prism.js
@@ -0,0 +1,11 @@
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ * MIT license http://www.opensource.org/licenses/mit-license.php/
+ * @author Lea Verou http://lea.verou.me
+ */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){return n.stringify(t.tokenize(e,r),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
+Prism.languages.markup={comment:/&lt;!--[\w\W]*?-->/g,prolog:/&lt;\?.+?\?>/,doctype:/&lt;!DOCTYPE.+?>/,cdata:/&lt;!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^&lt;\/?[\w:-]+/i,inside:{punctuation:/^&lt;\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&amp;#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});;
+Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
+Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|&lt;=?|>=?|={1,3}|(&amp;){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};
+;
+Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});
+;
diff --git a/js/prism.ruby.js b/js/prism.ruby.js
new file mode 100644
index 0000000..0173d29
--- /dev/null
+++ b/js/prism.ruby.js
@@ -0,0 +1,18 @@
+Prism.languages.ruby = {
+        'comment': /#[^\r\n]*(\r?\n|$)/g,
+        'string': /("|')(\\?.)*?\1/g,
+        'regex': {
+                pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,
+                lookbehind: true
+        },
+        'keyword': /\b(alias|and|BEGIN|begin|break|case|class|def|define_method|defined|do|each|else|elsif|END|end|ensure|false|for|if|in|module|new|next|nil|not|or|raise|redo|rescue|retry|return|self|super|then|throw|true|undef|unless|until|when|while|yield)\b/g,
+  'builtin': /\b(Array|Bignum|Binding|Class|Continuation|Dir|Exception|FalseClass|File|Stat|File|Fixnum|Fload|Hash|Integer|IO|MatchData|Method|Module|NilClass|Numeric|Object|Proc|Range|Regexp|String|Struct|TMS|Symbol|ThreadGroup|Thread|Time|TrueClass)\b/,
+        'boolean': /\b(true|false)\b/g,
+        'number': /\b-?(0x)?\d*\.?\d+\b/g,
+        'operator': /[-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\//g,
+  'inst-var': /[@&]\b[a-zA-Z_][a-zA-Z_0-9]*[?!]?\b/g,
+  'symbol': /:\b[a-zA-Z_][a-zA-Z_0-9]*[?!]?\b/g,
+  'const': /\b[A-Z][a-zA-Z_0-9]*[?!]?\b/g,
+        'ignore': /&(lt|gt|amp);/gi,
+        'punctuation': /[{}[\];(),.:]/g
+};
\ No newline at end of file
diff --git a/public/.DS_Store b/opal/.DS_Store
similarity index 100%
rename from public/.DS_Store
rename to opal/.DS_Store
diff --git a/opal/index.html b/opal/index.html
new file mode 100644
index 0000000..b38a2ea
--- /dev/null
+++ b/opal/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Ruby.js (Opal)</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
+    <link href="/css/main.css" rel="stylesheet" type="text/css">
+    <link href="/css/highlight.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <h1 class="hero">opalrb.org</h1>
+    <article>
+      <a href="https://github.com/my-codeworks/ruby-in-the-browser">
+        <img style="position: absolute; top: -6px; right: -6px; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+      </a>
+      <p>Each example following on this page are read in script tags on this page, use view source to see the exact setup.</p>
+      <p>A small script, <code>js/loader.js</code>, to read in any script tags on the page with type <code>application/ruby</code>. Another small shim, <code>js/shims.js</code>, normalizes the way the libraries execute ruby code. The source is pre processed to replace any <code>$(</code> to <code>jQuery(</code>, to keep the formatting consistent with the javascript syntax.</p>
+      <p>The scripts are read in and printed into a <code>pre &gt; code</code> block and then evaluated and the result printed below.</p>
+    </article>
+		<script type="application/javascript" src="/js/jquery.min.js"></script>
+    <script type="application/javascript" src="/js/highlight.js"></script>
+    <script type="application/javascript" src="/js/loader.js"></script>
+		<script type="application/javascript" src="/opal/js/opal.js"></script>
+		<script type="application/javascript" src="/opal/js/opal-jquery.js"></script>
+		<script type="application/javascript" src="/opal/js/opal-parser.js"></script>
+		<script type="application/javascript" src="/opal/js/shims.js"></script>
+
+    <script type="application/ruby">
+      def jQuery( selector )
+        Element.find( selector )
+      end
+    </script>
+
+    <script type="application/ruby" src="/rb/test.rb"></script>
+
+    <script type="application/ruby">
+      jQuery('article').append('<p>This is inserted using a script tag with content.</p>')
+    </script>
+
+    <script type="application/ruby">
+      s = "This is inserted using a script tag with content using $ instead of jQuery."
+      $('article').append('<p>'+s+'</p>')
+      h = {}
+      h[:test] = 'Yay!'
+      $('article').append("<p>#{h}</p>")
+    </script>
+
+    <script>hljs.initHighlightingOnLoad();</script>
+	</body>
+</html>
diff --git a/public/js/opal-jquery.js b/opal/js/opal-jquery.js
similarity index 100%
rename from public/js/opal-jquery.js
rename to opal/js/opal-jquery.js
diff --git a/public/js/opal-parser.js b/opal/js/opal-parser.js
similarity index 100%
rename from public/js/opal-parser.js
rename to opal/js/opal-parser.js
diff --git a/public/js/opal.js b/opal/js/opal.js
similarity index 100%
rename from public/js/opal.js
rename to opal/js/opal.js
diff --git a/opal/js/shims.js b/opal/js/shims.js
new file mode 100644
index 0000000..7ce1555
--- /dev/null
+++ b/opal/js/shims.js
@@ -0,0 +1,3 @@
+function execute( src ){
+	Opal.eval( src );
+}
\ No newline at end of file
diff --git a/public/js/opal_shims.js b/public/js/opal_shims.js
deleted file mode 100644
index 7d43859..0000000
--- a/public/js/opal_shims.js
+++ /dev/null
@@ -1,33 +0,0 @@
-$(document).ready(function() {
-
-	var src, waiting;
-
-	src = [];
-	waiting = 0;
-
-	$(document).on('runruby', function(){
-		src = src.join("\n");
-		src = src.replace( /\$\(/g, 'jQuery(' );
-
-		Opal.eval( src );
-	});
-
-	$('script[type="application/ruby"]').each(function( idx, script ){
-		$script = $(script);
-		if( $script.attr('src') ){
-			waiting++;
-			src[idx] = null;
-			$.ajax({
-				url: $script.attr('src'),
-				success: function( s ){
-					src[idx] = s;
-					waiting--;
-					if( waiting === 0 ){ $(document).trigger('runruby'); }
-				}
-			});
-		} else {
-			src[idx] = $script.text();
-		}
-	});
-
-});
\ No newline at end of file
diff --git a/public/js/webruby_shims.js b/public/js/webruby_shims.js
deleted file mode 100644
index a4a4d5c..0000000
--- a/public/js/webruby_shims.js
+++ /dev/null
@@ -1,38 +0,0 @@
-var Ruby;
-
-Ruby = WEBRUBY();
-Ruby.run();
-
-$(document).ready(function() {
-
-	var src, waiting;
-
-	src = [];
-	waiting = 0;
-
-	$(document).on('runruby', function(){
-		src = src.join("\n");
-		src = src.replace( /\$\(/g, 'jQuery(' );
-
-		Ruby.run_source( src );
-	});
-
-	$('script[type="application/ruby"]').each(function( idx, script ){
-		$script = $(script);
-		if( $script.attr('src') ){
-			waiting++;
-			src[idx] = null;
-			$.ajax({
-				url: $script.attr('src'),
-				success: function( s ){
-					src[idx] = s;
-					waiting--;
-					if( waiting === 0 ){ $(document).trigger('runruby'); }
-				}
-			});
-		} else {
-			src[idx] = $script.text();
-		}
-	});
-
-});
\ No newline at end of file
diff --git a/public/opal.html b/public/opal.html
deleted file mode 100644
index 5d7877c..0000000
--- a/public/opal.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<!-- saved from url=(0036)file:///Users/pixie/Desktop/dnd.html -->
-<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title>Ruby.js</title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-    </head>
-    <body style="">
-      	<div id="foo" class="drag" draggable="true"></div>
-    		<div id="bar1" class="target before_animation"></div>
-    		<div id="bar2" class="target"></div>
-
-    		<script type="application/javascript" src="js/jquery.min.js"></script>
-    		<script type="application/javascript" src="js/opal.js"></script>
-    		<script type="application/javascript" src="js/opal-jquery.js"></script>
-    		<script type="application/javascript" src="js/opal-parser.js"></script>
-    		<script type="application/javascript" src="js/opal_shims.js"></script>
-
-        <script type="application/ruby" src="ruby/opal_shims.rb"></script>
-        <script type="application/ruby" src="ruby/test.rb"></script>
-
-        <script type="application/ruby">
-          jQuery('body').append('<p>This is inserted using a script tag with content.</p>')
-        </script>
-
-        <script type="application/ruby">
-          s = "This is inserted using a script tag with content using $ instead of jQuery."
-          $('body').append('<p>'+s+'</p>')
-          h = {}
-          h[:test] = 'Yay!'
-          $('body').append("<p>#{h}</p>")
-        </script>
-
-</body></html>
\ No newline at end of file
diff --git a/public/ruby/opal_shims.rb b/public/ruby/opal_shims.rb
deleted file mode 100644
index 969d446..0000000
--- a/public/ruby/opal_shims.rb
+++ /dev/null
@@ -1,3 +0,0 @@
-def jQuery( selector )
-  Element.find( selector )
-end
\ No newline at end of file
diff --git a/public/ruby/webruby_shims.rb b/public/ruby/webruby_shims.rb
deleted file mode 100644
index 55e4f0e..0000000
--- a/public/ruby/webruby_shims.rb
+++ /dev/null
@@ -1,18 +0,0 @@
-# get window object
-$window = MrubyJs.get_root_object
-
-# Small shim to proxy direct calls via the .call method ...
-class JS_Object
-	def initialize( obj )
-		@obj = obj
-	end
-
-	def method_missing( sym, *args )
-	  @obj.call( sym, *args )
-	end
-end
-
-# Global shim to simulate this as window context in Ruby as well ...
-def method_missing( sym, *args )
-  JS_Object.new( $window.call( sym, *args ) )
-end
\ No newline at end of file
diff --git a/public/webruby.html b/public/webruby.html
deleted file mode 100644
index f647ac4..0000000
--- a/public/webruby.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<!-- saved from url=(0036)file:///Users/pixie/Desktop/dnd.html -->
-<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title>Ruby.js</title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-    </head>
-    <body style="">
-      	<div id="foo" class="drag" draggable="true"></div>
-    		<div id="bar1" class="target before_animation"></div>
-    		<div id="bar2" class="target"></div>
-
-        <script type="application/javascript" src="js/jquery.min.js"></script>
-        <script type="application/javascript" src="js/webruby.js"></script>
-        <script type="application/javascript" src="js/webruby_shims.js"></script>
-
-
-
-        <script type="application/ruby" src="ruby/webruby_shims.rb"></script>
-        <script type="application/ruby" src="ruby/test.rb"></script>
-
-        <script type="application/ruby">
-        	jQuery('body').append('<p>This is inserted using a script tag with content.</p>')
-        </script>
-
-        <script type="application/ruby">
-          s = "This is inserted using a script tag with content using $ instead of jQuery."
-        	$('body').append('<p>'+s+'</p>')
-        	h = {}
-        	h[:test] = 'Yay!'
-        	$('body').append("<p>#{h}</p>")
-        </script>
-
-</body></html>
\ No newline at end of file
diff --git a/public/ruby/test.rb b/rb/test.rb
similarity index 84%
rename from public/ruby/test.rb
rename to rb/test.rb
index 869f413..6b9f7da 100644
--- a/public/ruby/test.rb
+++ b/rb/test.rb
@@ -1,5 +1,5 @@
 # get jQuery selected object
-body = jQuery('body')
+body = jQuery('article')
 
 # appends <p> tag
 body.append('<p>This is inserted using a script tag with the src attribute set.</p>')
\ No newline at end of file
diff --git a/webruby/index.html b/webruby/index.html
new file mode 100644
index 0000000..d965dbe
--- /dev/null
+++ b/webruby/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<title>Ruby.js (Webruby)</title>
+		<meta name="description" content="">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
+    <link href="/css/main.css" rel="stylesheet" type="text/css">
+    <link href="/css/highlight.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <h1 class="hero">webruby</h1>
+    <article>
+      <a href="https://github.com/my-codeworks/ruby-in-the-browser">
+        <img style="position: absolute; top: -6px; right: -6px; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+      </a>
+      <p>Each example following on this page are read in script tags on this page, use view source to see the exact setup.</p>
+      <p>A small script, <code>js/loader.js</code>, to read in any script tags on the page with type <code>application/ruby</code>. Another small shim, <code>js/shims.js</code>, normalizes the way the libraries execute ruby code. The source is pre processed to replace any <code>$(</code> to <code>jQuery(</code>, to keep the formatting consistent with the javascript syntax.</p>
+      <p>The scripts are read in and printed into a <code>pre &gt; code</code> block and then evaluated and the result printed below.</p>
+    </article>
+  	<script type="application/javascript" src="/js/jquery.min.js"></script>
+    <script type="application/javascript" src="/js/highlight.js"></script>
+    <script type="application/javascript" src="/js/loader.js"></script>
+    <script type="application/javascript" src="/webruby/js/webruby.js"></script>
+    <script type="application/javascript" src="/webruby/js/shims.js"></script>
+
+    <script type="application/ruby">
+      # get window object
+      $window = MrubyJs.get_root_object
+
+      # Small shim to proxy direct calls via the .call method ...
+      class JS_Object
+        def initialize( obj )
+          @obj = obj
+        end
+
+        def method_missing( sym, *args )
+          @obj.call( sym, *args )
+        end
+      end
+
+      # Global shim to simulate this as window context in Ruby as well ...
+      def method_missing( sym, *args )
+        JS_Object.new( $window.call( sym, *args ) )
+      end
+    </script>
+
+    <script type="application/ruby" src="/rb/test.rb"></script>
+
+    <script type="application/ruby">
+    	jQuery('article').append('<p>This is inserted using a script tag with content.</p>')
+    </script>
+
+    <script type="application/ruby">
+      s = "This is inserted using a script tag with content using $ instead of jQuery."
+    	$('article').append('<p>'+s+'</p>')
+    	h = {}
+    	h[:test] = 'Yay!'
+    	$('article').append("<p>#{h}</p>")
+    </script>
+
+    <script>hljs.initHighlightingOnLoad();</script>
+	</body>
+</html>
diff --git a/webruby/js/shims.js b/webruby/js/shims.js
new file mode 100644
index 0000000..9c4c3e7
--- /dev/null
+++ b/webruby/js/shims.js
@@ -0,0 +1,8 @@
+var Ruby;
+
+Ruby = WEBRUBY();
+Ruby.run();
+
+function execute( src ){
+	Ruby.run_source( src );
+}
\ No newline at end of file
diff --git a/public/js/webruby.js b/webruby/js/webruby.js
similarity index 100%
rename from public/js/webruby.js
rename to webruby/js/webruby.js
