From 950c341739a876b0f73de23e59839b42e8869b69 Mon Sep 17 00:00:00 2001 From: Dean Attali Date: Sun, 30 May 2021 19:54:17 +0000 Subject: [PATCH] add search to the navbar using 'post_search' config param --- CHANGELOG.md | 1 + README.md | 5 +- _config.yml | 3 ++ _includes/nav.html | 10 ++++ _includes/search.html | 39 ++++++++++++++ assets/css/beautifuljekyll.css | 95 ++++++++++++++++++++++++++++++++++ assets/js/beautifuljekyll.js | 21 ++++++++ 7 files changed, 172 insertions(+), 2 deletions(-) create mode 100644 _includes/search.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 33579fe..d87419b 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index 8c79583..28f05b4 100644 --- a/README.md +++ b/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. diff --git a/_config.yml b/_config.yml index 8bc1f89..bf1783d 100644 --- a/_config.yml +++ b/_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" diff --git a/_includes/nav.html b/_includes/nav.html index ae8294e..a1adfbc 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -30,6 +30,14 @@ {%- endif -%} {%- endfor -%} + {% if site.post_search %} +
  • + + + Search + +
    • + {%- endif -%} @@ -50,3 +58,5 @@ {% endif %} + +{% include search.html %} diff --git a/_includes/search.html b/_includes/search.html new file mode 100644 index 0000000..7924fd0 --- /dev/null +++ b/_includes/search.html @@ -0,0 +1,39 @@ +{% if site.post_search %} + +
    + + + + + + + +
    + +{% endif %} diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css index f53097e..719dab3 100644 --- a/assets/css/beautifuljekyll.css +++ b/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; + } +} diff --git a/assets/js/beautifuljekyll.js b/assets/js/beautifuljekyll.js index bcddc67..48a3ada 100644 --- a/assets/js/beautifuljekyll.js +++ b/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(); + }); } };