Skip to content

Commit 9b55745

Browse files
rnehra01rnehra01
committed
Add algolia search
1 parent 36847bf commit 9b55745

File tree

10 files changed

+203
-28
lines changed

10 files changed

+203
-28
lines changed

‎_config.yml

+6
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@ disqus_shortname: "rnehra01-github-io" # replace with your disqus username
3636
google_analytics: "UA-102153288-1" # replace with your GA tracking identifier
3737

3838
#algolia
39+
algolia:
40+
application_id: GVFM3KX3UX
41+
index_name: rnehra01.github.io
42+
search_only_api_key: 4f0ffe8c2149d573ab7f386921c55713
43+
settings:
44+
attributesToSnippet: ['*:33']
3945

4046
# Authors' info in `_data/authors.yml`
4147
# Tags' info in `_data/tags_info.yml`

‎_includes/algolia.html

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!-- Including InstantSearch.js library and styling -->
2+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>
3+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
4+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css">
5+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css">
6+
7+
<script>
8+
// Instanciating InstantSearch.js with Algolia credentials
9+
const search = instantsearch({
10+
appId: '{{ site.algolia.application_id }}',
11+
indexName: '{{ site.algolia.index_name }}',
12+
apiKey: '{{ site.algolia.search_only_api_key }}'
13+
});
14+
15+
// Adding searchbar and results widgets
16+
search.addWidget(
17+
instantsearch.widgets.searchBox({
18+
container: '#search-searchbar',
19+
placeholder: 'Search into posts...',
20+
poweredBy: true, // This is required if you're on the free Community plan
21+
})
22+
);
23+
24+
const hitTemplate = function(hit){
25+
let isCover = hit.cover;
26+
let articleClass = "post-card";
27+
if(!isCover) articleClass += " no-image";
28+
29+
const title = hit._highlightResult.title.value;
30+
const content = hit._highlightResult.html.value;
31+
console.log(hit._highlightResult);
32+
let template = `<article class="${articleClass}">`
33+
if(isCover){
34+
template += ` <a class="post-card-image-link" href="{{ site.baseurl }}${hit.url.substring(1)}">
35+
<div class="post-card-image" style="background-image: url({{ site.baseurl }}${ hit.cover })"></div>
36+
</a>`;
37+
}
38+
39+
template += `<div class="post-card-content">
40+
<div class="post-card-content-link">
41+
<header class="post-card-header">`;
42+
43+
let date = '';
44+
if (hit.date) {
45+
date = moment.unix(hit.date).format('MMM D, YYYY');
46+
template += `<time class="post-card-tags-date" datetime="{{ page.date | date:'%e %B %Y' }}">${date}</time>`;
47+
}
48+
49+
if('tags' in hit && hit.tags.length){
50+
template += `<span class="post-card-tags-date">/</span>`;
51+
for(tag_index in hit.tags){
52+
if(tag_index == hit.tags.length-1)
53+
template += `<a class="post-card-tags-date" href='{{ site.baseurl }}tag/${hit.tags[tag_index]}/'>${hit.tags[tag_index]}</a>`;
54+
else
55+
template += `<a class="post-card-tags-date" href='{{ site.baseurl }}tag/${hit.tags[tag_index]}/'>${hit.tags[tag_index]},</a>`;
56+
57+
}
58+
}
59+
60+
template += `</header>
61+
<header class="post-card-header">
62+
<h2 class="post-card-title">${ title }</h2>
63+
</header>
64+
<section class="post-card-excerpt">
65+
<p>${ content }...</p>
66+
</section>
67+
</div>
68+
<footer class="post-card-meta">
69+
</footer>
70+
</div>
71+
</article>`;
72+
73+
return template;
74+
};
75+
76+
search.addWidget(
77+
instantsearch.widgets.hits({
78+
container: '#search-hits',
79+
templates: {
80+
item: hitTemplate
81+
}
82+
})
83+
);
84+
85+
// Starting the search
86+
search.start();
87+
//hide algolia defaults
88+
$('.ais-search-box--magnifier').hide();
89+
$('.ais-search-box--powered-by').hide();
90+
$('.ais-search-box--reset').hide();
91+
//hide search hits intially
92+
$('#search-hits').hide();
93+
94+
function expand(){
95+
if($('.ais-search-box--input').hasClass('open')){
96+
$('.site-nav-left').css('visibility', 'visible');
97+
$('#search-hits').hide();
98+
$('#posts').show();
99+
}else{
100+
$('.site-nav-left').css('visibility', 'hidden');
101+
$('#search-hits').show();
102+
$('#posts').hide();
103+
}
104+
$('.ais-search-box--input').toggleClass('open');
105+
}
106+
$('.search-icon').on('click', expand);
107+
</script>

‎_includes/search-icon.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<svg width="18" height="18" viewBox="0 0 100 100">
2+
<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>
3+
</svg>

‎_includes/site-nav.html

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
{% endif %}
1313
</div>
1414
<div class="site-nav-right">
15+
<div id="search-searchbar"></div>
16+
<div class="search-icon">
17+
{% include search-icon.html %}
18+
</div>
1519
<div class="social-links">
1620
{% if site.facebook %}
1721
<a class="social-link social-link-fb" href="https://facebook.com/{{ site.facebook }}" target="_blank" rel="noopener">{% include facebook.html %}</a>

