Improve local datetime display

- Protect author's location privacy - Reduce locale configuration parameters
cotes2020 · Jan 28, 2022 · a5d38e7 · a5d38e7
1 parent a24545e
commit a5d38e7
Show file tree

Hide file tree

Showing 26 changed files with 165 additions and 196 deletions.
diff --git a/_config.yml b/_config.yml
@@ -12,6 +12,9 @@ baseurl: ''
 # otherwise, the layout language will use the default value of 'en'.
 lang: en
 
+# Additional parameters for datetime localization, optional. › https://github.com/iamkun/dayjs/tree/dev/src/locale
+prefer_datetime_locale:
+
 # Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
 timezone: Asia/Shanghai
 

diff --git a/_data/locales/en.yml b/_data/locales/en.yml
@@ -27,14 +27,6 @@ panel:
   trending_tags: Trending Tags
   toc: Contents
 
-#  The liquid date format › http://strftime.net/
-date_format:
-  tooltip: '%a, %b %e, %Y, %l:%M %p %z'
-  post:
-    long: '%b %e, %Y'
-    short: '%b %e'
-    archive_month: '%b'
-
 copyright:
   # Shown at the bottom of the post
   license:
@@ -62,11 +54,6 @@ post:
   written_by: By
   posted: Posted
   updated: Updated
-  timeago:
-    day: days ago
-    hour: hours ago
-    minute: minutes ago
-    just_now: just now
   words: words
   pageview_measure: views
   read_time:

diff --git a/_data/locales/id-ID.yml b/_data/locales/id-ID.yml
@@ -27,14 +27,6 @@ panel:
   trending_tags: Tagar Terpopuler
   toc: Konten
 
-#  The liquid date format › http://strftime.net/
-date_format:
-  tooltip: "%a, %e %b, %Y, %l:%M %p"
-  post:
-    long: "%e %b, %Y"
-    short: "%e %b"
-    archive_month: "%b"
-
 copyright:
   # Shown at the bottom of the post
   license:
@@ -62,11 +54,6 @@ post:
   written_by: Oleh
   posted: Diterbitkan
   updated: Diperbarui
-  timeago:
-    day: hari yang lalu
-    hour: jam yang lalu
-    minute: menit yang lalu
-    just_now: baru saja
   words: kata
   pageview_measure: dilihat
   read_time:

diff --git a/_data/locales/ko-KR.yml b/_data/locales/ko-KR.yml
@@ -27,14 +27,6 @@ panel:
   trending_tags: 인기 태그
   toc: 바로가기
 
-#  The liquid date format › http://strftime.net/
-date_format:
-  tooltip: '%F, %R %z'
-  post:
-    long: '%Y년 %m월 %d일'
-    short: '%m월 %d일'
-    archive_month: '%b월'
-
 copyright:
   # Shown at the bottom of the post
   license:
@@ -62,11 +54,6 @@ post:
   written_by: By
   posted: 게시
   updated: 업데이트
-  timeago:
-    day: 일 전
-    hour: 시간 전
-    minute: 분 전
-    just_now: 방금
   words: 단어
   pageview_measure: 조회
   read_time:

diff --git a/_data/locales/my-MM.yml b/_data/locales/my-MM.yml
@@ -27,14 +27,6 @@ panel:
   trending_tags: ခေတ်စားနေသည့်တက်ဂ်များ
   toc: အကြောင်းအရာများ
 
-#  The liquid date format › http://strftime.net/
-date_format:
-  tooltip: '%a, %b %e, %Y, %l:%M %p %z'
-  post:
-    long: '%b %e, %Y'
-    short: '%b %e'
-    archive_month: '%b'
-
 copyright:
   # Shown at the bottom of the post
   license:
@@ -62,11 +54,6 @@ post:
   written_by: ကရေးသားခဲ့သည်။
   posted: တင်ထားခဲ့သည်။
   updated: မွမ်းမံထားခဲ့သည်။
-  timeago:
-    day: လွန်ခဲ့သော ရက်များတွင်း
-    hour: လွန်ခဲ့သော နာရီပိုင်းတွင်း
-    minute: လွန်ခဲ့သော မိနစ်အနည်းငယ်က
-    just_now: အခုလေးတင်
   words: စကားလုံးများ
   pageview_measure: အမြင်များ
   read_time:

diff --git a/_data/locales/ru-RU.yml b/_data/locales/ru-RU.yml
@@ -27,14 +27,6 @@ panel:
   trending_tags: Популярные теги
   toc: Содержание
 
-#  The liquid date format › http://strftime.net/
-date_format:
-  tooltip: '%a, %b %e, %Y, %l:%M %p %z'
-  post:
-    long: '%b %e, %Y'
-    short: '%b %e'
-    archive_month: '%b'
-
 copyright:
   # Shown at the bottom of the post
   license:
@@ -62,11 +54,6 @@ post:
   written_by: Автор
   posted: Время публикации
   updated: Обновлено
-  timeago:
-    day: дней назад
-    hour: часов назад
-    minute: минут назад
-    just_now: только что
   words: слов
   pageview_measure: просмотров
   read_time:

diff --git a/_data/locales/uk-UA.yml b/_data/locales/uk-UA.yml
@@ -27,14 +27,6 @@ panel:
   trending_tags: Популярні теги
   toc: Зміст
 
-#  The liquid date format › http://strftime.net/
-date_format:
-  tooltip: '%a, %b %e, %Y, %l:%M %p %z'
-  post:
-    long: '%b %e, %Y'
-    short: '%b %e'
-    archive_month: '%b'
-
 copyright:
   # Shown at the bottom of the post
   license:
@@ -62,11 +54,6 @@ post:
   written_by: Автор
   posted: Час публікації
   updated: Оновлено
-  timeago:
-    day: днів тому
-    hour: годин тому
-    minute: хвилин тому
-    just_now: щойно
   words: слів
   pageview_measure: переглядів
   read_time:

diff --git a/_data/locales/zh-CN.yml b/_data/locales/zh-CN.yml
@@ -27,14 +27,6 @@ panel:
   trending_tags: 热门标签
   toc: 文章内容
 
-#  The liquid date format › http://strftime.net/
-date_format:
-  tooltip: '%F, %R %z'
-  post:
-    long: '%F'
-    short: '%m-%d'
-    archive_month: '%m月'
-
 copyright:
   # Shown at the bottom of the post
   license:
@@ -61,11 +53,6 @@ post:
   written_by: 作者
   posted: 发表于
   updated: 更新于
-  timeago:
-    day: 天前
-    hour: 小时前
-    minute: 分钟前
-    just_now: 刚刚
   words: 字
   pageview_measure: 次浏览
   read_time:

diff --git a/_includes/head.html b/_includes/head.html
@@ -6,13 +6,12 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-  {% if page.layout == 'home' or page.layout == 'post' %}
+  <!-- Allow having a localized datetime different from the appearance language -->
+  {% if site.prefer_datetime_locale %}
+    <meta name="prefer-datetime-locale" content="{{ site.prefer_datetime_locale }}">
+  {% endif %}
 
-    <!-- i18n for `_javascript/utils/timeago.js` -->
-    <meta name="day-prompt" content="{{ site.data.locales[lang].post.timeago.day }}">
-    <meta name="hour-prompt" content="{{ site.data.locales[lang].post.timeago.hour }}">
-    <meta name="minute-prompt" content="{{ site.data.locales[lang].post.timeago.minute }}">
-    <meta name="justnow-prompt" content="{{ site.data.locales[lang].post.timeago.just_now }}">
+  {% if page.layout == 'home' or page.layout == 'post' %}
 
     {% if site.google_analytics.pv.proxy_endpoint %}
       <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">

