Skip to content

Commit 4f8b711

Browse files
jmassardojmassardo
committed
add search capability
1 parent c88dced commit 4f8b711

File tree

7 files changed

+213
-137
lines changed

7 files changed

+213
-137
lines changed

‎_includes/footer.html

+81-84
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,86 @@
11
<section class="wrapper-full bg-gray-light border-top">
2-
<div class="wrapper-thin" style="display: flex; justify-content: center; align-items: center; padding: 30px;">
3-
<div style="flex: 1; text-align: center; padding-right: 10px; max-width: 900px;">
4-
<h5 class="h5 mb-4">Contact us</h5>
5-
<p class="p-lg text-black" style="font-size: 16px;">If you would like to learn more about us, partner with
6-
us, or get in touch, email us at [email protected]</p>
7-
</div>
2+
<div class="wrapper-thin" style="display: flex; justify-content: center; align-items: center; padding: 30px;">
3+
<div style="flex: 1; text-align: center; padding-right: 10px; max-width: 900px;">
4+
<h5 class="h5 mb-4">Contact us</h5>
5+
<p class="p-lg text-black" style="font-size: 16px;">If you would like to learn more about us, partner with
6+
us, or get in touch, email us at [email protected]</p>
7+
</div>
88

9-
<div style="flex: 1; text-align: center; padding-left: 10px; max-width: 900px;">
10-
<!-- Reduced padding and increased max-width -->
11-
<b class="f3">Subscribe to our newsletter</b>
12-
<br>
13-
<a class="button button--outline mt-2" href="https://www.datakind.org/subscribe/">
14-
<span>Subscribe</span>
15-
</a>
16-
</div>
17-
</div>
18-
</section>
9+
<div style="flex: 1; text-align: center; padding-left: 10px; max-width: 900px;">
10+
<!-- Reduced padding and increased max-width -->
11+
<b class="f3">Subscribe to our newsletter</b>
12+
<br>
13+
<a class="button button--outline mt-2" href="https://www.datakind.org/subscribe/">
14+
<span>Subscribe</span>
15+
</a>
16+
</div>
17+
</div>
18+
</section>
1919

2020

2121

