diff --git a/CHANGELOG.md b/CHANGELOG.md index 374c031..4aae898 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,14 +1,17 @@ ## Unreleased version +- Added `post_search` config setting that creates a Search button in the navbar (older websites need to set `post_search: true` to enable this feature) (#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 - Fixed bug where the navbar "burger" collapsed button didn't always revert back to a light colour - Fixed bug where using an image as a navbar title did not render in GitHub Project pages that did not have a custom domain - Fixed issue where image thumbnails on the feed page were always forced into a square rather than maintaining a proper image aspect ratio -- Added support for Patreon in the social network links in the footer +- Added support for Patreon, Medium, and Itch.io in the social network links in the footer (#783, #788) - Fixed bug where special characters in the title led to broken share tags (#744) - Updated staticman from using v2 (public servers) to v3 (private servers) due to the public servers becoming obsolete (#775) +- Added support for Cloudflare Analytics (#797) +- Added Reddit in share options of posts (#815) ## v5.0.0 (2020-09-15) diff --git a/README.md b/README.md index 6e928b3..938b08d 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ with the hosting in [GDPR](https://gdpr.eu/) affected countries. # 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. @@ -41,8 +41,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 0bcd2a3..bf1783d 100644 --- a/_config.yml +++ b/_config.yml @@ -45,6 +45,7 @@ social-network-links: twitter: daattali patreon: DeanAttali youtube: c/daattali +# medium: yourname # reddit: yourname # linkedin: daattali # xing: yourname @@ -88,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" @@ -132,6 +136,9 @@ footer-link-col: "#404040" # Fill in your Google Analytics ID to track your website using Google Analytics #google_analytics: "" +# Fill in your Cloudflare Analytics beacon token to track your website using Cloudflare Analytics +#cloudflare_analytics: "" + # Google Tag Manager ID #gtm: "" diff --git a/_includes/cloudflare_analytics.html b/_includes/cloudflare_analytics.html new file mode 100644 index 0000000..bd63f8b --- /dev/null +++ b/_includes/cloudflare_analytics.html @@ -0,0 +1,8 @@ +{% if site.cloudflare_analytics %} + + + +{% endif %} diff --git a/_includes/head.html b/_includes/head.html index 730e967..cf93eda 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -44,6 +44,7 @@ {% include gtag.html %} {% include gtm_head.html %} {% include google_analytics.html %} + {% include cloudflare_analytics.html %} {% if layout.common-ext-css %} {% for css in layout.common-ext-css %} 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/_includes/social-networks-links.html b/_includes/social-networks-links.html index 7825aba..3f799eb 100644 --- a/_includes/social-networks-links.html +++ b/_includes/social-networks-links.html @@ -275,5 +275,29 @@ {%- endif -%} + +{%- if site.social-network-links.medium -%} +
  • + + + Medium + +
    • +{%- endif -%} + +{%- if site.social-network-links.itchio -%} +
  • + + + Itchio + +
    • +{%- endif -%} diff --git a/_includes/social-share.html b/_includes/social-share.html index 2091c88..c04f445 100644 --- a/_includes/social-share.html +++ b/_includes/social-share.html @@ -42,6 +42,14 @@ {% endif %} + {% if site.share-links-active.reddit %} + + + Reddit + + {% endif %} + {% endif %} diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css index f53097e..4e809c4 100644 --- a/assets/css/beautifuljekyll.css +++ b/assets/css/beautifuljekyll.css @@ -993,3 +993,104 @@ 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; + max-height: calc(100vh - 6.5rem); + overflow-y: auto; +} +#search-results-container a { + color: #fff; + text-decoration: none; +} +#search-results-container a:hover { + color: #fff; + text-decoration: underline; +} + +#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..4a7ab7f 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,30 @@ 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(); + $("body").addClass("overflow-hidden"); + }); + $("#nav-search-exit").click(function(e) { + e.preventDefault(); + $("#beautifuljekyll-search-overlay").hide(); + $("body").removeClass("overflow-hidden"); + }); + $(document).on('keyup', function(e) { + if (e.key == "Escape") { + $("#beautifuljekyll-search-overlay").hide(); + $("body").removeClass("overflow-hidden"); + } + }); } };