Add algolia search

_config.yml

@@ -36,6 +36,12 @@ disqus_shortname: "rnehra01-github-io" # replace with your disqus username
 google_analytics: "UA-102153288-1" # replace with your GA tracking identifier
 
 #algolia
+algolia:
+  application_id: GVFM3KX3UX
+  index_name: rnehra01.github.io
+  search_only_api_key: 4f0ffe8c2149d573ab7f386921c55713
+  settings:
+    attributesToSnippet: ['*:33']
 
 # Authors' info in `_data/authors.yml`
 # Tags' info in `_data/tags_info.yml`

_includes/algolia.html

@@ -0,0 +1,107 @@
+<!-- Including InstantSearch.js library and styling -->
+<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css">
+
+<script>
+// Instanciating InstantSearch.js with Algolia credentials
+const search = instantsearch({
+  appId: '{{ site.algolia.application_id }}',
+  indexName: '{{ site.algolia.index_name }}',
+  apiKey: '{{ site.algolia.search_only_api_key }}'
+});
+
+// Adding searchbar and results widgets
+search.addWidget(
+  instantsearch.widgets.searchBox({
+    container: '#search-searchbar',
+    placeholder: 'Search into posts...',
+      poweredBy: true, // This is required if you're on the free Community plan
+  })
+);
+
+  const hitTemplate = function(hit){
+	  let isCover = hit.cover;
+	  let articleClass = "post-card";
+	  if(!isCover) articleClass += " no-image";
+
+	  const title = hit._highlightResult.title.value;
+	  const content = hit._highlightResult.html.value;
+	  console.log(hit._highlightResult);
+	  let template = `<article class="${articleClass}">`
+	  if(isCover){
+		  template += ` <a class="post-card-image-link" href="{{ site.baseurl }}${hit.url.substring(1)}">
+                <div class="post-card-image" style="background-image: url({{ site.baseurl }}${ hit.cover })"></div>
+            </a>`;
+	  }
+
+	  template += `<div class="post-card-content">
+            <div class="post-card-content-link">
+              <header class="post-card-header">`;
+
+	  let date = '';
+	  if (hit.date) {
+		  date = moment.unix(hit.date).format('MMM D, YYYY');
+		  template += `<time class="post-card-tags-date" datetime="{{ page.date | date:'%e %B %Y' }}">${date}</time>`;
+	  }
+
+	  if('tags' in hit && hit.tags.length){
+		  template += `<span class="post-card-tags-date">/</span>`;
+		  for(tag_index in hit.tags){
+			  if(tag_index == hit.tags.length-1)
+				  template += `<a class="post-card-tags-date" href='{{ site.baseurl }}tag/${hit.tags[tag_index]}/'>${hit.tags[tag_index]}</a>`;
+			  else
+				  template += `<a class="post-card-tags-date" href='{{ site.baseurl }}tag/${hit.tags[tag_index]}/'>${hit.tags[tag_index]},</a>`;
+
+		  }
+	  }
+
+	  template += `</header>
+	      <header class="post-card-header">
+                    <h2 class="post-card-title">${ title }</h2>
+                </header>
+                <section class="post-card-excerpt">                    
+                        <p>${ content }...</p>
+                </section>
+            </div>
+            <footer class="post-card-meta">
+            </footer>
+        </div>
+    </article>`;
+
+	  return template;
+  };
+
+search.addWidget(
+  instantsearch.widgets.hits({
+      container: '#search-hits',
+	  templates: {
+		  item: hitTemplate
+	  }
+  })
+);
+
+// Starting the search
+  search.start();
+  //hide algolia defaults
+  $('.ais-search-box--magnifier').hide();
+  $('.ais-search-box--powered-by').hide();
+  $('.ais-search-box--reset').hide();
+  //hide search hits intially
+  $('#search-hits').hide();
+
+  function expand(){
+	  if($('.ais-search-box--input').hasClass('open')){
+		  $('.site-nav-left').css('visibility', 'visible');
+		  $('#search-hits').hide();
+		  $('#posts').show();
+	  }else{
+		  $('.site-nav-left').css('visibility', 'hidden');
+		  $('#search-hits').show();
+		  $('#posts').hide();		  
+	  }
+	  $('.ais-search-box--input').toggleClass('open');	  
+  }
+  $('.search-icon').on('click', expand);
+  </script>

_includes/search-icon.html

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 100 100">
+  <path fill="#ffffff" fill-rule="evenodd" d="M42.117,12.246 C50.1209,12.246 57.797,15.4257 63.453,21.0858 C69.1132,26.742 72.2928,34.4178 72.2928,42.4218 C72.2928,50.4258 69.1131,58.1018 63.453,63.7578 C57.7968,69.418 50.121,72.5976 42.117,72.5976 C34.1131,72.5976 26.437,69.4179 20.781,63.7578 C15.1208,58.1016 11.9412,50.4258 11.9412,42.4218 C11.9412,34.4178 15.1209,26.7418 20.781,21.0858 C26.4372,15.4256 34.113,12.246 42.117,12.246 L42.117,12.246 Z M76.0828827,67.3362833 C82.3527829,58.7859894 85.2617455,48.0434678 83.9173,37.22271 C82.0618,22.28871 72.3743,9.47671 58.5153,3.61771 L58.51139,3.61771 C53.32389,1.41851 47.74139,0.28961 42.10539,0.29741 L42.117,0.305 C29.058,0.30891 16.742,6.3675 8.769001,16.707 C0.7924008,27.047 -1.933999,40.5 1.382301,53.129 C4.698701,65.758 13.6833,76.137 25.7103,81.223 L25.7103,81.22691 C39.5733,87.08631 55.5113,85.10191 67.5153,76.02771 C67.5852345,75.9748392 67.6549736,75.9217748 67.724517,75.8685177 L91.555,99.6990032 L100.0003,91.253703 L76.0828827,67.3362833 Z"></path>
+</svg>

