<div id="search">
  <input type="search" :value="search" @input="update" placeholder="Digite seu termo de busca...">
  <ul>
    <li v-for="post in filteredPosts" v-key="post.url">
      <time :datetime="post.dateXml">${post.date}</time>
      &mdash; <a :href="post.url">${post.title}</a>
    </li>
  </ul>
  <p v-if="!filteredPosts.length">Nenhum resultado encontrado.</p>
</div>

body {
  font-family: -system-ui, system-ui, sans-serif;
}

a[href] {
  color: royalblue;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline rgba(royalblue, .7);
  }
}

ul {
  list-style: none;
  margin: 1em 0;
  padding: 0;
  
  & > li {
    margin-left: 0;
  }
}

time {
  color: #bbb;
}

input {
  padding: 0.5em;
  border: 1px solid #ddd;
  border-radius: 3px;
  height: 2.25em;
  
  &:focus {
    outline: none;
    border-color: royalblue;
  }
}

new Vue({
  el: '#search',
  delimiters: ['${', '}'],
  data: function () {
    return {
      search: '',
      posts: [{
          date: "01/11/2018",
          dateXml: "2018-11-01T00:00:00-03:00",
          title: 'Busca no Jekyll usando Vue.js',
          url: '/busca-no-jekyll-usando-vuejs/',
          category: 'js'
        }, {
          date: "27/09/2018",
          dateXml: "2018-09-27T17:44:54-03:00",
          title: 'Implementando uma Pilha',
          url: '/ed/estruturas/pilha/',
          category: 'ed'
        }, {
          date: "25/09/2018",
          dateXml: "2018-09-25T00:00:00-03:00",
          title: 'Implementando uma Lista Simplesmente Ligada',
          url: '/ed-lista-ligada/',
          category: 'ed'
        }, {
          date: "23/09/2018",
          dateXml: "2018-09-23T00:00:00-03:00",
          title: 'O que Fune wo Amu nos ensina',
          url: '/o-que-fune-wo-amu-nos-ensina/',
          category: 'filme'
        }, {
          date: "19/09/2018",
          dateXml: "2018-09-19T00:00:00-03:00",
          title: 'Utilizando o Karaoke Templater',
          url: '/utilizando-o-karaoke-templater/',
          category: 'karaoke'
      }]
    }
  },
  computed: {
    filteredPosts: function () {
      if (this.search === '')
          return this.posts;
      return this.posts
        .filter(x => {
          const titleLower = x.title.toLowerCase();
          const categoryLower = x.category.toLowerCase();
          const searchLower = this.search.toLowerCase();
          return titleLower.includes(searchLower) ||
            categoryLower.includes(searchLower);
        });
    }
  },
  methods: {
    update: _.debounce(function (e) {
      this.search = e.target.value;
    }, 300)
  }
});