added algolia and menus

Gemfile

@@ -1,4 +1,14 @@
 # frozen_string_literal: true
 
 source "https://rubygems.org"
+
+group :jekyll_plugins do
+    gem 'jekyll-feed'
+    gem 'jekyll-sitemap'
+    gem 'jekyll-seo-tag'
+    gem 'jekyll-analytics'
+    gem 'jekyll-algolia'
+    gem 'jekyll-menus'
+  end
+
 gemspec

_config.yml

@@ -31,9 +31,32 @@ plugins:
   - jekyll-sitemap
   - jekyll-seo-tag
   - jekyll-analytics
+  - jekyll-algolia
   - jekyll-menus
 
+# code highlighter
+highlighter: rouge
+
 jekyll_analytics:
   GoogleAnalytics:          # Add, if you want to track with Google Analytics
     id: UA-46783401-10      # Required - replace with your tracking id
     anonymizeIp: false      # Optional - Default: false - set to true for anonymized tracking
+
+# minify html
+compress_html:
+    clippings: []
+    comments: []
+    endings: []
+    ignore:
+    envs: []
+    blanklines: false
+    profile: false
+    startings: []
+
+# algolia search 
+algolia:
+  application_id: D9WA1YKTRQ
+  index_name: blog_posts # You can replace that with whatever name you want
+  files_to_exclude: []
+  nodes_to_index: 'article'
+  search_only_api_key: 58ffdd7cd6c45ec1577a7fcd789b1b9a

_includes/algolia_search.html

@@ -0,0 +1,63 @@
+    <style>
+    #search-searchbar{
+      width: 100%;
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    .ais-search-box {
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+.ais-hits--item{
+    float:left;
+ }
+
+</style>
+
+    <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 }}'
+    });
+
+    search.addWidget(
+      instantsearch.widgets.searchBox({
+        container: '#search-searchbar',
+        placeholder: 'Search into posts...',
+        poweredBy: true
+      })
+    );
+
+    search.addWidget(
+      instantsearch.widgets.hits({
+        container: '#search-hits',
+        templates: {
+          item: function(hit) {
+            return `
+                        <div class="card blog-post">
+                            <img class="card-img-top" src="${ hit.thumbnail }" alt="${ hit.title }">
+                            <div class="card-body center">
+                                <img src="/assets/img/{{ site.author_logo }}" class="author-profile-img">
+                                <h4 class="card-title">${ hit.title }</h4>
+    
+                                <h6 class="card-subtitle mb-2 text-muted">${moment.unix(hit.date).format('MMM D, YYYY')}</h6>
+                                <p class="card-text">${hit.summary }</p>
+    
+                                <a href="${hit.url}" data-disqus-identifier="${hit.url}" class="btn btn-primary btn-sm">Read</a>
+                                <span class="disqus-comment-count" data-disqus-identifier="${ hit.url }"></span>
+    
+                            </div>
+                        </div>
+            `;
+          }
+        }
+      })
+    );
+
+    search.start();
+
+    </script>

_includes/blog_posts.html

@@ -1,4 +1,14 @@
+<div class="row">
 
+    <div id="search-searchbar"></div>
+
+</div>
+<ul>
+<div class="row">
+<div id="search-hits"></div>
+</div>
+</ul>
+<!-- 
             <ul>
                     <div class="row">
                         {% for post in site.posts %}
@@ -19,4 +29,4 @@ <h6 class="card-subtitle mb-2 text-muted">{{ post.date | date: "%b %-d, %Y" }}</
     
                         {% endfor %}
                     </div>
-                </ul>
+                </ul> -->

_includes/blog_sidebar.html

@@ -1,3 +1,4 @@
+
 <div class="col-lg-4">
     <div class="card">
         <div class="card-header"> About </div>

_includes/head.html

@@ -24,6 +24,13 @@
     crossorigin="anonymous">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
     crossorigin="anonymous">
