From a8332c40fda1f0197089dc4fbbfdeb3f0b56758d Mon Sep 17 00:00:00 2001
From: Matt Erickson <Matt@MattErickson.ME>
Date: Fri, 24 Apr 2020 09:25:30 -0500
Subject: [PATCH] add readtime for posts (#622)

---
 CHANGELOG.md            |  2 ++
 _config.yml             |  1 +
 _includes/header.html   | 64 ++++++++++++++++++++++-------------------
 _includes/readtime.html | 16 +++++++++++
 css/main.css            | 12 ++++++++
 5 files changed, 66 insertions(+), 29 deletions(-)
 create mode 100644 _includes/readtime.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad17797..54d8430 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@ This file lists all non-trivial changes to Beautiful Jekyll.
 
 I often make small changes to documentation, to the demo site, or to the general look-and-feel. These changes will not be listed here. Any other minor changes will also not be listed here.
 
+**2020-04-24** Adding readtime support for the post header (#622) (thanks @MutMatt and @rubyreads)
+
 **2020-04-22** Add support for configuring lang attribute on &lt;html&gt; tag (#608) (thanks @skalee)
 
 **2020-04-18** Add ability to disable round logo (thanks @gpotter2)
diff --git a/_config.yml b/_config.yml
index 4284d1f..aa565f9 100644
--- a/_config.yml
+++ b/_config.yml
@@ -189,6 +189,7 @@ defaults:
       layout: "post"
       comments: true  # add comments to all blog posts
       social-share: true # add social media sharing buttons to all blog posts
+      readtime: false # add estimated reading time on all blog posts
   -
     scope:
       path: "" # all files
diff --git a/_includes/header.html b/_includes/header.html
index 49ab1c8..d4cdfbb 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -7,15 +7,15 @@
 {% if page.bigimg %}
   <div id="header-big-imgs" data-num-img={% if page.bigimg.first %}{{ page.bigimg.size }}{% else %}1{% endif %}
     {% for bigimg in page.bigimg %}
-	  {% assign imgnum = forloop.index %}
-	  {% for imginfo in bigimg %}
-	    {% if imginfo[0] %}
-		  data-img-src-{{ imgnum }}="{{ imginfo[0] | relative_url }}"
-		  data-img-desc-{{ imgnum }}="{{ imginfo[1] }}"
-		{% else %}
-		  data-img-src-{{ imgnum }}="{{ imginfo | relative_url }}"
-		{% endif %}
-	  {% endfor %}
+    {% assign imgnum = forloop.index %}
+    {% for imginfo in bigimg %}
+      {% if imginfo[0] %}
+      data-img-src-{{ imgnum }}="{{ imginfo[0] | relative_url }}"
+      data-img-desc-{{ imgnum }}="{{ imginfo[1] }}"
+    {% else %}
+      data-img-src-{{ imgnum }}="{{ imginfo | relative_url }}"
+    {% endif %}
+    {% endfor %}
     {% endfor %}
   ></div>
 {% endif %}
@@ -28,18 +28,21 @@
       <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
         <div class="{{ include.type }}-heading">
           <h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
-		  {% if page.subtitle %}
-		    {% if include.type == "page" %}
+      {% if page.subtitle %}
+        {% if include.type == "page" %}
             <hr class="small">
             <span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
-			{% else %}
-			<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
-			{% endif %}
-		  {% endif %}
-		  
-		  {% if include.type == "post" %}
-		  <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
-		  {% endif %}
+      {% else %}
+      <h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
+      {% endif %}
+      {% endif %}
+      
+      {% if include.type == "post" %}
+          <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
+          {% if page.readtime %}
+            {% include readtime.html %}
+          {% endif %}
+      {% endif %}
         </div>
       </div>
     </div>
@@ -53,18 +56,21 @@
       <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
         <div class="{{ include.type }}-heading">
           <h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
-		  {% if page.subtitle %}
-		    {% if include.type == "page" %}
+      {% if page.subtitle %}
+        {% if include.type == "page" %}
             <hr class="small">
             <span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
-			{% else %}
-			<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
-			{% endif %}
-		  {% endif %}
-		  
-		  {% if include.type == "post" %}
-		  <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
-		  {% endif %}
+      {% else %}
+      <h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
+      {% endif %}
+      {% endif %}
+      
+      {% if include.type == "post" %}
+          <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
+          {% if page.readtime %}
+            {% include readtime.html %}
+          {% endif %}
+      {% endif %}
         </div>
       </div>
     </div>
diff --git a/_includes/readtime.html b/_includes/readtime.html
new file mode 100644
index 0000000..28f4dce
--- /dev/null
+++ b/_includes/readtime.html
@@ -0,0 +1,16 @@
+<!--- "ReadTime on GitHub Jekyll" (c) 2020 Ruby Griffith Ramirez, MIT License -->
+
+{% assign ReadTime = page.content | strip_html | number_of_words %}
+{% assign calcReadTime = ReadTime | float %}
+{% assign finalReadTime = calcReadTime | divided_by:200 | round: 2 %}
+{% assign number = finalReadTime | round %}
+  {% if number >= 1 %}
+    {% assign yesReadTime = number | append: " minute read" %}
+    <span class="reader-time post-meta"><span class="hidden-xs middot">&middot;</span> {{ yesReadTime }}</span>
+  {% elsif number < 1 %}
+    {% assign minReadTime = '&lt; 1 minute read' %}
+    <span class="reader-time post-meta"><span class="hidden-xs middot">&middot;</span> {{ minReadTime }}</span>
+  {% else %}
+    {% assign nilReadTime = number | replace:'0',' ' %}
+      {{ nilReadTime }}
+  {% endif %}
diff --git a/css/main.css b/css/main.css
index 322ea11..b9f222c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -593,6 +593,18 @@ footer .theme-by {
   }
 }
 
+.reader-time {
+  display: inline-block;
+}
+@media (max-width: 767px) {
+  .reader-time {
+    display: block;
+  }
+}
+.reader-time .middot { 
+  margin: 0 10px;
+}
+
 /* --- Pager --- */
 
 .pager li a {