From 878d64cd1bdf6e1b0915a2923510748d6c34305b Mon Sep 17 00:00:00 2001
From: Kabir Shah <iamkbrsh@gmail.com>
Date: Wed, 4 Jul 2018 00:24:46 -0700
Subject: [PATCH] update website

---
 web/css/styles.css      |  1 +
 web/index.html          | 25 +++++++++++--------------
 web/js/index.js         |  5 +++++
 web/soldfile.js         |  4 ++--
 web/template/index.html | 25 +++++++++++--------------
 5 files changed, 30 insertions(+), 30 deletions(-)
 create mode 100644 web/js/index.js

diff --git a/web/css/styles.css b/web/css/styles.css
index 29d764be..82ae1e8f 100644
--- a/web/css/styles.css
+++ b/web/css/styles.css
@@ -21,6 +21,7 @@ pre code {
 	background: #1f292e;
 	border: 1px solid #343434;
 	color: #b3c3cc;
+	tab-size: 3;
 }
 
 pre code::after {
diff --git a/web/index.html b/web/index.html
index 32eced19..2bff42e2 100644
--- a/web/index.html
+++ b/web/index.html
@@ -35,24 +35,19 @@ <h1>The minimal & fast user interface library</h1>
 			</div>
 		</section>
 
-		<section id="feature-minimal" class="container feature">
-			<h1>Minimal</h1>
-			<p>Moon instances have two parts — a view and data. The view is responsible for displaying the data which can contain actions to update the view. The view is defined using the <b>Moon View Language</b> — an intuitive template language allowing for powerful interpolation and simple logic. The data is a JavaScript object that can contain properties of any type along with actions — functions that can change the data to update the view.</p>
+		<section id="feature-minimal" class="container feature"> <h1>Minimal</h1>
+			<p>Moon instances are composed of data and a view to display the data. Actions performed through the view update the data along with the view. The view is defined with the Moon view language — a minimalistic template language allowing powerful interpolation and logic. The data is defined with a JavaScript object containing values of any type.</p>
 			<div class="row">
 				<div class="col">
-					<pre><code lang="mvl"><span class="red">&lt;p</span><span class="red">&gt;</span>Count: { count }<span class="red">&lt;/p</span><span class="red">&gt;</span>
-<span class="red">&lt;button</span> <span class="orange">@click</span>={ <span class="blue">increment</span>() }<span class="red">&gt;</span>
-   Increment
-<span class="red">&lt;/button</span><span class="red">&gt;</span></code></pre>
-					<pre><code lang="js">{
-   count: <span class="orange">0</span>,
-   <span class="blue">increment</span>() {
-      <span class="orange">this</span>.<span class="blue">update</span>(<span class="green">&quot;count&quot;</span>, <span class="orange">this</span>.data.count + <span class="orange">1</span>);
-   }
-}</code></pre>
+					<pre><code lang="mvl"><span class="red">&lt;h1</span><span class="red">&gt;</span>{text}<span class="red">&lt;/h1</span><span class="red">&gt;</span>
+<span class="red">&lt;input</span> <span class="orange">type</span>=<span class="green">&quot;text&quot;</span> <span class="orange">@bind</span>={text} <span class="red">/&gt;</span></code></pre>
+					<pre><code lang="js"><span class="blue">Moon</span>({
+	root: <span class="green">&quot;#root&quot;</span>,
+	text: <span class="green">&quot;Hello Moon!&quot;</span>
+});</code></pre>
 				</div>
 				<div class="col">
-
+					<div id="example"></div>
 				</div>
 			</div>
 		</section>
@@ -74,5 +69,7 @@ <h1>Fast</h1>
 				</div>
 			</div>
 		</section>
+		<script src="../dist/moon.min.js"></script>
+		<script src="./js/index.js"></script>
 	</body>
 </html>
diff --git a/web/js/index.js b/web/js/index.js
new file mode 100644
index 00000000..f10a7974
--- /dev/null
+++ b/web/js/index.js
@@ -0,0 +1,5 @@
+Moon({
+	root: "#example",
+	view: "<h1>{text}</h1><input type='text' @bind={text}/>",
+	text: "Hello Moon!"
+});
diff --git a/web/soldfile.js b/web/soldfile.js
index 43d60a32..ef230c93 100644
--- a/web/soldfile.js
+++ b/web/soldfile.js
@@ -19,8 +19,6 @@ const escapeMap = {
 };
 
 const highlight = function(compiled) {
-	compiled = compiled.replace(STR_RE, "<span class=\"green\">$1$2$1</span>");
-
 	compiled = compiled.replace(HTML_COMMENT_RE, "<span class=\"gray\">$1</span>");
 	compiled = compiled.replace(HTML_TAG_RE, function(match, start, content, end) {
 		if (content === undefined) {
@@ -52,6 +50,8 @@ const highlight = function(compiled) {
 		return "<span class=\"blue\">" + name + "</span>(";
 	});
 
+	compiled = compiled.replace(STR_RE, "<span class=\"green\">$1$2$1</span>");
+
 	return compiled;
 }
 
diff --git a/web/template/index.html b/web/template/index.html
index 32eced19..2bff42e2 100644
--- a/web/template/index.html
+++ b/web/template/index.html
@@ -35,24 +35,19 @@ <h1>The minimal & fast user interface library</h1>
 			</div>
 		</section>
 
-		<section id="feature-minimal" class="container feature">
-			<h1>Minimal</h1>
-			<p>Moon instances have two parts — a view and data. The view is responsible for displaying the data which can contain actions to update the view. The view is defined using the <b>Moon View Language</b> — an intuitive template language allowing for powerful interpolation and simple logic. The data is a JavaScript object that can contain properties of any type along with actions — functions that can change the data to update the view.</p>
+		<section id="feature-minimal" class="container feature"> <h1>Minimal</h1>
+			<p>Moon instances are composed of data and a view to display the data. Actions performed through the view update the data along with the view. The view is defined with the Moon view language — a minimalistic template language allowing powerful interpolation and logic. The data is defined with a JavaScript object containing values of any type.</p>
 			<div class="row">
 				<div class="col">
-					<pre><code lang="mvl"><span class="red">&lt;p</span><span class="red">&gt;</span>Count: { count }<span class="red">&lt;/p</span><span class="red">&gt;</span>
-<span class="red">&lt;button</span> <span class="orange">@click</span>={ <span class="blue">increment</span>() }<span class="red">&gt;</span>
-   Increment
-<span class="red">&lt;/button</span><span class="red">&gt;</span></code></pre>
-					<pre><code lang="js">{
-   count: <span class="orange">0</span>,
-   <span class="blue">increment</span>() {
-      <span class="orange">this</span>.<span class="blue">update</span>(<span class="green">&quot;count&quot;</span>, <span class="orange">this</span>.data.count + <span class="orange">1</span>);
-   }
-}</code></pre>
+					<pre><code lang="mvl"><span class="red">&lt;h1</span><span class="red">&gt;</span>{text}<span class="red">&lt;/h1</span><span class="red">&gt;</span>
+<span class="red">&lt;input</span> <span class="orange">type</span>=<span class="green">&quot;text&quot;</span> <span class="orange">@bind</span>={text} <span class="red">/&gt;</span></code></pre>
+					<pre><code lang="js"><span class="blue">Moon</span>({
+	root: <span class="green">&quot;#root&quot;</span>,
+	text: <span class="green">&quot;Hello Moon!&quot;</span>
+});</code></pre>
 				</div>
 				<div class="col">
-
+					<div id="example"></div>
 				</div>
 			</div>
 		</section>
@@ -74,5 +69,7 @@ <h1>Fast</h1>
 				</div>
 			</div>
 		</section>
+		<script src="../dist/moon.min.js"></script>
+		<script src="./js/index.js"></script>
 	</body>
 </html>