feat: old content warning (#266)

Displays a warning message for potentially stale content.

Co-authored-by: Alexander Bilz <mail@alexbilz.com>

README.md

@@ -686,6 +686,31 @@ series: - series-name
 
 If you want to share the full series, you can do so by sharing the link `<base-url>/series/<series-name>`
 
+### Show warning for outdated content
+
+You can provide an outdated warning for viewers reading posts older than a certain number of days. This is useful if your posts have time-sensitive information that may become incorrect over time.
+
+Enable the warning in the configuration and specify the duration (in days):
+
+```toml
+[params]
+oldContentWarning = true
+oldContentDuration = 365
+```
+
+You can optionally override the trigger duration on a given post by adding the following parameter in the front matter:
+
+```md
++++
+...
+old_content_duration: 0
++++
+```
+
+A duration of 0 disables the warning.
+
+By default, this warning only shows on posts. You can override this behavior by setting the `old_content_duration` parameter in the front matter of pages you want this warning to be displayed on.
+
 ## License
 
 Anatole is licensed under the [MIT license](https://github.com/lxndrblz/anatole/blob/master/LICENSE).

assets/css/style.css

@@ -15,6 +15,7 @@
   --blockquote-text-color: #858585;
   --blockquote-border-color: #dfe2e5;
   --link-color: #0366d7;
+  --warning-alert-color: #ffc107;
   --thumbnail-height: 15em;
   scroll-padding-top: 100px;
   --body-max-width: 1920px;
@@ -42,6 +43,7 @@ html[data-theme='dark'] {
   --blockquote-text-color: #808080;
   --blockquote-border-color: #424242;
   --link-color: #58a6fe;
+  --warning-alert-color: #4d00c9c7;
 }
 
 html {
@@ -1024,6 +1026,29 @@ a.btn {
   display: inherit;
 }
 
+.alert {
+  padding: 1rem;
+  border-radius: 1 px;
+  border-style: solid;
+  border-color: var(--warning-alert-color);
+  border-radius: 0.25rem;
+  border-width: 2px;
+}
+
+.alert #indicator {
+  background-color: var(--warning-alert-color);
+  display: inline-block;
+  border-radius: 9999px;
+  padding: 0.5rem;
+  height: 1.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  text-align: center;
+  color: var(--body-color);
+  font-weight: 800;
+  margin-right: 0.75rem;
+}
+
 @media screen and (min-width: 961px), print {
   header {
     border-bottom: 1px solid var(--border-color);

i18n/de.toml

@@ -8,6 +8,10 @@ other = "Tag"
 one = "{{ .Count }} Minute zum Lesen"
 other = "{{ .Count }} Minuten zum Lesen"
 
+[old_content_warning]
+one = "Warnung: Dieser Beitrag ist über einen {{ .Count }} Tag alt. Die Information kann veraltet sein."
+other = "Warnung: Dieser Beitrag ist über {{ .Count }} Tage alt. Die Informationen können veraltet sein."
+
 [page_not_found]
 other = "Seite nicht gefunden"
 

i18n/en.toml

@@ -8,6 +8,10 @@ other = "tag"
 one = "One-minute read"
 other = "{{ .Count }}-minute read"
 
+[old_content_warning]
+one = "Warning: This post is over {{ .Count }} day old. The information may be out of date."
+other = "Warning: This post is over {{ .Count }} days old. The information may be out of date."
+
 [page_not_found]
 other = "Page Not Found"
 

i18n/ko.toml

@@ -8,6 +8,10 @@ other = "태그"
 one = "읽는 시간 1분"
 other = "읽는 시간 {{ .Count }}분"
 
+[old_content_warning]
+one = "경고: 이 글이 작성된 지 하루가 넘었습니다. 글의 정보가 오래되어 부정확할 수 있습니다."
+other = "경고: 이 글이 작성된 지 {{ .Count }}일이 넘었습니다. 글의 정보가 오래되어 부정확할 수 있습니다."
+
 [page_not_found]
 other = "페이지를 찾을 수 없음"
 
@@ -33,4 +37,4 @@ other = "이름"
 other = "이메일"
 
 [message]
-other = "메시지"
+other = "메시지"

layouts/_default/single.html

@@ -43,6 +43,8 @@ <h3>Table of Contents</h3>
 
       {{- end -}}
 
+      {{- partial "expirationnote.html" . -}}
+
       {{ .Content }}
 
       {{- if isset .Params "series" -}}

layouts/partials/expirationnote.html

@@ -0,0 +1,24 @@
+{{- if (eq .Site.Params.oldContentWarning true) -}}
+  {{- $ageDays := div (sub now.Unix .Date.Unix) 86400 -}}
+  {{- $duration := .Site.Params.oldContentDuration -}}
+
+  {{- if and (ne .Type "post") (ne .Type .Site.Params.postSectionName) -}}
+    {{- $duration = 0 -}}
+
+  {{- end -}}
+
+  {{- if (isset .Params "old_content_duration") -}}
+    {{- $duration = .Params.old_content_duration -}}
+
+  {{- end -}}
+
+  {{- if and (gt $ageDays $duration) (ne $duration 0) -}}
+    <div class="alert">
+      <div id="indicator">!</div>
+      {{ i18n "old_content_warning" (dict "Count" $duration) }}
+    </div>
+
+  {{- end -}}
+
+
+{{- end -}}