CHANGELOG.md

@@ -1,11 +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 te same colour as the primary navbar links
+- 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)
 

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,20 +36,24 @@ 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.
 
 <h2 id="sponsors">Sponsors 🏆</h2>
 
-> There are no sponsors yet
+Developing and maintaining Beautiful Jekyll takes a lot of time and effort - thank you to anyone who helps fund this effort!
 
-[Become the first sponsor for Beautiful Jekyll and unlock special rewards\!](https://github.com/sponsors/daattali/sponsorships?tier_id=39856)
+- [Matt Artist](https://mja00.dev/)
+- [\_hyp3ri0n](https://hyperiongray.com)
+
+[Become a sponsor for Beautiful Jekyll and unlock special rewards\!](https://github.com/sponsors/daattali/sponsorships?tier_id=39856)
 
 # Build your website in 3 steps
 
-There's a very easy way to use this theme, and there's a hard way. For most people (including myself!), I suggest going the easy route. If you're an advanced user and want to tinker with the hard way (using ruby gems), then [skip the easy way](https://github.com/daattali/beautiful-jekyll#the-hard-way-using-ruby-gems) if you know what you're doing.
+There's a very easy way to use this theme, and there's a hard way. For most people (including myself!), the easy route is recommended. If you're an advanced user and want to tinker with the hard way (using ruby gems), then [skip the easy way](https://github.com/daattali/beautiful-jekyll#the-hard-way-using-ruby-gems) if you know what you're doing.
 
 ## The easy way (recommended!)
 
@@ -69,9 +73,9 @@ Click on __*Settings*__ at the top (the cog icon) and on that page you'll have a
 
 ### 3. Customize your website settings
 
-Edit the `_config.yml` file to change any settings you want. To edit the file, click on it to view the file and then click on the pencil icon to edit it (watch the video tutorial above if you're confused).  The settings in the file are self-explanatory and I added comments inside the file to help you understand what each setting does. Any line that begins with a hashtag (`#`) is a comment, and the other lines are actual settings.
+Edit the `_config.yml` file to change any settings you want. To edit the file, click on it to view the file and then click on the pencil icon to edit it (watch the video tutorial above if you're confused).  The settings in the file are self-explanatory and there are comments inside the file to help you understand what each setting does. Any line that begins with a hashtag (`#`) is a comment, and the other lines are actual settings.
 
-Note that in the video above I only edited one setting in the `_config.yml` file. **You should actually go through the rest of the settings as well. Don't be lazy, go through all the settings!**
+Note that in the video above only one setting in the `_config.yml` file is edited. **You should actually go through the rest of the settings as well. Don't be lazy, go through all the settings!**
 
 ### 4. Congratulations! You have a website!
 
@@ -85,11 +89,11 @@ If you followed the easy method above, then you already have your site and you c
 
 # Plans
 
-Beautiful Jekyll is, and always will be, free. But if you want to remove the Beautiful Jekyll ad from your website, use a Dark Mode skin, unlock other special rewards, or simply support my development efforts, [check out the different plans](https://beautifuljekyll.com/plans).
+Beautiful Jekyll is, and always will be, free. But if you want to remove the Beautiful Jekyll ad from your website, use a Dark Mode skin, unlock other special rewards, or simply support the development efforts, [check out the different plans](https://beautifuljekyll.com/plans).
 
 # Add your own content
 
-To add pages to your site, you can either write a markdown file (`.md`) or you can write an HTML file. It's much easier to write markdown than HTML, so I suggest you do that ([here's a great tutorial](https://markdowntutorial.com/) if you need to learn markdown in 5 minutes).
+To add pages to your site, you can either write a markdown file (`.md`) or you can write an HTML file. It's much easier to write markdown than HTML, so that's the recommended approach ([here's a great tutorial](https://markdowntutorial.com/) if you need to learn markdown in 5 minutes).
 
 To see an example of a markdown file, click on any file that ends in `.md`, for example [`aboutme.md`](./aboutme.md). On that page you can see some nicely formatted text (there's a word in bold, a link, a few bullet points), and if you click on the pencil icon to edit the file, you'll see the markdown code that generated the pretty text. Very easy!
 
@@ -203,7 +207,7 @@ Visit the [official FAQ page](https://beautifuljekyll.com/faq) for answers to co
 
 Beautiful Jekyll is used by 50,000+ people with wildly varying degrees of web skills, so it's impossible to answer all the questions that may arise. For any question that's not specifically related to Beautiful Jekyll and is more about Jekyll or web development in general, the answer can often be found on Google, in the [Jekyll documentation](https://jekyllrb.com/), or on the [Jekyll support forum](https://talk.jekyllrb.com/).
 
-To receive support, select one of the [different plans](https://beautifuljekyll.com/plans) Beautiful Jekyll offers.
+To receive support, select one of the [different plans](https://beautifuljekyll.com/plans) Beautiful Jekyll offers. You can also use the [Discussions](https://github.com/daattali/beautiful-jekyll/discussions) area to try to get help from the community.
 
 # Contributions
 

_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: ""
 
@@ -161,19 +168,19 @@ footer-link-col: "#404040"
 #  theme: github-light # Utterances theme
 #  label: blog-comments # Label that will be assigned to GitHub Issues created by Utterances
 
-# To use Staticman comments, first invite `staticmanlab` as a collaborator to your repository and
+# To use Staticman comments, uncomment the following section. You may leave the reCaptcha
-# accept the invitation by going to `https://staticman3.herokuapp.com/v3/connect/github/<username>/<repo-name>`.
+# section commented if you aren't using reCaptcha for spam protection. 
-# Then uncomment the following section and fill in "repository" and "branch".
+# Using Staticman requires advanced knowledge, please consult 
-# If you want to use reCaptcha for staticman (optional for spam protection), then fill
+# https://github.com/eduardoboucas/staticman/ and https://staticman.net/ for further 
-# in the "siteKey" and "secret" parameters below and also in `staticman.yml`.
+# instructions. For any support with staticman please direct questions to staticman and 
-# See more details at https://staticman.net/
+# not to BeautifulJekyll.
 #staticman:
 #  repository : # GitHub username/repository eg. "daattali/beautiful-jekyll"
 #  branch     : master # If you're not using `master` branch, then you also need to update the `branch` parameter in `staticman.yml`
-#  endpoint   : # (optional) URL of your own deployment, with a trailing slash eg. https://<your-api>/v3/entry/github/ (will fallback to a public GitLab instance)
+#  endpoint   : # URL of your deployment, with a trailing slash eg. "https://<your-api>/v3/entry/github/"
-#  reCaptcha:
+#  reCaptcha:   # (optional, set these parameters in `staticman.yml` as well) 
-#    siteKey  : # Use your own site key, you need to apply for one on Google
+#    siteKey  : # You need to apply for a site key on Google
-#    secret   : # ENCRYPT your password by going to https://staticman3.herokuapp.com/v3/encrypt/<your-site-secret>
+#    secret   : # Encrypt your password by going to https://<your-own-api>/v3/encrypt/<your-site-secret>
 
 # --- Misc --- #
 

_includes/cloudflare_analytics.html

@@ -0,0 +1,8 @@
+{% if site.cloudflare_analytics %}
+<!-- Cloudflare Web Analytics -->
+<script defer
+    src='https://static.cloudflareinsights.com/beacon.min.js'
+    data-cf-beacon='{"token": "{{ site.cloudflare_analytics}}"}'>
+</script>
+<!-- End Cloudflare Web Analytics -->
+{% endif %}

_includes/head.html

@@ -4,19 +4,19 @@
 
   {% capture title %}
     {%- if page.share-title -%}
-      {{ page.share-title }}
+      {{ page.share-title | strip_html | xml_escape }}
     {%- elsif page.title -%}
-      {{ page.title }}
+      {{ page.title | strip_html | xml_escape  }}
     {%- else -%}
-      {{ site.title }}
+      {{ site.title | strip_html | xml_escape }}
     {%- endif -%}
   {% endcapture %}
 
   {% capture description %}
     {%- if page.share-description -%}
-      {{ page.share-description }}
+      {{ page.share-description | strip_html | xml_escape }}
     {%- elsif page.subtitle -%}
-      {{ page.subtitle }}
+      {{ page.subtitle | strip_html | xml_escape }}
     {%- else -%}
       {%- assign excerpt_length = site.excerpt_length | default: 50 -%}
       {{ page.content | strip_html | xml_escape | truncatewords: excerpt_length | strip }}
@@ -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 %}

_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 %}

_includes/social-networks-links.html

@@ -275,5 +275,29 @@
     </a>
   </li>
 {%- endif -%}
+  
+{%- if site.social-network-links.medium -%}
+  <li class="list-inline-item">
+    <a href="https://medium.com/@{{ site.social-network-links.medium }}" title="Medium">
+      <span class="fa-stack fa-lg" aria-hidden="true">
+        <i class="fas fa-circle fa-stack-2x"></i>
+        <i class="fab fa-medium fa-stack-1x fa-inverse"></i>
+      </span>
+      <span class="sr-only">Medium</span>
+    </a>
+  </li>
+{%- endif -%}
+
+{%- if site.social-network-links.itchio -%}
+  <li class="list-inline-item">
+    <a href="https://{{ site.social-network-links.itchio }}.itch.io/" title="Itchio">
+      <span class="fa-stack fa-lg" aria-hidden="true">
+        <i class="fas fa-circle fa-stack-2x"></i>
+        <i class="fab fa-itch-io fa-stack-1x fa-inverse"></i>
+      </span>
+      <span class="sr-only">Itchio</span>
+   </a>
+  </li>
+{%- endif -%}
 
 </ul>

_includes/social-share.html

@@ -42,6 +42,14 @@
     </a>
   {% endif %}
 
+  {% if site.share-links-active.reddit %}
+    <a href="https://www.reddit.com/submit?url={{ page.url | absolute_url | url_encode }}"
+      class="btn btn-social-icon btn-reddit" title="Share on Reddit">
+      <span class="fab fa-fw fa-reddit" aria-hidden="true"></span>
+      <span class="sr-only">Reddit</span>
+    </a>
+  {% endif %}
+
 </section>
 
 {% endif %}

assets/css/beautifuljekyll.css

@@ -311,7 +311,7 @@ img {
   position: absolute;
   left: 50%;
   width: 3.125rem;
-  margin-top: 3.1rem;
+  bottom: -1.5rem;
   transition: opacity 0.5s ease-in-out;
   -webkit-transition: opacity 0.5s ease-in-out;
   -moz-transition: opacity 0.5s ease-in-out;
@@ -349,6 +349,7 @@ img {
 @media (min-width: 1200px) {
   .navbar-custom.top-nav-regular .avatar-container {
     width: 6.25rem;
+    bottom: -1.9375rem;
   }
 
   .navbar-custom.top-nav-regular .avatar-container .avatar-img-border {
@@ -992,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;
+  }
+}

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");
+      }
+    });
   }
 };
 

assets/js/staticman.js

@@ -11,7 +11,7 @@ layout: null
     $(form).addClass('disabled');
 
     {% assign sm = site.staticman -%}
-    var endpoint = '{{ sm.endpoint | default: "https://staticman3.herokuapp.com/v3/entry/github/" }}';
+    var endpoint = '{{ sm.endpoint }}';
     var repository = '{{ sm.repository }}';
     var branch = '{{ sm.branch }}';
 

staticman.yml

@@ -5,7 +5,7 @@
 # To encrypt strings use the following endpoint:
 # https://{STATICMAN API INSTANCE}/v3/encrypt/{TEXT TO BE ENCRYPTED}
 # {STATICMAN API INSTANCE} should match the `endpoint` in the theme config
-# file. It defaults to "staticman3.herokuapp.com".
+# file.
 
 comments:
   # (*) REQUIRED