22-
<footer class="footer bg-gray-light pt-1">
23-
<div class="bg-gray-light">
24-
<div
25-
class="container-xl p-responsive f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center">
26-
<ul class="list-style-none d-flex flex-items-center mb-3 mb-sm-0 lh-condensed-ultra social-icons">
27-
<li class="mr-4">
28-
<a href="https://twitter.com/DataKind" data-analytics-click="Footer, go to Twitter, text:twitter"
29-
title="DataKind on Twitter" aria-label="GitHub on Twitter">
30-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.5 222.3" class="d-block" height="18">
31-
<path
32-
d="M273.5 26.3a109.77 109.77 0 0 1-32.2 8.8 56.07 56.07 0 0 0 24.7-31 113.39 113.39 0 0 1-35.7 13.6 56.1 56.1 0 0 0-97 38.4 54 54 0 0 0 1.5 12.8A159.68 159.68 0 0 1 19.1 10.3a56.12 56.12 0 0 0 17.4 74.9 56.06 56.06 0 0 1-25.4-7v.7a56.11 56.11 0 0 0 45 55 55.65 55.65 0 0 1-14.8 2 62.39 62.39 0 0 1-10.6-1 56.24 56.24 0 0 0 52.4 39 112.87 112.87 0 0 1-69.7 24 119 119 0 0 1-13.4-.8 158.83 158.83 0 0 0 86 25.2c103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3a114.25 114.25 0 0 0 28.1-29.1"
33-
fill="currentColor"></path>
34-
</svg>
35-
</a>
36-
</li>
37-
<li class="mr-4">
38-
<a href="https://www.facebook.com/DataKindOrg/"
39-
data-analytics-click="Footer, go to Facebook, text:facebook" title="DataKind on Facebook"
40-
aria-label="GitHub on Facebook">
41-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.3 15.4" class="d-block" height="18">
42-
<path
43-
d="M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z"
44-
fill="currentColor"></path>
45-
</svg>
46-
</a>
47-
</li>
48-
<li class="mr-4">
49-
<a href="https://www.youtube.com/@datakind6672"
50-
data-analytics-click="Footer, go to YouTube, text:youtube" title="DataKind on YouTube"
51-
aria-label="GitHub on YouTube">
52-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.17 13.6" class="d-block" height="16">
53-
<path
54-
d="M18.77 2.13A2.4 2.4 0 0 0 17.09.42C15.59 0 9.58 0 9.58 0a57.55 57.55 0 0 0-7.5.4A2.49 2.49 0 0 0 .39 2.13 26.27 26.27 0 0 0 0 6.8a26.15 26.15 0 0 0 .39 4.67 2.43 2.43 0 0 0 1.69 1.71c1.52.42 7.5.42 7.5.42a57.69 57.69 0 0 0 7.51-.4 2.4 2.4 0 0 0 1.68-1.71 25.63 25.63 0 0 0 .4-4.67 24 24 0 0 0-.4-4.69zM7.67 9.71V3.89l5 2.91z"
55-
fill="currentColor"></path>
56-
</svg>
57-
</a>
58-
</li>
59-
<li class="mr-4 flex-self-start">
60-
<a href="https://www.linkedin.com/company/datakind/mycompany/"
61-
data-analytics-click="Footer, go to Linkedin, text:linkedin" title="DataKind on Linkedin"
62-
aria-label="GitHub on LinkedIn">
63-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 18" class="d-block" height="18">
64-
<path
65-
d="M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z"
66-
fill="currentColor"></path>
67-
</svg>
68-
</a>
69-
</li>
70-
</ul>
71-
<ul class="list-style-none d-flex text-gray">
72-
<li class="mr-3">
73-
© <span id="year"></span> DataKind
74-
</li>
75-
<li class="mr-3"><a href="https://www.datakind.org/privacy-policy/"
76-
data-analytics-click="Footer, go to privacy and terms of service, text:privacy"
77-
class="link-gray">Privacy</a></li>
78-
<li><a href="#" class="link-gray">Cookie settings</a></li>
79-
</ul>
80-
</div>
81-
</div>
82-
<script>
83-
var date = new Date().getFullYear(),
84-
year = document.getElementById('year');
85-
if (year) {
86-
document.getElementById('year').innerHTML = date;
87-
}
88-
</script>
89-
</footer>
22+
<footer class="footer bg-gray-light pt-1">
23+
<div class="bg-gray-light">
24+
<div class="container-xl p-responsive f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center">
25+
<ul class="list-style-none d-flex flex-items-center mb-3 mb-sm-0 lh-condensed-ultra social-icons">
26+
<li class="mr-4">
27+
<a href="https://twitter.com/DataKind" data-analytics-click="Footer, go to Twitter, text:twitter"
28+
title="DataKind on Twitter" aria-label="GitHub on Twitter">
29+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.5 222.3" class="d-block" height="18">
30+
<path
31+
d="M273.5 26.3a109.77 109.77 0 0 1-32.2 8.8 56.07 56.07 0 0 0 24.7-31 113.39 113.39 0 0 1-35.7 13.6 56.1 56.1 0 0 0-97 38.4 54 54 0 0 0 1.5 12.8A159.68 159.68 0 0 1 19.1 10.3a56.12 56.12 0 0 0 17.4 74.9 56.06 56.06 0 0 1-25.4-7v.7a56.11 56.11 0 0 0 45 55 55.65 55.65 0 0 1-14.8 2 62.39 62.39 0 0 1-10.6-1 56.24 56.24 0 0 0 52.4 39 112.87 112.87 0 0 1-69.7 24 119 119 0 0 1-13.4-.8 158.83 158.83 0 0 0 86 25.2c103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3a114.25 114.25 0 0 0 28.1-29.1"
32+
fill="currentColor"></path>
33+
</svg>
34+
</a>
35+
</li>
36+
<li class="mr-4">
37+
<a href="https://www.facebook.com/DataKindOrg/" data-analytics-click="Footer, go to Facebook, text:facebook"
38+
title="DataKind on Facebook" aria-label="GitHub on Facebook">
39+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.3 15.4" class="d-block" height="18">
40+
<path
41+
d="M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z"
42+
fill="currentColor"></path>
43+
</svg>
44+
</a>
45+
</li>
46+
<li class="mr-4">
47+
<a href="https://www.youtube.com/@datakind6672" data-analytics-click="Footer, go to YouTube, text:youtube"
48+
title="DataKind on YouTube" aria-label="GitHub on YouTube">
49+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.17 13.6" class="d-block" height="16">
50+
<path
51+
d="M18.77 2.13A2.4 2.4 0 0 0 17.09.42C15.59 0 9.58 0 9.58 0a57.55 57.55 0 0 0-7.5.4A2.49 2.49 0 0 0 .39 2.13 26.27 26.27 0 0 0 0 6.8a26.15 26.15 0 0 0 .39 4.67 2.43 2.43 0 0 0 1.69 1.71c1.52.42 7.5.42 7.5.42a57.69 57.69 0 0 0 7.51-.4 2.4 2.4 0 0 0 1.68-1.71 25.63 25.63 0 0 0 .4-4.67 24 24 0 0 0-.4-4.69zM7.67 9.71V3.89l5 2.91z"
52+
fill="currentColor"></path>
53+
</svg>
54+
</a>
55+
</li>
56+
<li class="mr-4 flex-self-start">
57+
<a href="https://www.linkedin.com/company/datakind/mycompany/"
58+
data-analytics-click="Footer, go to Linkedin, text:linkedin" title="DataKind on Linkedin"
59+
aria-label="GitHub on LinkedIn">
60+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 18" class="d-block" height="18">
61+
<path
62+
d="M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z"
63+
fill="currentColor"></path>
64+
</svg>
65+
</a>
66+
</li>
67+
</ul>
68+
<ul class="list-style-none d-flex text-gray">
69+
<li class="mr-3">
70+
© <span id="year"></span> DataKind
71+
</li>
72+
<li class="mr-3"><a href="https://www.datakind.org/privacy-policy/"
73+
data-analytics-click="Footer, go to privacy and terms of service, text:privacy"
74+
class="link-gray">Privacy</a></li>
75+
<li><a href="#" class="link-gray">Cookie settings</a></li>
76+
</ul>
77+
</div>
78+
</div>
79+
<script>
80+
var date = new Date().getFullYear(),
81+
year = document.getElementById('year');
82+
if (year) {
83+
document.getElementById('year').innerHTML = date;
84+
}
85+
</script>
86+
</footer>

