From 85b81e5c81c39c94d3943ca69ec3b6fd2b06cd68 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <github@jimmycai.com>
Date: Fri, 23 Jul 2021 09:34:38 +0000
Subject: [PATCH] feat: add article.readingTime param, and improve style

---
 assets/scss/partials/article.scss             |  7 ++++
 exampleSite/config.yaml                       |  1 +
 .../partials/article/components/details.html  | 34 +++++++++++--------
 3 files changed, 28 insertions(+), 14 deletions(-)

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/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html
index 377e10a..425eea3 100644
--- a/layouts/partials/article/components/details.html
+++ b/layouts/partials/article/components/details.html
@@ -2,10 +2,9 @@
     {{ if .Params.categories }}
     <header class="article-category">
         {{ range (.GetTerms "categories") }}
-        <a href="{{ .RelPermalink }}"
-            {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};" {{ end }}>
-            {{ .LinkTitle }}
-        </a>
+            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
+                {{ .LinkTitle }}
+            </a>
         {{ end }}
     </header>
     {{ end }}
@@ -22,16 +21,23 @@
     </h3>
     {{ end }}
 
-    {{- if not .Date.IsZero -}}
     <footer class="article-time">
-        {{ partial "helper/icon" "date" }}
-        <time class="article-time--published">
-            {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}&emsp;
-        </time>
-        {{ partial "helper/icon" "clock" }}
-        <time class="article-time--published">
-            {{ .ReadingTime }} min read
-        </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--published">
+                    {{ .ReadingTime }} min read
+                </time>
+            </div>
+        {{ end }}
     </footer>
-    {{- end -}}
 </div>
\ No newline at end of file