{"componentChunkName":"component---src-templates-single-template-tsx","path":"/fazendo-sistema-de-busca-no-jekyll-com-angularjs","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"

Por alguns meses eu usei o plugin Simple Jekyll Search que funcionou muito bem no meu blog, mas agora ele foi totalmente feito em angular e ficou uma maravilha.

\n

Hoje vou mostrar aqui como foi eu criei essa façanha, é bem simples e sem segredo nenhum, vem comigo.

\n

Primeiro obstáculo: Liquid x Angular

\n

Você deve ter notado que o Jekyll, assim como o Angular, usa 2 chaves em sua sintaxe, causando assim um conflito na hora de compilar o jekyll.

\n

É bem simples resolver esse pequeno probleminha, o próprio Angular tem a solução, o $interpolateProvider é usado para configurar a interpolação da linguagem.

\n

Com ele vamos setar no config para o angular reconhecer apenas {( var )}, mais ou menos assim:

\n
var app = angular.module('searchApp', [])\napp.config([\n  '$interpolateProvider',\n  function($interpolateProvider) {\n    return $interpolateProvider.startSymbol('{(').endSymbol(')}')\n  },\n])
\n

O arquivo json

\n

Precisamos pegar todos os artigos do blog para alimentar nosso Javascript, criaremos um template para o Jekyll montando um .json.

\n

search.json

\n
---layout: null\n---[\n  {% for post in site.posts %}\n    {\n      \"title\" : \"{{ post.title | escape }}\",\n      \"category\" : \"{{ post.categories | array_to_sentence_string }}\",\n      \"tags\" : \"{{ post.tags | array_to_sentence_string }}\",\n      \"url\" : \"{{ site.baseurl }}{{ post.url }}\",\n      \"date\" : \"{{ post.date | date: \"%-d/%-m/%Y\" }}\"\n    }{% unless forloop.last %},{% endunless %}\n  {% endfor %}\n]
\n

O código acima irá montar uma estrutura mais ou menos assim.

\n
[\n  {\n    \"title\": \"Fazendo um sistema de busca simples no Jekyll usando AngularJS\",\n    \"category\": \"jekyll\",\n    \"tags\": \"jekyll, angular, and angularjs\",\n    \"url\": \"/busca-no-jekyll-com-angularjs\",\n    \"date\": \"27/12/2015\"\n  },\n  {\n    \"title\": \"dotX - mais um tema para Jekyll\",\n    \"category\": \"temas-jekyll\",\n    \"tags\": \"temas, jekyll, and download\",\n    \"url\": \"/dotX-mais-um-tema-para-jekyll\",\n    \"date\": \"21/12/2015\"\n  }\n]
\n

Se você quiser dar uma olhada no arquivo final pode entrar [nesse link aqui]({{ \"/search.json\" | prepend: site.baseurl }}).

\n

searchController

\n

Logo acima, no primeiro código angular, nós iniciamos o módulo searchApp e setamos o config para corrigir a interpolação da linguagem, agora vamos terminar nosso script criando o controller.

\n
// criando o ng-controller=\"searchController\"\napp.controller('searchController', [\n  '$scope',\n  '$http',\n  function($scope, $http) {\n    // criando a funcao \"pesquiser(q)\" que logo será usada em ng-keyup=\"pesquisar(search)\"\n    $scope.pesquisar = function(q) {\n      $scope.posts = []\n      if (q != '' && q != undefined && q.length >= 1) {\n        // no $http.get() que toda a mágica acontece...\n        $http\n          .get('/search.json', { data: q })\n          .success(function(data) {\n            // atribuindo os objetos em uma variável \"posts\"\n            $scope.posts = data\n          })\n          .error(function(data) {\n            console.error('error...')\n          })\n      }\n    }\n  },\n])
\n

O HTML

\n
<div ng-app=\"searchApp\">\n  <div ng-controller=\"searchController\">\n    <input\n      type=\"text\"\n      ng-model=\"search\"\n      ng-keyup=\"pesquisar(search)\"\n      placeholder=\"Digite: sass, javascript, ruby, gulp, php...\"\n      autofocus\n      autocomplete=\"off\"\n    />\n    <hr />\n    <ul ng-show=\"posts.length > 0\">\n      <li ng-repeat=\"post in posts | filter:search\">\n        <a href=\"{( post.url )}\">\n          <span>{( post.title )}</span> <small>{( post.category )}</small>\n        </a>\n      </li>\n    </ul>\n  </div>\n</div>
\n

Bem, esse HTML ai em cima dispeça explicações né, se você sabe pelo menos o básico de AngularJS você já vai \"matar todas as charadas\" dele, mas vou dar uma explicação rápida.

\n\n

O filtro

\n

Você deve ter notado que o nosso searchController e nossa função pesquisar retorna todos os objetos do arquivo search.json por isso passamos um filtro mágico do AngularJS chamado filter: que recebe o model search (que é basicamente as letras digitadas no input).

\n

Demonstração Download

\n

Com isso fechamos nosso sisteminha de busca simples no Jekyll usando AngularJS ;)

\n

Gostou, comenta ai \\o/

\n

\\end

","excerpt":"Por alguns meses eu usei o plugin Simple Jekyll Search que funcionou muito bem no meu blog, mas agora ele foi totalmente feito em angular e ficou uma…","timeToRead":3,"frontmatter":{"category":["jekyll"],"date":"há 11 anos","datePublished":"2015-12-27T22:28:33.000Z","description":"Por alguns meses eu usei o plugin Simple Jekyll Search que funcionou muito bem no meu blog","path":"/fazendo-sistema-de-busca-no-jekyll-com-angularjs","tags":["jekyll","angular","angularjs"],"title":"Fazendo um sistema de busca simples no Jekyll usando AngularJS","image":{"publicURL":"/static/angularjs-ac143796d23ba9bf2a8fb95d6d3783b5.png","name":"angularjs"}},"fields":{"readingTime":{"words":618}}}},"pageContext":{}}}