‎_includes/menu.html

+27-24
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,38 @@
88
</a>
99
</div>
1010
<ul class="desktop-navigation" style="color:black">
11-
{% assign grouped_pages = site.pages | group_by: 'category' | sort:"name" %}
12-
{% for category in grouped_pages %}
11+
{% assign grouped_pages = site.pages | group_by: 'category' | sort:"name" %}
12+
{% for category in grouped_pages %}
1313
{% unless category.name == null or category.name == "" %}
14-
15-
<li class="has-sub-nav">
16-
<a href="#"><h3>{{ category.name | replace:'-',' ' | capitalize_all }}
17-
<svg height="16" class="octicon octicon-chevron-down" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
18-
<path fill-rule="evenodd"
19-
d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z">
20-
</path>
21-
</svg></h3></a>
14+
15+
<li class="has-sub-nav">
16+
<a href="#">
17+
<h3>{{ category.name | replace:'-',' ' | capitalize_all }}
18+
<svg height="16" class="octicon octicon-chevron-down" viewBox="0 0 16 16" version="1.1"
19+
width="16" aria-hidden="true">
20+
<path fill-rule="evenodd"
21+
d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z">
22+
</path>
23+
</svg>
24+
</h3>
25+
</a>
2226
<ul class="sub-nav">
23-
{% assign sub_grouped_pages = category.items | group_by: 'subcategory' | sort:"name" %}
24-
{% for subcategory in sub_grouped_pages %}
27+
{% assign sub_grouped_pages = category.items | group_by: 'subcategory' | sort:"name" %}
28+
{% for subcategory in sub_grouped_pages %}
2529
{% if subcategory.name %}
26-
<li>
27-
<a href="/{{ category.name }}/{{ subcategory.name}}"><h4>{{ subcategory.name | replace:'-',' ' | capitalize_all }}</h4></a>
28-
</li>
30+
<li>
31+
<a href="/{{ category.name }}/{{ subcategory.name}}">
32+
<h4>{{ subcategory.name | replace:'-',' ' | capitalize_all }}</h4>
33+
</a>
34+
</li>
2935
{% endif %}
30-
{% endfor %}
36+
{% endfor %}
3137
</ul>
32-
</li>
33-
{% endunless %}
34-
{% endfor %}
38+
</li>
39+
{% endunless %}
40+
{% endfor %}
3541
</ul>
36-
<div class="burger js-menu-trigger">
37-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
38-
<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="rgba(255,255,255,1)"></path>
39-
</svg>
40-
</div>
42+
{% include search.html %}
43+
4144
</div>
4245
</header>

