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>
This commit is contained in:
Bachrul uluum 2021-07-23 23:37:30 +07:00 committed by GitHub
parent a25e6463bd
commit dcfc7b5589
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 6 deletions

9
assets/icons/date.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 508 B

View file

@ -95,7 +95,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--card-text-color-tertiary); color: var(--card-text-color-tertiary);
gap: 15px;
margin-top: 10px; margin-top: 10px;
flex-wrap: wrap;
svg { svg {
vertical-align: middle; vertical-align: middle;
@ -108,6 +110,11 @@
time { time {
font-size: 1.4rem; font-size: 1.4rem;
} }
& > div {
display: inline-flex;
align-items: center;
}
} }
.article-category, .article-category,

View file

@ -44,6 +44,7 @@ params:
article: article:
math: false math: false
toc: true toc: true
readingTime: true
license: license:
enabled: true enabled: true
default: Licensed under CC BY-NC-SA 4.0 default: Licensed under CC BY-NC-SA 4.0

View file

@ -29,6 +29,11 @@ article:
lastUpdatedOn: lastUpdatedOn:
other: Last updated on 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: notFound:
title: title:
other: Not Found other: Not Found

View file

@ -21,12 +21,25 @@
</h3> </h3>
{{ end }} {{ end }}
{{- if not .Date.IsZero -}} {{ if or (not .Date.IsZero) (.Site.Params.article.readingTime) }}
<footer class="article-time"> <footer class="article-time">
{{ partial "helper/icon" "clock" }} {{ if not .Date.IsZero }}
<time class="article-time--published"> <div>
{{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}} {{ partial "helper/icon" "date" }}
</time> <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> </footer>
{{- end -}} {{ end }}
</div> </div>