Vue.component('post-list', {
    template: `
    <div>{{ posts }} </div>
    <div class="post" v-for="post in posts" :key="post.date">
        <h2>{{ post.name }}</h2>
        <div class="info">Date: {{ post.date }}</div>
    </div>
    `,
    data: function() {
        return {
            posts: [
                {
                    name: "Hello World",
                    filename: "hello-world",
                    date: "2016-12-1"
                }
            ]
        };
    }
})

// base = '/blog/'
const base = document.querySelector('base').getAttribute('href');

const app = new Vue({
    el: '#content',
    data: function() {
        return {current_path: window.location.pathname};
    },
    computed:{
        view_component: function() {
            var path = this.current_path.replace(base, '');
            if(!path.startsWith('/')) {
                path = '/' + path;
            }
            const route_re = new RegExp('(/[^/]*).*');
            const route_name = route_re.exec(path)[1];
            return route_name;
        }
    },
    render: function(h) {
        if(this.view_component == "/") {
            return h('post-list');
        } else {
            return h('h2', 'Not Found');
        }
    }

});

window.addEventListener('popstate', function(){
  app.current_path = window.location.pathname
});
// vim:ai:et:sta:ts=4:sts=4:sw=4