Feature: Add reading time to posts

Author: cotes2020

_data/read_time.yml

@@ -0,0 +1,7 @@
+# words per minute
+wpm: 180
+
+# minimum value
+min_time: 1
+
+prompt: min

_includes/read-time.html

@@ -0,0 +1,15 @@
+<!--
+  Calculate the post's reading time, and display the word count in tooltip
+ -->
+{% assign words = include.content | strip_html | number_of_words: "auto" %}
+
+{% assign read_time = words | divided_by: site.data.read_time.wpm %}
+
+{% unless read_time > 0 %}
+  {% assign read_time = site.data.read_time.min_time %}
+{% endunless %}
+
+<!-- return element -->
+<span class="readtime" data-toggle="tooltip" data-placement="bottom" title="{{ words }} words">
+  {{- read_time -}}{{" "}}{{- site.data.read_time.prompt -}}
+</span>

_layouts/home.html

@@ -65,16 +65,21 @@ <h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
 
     <div class="post-meta text-muted">
       <!-- posted date -->
-      <i class="far fa-clock fa-fw"></i>
+      <i class="far fa-calendar fa-fw"></i>
       {% include timeago.html date=post.date tooltip=true %}
 
+      <!-- time to read -->
+      <i class="far fa-clock fa-fw"></i>
+      <span>{% include read-time.html content=post.content %}</span>
+
       <!-- page views -->
       {% if site.google_analytics.pv.enabled %}
       <i class="far fa-eye fa-fw"></i>
       <span id="pv_{{-post.title-}}" class="pageviews">
         <i class="fas fa-spinner fa-spin fa-fw"></i>
       </span>
       {% endif %}
+
     </div>
   </div> <!-- .post-review -->
 

_layouts/post.html

@@ -18,33 +18,31 @@ <h1 data-toc-skip>{{ page.title }}</h1>
       <div class="post-meta text-muted d-flex flex-column">
         <!-- Published date and author -->
         <div>
-          Posted
           {% include timeago.html date=page.date tooltip=true %}
           by
           <span class="author">
-          {% if page.author %}
-            {{ page.author }}
-          {% else %}
-            {{ site.author }}
-          {% endif %}
+            {{ page.author | default: site.author }}
           </span>
         </div>
 
-        <!-- lastmod -->
-        {% if page.last_modified_at %}
         <div>
-          Updated
-          {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
-        </div>
-        {% endif %}
+          <!-- lastmod -->
+          {% if page.last_modified_at %}
+          <span>
+            Updated
+            {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
+          </span>
+          {% endif %}
 
-        <!-- page views -->
-        {% if site.google_analytics.pv.enabled %}
-        <div>
+          <!-- read time -->
+          {% include read-time.html content=content %}
+
+          <!-- page views -->
+          {% if site.google_analytics.pv.enabled %}
           <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
-          views
+          {% endif %}
+
         </div>
-        {% endif %}
 
       </div> <!-- .post-meta -->
 

assets/css/home.scss

@@ -29,7 +29,7 @@
       i {
         font-size: 0.73rem;
         &:not(:first-child) { // post-meta icons on the homepage
-          margin-left: 1.5rem;
+          margin-left: 1rem;
         }
       }
     }

assets/css/post.scss

@@ -27,6 +27,27 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
+@mixin dot($pl: 0.2rem, $pr: 0.4rem) {
+  content: "\2022";
+  color: rgba(158, 158, 158, 0.8);
+  padding-left: $pl;
+  padding-right: $pr;
+}
+
+.post .post-meta {
+  > div:nth-child(2) {
+    > span:not(:first-child)::before {
+      @include dot;
+    }
+  }
+  #pv::after {
+    content: " views";
+  }
+  .readtime::after {
+    content: " read";
+  }
+}
+
 .post-content {
   > ol, > ul, > dl {
     padding-left: 2rem;
@@ -318,11 +339,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   .post {
     .post-meta {
       >div:not(:first-child)::before {
-        content: "\2022";
-        color: rgba(158, 158, 158, 0.8);
-        font-weight: bold;
-        padding-left: 0.5rem;
-        padding-right: 0.3rem;
+        @include dot(.5rem, .2rem);
       }
       &.flex-column {
         -webkit-box-orient: horizontal!important;