+    <!-- Including InstantSearch.js library and styling -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
+<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css">
+
     <script>
       (function(d, h, m){
           var js, fjs = d.getElementsByTagName(h)[0];

_includes/header.html

@@ -7,6 +7,7 @@
                     <img src="/assets/img/{{ site.author_logo }}" class="profile-img">
                 </a>
             </div>
+
             <div class="col-md-4">
                 <h1 class="profile-name"> {{ site.title }}</h1>
                 <p class="profile-bio"> {{ site.subtitle }}</p>

_layouts/blog.html

@@ -1,16 +1,24 @@
 --- 
 layout: default 
 ---
+<div class="row">
 
-    <div class="row">
+
+</div>
 
+    <div class="row">
+
         <div class="col-lg-8 col-md-4">
-
+           
                 <!-- Blog Posts -->
-            {%- include blog_posts.html -%}
-
+
+                {%- include blog_posts.html -%}
+
+                {%- include algolia_search.html -%}
         </div>
 
 
             {%- include blog_sidebar.html -%}
-        </div>
+        </div>
+
+

_layouts/default.html

@@ -12,9 +12,8 @@
 
         {%- include header.html -%}
 
-        {%- include ads.html -%}
-
         <div class="col-lg-12">
+            {%- include ads.html -%}
 
             {{ content }}
 

_layouts/search.html

@@ -0,0 +1,7 @@
+--- 
+layout: default 
+---
+
+ {%- include algolia_search.html -%}
+
+

_posts/2016-05-20-build-a-blog-using-devlopr-jekyll.md

@@ -5,7 +5,7 @@ author: Sujay Kundu
 date: '2017-11-19 14:35:23 +0530'
 category: guides
 summary: Getting Started - Build your blog using devlopr jekyll
-thumbnail: posts/devlopr.png
+thumbnail: /assets/img/posts/devlopr.png
 ---
 
 If you are a developer, who want a fast static website with no cost for hosting/domain stuff. This guide will help you setup a blog for you. The blog files resides in your github repo and the site is build with any of the free deployment providers of your choice such as [Github Pages](https://pages.github.com) / [Netlify](https://netlify.com) / [Heroku](https://heroku.com). You can also connect your custom domain later with SSL enabled :D !

_posts/2016-05-21-deploy-blog-using-devlopr-jekyll-and-github-pages.md

@@ -5,7 +5,7 @@ author: Sujay Kundu
 date: '2017-11-19 14:35:23 +0530'
 category: guides
 summary: Deployment Guide for devlopr-jekyll blog using Github Pages and Travis CI
-thumbnail: posts/deploy-using-github-pages-and-travis.png
+thumbnail: /assets/img/posts/deploy-using-github-pages-and-travis.png
 ---
 
 This guide assumes that you already have created your blog and tested locally. If not please follow this tutorial : [Create a Blog using devlopr jekyll](https://devlopr.netlify.com/guides/2017/11/19/build-a-blog-using-devlopr-jekyll). Then come back and proceed with the deployment process.

_sass/devlog.scss

@@ -139,6 +139,8 @@ code {
     color:#fff;
 
 
+
+
 @media (min-width: 320px) and (max-width: 480px) {
     header {
         height: auto;

devlopr.gemspec

@@ -19,6 +19,7 @@ Gem::Specification.new do |spec|
   spec.add_runtime_dependency "jekyll-feed", '~> 0.12.1' 
   spec.add_runtime_dependency "jekyll-seo-tag", '~> 2.6', '>= 2.6.1'
   spec.add_runtime_dependency "jekyll-analytics", '~> 0.1.11'
+  spec.add_runtime_dependency "jekyll-algolia", '~> 1.4', '>= 1.4.11'
   spec.add_runtime_dependency "jekyll-menus", '~> 0.6.0'
 
   spec.add_runtime_dependency "jekyll", "~> 3.8.5"