Skip to content

Commit 950c341

Browse files
daattalidaattali
committed
add search to the navbar using 'post_search' config param
1 parent 99fdbbd commit 950c341

File tree

7 files changed

+172
-2
lines changed

7 files changed

+172
-2
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
## Unreleased version
22

3+
- Added search to the navbar (can be turned off in the config file) (#770)
34
- Slightly reworked margins and position for avatar image to resolve an alignment issue on Safari.
45
- Changed the width at which the navbar collapses to a higher threshold because most modern non-mobile browsers are >1000px
56
- Fixed bug where navbar secondary level dropdown items didn't inherit the same colour as the primary navbar links

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
# Features
2828

29-
Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the latest features.
29+
__Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the latest features.__
3030

3131
- **SIMPLE**: The primary goal of Beautiful Jekyll is to allow literally *anyone* to create a website in a few minutes.
3232
- **Modern**: Uses the latest best practices and technologies to achieve nearly perfect scores on Google Chrome's Audit.
@@ -36,8 +36,9 @@ Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the lates
3636
- **Battle-tested**: By using Beautiful Jekyll, you'll be joining 50,000+ users enjoying this theme since 2015.
3737
- **SEO and social media support**: Customize how your site looks on Google and when shared on social media.
3838
- **Comments support**: Add comments to any page using either [Disqus](https://disqus.com/), [Facebook comments](https://developers.facebook.com/docs/plugins/comments), [Utterances](https://utteranc.es/), or [Staticman](https://staticman.net).
39-
- **Tags**: Any blog post can be tagged with keywords, and an index page showing all the tags is automatically generated.
39+
- **Tags**: Any blog post can be tagged with keywords, and an index page is automatically generated.
4040
- **Analytics**: Easily integrate Google Analytics, or other analytics platforms, to track visits to your website.
41+
- **Search**: Let users easily find any page using a Search button in the navigation bar.
4142
- **Photos support**: Any page can have a full-width cover photo and thumbnail.
4243
- **RSS**: An RSS feed is automatically created, so you can even host a podcast easily with Beautiful Jekyll.
4344

‎_config.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,9 @@ feed_show_excerpt: true
8989
# Whether or not to show a list of tags below each post preview in the feed page
9090
feed_show_tags: true
9191

92+
# Add a search button to the navbar
93+
post_search: true
94+
9295
# The keywords to associate with your website, for SEO purposes
9396
#keywords: "my,list,of,keywords"
9497

‎_includes/nav.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@
3030
</li>
3131
{%- endif -%}
3232
{%- endfor -%}
33+
{% if site.post_search %}
34+
<li class="nav-item">
35+
<a class="nav-link" id="nav-search-link" href="#" title="Search">
36+
<span id="nav-search-icon" class="fa fa-search"></span>
37+
<span id="nav-search-text">Search</span>
38+
</a>
39+
</li>
40+
{%- endif -%}
3341
</ul>
3442
</div>
3543

@@ -50,3 +58,5 @@
5058
{% endif %}
5159

5260
</nav>
61+
62+
{% include search.html %}

‎_includes/search.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{% if site.post_search %}
2+
3+
<div id="beautifuljekyll-search-overlay">
4+
5+
<div id="nav-search-exit" title="Exit search">✕</div>
6+
<input type="text" id="nav-search-input" placeholder="Search">
7+
<ul id="search-results-container"></ul>
8+
9+
<script src="https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>
10+
<script>
11+
var searchjson = '[ \
12+
{% for post in site.posts %} \
13+
{ \
14+
"title" : "{% if post.title != "" %}{{ post.title | escape }}{% else %}{{ post.excerpt | strip_html | escape | strip }}{%endif%}", \
15+
"category" : "{{ post.tags | join: \', \' }}", \
16+
"url" : "{{ site.baseurl }}{{ post.url }}", \
17+
"date" : "{{ post.date | date: "%B %e, %Y" | default: "January 1, 1970" }}" \
18+
}, \
19+
{% endfor %} \
20+
{% for page in site.html_pages %}{% if page.title != "{title}" and page.title != "404 - Page not found" %} \
21+
{ \
22+
"title" : "{% if page.title != "" %}{{ page.title | escape }}{% else %}{{ page.excerpt | strip_html | escape | strip }}{% endif %}", \
23+
"category" : "{% if page.tags %}{{ page.tags | join: \', \' }}{% else %}page{% endif %}", \
24+
"url" : "{{ site.baseurl }}{{ page.url }}", \
25+
"date" : "{{ page.date | date: '%B %e, %Y' | default: "January 1, 1970" }}" \
26+
}{% unless forloop.last %},{% endunless %} \
27+
{% endif %}{% endfor %} \
28+
]';
29+
searchjson = JSON.parse(searchjson);
30+
31+
var sjs = SimpleJekyllSearch({
32+
searchInput: document.getElementById('nav-search-input'),
33+
resultsContainer: document.getElementById('search-results-container'),
34+
json: searchjson
35+
});
36+
</script>
37+
</div>
38+
39+
{% endif %}

‎assets/css/beautifuljekyll.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -993,3 +993,98 @@ pre {
993993
display: block;
994994
margin: 0 auto;
995995
}
996+
997+
/* Search bar */
998+
#beautifuljekyll-search-overlay {
999+
display: none;
1000+
z-index: 999999;
1001+
position: fixed;
1002+
background: rgba(0,0,0,0.9);
1003+
left: 0;
1004+
right: 0;
1005+
top: 0;
1006+
bottom: 0;
1007+
text-align: center;
1008+
padding: 1rem;
1009+
}
1010+
#nav-search-exit {
1011+
position: absolute;
1012+
top: 1.5rem;
1013+
cursor: pointer;
1014+
right: 25%;
1015+
margin-right: 2rem;
1016+
color: #555;
1017+
font-size: 2rem;
1018+
line-height: 2rem;
1019+
font-weight: bold;
1020+
}
1021+
#nav-search-exit:hover {
1022+
color: #000;
1023+
}
1024+
#nav-search-input {
1025+
text-align: center;
1026+
background: #e7edee;
1027+
margin: auto;
1028+
display: block;
1029+
font-size: 2rem;
1030+
width: 50%;
1031+
transition: width 300ms ease;
1032+
color: #222;
1033+
border-radius: 5rem;
1034+
outline: none;
1035+
border: none;
1036+
padding: 0 3rem;
1037+
}
1038+
@media (max-width: 1199px) {
1039+
#nav-search-input {
1040+
width: 75%;
1041+
}
1042+
#nav-search-exit {
1043+
right: 12.5%;
1044+
}
1045+
}
1046+
@media (max-width: 767px) {
1047+
#nav-search-input {
1048+
width: 100%;
1049+
}
1050+
#nav-search-exit {
1051+
right: 0;
1052+
}
1053+
}
1054+
#nav-search-input:focus {
1055+
background: #f3f8fe;
1056+
box-shadow: 0px 0.15rem 1rem #e7f4ff;
1057+
outline: none;
1058+
}
1059+
1060+
#nav-search-input::placeholder {
1061+
color: #777;
1062+
}
1063+
1064+
#search-results-container {
1065+
list-style: none;
1066+
padding-left: unset;
1067+
margin-top: 1.5rem;
1068+
color: #fff;
1069+
font-size: 1.5rem;
1070+
}
1071+
#search-results-container a,
1072+
#search-results-container a:hover {
1073+
color: #fff;
1074+
}
1075+
1076+
#nav-search-icon {
1077+
display: inline-block;
1078+
}
1079+
#nav-search-text {
1080+
display: none;
1081+
}
1082+
1083+
@media (max-width: 1199px) {
1084+
#nav-search-icon {
1085+
display: none;
1086+
}
1087+
#nav-search-text {
1088+
display: inline-block;
1089+
}
1090+
}

‎assets/js/beautifuljekyll.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ var BeautifulJekyllJS = {
2727

2828
// show the big header image
2929
BeautifulJekyllJS.initImgs();
30+
31+
BeautifulJekyllJS.initSearch();
3032
},
3133

3234
initNavbar : function() {
@@ -108,6 +110,25 @@ var BeautifulJekyllJS = {
108110
} else {
109111
$(".img-desc").hide();
110112
}
113+
},
114+
115+
initSearch : function() {
116+
if (!document.getElementById("beautifuljekyll-search-overlay")) {
117+
return;
118+
}
119+
120+
$("#nav-search-link").click(function(e) {
121+
e.preventDefault();
122+
$("#beautifuljekyll-search-overlay").show();
123+
$("#nav-search-input").focus().select();
124+
});
125+
$("#nav-search-exit").click(function(e) {
126+
e.preventDefault();
127+
$("#beautifuljekyll-search-overlay").hide();
128+
});
129+
$(document).on('keyup', function(e) {
130+
if (e.key == "Escape") $("#beautifuljekyll-search-overlay").hide();
131+
});
111132
}
112133
};
113134

0 commit comments

Comments
 (0)