From dcfc7b55895146380eabb511b5aaf9835f1f5e36 Mon Sep 17 00:00:00 2001
From: Bachrul uluum <49960993+uluumbch@users.noreply.github.com>
Date: Fri, 23 Jul 2021 23:37:30 +0700
Subject: [PATCH] feat(article): reading time (#204)

* add reading time feature

* Revert change in jsconfig.json

* feat: add article.readingTime param, and improve style

* Revert change in jsconfig.json x2

* Remove reading time in compact layout

It doesn't look right to me for now

* feat: add i18n support to reading time string

* Hide footer.article-time when there's not content

Co-authored-by: Jimmy Cai <github@jimmycai.com>
---
 assets/icons/date.svg                         |  9 +++++++
 assets/scss/partials/article.scss             |  7 ++++++
 exampleSite/config.yaml                       |  1 +
 i18n/en.yaml                                  |  5 ++++
 .../partials/article/components/details.html  | 25 ++++++++++++++-----
 5 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 assets/icons/date.svg

diff --git a/assets/icons/date.svg b/assets/icons/date.svg
new file mode 100644
index 0000000..ed92a90
--- /dev/null
+++ b/assets/icons/date.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
+  <circle cx="18" cy="18" r="4" />
+  <path d="M15 3v4" />
+  <path d="M7 3v4" />
+  <path d="M3 11h16" />
+  <path d="M18 16.496v1.504l1 1" />
+</svg>
\ No newline at end of file
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index c71cab4..459c22f 100644
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@@ -95,7 +95,9 @@
     display: flex;
     align-items: center;
     color: var(--card-text-color-tertiary);
+    gap: 15px;
     margin-top: 10px;
+    flex-wrap: wrap;
 
     svg {
         vertical-align: middle;
@@ -108,6 +110,11 @@
     time {
         font-size: 1.4rem;
     }
+
+    & > div {
+        display: inline-flex;
+        align-items: center;
+    }
 }
 
 .article-category,
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index de5d951..2ff6a1e 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -44,6 +44,7 @@ params:
     article:
         math: false
         toc: true
+        readingTime: true 
         license:
             enabled: true
             default: Licensed under CC BY-NC-SA 4.0
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 21b1310..e279278 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -29,6 +29,11 @@ article:
     lastUpdatedOn:
         other: Last updated on
 
+    readingTime:
+        one: "{{ .Count }} min read"
+        ### Seems that there's no need to add 's' even if it's plural in English
+        other: "{{ .Count }} min read"
+
 notFound:
     title:
         other: Not Found
diff --git a/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html
index 5c5397b..64d6c6e 100644
--- a/layouts/partials/article/components/details.html
+++ b/layouts/partials/article/components/details.html
@@ -21,12 +21,25 @@
     </h3>
     {{ end }}
 
-    {{- if not .Date.IsZero -}}
+    {{ if or (not .Date.IsZero) (.Site.Params.article.readingTime) }}
     <footer class="article-time">
-        {{ partial "helper/icon" "clock" }}
-        <time class="article-time--published">
-            {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
-        </time>
+        {{ if not .Date.IsZero }}
+            <div>
+                {{ partial "helper/icon" "date" }}
+                <time class="article-time--published">
+                    {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
+                </time>
+            </div>
+        {{ end }}
+
+        {{ if .Site.Params.article.readingTime }}
+            <div>
+                {{ partial "helper/icon" "clock" }}
+                <time class="article-time--reading">
+                    {{ T "article.readingTime" .ReadingTime }}
+                </time>
+            </div>
+        {{ end }}
     </footer>
-    {{- end -}}
+    {{ end }}
 </div>
\ No newline at end of file