add reading time feature

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>

assets/jsconfig.json

@@ -5,6 +5,6 @@
    "*": [
     "*"
    ]
-        },
+  }
  }
 }

layouts/partials/article-list/compact.html

@@ -6,8 +6,8 @@
             </h2>
             <footer class="article-time">
                 <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-                    {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
-                </time>
+                    {{- .Date.Format  (or .Site.Params.dateFormat.published "Jan 02, 2006 ") -}}&nbsp;
+                    {{ .ReadingTime }} min read</time>
             </footer>
         </div>
 
@@ -26,10 +26,7 @@
             {{- $Height = $thumbnail.Height -}}
             {{- end -}}
 
-                    <img src="{{ $Permalink }}" 
-                        width="{{ $Width }}"
-                        height="{{ $Height }}" 
-                        loading="lazy">
+            <img src="{{ $Permalink }}" width="{{ $Width }}" height="{{ $Height }}" loading="lazy">
             {{ else }}
             <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
             {{ end }}

layouts/partials/article/components/details.html

@@ -2,7 +2,8 @@
     {{ if .Params.categories }}
     <header class="article-category">
         {{ range (.GetTerms "categories") }}
-            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
+        <a href="{{ .RelPermalink }}"
+            {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};" {{ end }}>
             {{ .LinkTitle }}
         </a>
         {{ end }}
@@ -23,9 +24,13 @@
 
     {{- 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">
-            {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
+            {{ .ReadingTime }} min read
         </time>
     </footer>
     {{- end -}}