Merge branch 'master' into KaTeX-Update

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/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,

assets/scss/partials/layout/article.scss

@@ -70,6 +70,12 @@
                 flex-wrap: wrap;
                 text-transform: unset;
             }
+
+            .article-copyright {
+                a {
+                    color: var(--body-text-color);
+                }
+            }
         }
     }
 }

exampleSite/config.yaml

@@ -37,12 +37,14 @@ params:
         emoji: 🍥
         subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         avatar:
+            enabled: true
             local: true
             src: img/avatar.png
 
     article:
         math: false
         toc: true
+        readingTime: true 
         license:
             enabled: true
             default: Licensed under CC BY-NC-SA 4.0

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

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" }}
+        {{ 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>

layouts/partials/article/components/footer.html

@@ -4,7 +4,7 @@
     {{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
     <section class="article-copyright">
         {{ partial "helper/icon" "copyright" }}
-        <span>{{ default .Site.Params.article.license.default .Params.license }}</span>
+        <span>{{ default .Site.Params.article.license.default .Params.license | markdownify }}</span>
     </section>
     {{ end }}
 

layouts/partials/sidebar/left.html

@@ -7,6 +7,7 @@
 
     <header class="site-info">
         {{ with .Site.Params.sidebar.avatar }}
+            {{ if (default true .enabled) }}
             <figure class="site-avatar">
                 {{ if not .local }}
                     <img src="{{ .src }}" width="300" height="300" class="site-logo" loading="lazy" alt="Avatar">
@@ -27,6 +28,7 @@
                 {{ end }}
             </figure>
             {{ end }}
+        {{ end }}
         <h1 class="site-name"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
         <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
     </header>