diff --git a/_includes/js-selector.html b/_includes/js-selector.html
@@ -18,10 +18,29 @@
 {% endif %}
 
 {% if page.layout == 'home'
-    or page.layout == 'categories'
-    or page.layout == 'post'
-    or page.layout == 'page' %}
+      or page.layout == 'post'
+      or page.layout == 'archives'
+      or page.layout == 'category'
+      or page.layout == 'tag' %}
+
+  {% if site.prefer_datetime_locale %}
+    {% assign locale = site.prefer_datetime_locale | downcase %}
+  {% else %}
+    {% assign locale = site.lang | split: '-' | first %}
+  {% endif %}
+
+  <script src="https://cdn.jsdelivr.net/combine/npm/dayjs@1,npm/dayjs@1/locale/{{ locale }}.min.js,npm/dayjs@1/plugin/relativeTime.min.js,npm/dayjs@1/plugin/localizedFormat.min.js"></script>
+{% endif %}
+
+{% if page.layout == 'home'
+      or page.layout == 'categories'
+      or page.layout == 'post'
+      or page.layout == 'page' %}
   {% assign type = page.layout %}
+{% elsif page.layout == 'archives'
+      or page.layout == 'category'
+      or page.layout == 'tag' %}
+  {% assign type = "misc" %}
 {% else %}
   {% assign type = "commons" %}
 {% endif %}

diff --git a/_includes/no-zero-date.html b/_includes/no-zero-date.html
diff --git a/_includes/timeago.html b/_includes/timeago.html
@@ -3,24 +3,13 @@
   See: ${JS_ROOT}/utils/timeago.js
 -->
 
-{% assign tooltip_df = site.data.locales[lang].date_format.tooltip %}
-{% assign post_long_df = site.data.locales[lang].date_format.post.long %}
-{% assign post_short_df = site.data.locales[lang].date_format.post.short %}
-
 <em class="timeago{% if include.class %} {{ include.class }}{% endif %}"
-    date="{{ include.date | date_to_xmlschema }}"
+    data-ts="{{ include.date | date: '%s' }}"
     {% if include.tooltip %}
-      data-toggle="tooltip"
-      data-placement="bottom"
-      title="{{ include.date | date: tooltip_df }}"
+      data-toggle="tooltip" data-placement="bottom" data-tooltip-df="llll"
+    {% endif %}
+    {% if include.capitalize %}
+      data-capitalize="true"
     {% endif %}>
-
-  {%- assign this_year = site.time | date: "%Y" -%}
-  {%- assign post_year = include.date | date: "%Y" -%}
-
-  {%- if post_year == this_year -%}
-    {{ include.date | date: post_short_df }}
-  {%- else -%}
-    {{ include.date | date: post_long_df }}
-  {%- endif -%}
+  {{ include.date | date: '%Y-%m-%d' }}
 </em>
diff --git a/_javascript/commons/locale-helper.js b/_javascript/commons/locale-helper.js
@@ -0,0 +1,19 @@
+/**
+ * A tool for locale datetime
+ */
+
+const LocaleHelper = (function () {
+  const $preferLocale = $('meta[name="prefer-datetime-locale"]');
+  const locale = $preferLocale.length > 0 ?
+      $preferLocale.attr('content').toLowerCase() : $('html').attr('lang').substr(0, 2);
+  const attrTimestamp = 'data-ts';
+  const attrDateFormat = 'data-df';
+
+  return {
+    locale: () => locale,
+    attrTimestamp: () => attrTimestamp,
+    attrDateFormat: () => attrDateFormat,
+    getTimestamp: ($elem) => Number($elem.attr(attrTimestamp)),  // unix timestamp
+    getDateFormat: ($elem) => $elem.attr(attrDateFormat)
+  };
+}());
diff --git a/_javascript/utils/locale-datetime.js b/_javascript/utils/locale-datetime.js
@@ -0,0 +1,20 @@
+/**
+ * Update month/day to locale datetime
+ *
+ * Requirement: <https://github.com/iamkun/dayjs>
+ */
+
+$(function() {
+  dayjs.locale(LocaleHelper.locale());
+  dayjs.extend(window.dayjs_plugin_localizedFormat);
+
+  $(`[${LocaleHelper.attrTimestamp()}]`).each(function () {
+    const date = dayjs.unix(LocaleHelper.getTimestamp($(this)));
+    const df = LocaleHelper.getDateFormat($(this));
+    const text = date.format(df);
+
+    $(this).text(text);
+    $(this).removeAttr(LocaleHelper.attrTimestamp());
+    $(this).removeAttr(LocaleHelper.attrDateFormat());
+  });
+});