feat(post): add out-of-date content warning (#68)

archetypes/default.md

@@ -26,6 +26,10 @@ mathjaxEnableAutoNumber: false
 # You unlisted posts you might want not want the header or footer to show
 hideHeaderAndFooter: false
 
+# You can enable or disable out-of-date content warning for individual post.
+# Comment this out to use the global config.
+#enableOutdatedInfoWarning: false
+
 flowchartDiagrams:
   enable: false
   options: ""

exampleSite/config.toml

@@ -98,6 +98,15 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
     gitmentCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitment@0.0.3/style/default.min.css" crossorigin="anonymous">'
     gitalkJS = '<script src="https://cdn.jsdelivr.net/npm/gitalk@1.2.2/dist/gitalk.min.js" integrity="sha256-DcjhdbufsHMHflFjZtKNFnPKOAL2ybOxGcPOR4MtnJg=" crossorigin="anonymous"></script>'
     gitalkCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1.2.2/dist/gitalk.css" integrity="sha256-rJVe5uyYRXdLM+Kkoj7JtN+9qI0bZTxkYTaNWODpg7U=" crossorigin="anonymous">'
+    timeagoJS = '<script src="https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.min.js" integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin="anonymous"></script>'
+    timeagoLocalesJS = '<script src="https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.locales.min.js" integrity="sha256-ZwofwC1Lf/faQCzN7nZtfijVV6hSwxjQMwXL4gn9qU8=" crossorigin="anonymous"></script>'
+
+  # Display a message at the beginning of an article to warn the readers that it's content may be outdated.
+  # 在文章开头显示提示信息，提醒读者文章内容可能过时。
+  [params.outdatedInfoWarning]
+    enable = false
+    hint = 30               # Display hint if the last modified time is more than these days ago.    # 如果文章最后更新于这天数之前，显示提醒
+    warn = 180              # Display warning if the last modified time is more than these days ago.    # 如果文章最后更新于这天数之前，显示警告
 
   [params.gitment]          # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment
     owner = ""              # Your GitHub ID

i18n/en.yaml

@@ -33,10 +33,10 @@ nextPage:
 
 prevPost:
   other: "Prev"
-  
+
 nextPost:
   other: "Next"
-  
+
 toc:
   other: "Contents"
 
@@ -60,6 +60,12 @@ readingTime:
   one: "{{ .Count }} min read"
   other: "{{ .Count }} mins read"
 
+outdatedInfoWarningBefore:
+  other: "[NOTE] Updated "
+
+outdatedInfoWarningAfter:
+  other: ". This article may have outdated content or subject matter."
+
 # ===== content license =====
 author:
   other: "Author"

i18n/es.yaml

@@ -60,6 +60,12 @@ readingTime:
   one: "{{ .Count }} min lectura"
   other: "{{ .Count }} mins lectura"
 
+outdatedInfoWarningBefore:
+  other: "[NOTE] Updated "
+
+outdatedInfoWarningAfter:
+  other: ". This article may have outdated content or subject matter."
+
 # ===== content license =====
 author:
   other: "Autor"

i18n/fr.yaml

@@ -60,6 +60,12 @@ readingTime:
   one: "{{ .Count }} min de lecture"
   other: "{{ .Count }} mins de lecture"
 
+outdatedInfoWarningBefore:
+  other: "[NOTE] Updated "
+
+outdatedInfoWarningAfter:
+  other: ". This article may have outdated content or subject matter."
+
 # ===== content license =====
 author:
   other: "Auteur"

i18n/zh-CN.yaml

@@ -33,10 +33,10 @@ nextPage:
 
 prevPost:
   other: "上一篇"
-  
+
 nextPost:
   other: "下一篇"
-  
+
 toc:
   other: "文章目录"
 
@@ -60,6 +60,12 @@ readingTime:
   one: "预计阅读 {{ .Count }} 分钟"
   other: "预计阅读 {{ .Count }} 分钟"
 
+outdatedInfoWarningBefore:
+  other: "【注意】最后更新于 "
+
+outdatedInfoWarningAfter:
+  other: "，文中内容可能已过时，请谨慎使用。"
+
 # ===== content license =====
 author:
   other: "文章作者"

layouts/partials/post/outdated-info-warning.html

@@ -0,0 +1,28 @@
+{{- if or .Params.enableOutdatedInfoWarning (and .Site.Params.outdatedInfoWarning.enable (ne .Params.enableOutdatedInfoWarning false)) }}
+  {{- $daysAgo := div (sub now.Unix .Lastmod.Unix) 86400 }}
+  {{- $hintThreshold := .Site.Params.outdatedInfoWarning.hint | default 30 }}
+  {{- $warnThreshold := .Site.Params.outdatedInfoWarning.warn | default 180 }}
+
+  {{- $updateTime := .Lastmod }}
+  {{- if .GitInfo }}
+    {{- if lt .GitInfo.AuthorDate.Unix .Lastmod.Unix }}
+      {{- $updateTime := .GitInfo.AuthorDate }}
+    {{- end }}
+  {{- end -}}
+
+  {{- if gt $daysAgo $hintThreshold }}
+  <div class="post-outdated">
+    {{- if gt $daysAgo $warnThreshold }}
+    <div class="warn">
+    {{- else }}
+    <div class="hint">
+    {{- end }}
+      <p>{{ T "outdatedInfoWarningBefore" -}}
+        <span class="timeago" datetime="{{ dateFormat "2006-01-02T15:04:05" $updateTime }}" title="{{ dateFormat "January 2, 2006" $updateTime }}">
+        {{- dateFormat "January 2, 2006" $updateTime -}}
+        </span>{{ T "outdatedInfoWarningAfter" -}}
+      </p>
+    </div>
+  </div>
+  {{- end -}}
+{{- end -}}

layouts/partials/scripts.html

@@ -10,6 +10,22 @@
   {{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.js" | relURL }}"></script>{{ end }}
 {{- end -}}
 
+<!-- timeago.JS -->
+{{- if and (or .Params.enableOutdatedInfoWarning (and .Site.Params.outdatedInfoWarning.enable (ne .Params.enableOutdatedInfoWarning false))) (or .IsPage .IsHome) }}
+  {{- if .Site.Params.publicCDN.enable }}
+  {{ .Site.Params.publicCDN.timeagoJS | safeHTML }}
+  {{ .Site.Params.publicCDN.timeagoLocalesJS | safeHTML }}
+  {{- else }}
+  <script type="text/javascript" src="{{ "lib/timeago/timeago-3.0.2.min.js" | relURL }}"></script>
+  <script type="text/javascript" src="{{ "lib/timeago/timeago.locales-3.0.2.min.js" | relURL }}"></script>
+  {{- end }}
+<script>  // NOTE: timeago.js uses the language code format like "zh_CN" (underscore and case sensitive)
+  var languageCode = {{ .Site.LanguageCode }}.replace(/-/g, '_').replace(/_(.*)/, function ($0, $1) {return $0.replace($1, $1.toUpperCase());});
+  timeago().render(document.querySelectorAll('.timeago'), languageCode);
+  timeago.cancel();  // stop update
+</script>
+{{- end }}
+
 <!-- flowchart -->
 {{- if and (or .Params.flowchartDiagrams.enable (and .Site.Params.flowchartDiagrams.enable (ne .Params.flowchartDiagrams.enable false))) (or .IsPage .IsHome) -}}
 <script>

layouts/post/single.html

@@ -27,6 +27,9 @@
     <!-- TOC -->
     {{ partial "post/toc.html" . }}
 
+    <!-- Outdated Info Warning -->
+    {{ partial "post/outdated-info-warning.html" . }}
+
     <!-- Content -->
     <div class="post-content">
       {{ .Content }}

src/css/_partial/_post.scss

@@ -9,7 +9,7 @@
 
 .post {
   padding: $post-padding;
-  
+
   & + .post {
     border-top: $post-border;
   }
@@ -20,4 +20,5 @@
   @import '_post/copyright';
   @import '_post/reward';
   @import '_post/footer';
-}
+  @import '_post/outdated';
+}

src/css/_partial/_post/_outdated.scss

@@ -0,0 +1,25 @@
+.post-outdated {
+  .hint {
+    position: relative;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 5px 10px;
+    border-left: 4px solid rgb(66, 172, 243);
+    background-color: rgb(239, 245, 255);
+    border-color: rgb(66, 172, 243);
+  }
+
+  .warn {
+    position: relative;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 5px 10px;
+    border-left: 4px solid #f9cf63;
+    background-color: #ffffc0;
+    border-color: #f9cf63;
+  }
+}
+
+
+
+

static/lib/timeago/timeago-3.0.2.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof module&&module.exports?(module.exports=e(),module.exports.default=module.exports):t.timeago=e()}("undefined"!=typeof window?window:this,function(){function t(t){return t instanceof Date?t:isNaN(t)?/^\d+$/.test(t)?new Date(e(t)):(t=(t||"").trim().replace(/\.\d+/,"").replace(/-/,"/").replace(/-/,"/").replace(/(\d)T(\d)/,"$1 $2").replace(/Z/," UTC").replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"),new Date(t)):new Date(e(t))}function e(t){return parseInt(t)}function n(t,n,r){n=l[n]?n:l[r]?r:"en";for(var o=0,i=t<0?1:0,a=t=Math.abs(t);t>=p[o]&&o<h;o++)t/=p[o];return t=e(t),o*=2,t>(0===o?9:1)&&(o+=1),l[n](t,o,a)[i].replace("%s",t)}function r(e,n){return((n=n?t(n):new Date)-t(e))/1e3}function o(t){for(var e=1,n=0,r=Math.abs(t);t>=p[n]&&n<h;n++)t/=p[n],e*=p[n];return r%=e,r=r?e-r:e,Math.ceil(r)}function i(t){return a(t,"data-timeago")||a(t,"datetime")}function a(t,e){return t.getAttribute?t.getAttribute(e):t.attr?t.attr(e):void 0}function u(t,e){return t.setAttribute?t.setAttribute(m,e):t.attr?t.attr(m,e):void 0}function c(t,e){this.nowDate=t,this.defaultLocale=e||"en"}function d(t,e){return new c(t,e)}var f="second_minute_hour_day_week_month_year".split("_"),s="秒_分钟_小时_天_周_月_年".split("_"),l={en:function(t,e){if(0===e)return["just now","right now"];var n=f[parseInt(e/2)];return t>1&&(n+="s"),[t+" "+n+" ago","in "+t+" "+n]},zh_CN:function(t,e){if(0===e)return["刚刚","片刻后"];var n=s[parseInt(e/2)];return[t+n+"前",t+n+"后"]}},p=[60,60,24,7,365/7/12,12],h=6,m="data-tid",w={};return c.prototype.doRender=function(t,e,i){var a,c=r(e,this.nowDate),d=this;t.innerHTML=n(c,i,this.defaultLocale),w[a=setTimeout(function(){d.doRender(t,e,i),delete w[a]},Math.min(1e3*o(c),2147483647))]=0,u(t,a)},c.prototype.format=function(t,e){return n(r(t,this.nowDate),e,this.defaultLocale)},c.prototype.render=function(t,e){void 0===t.length&&(t=[t]);for(var n=0,r=t.length;n<r;n++)this.doRender(t[n],i(t[n]),e)},c.prototype.setLocale=function(t){this.defaultLocale=t},d.register=function(t,e){l[t]=e},d.cancel=function(t){var e;if(t)(e=a(t,m))&&(clearTimeout(e),delete w[e]);else{for(e in w)clearTimeout(e);w={}}},d});