_includes/site-nav.html

@@ -12,6 +12,10 @@
         {% endif %}
     </div>
     <div class="site-nav-right">
+	  <div id="search-searchbar"></div>
+	  <div class="search-icon">
+		{% include search-icon.html %}
+	  </div>
         <div class="social-links">
             {% if site.facebook %}
                 <a class="social-link social-link-fb" href="https://facebook.com/{{ site.facebook }}" target="_blank" rel="noopener">{% include facebook.html %}</a>

_layouts/default.html

@@ -17,7 +17,19 @@
     <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}assets/built/syntax.css" />
     <!-- highlight.js -->
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
+	<link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
+
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Palanquin:400,100,200,300' '>
     <style>.hljs { background: none; }</style>
+ <!-- jQuery + Fitvids, which makes all video embeds responsive -->
+    <script
+        src="https://code.jquery.com/jquery-3.2.1.min.js"
+        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+        crossorigin="anonymous">
+    </script>
+    <script type="text/javascript"
+			src="{{ site.baseurl }}assets/js/jquery.fitvids.js"></script>
+    <script type="text/javascript" src="https://demo.ghost.io/assets/js/jquery.fitvids.js?v=724281a32e"></script>
 
     <!--[if IE]>
         <style>
@@ -95,16 +107,6 @@ <h1 class="subscribe-overlay-title">Subscribe to {{ site.title }}</h1>
       });
     });</script>
 
-    <!-- jQuery + Fitvids, which makes all video embeds responsive -->
-    <script
-        src="https://code.jquery.com/jquery-3.2.1.min.js"
-        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-        crossorigin="anonymous">
-    </script>
-    <script type="text/javascript" src="{{ site.baseurl }}assets/js/jquery.fitvids.js"></script>
-    <script type="text/javascript" src="https://demo.ghost.io/assets/js/jquery.fitvids.js?v=724281a32e"></script>
-
-
     <!-- Paginator increased to "infinit" in _config.yml -->
     <!-- if paginator.posts  -->
     <!-- <script>

assets/css/screen.css

@@ -223,18 +223,6 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 
 */
 
-.site-nav-logo {
-    flex-shrink: 0;
-    display: block;
-    margin-right: 24px;
-    padding: 11px 0;
-    color: #fff;
-    font-size: 1.7rem;
-    line-height: 1em;
-    font-weight: bold;
-    letter-spacing: -0.5px;
-}
-
 .site-nav-logo:hover {
     text-decoration: none;
 }
@@ -279,6 +267,69 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     height: 40px;
 }
 
+.site-nav-logo {
+    flex-shrink: 0;
+    display: block;
+    margin-right: 24px;
+    padding: 11px 0;
+    color: #fff;
+    font-size: 1.7rem;
+    line-height: 1em;
+    font-weight: bold;
+    letter-spacing: -0.5px;
+}
+
+/*Search*/
+
+.ais-search-box{
+	padding-top: 12px;
+}
+
+.ais-search-box .ais-search-box--input {
+	background: none;
+	height: 30px;
+	width: 0px;
+	-webkit-border-radius: 10em;
+	-moz-border-radius: 10em;
+	border-radius: 10em;
+	-webkit-transition: width .5s;
+	-moz-transition: width .5s;
+	transition: width .5s;
+	padding-left: 0px;
+	margin-right: 10px;
+	border: 0;
+	cursor: pointer;
+	float: right;
+	z-index: 1;
+}
+
+.ais-search-box .open {
+	width: 712px;
+	padding: 15px;
+	color: #ffffff;
+	cursor: auto;
+	border: 1px solid #ffffff;
+}
+.ais-search-box input:-moz-placeholder {
+	color: transparent;
+}
+.ais-search-box input::-webkit-input-placeholder {
+	color: transparent;
+}
+
+.search-icon{
+	display: flex;
+	padding-right: 10px;
+	padding-top: 4px;
+	opacity: 0.8;
+	align-items: center;
+	z-index: 2;
+}
+
+.search-icon:hover{
+	opacity:1;
+}
+
 .social-links {
     flex-shrink: 0;
     display: flex;

index.html

@@ -31,11 +31,13 @@ <h2 class="site-description">{% if page.description %}{{ page.description }}{% e
 <!-- The main content area -->
 <main id="site-main" class="site-main outer" role="main">
     <div class="inner">
-
         <div class="post-feed">
-            <!-- The tag below includes the markup for each post - partials/post-card.hbs -->
+          <!-- The tag below includes the markup for each post - partials/post-card.hbs -->
+		  <div id="search-hits"></div>
+		  <div id="posts">
             {%  include post-card.html %}
-        </div>
-
+		  </div>
+		</div>
+		{% include algolia.html %}
     </div>
 </main>