feat: old content warning (#266)

Eric Park

11.08.2021 33fe67a975fce9de03f9666bdbebe647721eb57d

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

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 @@
  --blockquote-text-color: #808080;
  --blockquote-border-color: #424242;
  --link-color: #58a6fe;
  --warning-alert-color: #4d00c9c7;
}

html {
@@ -1024,6 +1026,29 @@
  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 @@
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 @@
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 @@
one = "읽는 시간 1분"
other = "읽는 시간 {{ .Count }}분"

[old_content_warning]
one = "경고: 이 글이 작성된 지 하루가 넘었습니다. 글의 정보가 오래되어 부정확할 수 있습니다."
other = "경고: 이 글이 작성된 지 {{ .Count }}일이 넘었습니다. 글의 정보가 오래되어 부정확할 수 있습니다."

[page_not_found]
other = "페이지를 찾을 수 없음"


 layouts/_default/single.html

@@ -43,6 +43,8 @@

      {{- end -}}

      {{- partial "expirationnote.html" . -}}

      {{ .Content }}

      {{- if isset .Params "series" -}}

 layouts/partials/expirationnote.html

New file
@@ -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 -}}