Fix example.

Author: antonmedv

_layouts/default.liquid

@@ -47,7 +47,7 @@
         <svg class="icon-facebook" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M9.614 18H.994A.993.993 0 0 1 0 17.006V.993C0 .445.445 0 .993 0h16.014c.548 0 .993.445.993.993v16.013a.994.994 0 0 1-.993.994H12.42v-6.97h2.34l.35-2.717h-2.69V6.578c0-.786.218-1.322 1.346-1.322h1.438v-2.43a19.23 19.23 0 0 0-2.096-.107c-2.074 0-3.494 1.266-3.494 3.59v2.004H7.27v2.716h2.345V18z" fill="#FFF" fill-rule="evenodd"/></svg>
         Share
     </a>
-    <a class="share" href="https://twitter.com/intent/tweet?url=http://monkberry.js.org&text=Monkberry%20–%20a%20JavaScript%20library%20for%20building%20web%20user%20interfaces" target="_blank">
+    <a class="share" href="https://twitter.com/intent/tweet?text=Monkberry%20–%20a%20JavaScript%20library%20for%20building%20web%20user%20interfaces&url=http://monkberry.js.org" target="_blank">
         <svg class="icon-twitter" width="18" height="15" viewBox="0 0 18 15" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M18 1.776a7.213 7.213 0 0 1-2.12.596A3.778 3.778 0 0 0 17.503.277a7.273 7.273 0 0 1-2.346.918A3.642 3.642 0 0 0 12.462 0C10.424 0 8.77 1.696 8.77 3.787c0 .296.032.585.095.862-3.069-.158-5.79-1.664-7.612-3.958a3.856 3.856 0 0 0-.5 1.906c0 1.313.652 2.472 1.643 3.152a3.626 3.626 0 0 1-1.673-.473v.047c0 1.835 1.273 3.366 2.963 3.713-.31.089-.636.133-.973.133-.238 0-.47-.023-.695-.067.47 1.504 1.833 2.599 3.45 2.628A7.292 7.292 0 0 1 0 13.3 10.282 10.282 0 0 0 5.66 15c6.794 0 10.508-5.77 10.508-10.774 0-.164-.003-.329-.01-.49A7.58 7.58 0 0 0 18 1.776" fill="#FFF" fill-rule="evenodd"/></svg>
         Tweet
     </a>

dist/bundle.css

@@ -34,25 +34,21 @@ <h5>Features</h5>
     <div class="example">
         <div class="block">
             <div class="block-name">Template</div>
-            <pre><code class="language-monk">{% raw %}&lt;div data-monkberry=&quot;todos&quot;&gt;
-  &lt;ol&gt;
-    {% for i, todo of todos %}
-      &lt;li&gt;
-        &lt;input type=&quot;checkbox&quot; checked=&quot;{{ todo.complete }}&quot;
-               data-index=&quot;{{ i }}&quot;&gt;
-        {% if todo.complete %}
-          &lt;del&gt;{{ todo.text }}&lt;/del&gt;
-        {% else %}
-          &lt;em&gt;{{ todo.text }}&lt;/em&gt;
-        {% endif %}
-      &lt;/li&gt;
-    {% endfor %}
-  &lt;/ol&gt;
-  &lt;form&gt;
-    &lt;input type=&quot;text&quot;&gt;
-    &lt;button type=&quot;submit&quot;&gt;Add #{{ todos.length }}&lt;/button&gt;
-  &lt;/form&gt;
-&lt;/div&gt;{% endraw %}</code></pre>
+            <pre><code class="language-monk">{% raw %}&lt;ol&gt;
+  {% for todo of todos %}
+    &lt;li&gt;
+      {% if todo.complete %}
+        &lt;del&gt;{{ todo.text }}&lt;/del&gt;
+      {% else %}
+        &lt;em&gt;{{ todo.text }}&lt;/em&gt;
+      {% endif %}
+    &lt;/li&gt;
+  {% endfor %}
+&lt;/ol&gt;
+&lt;form&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;button type=&quot;submit&quot;&gt;Add #{{ todos.length + 1 }}&lt;/button&gt;
+&lt;/form&gt;{% endraw %}</code></pre>
         </div>
         <div class="block">
             <div class="block-name">JavaScript</div>
@@ -65,21 +61,16 @@ <h5>Features</h5>
 };
 
 const view = Monkberry.render(Template, document.body);
-const input = view.querySelector('input');
-
 view.update(state);
 
 view.on('submit', 'form', function (event) {
   event.preventDefault();
+  const input = view.querySelector('input');
+
   state.todos.push({text: input.value, complete: false});
   view.update(state);
-  input.value = '';
-});
 
-view.on('click', '[data-index]', function (event) {
-  var i = event.target.dataset.index;
-  state.todos[i].complete = !state.todos[i].complete;
-  view.update(state);
+  input.value = '';
 });{% endraw %}</code></pre>
         </div>
         <div class="block -result">

dist/bundle.js

@@ -13,20 +13,15 @@ export default function (root) {
   };
 
   const view = Monkberry.render(Template, root);
-  const input = view.querySelector('input');
-
   view.update(state);
 
   view.on('submit', 'form', function (event) {
     event.preventDefault();
+    const input = view.querySelector('input');
+    
     state.todos.push({text: input.value, complete: false});
     view.update(state);
+    
     input.value = '';
   });
-
-  view.on('click', '[data-index]', function (event) {
-    var i = event.target.dataset.index;
-    state.todos[i].complete = !state.todos[i].complete;
-    view.update(state);
-  });
 }

index.html

@@ -1,7 +1,6 @@
 <ol>
     {% for i, todo of todos %}
         <li>
-            <input type="checkbox" checked="{{ todo.complete }}" data-index="{{ i }}">
             {% if todo.complete %}
                 <del>{{ todo.text }}</del>
             {% else %}
@@ -12,5 +11,5 @@
 </ol>
 <form>
     <input type="text">
-    <button type="submit">Add #{{ todos.length }}</button>
+    <button type="submit">Add #{{ todos.length + 1 }}</button>
 </form>

src/example/example.js

@@ -28,6 +28,14 @@ module.exports = function(hljs) {
     ]
   };
 
+  var OF = {
+    beginKeywords: 'of',
+    keywords: {
+      keyword: 'of'
+    },
+    relevance: 0
+  };
+
   var TAGS = 'for endfor if endif else import unsafe';
 
   return {
@@ -46,7 +54,7 @@ module.exports = function(hljs) {
             keywords: TAGS,
             starts: {
               endsWithParent: true,
-              contains: [FILTER, FUNCTIONS, hljs.QUOTE_STRING_MODE],
+              contains: [OF, FILTER, FUNCTIONS, hljs.QUOTE_STRING_MODE],
               relevance: 0
             }
           }

src/example/template.monk

@@ -136,7 +136,7 @@
       margin-bottom: -90px;
 
       ol {
-        list-style: none;
+        list-style: decimal inside;
         padding: 0;
         margin: 0;