add search to the navbar using 'post_search' config param

CHANGELOG.md

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

README.md

@@ -26,7 +26,7 @@
 
 # Features
 
-Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the latest features.
+__Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the latest features.__
 
 - **SIMPLE**: The primary goal of Beautiful Jekyll is to allow literally *anyone* to create a website in a few minutes.
 - **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
 - **Battle-tested**: By using Beautiful Jekyll, you'll be joining 50,000+ users enjoying this theme since 2015.
 - **SEO and social media support**: Customize how your site looks on Google and when shared on social media.
 - **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).
-- **Tags**: Any blog post can be tagged with keywords, and an index page showing all the tags is automatically generated.
+- **Tags**: Any blog post can be tagged with keywords, and an index page is automatically generated.
 - **Analytics**: Easily integrate Google Analytics, or other analytics platforms, to track visits to your website.
+- **Search**: Let users easily find any page using a Search button in the navigation bar.
 - **Photos support**: Any page can have a full-width cover photo and thumbnail.
 - **RSS**: An RSS feed is automatically created, so you can even host a podcast easily with Beautiful Jekyll.
 

_config.yml

@@ -89,6 +89,9 @@ feed_show_excerpt: true
 # Whether or not to show a list of tags below each post preview in the feed page
 feed_show_tags: true
 
+# Add a search button to the navbar
+post_search: true
+
 # The keywords to associate with your website, for SEO purposes
 #keywords: "my,list,of,keywords"
 

_includes/nav.html

@@ -30,6 +30,14 @@
           </li>
         {%- endif -%}
       {%- endfor -%}
+      {% if site.post_search %}
+        <li class="nav-item">
+          <a class="nav-link" id="nav-search-link" href="#" title="Search">
+            <span id="nav-search-icon" class="fa fa-search"></span>
+            <span id="nav-search-text">Search</span>
+          </a>
+        </li>
+      {%- endif -%}
     </ul>
   </div>
 
@@ -50,3 +58,5 @@
   {% endif %}
 
 </nav>
+
+{% include search.html %}

_includes/search.html

@@ -0,0 +1,39 @@
+{% if site.post_search %}
+
+<div id="beautifuljekyll-search-overlay">
+
+  <div id="nav-search-exit" title="Exit search">✕</div>
+  <input type="text" id="nav-search-input" placeholder="Search">
+  <ul id="search-results-container"></ul>
+
+  <script src="https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>
+  <script>
+    var searchjson = '[ \
+      {% for post in site.posts %} \
+        { \
+          "title"    : "{% if post.title != "" %}{{ post.title | escape }}{% else %}{{ post.excerpt | strip_html | escape | strip }}{%endif%}", \
+          "category" : "{{ post.tags | join: \', \' }}", \
+          "url"      : "{{ site.baseurl }}{{ post.url }}", \
+          "date"     : "{{ post.date | date: "%B %e, %Y" | default: "January 1, 1970" }}" \
+        }, \
+      {% endfor %} \
+      {% for page in site.html_pages %}{% if page.title != "{title}" and page.title != "404 - Page not found" %} \
+        { \
+          "title"    : "{% if page.title != "" %}{{ page.title | escape }}{% else %}{{ page.excerpt | strip_html | escape | strip }}{% endif %}", \
+          "category" : "{% if page.tags %}{{ page.tags | join: \', \' }}{% else %}page{% endif %}", \
+          "url"      : "{{ site.baseurl }}{{ page.url }}", \
+          "date"     : "{{ page.date | date: '%B %e, %Y' | default: "January 1, 1970" }}" \
+        }{% unless forloop.last %},{% endunless %} \
+      {% endif %}{% endfor %} \
+    ]';
+    searchjson = JSON.parse(searchjson);
+
+    var sjs = SimpleJekyllSearch({
+      searchInput: document.getElementById('nav-search-input'),
+      resultsContainer: document.getElementById('search-results-container'),
+      json: searchjson
+    });
+  </script>
+</div>
+
+{% endif %}

assets/css/beautifuljekyll.css

@@ -993,3 +993,98 @@ pre {
   display: block;
   margin: 0 auto;
 }
+
+/* Search bar */
+#beautifuljekyll-search-overlay {
+  display: none;
+  z-index: 999999;
+  position: fixed;
+  background: rgba(0,0,0,0.9);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  text-align: center;
+  padding: 1rem;
+}
+#nav-search-exit {
+  position: absolute;
+  top: 1.5rem;
+  cursor: pointer;
+  right: 25%;
+  margin-right: 2rem;
+  color: #555;
+  font-size: 2rem;
+  line-height: 2rem;
+  font-weight: bold;
+}
+#nav-search-exit:hover {
+  color: #000;
+}
+#nav-search-input {
+  text-align: center;
+  background: #e7edee;
+  margin: auto;
+  display: block;
+  font-size: 2rem;
+  width: 50%;
+  transition: width 300ms ease;
+  color: #222;
+  border-radius: 5rem;
+  outline: none;
+  border: none;
+  padding: 0 3rem;
+}
+@media (max-width: 1199px) {
+  #nav-search-input {
+    width: 75%;
+  }
+  #nav-search-exit {
+    right: 12.5%;
+  }
+}
+@media (max-width: 767px) {
+  #nav-search-input {
+    width: 100%;
+  }
+  #nav-search-exit {
+    right: 0;
+  }
+}
+#nav-search-input:focus {
+  background: #f3f8fe;
+  box-shadow: 0px 0.15rem 1rem #e7f4ff;
+  outline: none;
+}
+
+#nav-search-input::placeholder {
+  color: #777;
+}
+
+#search-results-container {
+  list-style: none;
+  padding-left: unset;
+  margin-top: 1.5rem;
+  color: #fff;
+  font-size: 1.5rem;
+}
+#search-results-container a,
+#search-results-container a:hover {
+  color: #fff;
+}
+
+#nav-search-icon {
+  display: inline-block;
+}
+#nav-search-text {
+  display: none;
+}
+
+@media (max-width: 1199px) {
+  #nav-search-icon {
+    display: none;
+  }
+  #nav-search-text {
+    display: inline-block;
+  }
+}

assets/js/beautifuljekyll.js

@@ -27,6 +27,8 @@ var BeautifulJekyllJS = {
 
     // show the big header image
     BeautifulJekyllJS.initImgs();
+
+    BeautifulJekyllJS.initSearch();
   },
 
   initNavbar : function() {
@@ -108,6 +110,25 @@ var BeautifulJekyllJS = {
     } else {
       $(".img-desc").hide();
     }
+  },
+
+  initSearch : function() {
+    if (!document.getElementById("beautifuljekyll-search-overlay")) {
+      return;
+    }
+
+    $("#nav-search-link").click(function(e) {
+      e.preventDefault();
+      $("#beautifuljekyll-search-overlay").show();
+      $("#nav-search-input").focus().select();
+    });
+    $("#nav-search-exit").click(function(e) {
+      e.preventDefault();
+      $("#beautifuljekyll-search-overlay").hide();
+    });
+    $(document).on('keyup', function(e) {
+      if (e.key == "Escape") $("#beautifuljekyll-search-overlay").hide();
+    });
   }
 };