add blog layout

Author: yyx990803

perf/todomvc-benchmark/vue/bower_components/vue/vue.js

@@ -4,6 +4,7 @@
  License: MIT
 */
 ;(function(){
+'use strict';
 
 /**
  * Require the given path.
@@ -818,9 +819,12 @@ var utils = module.exports = {
         if (hasClassList) {
             el.classList.remove(cls)
         } else {
-            el.className = (' ' + el.className + ' ')
-                .replace(' ' + cls + ' ', '')
-                .trim()
+            var cur = ' ' + el.className + ' ',
+                tar = ' ' + cls + ' '
+            while (cur.indexOf(tar) >= 0) {
+                cur = cur.replace(tar, ' ')
+            }
+            el.className = cur.trim()
         }
     }
 }
@@ -3493,10 +3497,10 @@ require.alias("component-emitter/index.js", "vue/deps/emitter/index.js");
 require.alias("component-emitter/index.js", "emitter/index.js");
 
 require.alias("vue/src/main.js", "vue/index.js");
-if (typeof exports == "object") {
-  module.exports = require("vue");
-} else if (typeof define == "function" && define.amd) {
-  define(function(){ return require("vue"); });
+if (typeof exports == 'object') {
+  module.exports = require('vue');
+} else if (typeof define == 'function' && define.amd) {
+  define(function(){ return require('vue'); });
 } else {
-  this["Vue"] = require("vue");
+  window['Vue'] = require('vue');
 }})();

source/_posts/why-you-should-give-vuejs-a-spin.md

@@ -0,0 +1,48 @@
+title: Why You Should Give Vue.js a Spin
+date: 2014-02-07 22:34:12
+---
+
+## Simplicity
+
+## Expressiveness
+
+## Composability
+
+## Flexibility
+
+## Performance
+
+## Comparison with Other Libraries
+
+I think the only serious users right now are us here at Google Creative Lab, but hey, I just launched it to public this week! Speed is actually not the major selling point of Vue - simplicity is. Also, Vue is only an interface library, not a framework. For larger projects it's intended to be used with a modular build system e.g. Component or Browserify. That said, here's why you'd want to give Vue a shot over several common frameworks:
+
+### Angular
+
+If you like everything about Angular you should definitely stick with it. But it's not perfect for everyone. Vue.js tries to provide the benefits of MVVM data binding while being overall much simpler, so you don't have to bend your mind around $digest vs. $apply, preLink vs. postLink, or how dependency injection works. The core API is just a constructor that can be extended with a bunch of options. Vue is also much less opinionated, giving you the flexibility to use it as the view layer in a custom front-end stack.
+
+### Backbone
+
+Backbone has a simple and friendly API, but it has no data binding and your View will be cluttered with lots of DOM manipulation. You'd have to resort to third party libs such as KnockBack or Rivets.js to achieve that, then it suddenly requires a lot of boilerplate and becomes not that simple. Also, hard dependency on jQuery... which you might not need if you are targeting modern browsers.
+
+### Knockout
+
+In modern browsers, using ES5 getter/setters gets rid of Knockout's awkward syntax of initializing everything with ko.observable() and getting/setting as invoking functions. Vue.js also provides a declarative way to nest and compose your ViewModels, which can be tricky in Knockout.
+
+### Ember
+
+Ember is philosophically almost the exact opposite of Vue: heavy, opnionated, all-encompassing, convention over configuration... if you are into that then Vue is probably not for you.
+
+### React
+
+React is probably the closest to Vue among all these libs in terms of areas covered and position in the stack. It is a great lib, but I'm not a fan of constructing all the HTML in JavaScript - I prefer to write actual HTML and work with the actual DOM, which is what Vue does. Since I'm also a designer, I find Vue's approach makes it easier to work with CSS. Finally, in React the DOM is almost completely abstracted away, but in Vue you still have the flexibility to reach down in custom directives.
+Take note these are my personal opinions and I'm most likely biased, but you are more than welcome to do your own research and see if you agree with me.
+
+### Ractive
+
+Very very similar. But Vue.js allows you to easily extend the vocabulary with custom directives and filters, a feature which Ractive doesn't seem to offer. Since both libraries 
+
+## Other Stats
+
+### Performance
+
+### Size

source/api/directives.md

@@ -3,7 +3,9 @@ type: api
 order: 6
 ---
 
-# {{title}}
+## Data Binding Directives
+
+> These directives can bind themselves to a property on the ViewModel, or to an expression which is evaluated in the context of the ViewModel. When the value of the underlying property or expression changes, the `update()` function of these directives will be called asynchronously on next tick.
 
 ### v-text
 
@@ -61,8 +63,9 @@ Create a child ViewModel for every item in the binding Array. These child ViewMo
 ### v-on
 
 - This directive requires exactly one argument.
+- This directive requires the value to be a Function or an expression.
 
-Attaches an event listener to the element. The event type is denoted by the argument. For more details see [Listening for Events](/guide/events.html).
+Attaches an event listener to the element. The event type is denoted by the argument. It is also the only directive that can be used with the `key` filter. For more details see [Listening for Events](/guide/events.html).
 
 ### v-model
 
@@ -76,15 +79,10 @@ Create a two-way binding on a form or editable element. Data is synced on every
 
 Conditionally insert / remove the element based on the truthy-ness of the binding value.
 
-### v-component
-
-- This directive takes a registered asset id.
-
-Compile this element as a child ViewModel with a registered component constructor. This can be used with `v-with` to inehrit data from the parent. For more details see [Composing ViewModels](/guide/composition.html).
-
 ### v-with
 
 - This directive requires the value to be an Object or falsy.
+- You cannot use expressions with this directive.
 
 Compile this element as a child ViewModel, using the binding value as the `data` option. Inside the template you can directly access properties on the binding value. This can be used in combination with `v-component`.
 
@@ -107,6 +105,16 @@ You can simplify the template like this:
 </div>
 ```
 
+## Literal Directives
+
+> Literal directives treat their attribute value as a plain string; they do not attempt to bind themselves to anything. All they do is executing the `bind()` function with the string value once.
+
+### v-component
+
+- This directive takes a registered asset id.
+
+Compile this element as a child ViewModel with a registered component constructor. This can be used with `v-with` to inehrit data from the parent. For more details see [Composing ViewModels](/guide/composition.html).
+
 ### v-component-id
 
 - This directive takes a registered asset id.

source/api/filters.md

@@ -3,8 +3,6 @@ type: api
 order: 7
 ---
 
-# {{title}}
-
 ### capitalize
 
 *'abc' => 'Abc'*

source/api/global-methods.md

@@ -3,8 +3,6 @@ type: api
 order: 5
 ---
 
-# {{title}}
-
 ### Vue.extend( options )
 
 - **options** `Object`

source/api/index.md

@@ -3,8 +3,6 @@ type: api
 order: 1
 ---
 
-# {{title}}
-
 The `Vue` Class is the core of vue.js. It is a constructor that allows you to create ViewModel instances. Creating a ViewModel instance is straightforward:
 
 ``` js

source/api/instance-methods.md

@@ -3,8 +3,6 @@ type: api
 order: 4
 ---
 
-# {{title}}
-
 ## Data Changes
 
 ### vm.$watch( keypath, callback )

source/api/instance-properties.md

@@ -3,8 +3,6 @@ type: api
 order: 3
 ---
 
-# {{title}}
-
 ### vm.$el
 
 - **Type:** `HTMLElement`

source/api/instantiation-options.md

@@ -3,8 +3,6 @@ type: api
 order: 2
 ---
 
-# {{title}}
-
 ## Data & Logic
 
 ### data

source/blog/index.html

@@ -0,0 +1,2 @@
+blog_index: true
+---

source/examples/component.md

@@ -3,8 +3,6 @@ type: examples
 order: 4
 ---
 
-# Vue + Component Example
-
 <img style="width:100%;max-width:737px" src="/images/component-example.png">
 
 > This is a basic example of how to structure a modular Vue.js application using Component as the build system. For more details on this topic, see [Building Larger Apps](/guide/application.html).

source/examples/firebase.md

@@ -3,8 +3,6 @@ type: examples
 order: 2
 ---
 
-# Firebase + Validation Example
-
 > This example uses [Firebase](https://www.firebase.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using Vue.js filters and triggers CSS transitions when adding/removing items.
 
 <iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/2EN3Z/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

source/examples/index.md

@@ -3,8 +3,6 @@ type: examples
 order: 1
 ---
 
-# GitHub Commits Example
-
 > This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.
 
 <iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/KupQL/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

source/examples/todomvc.md

@@ -3,8 +3,6 @@ type: examples
 order: 3
 ---
 
-# TodoMVC Example
-
 <iframe width="100%" height="500" src="/perf/todomvc-benchmark/vue/index.html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 > This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines). It is also [one of the fastest implementations](/perf/).

source/guide/application.md

@@ -3,8 +3,6 @@ type: guide
 order: 11
 ---
 
-# {{title}}
-
 Vue.js is designed to be as flexible as possible - it's just an interface library that doesn't enforce any architectural decisions. While this can be very useful for rapid prototyping, it could be a challenge for those with less experience to build larger scale applications with it. The following is an opinionated perspective on how to organize larger projects when using Vue.js.
 
 ## Build with Component

source/guide/composition.md

@@ -3,8 +3,6 @@ type: guide
 order: 10
 ---
 
-# {{title}}
-
 ## Registering a Component
 
 Vue.js allows you to treat registered ViewModel constructors as reusable components. To register a component, use the global `Vue.component()` method:

source/guide/computed.md

@@ -3,8 +3,6 @@ type: guide
 order: 8
 ---
 
-# {{title}}
-
 Vue.js' inline expressions are very convenient, but the best use cases for them are simple boolean operations or string concatenations. For more complicated logic, you should use **computed properties**.
 
 In Vue.js, you define computed properties with the `computed` option:

source/guide/directives.md

@@ -3,8 +3,6 @@ type: guide
 order: 3
 ---
 
-# {{title}}
-
 ## Synopsis
 
 If you have not used AngularJS before, you probably don't know what a directive is. Essentially, a directive is some special token in the markup that tells the library to do something to a DOM element. In Vue.js, the concept of directive is drastically simpler than that in Angular. A Vue.js directive can only appear in the form of a prefixed HTML attribute that takes the following format:

source/guide/events.md

@@ -3,8 +3,6 @@ type: guide
 order: 6
 ---
 
-# {{title}}
-
 You can use the `v-on` directive to bind event listeners to DOM events. It can be bound to either an event handler function (without the invocation parentheses) or an inline expression. If a handler function is provided, it will get the original DOM event as the argument. The event also comes with an extra property: `targetVM`, pointing to the particular ViewModel the event was triggered on:
 
 ``` html

source/guide/filters.md

@@ -3,8 +3,6 @@ type: guide
 order: 4
 ---
 
-# {{title}}
-
 ## Synopsis
 
 A Vue.js filter is essentially a function that takes a value, processes it, and then returns the processed value. In the markup it is denoted by a single pipe (`|`) and can be followed by one or more arguments:

source/guide/forms.md

@@ -3,8 +3,6 @@ type: guide
 order: 7
 ---
 
-# {{title}}
-
 You can use the `v-model` directive to create two-way data bindings on form input elements and elements with `contenteditable` attribute. It automatically picks the correct way to update the element based on the input type.
 
 **Example**

source/guide/index.md

@@ -3,8 +3,6 @@ type: guide
 order: 2
 ---
 
-# {{title}}
-
 ## Introduction
 
 Vue.js is a library for building interactive web interfaces.
@@ -69,7 +67,7 @@ You can also use mustache-style bindings, both in text and in attributes. They a
 <div id="person-&#123;&#123;id&#125;&#125;">Hello &#123;&#123;name&#125;&#125;!</div>
 ```
 
-In addition, you can use triple mustaches for unescaped HTML, which translate  to `v-html` internally. However, since this can open up window for potential XSS attacks, it is suggested that you only use triple mustaches when you are certain about the security of the data source.
+<p class="tip">You can also use triple mustaches for unescaped HTML, which translate  to `v-html` internally. However, since this can open up window for potential XSS attacks, it is suggested that you only use triple mustaches when you are certain about the security of the data source.</p>
 
 ### Filters
 

source/guide/installation.md

@@ -2,13 +2,11 @@ title: Installation
 type: guide
 order: 1
 vue_version: 0.8.3
-dev_size: 91.37
-min_size: 32.20
-gz_size: 11.00
+dev_size: 91.49
+min_size: 32.25
+gz_size: 11.02
 ---
 
-# {{title}}
-
 > **Compatibility Note:** Vue.js does not support IE8 and below.
 
 ## Standalone

source/guide/list.md

@@ -3,8 +3,6 @@ type: guide
 order: 5
 ---
 
-# {{title}}
-
 You can use the `v-repeat` directive to repeat a template element based on an Array of objects on the ViewModel. For every object in the Array, the directive will create a child ViewModel using that object as the data object. On and inside the template element you have access to properties of both the child ViewModel and the parent ViewModel. In addition, you also have access to the current child ViewModel's `$index` property, which is the index of its data object in the Array.
 
 **Example:**

source/guide/transitions.md

@@ -3,8 +3,6 @@ type: guide
 order: 9
 ---
 
-# {{title}}
-
 You can add transition effects when elements are inserted into or removed from the DOM using the `v-transition` directive. There are two types of transitions: CSS-based and JavaScript-based. All Vue.js transitions are triggered only if the DOM manipulation was applied by Vue.js, either through built-in directives, e.g. `v-if`, or through ViewModel instance methods, e.g. `vm.$appendTo()`.
 
 ## CSS Transitions

themes/vue/layout/layout.ejs

@@ -21,7 +21,11 @@
             <%- partial('partials/header') %>
         <% } %>
         <div id="main">
+        <% if (page.blog_index) { %>
+            <%- partial('partials/blog') %>
+        <% } else { %>
             <%- body %>
+        <% } %>
         </div>
         <script src="/js/common.js"></script>
     </body>

themes/vue/layout/page.ejs

@@ -2,5 +2,6 @@
     <%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
 <% } %>
 <div class="content <%- page.type ? page.type + ' with-sidebar' : '' %>">
+    <h1><%- page.title %><%- page.type === 'examples' ? ' Example' : '' %></h1>
     <%- page.content %>
 </div>

themes/vue/layout/partials/blog.ejs

@@ -0,0 +1,7 @@
+<% site.posts.sort('date', -1).each(function (post) { %>
+    <div class="content">
+        <h4><%- post.date.format('MMM D[,] YYYY') %></h3>
+        <h1><a href="/<%- post.path %>"><%- post.title %></a></h2>
+        <div><%- post.content %></div>
+    </div>
+<% }) %>