‎_includes/search.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!-- Search input field -->
2+
<div class="main-search form-group mb-0 border-bottom">
3+
<div class="input-group">
4+
<input id="search" name="main_input" class="form-control border-0" placeholder="start typing to search"
5+
type="text">
6+
<div class="input-group-append">
7+
<span class="input-group-text border-0"><i class="fa fa-search" aria-hidden="true"></i></span>
8+
</div>
9+
</div>
10+
<!-- Search result container -->
11+
<div class="search-results position-absolute">
12+
<ul id="results" class="search-results-ul card shadow border border-top-0">
13+
</ul>
14+
</div>
15+
</div>
16+
17+
<!-- Hide the search results div unless someone is actually searching -->
18+
<script>
19+
document.addEventListener('DOMContentLoaded', function() {
20+
const searchInput = document.querySelector('input[name="query"]');
21+
const searchResults = document.querySelector('.search-results');
22+
23+
searchInput.addEventListener('input', function() {
24+
if (searchInput.value.trim() !== '') {
25+
searchResults.style.display = 'block';
26+
} else {
27+
searchResults.style.display = 'none';
28+
}
29+
});
30+
});
31+
</script>
32+
33+
34+
35+
<!-- Script pointing to Jekyll Instant Search js -->
36+
<script src="/public/js/simple-jekyll-search.min.js" type="text/javascript"></script>
37+
38+
<!-- Jekyll Instant Search Configuration -->
39+
<script>
40+
SimpleJekyllSearch({
41+
searchInput: document.getElementById('search'),
42+
resultsContainer: document.getElementById('results'),
43+
searchResultTemplate: '<li><a href="{url}" tabindex="1"><p>{title}</p><span>{content}</span></a></li>',
44+
noResultsText: '<li><p>No results found!</p></li>',
45+
json: '/search.json'
46+
})
47+
</script>
48+
49+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
50+
51+
<!-- show site search results -->
52+
<script>
53+
$(document).ready(function () {
54+
$('#search').on('blur', function () {
55+
$('.search-results').fadeOut('medium');
56+
});
57+
$('#search').on('focus', function () {
58+
$('.search-results').show();
59+
});
60+
61+
});
62+
</script>

‎project-stages/discovery/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Every stage has Playbook resources including guidelines, best practices, “how
3535

3636

3737

38-
![Discovery Stage DataKind Project Process](assets/img/discovery_dk_project_process.jpg)
38+
![Discovery Stage DataKind Project Process](/public/img/discovery_dk_project_process.jpg)
3939

4040
##### Discover (\~2\-10 weeks)
4141

‎public/css/index.css

+28
Original file line numberDiff line numberDiff line change
@@ -25444,4 +25444,32 @@ body.localhost:after {
2544425444
body.localhost:after {
2544525445
content: 'x-large'
2544625446
}
25447+
}
25448+
25449+
.search-results {
25450+
display: none; /* Hide the div by default */
25451+
position: absolute;
25452+
right: 0;
25453+
margin-right: 10px; /* Adjust the value as needed */
25454+
background-color: white;
25455+
width: 25vw; /* Set the width to 25% of the viewport width */
25456+
}
25457+
25458+
.search-results-ul li {
25459+
padding: 10px; /* Add some padding for better appearance */
25460+
cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
25461+
border: 1px solid black; /* Add a border around each list item */
25462+
margin-bottom: 5px; /* Add some space between list items */
25463+
}
25464+
25465+
.search-results-ul li:hover {
25466+
background-color: #f0f0f0; /* Change background color on hover */
25467+
}
25468+
25469+
.search-results-ul p {
25470+
font-weight: bold;
25471+
}
25472+
25473+
.search-results-ul span {
25474+
font-style: italic;
2544725475
}

‎search.json

+14-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
---
2-
2+
layout: none
3+
---
34
[
4-
{% for post in site.posts %}
5-
{
6-
"title" : "{{ post.title }}",
7-
"url" : "{{ site.baseurl }}{{ post.url }}",
8-
"date" : "{{ post.date | date_to_string }}",
9-
"description" : "{{ post.description | strip_html | strip_newlines | escape }}"
10-
} {% unless forloop.last %},{% endunless %}
11-
{% endfor %}
5+
{% for page in site.pages %}
6+
{
7+
{% if page.title != nil %}
8+
"title" : "{{ page.title | escape | replace:'\',' ' }}",
9+
"category" : "{{ page.category }}",
10+
"tags" : "{{ page.tags | join: ', ' }}",
11+
"url" : "{{ site.baseurl }}{{ page.url }}",
12+
"date" : "{{ page.date }}",
13+
"content" : "{{ page.content | strip_html | strip_newlines | truncate: 200 | replace:'\',' ' | replace:'"',' '}}"
14+
{% endif %}
15+
} {% unless forloop.last %},{% endunless %}
16+
{% endfor %}
1217
]

‎search.md

-19
This file was deleted.

0 commit comments

Comments
 (0)