From b9ffe15ffb6453d960f507f31b69ff98fb709fd1 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 17 Dec 2020 15:17:21 +0800
Subject: [PATCH] Feature: Add reading time to posts

---
 _data/read_time.yml      |  7 +++++++
 _includes/read-time.html | 15 +++++++++++++++
 _layouts/home.html       |  7 ++++++-
 _layouts/post.html       | 32 +++++++++++++++-----------------
 assets/css/home.scss     |  2 +-
 assets/css/post.scss     | 27 ++++++++++++++++++++++-----
 6 files changed, 66 insertions(+), 24 deletions(-)
 create mode 100644 _data/read_time.yml
 create mode 100644 _includes/read-time.html

diff --git a/_data/read_time.yml b/_data/read_time.yml
new file mode 100644
index 0000000..0349fea
--- /dev/null
+++ b/_data/read_time.yml
@@ -0,0 +1,7 @@
+# words per minute
+wpm: 180
+
+# minimum value
+min_time: 1
+
+prompt: min
diff --git a/_includes/read-time.html b/_includes/read-time.html
new file mode 100644
index 0000000..c81f4b8
--- /dev/null
+++ b/_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>
diff --git a/_layouts/home.html b/_layouts/home.html
index 76c66d5..f9c6752 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -65,9 +65,13 @@ layout: page
 
     <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>
@@ -75,6 +79,7 @@ layout: page
         <i class="fas fa-spinner fa-spin fa-fw"></i>
       </span>
       {% endif %}
+
     </div>
   </div> <!-- .post-review -->
 
diff --git a/_layouts/post.html b/_layouts/post.html
index 435afc6..faf2d3f 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -18,33 +18,31 @@ layout: default
       <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 -->
 
diff --git a/assets/css/home.scss b/assets/css/home.scss
index 0cbf7e5..274184e 100644
--- a/assets/css/home.scss
+++ b/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;
         }
       }
     }
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 774928f..3a05925 100644
--- a/assets/css/post.scss
+++ b/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;