‎_layouts/default.html

+12-10
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,19 @@
1717
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}assets/built/syntax.css" />
1818
<!-- highlight.js -->
1919
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
20+
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
21+
22+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Palanquin:400,100,200,300' '>
2023
<style>.hljs { background: none; }</style>
24+
<!-- jQuery + Fitvids, which makes all video embeds responsive -->
25+
<script
26+
src="https://code.jquery.com/jquery-3.2.1.min.js"
27+
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
28+
crossorigin="anonymous">
29+
</script>
30+
<script type="text/javascript"
31+
src="{{ site.baseurl }}assets/js/jquery.fitvids.js"></script>
32+
<script type="text/javascript" src="https://demo.ghost.io/assets/js/jquery.fitvids.js?v=724281a32e"></script>
2133

2234
<!--[if IE]>
2335
<style>
@@ -95,16 +107,6 @@ <h1 class="subscribe-overlay-title">Subscribe to {{ site.title }}</h1>
95107
});
96108
});</script>
97109

98-
<!-- jQuery + Fitvids, which makes all video embeds responsive -->
99-
<script
100-
src="https://code.jquery.com/jquery-3.2.1.min.js"
101-
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
102-
crossorigin="anonymous">
103-
</script>
104-
<script type="text/javascript" src="{{ site.baseurl }}assets/js/jquery.fitvids.js"></script>
105-
<script type="text/javascript" src="https://demo.ghost.io/assets/js/jquery.fitvids.js?v=724281a32e"></script>
106-
107-
108110
<!-- Paginator increased to "infinit" in _config.yml -->
109111
<!-- if paginator.posts -->
110112
<!-- <script>

‎assets/built/screen.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/built/screen.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/css/screen.css

+63-12
Original file line numberDiff line numberDiff line change
@@ -223,18 +223,6 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
223223
224224
*/
225225

226-
.site-nav-logo {
227-
flex-shrink: 0;
228-
display: block;
229-
margin-right: 24px;
230-
padding: 11px 0;
231-
color: #fff;
232-
font-size: 1.7rem;
233-
line-height: 1em;
234-
font-weight: bold;
235-
letter-spacing: -0.5px;
236-
}
237-
238226
.site-nav-logo:hover {
239227
text-decoration: none;
240228
}
@@ -279,6 +267,69 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
279267
height: 40px;
280268
}
281269

270+
.site-nav-logo {
271+
flex-shrink: 0;
272+
display: block;
273+
margin-right: 24px;
274+
padding: 11px 0;
275+
color: #fff;
276+
font-size: 1.7rem;
277+
line-height: 1em;
278+
font-weight: bold;
279+
letter-spacing: -0.5px;
280+
}
281+
282+
/*Search*/
283+
284+
.ais-search-box{
285+
padding-top: 12px;
286+
}
287+
288+
.ais-search-box .ais-search-box--input {
289+
background: none;
290+
height: 30px;
291+
width: 0px;
292+
-webkit-border-radius: 10em;
293+
-moz-border-radius: 10em;
294+
border-radius: 10em;
295+
-webkit-transition: width .5s;
296+
-moz-transition: width .5s;
297+
transition: width .5s;
298+
padding-left: 0px;
299+
margin-right: 10px;
300+
border: 0;
301+
cursor: pointer;
302+
float: right;
303+
z-index: 1;
304+
}
305+
306+
.ais-search-box .open {
307+
width: 712px;
308+
padding: 15px;
309+
color: #ffffff;
310+
cursor: auto;
311+
border: 1px solid #ffffff;
312+
}
313+
.ais-search-box input:-moz-placeholder {
314+
color: transparent;
315+
}
316+
.ais-search-box input::-webkit-input-placeholder {
317+
color: transparent;
318+
}
319+
320+
.search-icon{
321+
display: flex;
322+
padding-right: 10px;
323+
padding-top: 4px;
324+
opacity: 0.8;
325+
align-items: center;
326+
z-index: 2;
327+
}
328+
329+
.search-icon:hover{
330+
opacity:1;
331+
}
332+
282333
.social-links {
283334
flex-shrink: 0;
284335
display: flex;

‎assets/images/search.png

676 Bytes
Loading

‎index.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,13 @@ <h2 class="site-description">{% if page.description %}{{ page.description }}{% e
3131
<!-- The main content area -->
3232
<main id="site-main" class="site-main outer" role="main">
3333
<div class="inner">
34-
3534
<div class="post-feed">
36-
<!-- The tag below includes the markup for each post - partials/post-card.hbs -->
35+
<!-- The tag below includes the markup for each post - partials/post-card.hbs -->
36+
<div id="search-hits"></div>
37+
<div id="posts">
3738
{% include post-card.html %}
38-
</div>
39-
39+
</div>
40+
</div>
41+
{% include algolia.html %}
4042
</div>
4143
</main>

0 commit comments

Comments
 (0)