perf: avoid the layout shift for post datetime

_includes/datetime.html

@@ -0,0 +1,21 @@
+<!--
+ Date format snippet
+ See: ${JS_ROOT}/utils/locale-dateime.js
+-->
+
+{% assign wrap_elem = include.wrap | default: 'em' %}
+
+{% if site.prefer_datetime_locale == 'en' or lang == 'en' %}
+ {% assign df_strftime = '%b %e, %Y' %}
+ {% assign df_dayjs = 'll' %}
+{% else %}
+ {% assign df_strftime = '%F' %}
+ {% assign df_dayjs = 'YYYY-MM-DD' %}
+{% endif %}
+
+<{{ wrap_elem }} class="{% if include.class %}{{ include.class }}{% endif %}"
+ data-ts="{{ include.date | date: '%s' }}"
+ data-df="{{ df_dayjs }}"
+ {% if include.tooltip %}data-toggle="tooltip" data-placement="bottom"{% endif %}>
+ {{ include.date | date: df_strftime }}
+</{{ wrap_elem }}>

_includes/related-posts.html

@@ -60,7 +60,6 @@
 {% assign less = TOTAL_SIZE | minus: index_list.size %}
 
 {% if less > 0 %}
-
  {% for i in (0..last_index) %}
  {% assign post = site.posts[i] %}
  {% if post.url != page.url %}
@@ -74,10 +73,8 @@
  {% endunless %}
  {% endif %}
  {% endfor %}
-
 {% endif %}
 
-
 {% if index_list.size > 0 %}
  <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
  <h3 class="pt-2 mt-1 mb-4 ml-1"
@@ -89,7 +86,7 @@
  <div class="card">
  <a href="{{ post.url | relative_url }}">
  <div class="card-body">
- {% include timeago.html date=post.date class="small" %}
+ {% include datetime.html date=post.date class="small" %}
  <h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
  <div class="text-muted small">
  <p>

_javascript/utils/locale-datetime.js

@@ -4,17 +4,42 @@
  * Requirement: <https://github.com/iamkun/dayjs>
  */
 
+/* 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)
+ };
+
+}());
+
 $(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);
-
+ const text = date.format(LocaleHelper.getDateFormat($(this)));
  $(this).text(text);
  $(this).removeAttr(LocaleHelper.attrTimestamp());
  $(this).removeAttr(LocaleHelper.attrDateFormat());
+
+ // setup tooltips
+ const tooltip = $(this).attr('data-toggle');
+ if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
+ return;
+ }
+
+ const tooltipText = date.format('llll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
+ $(this).attr('data-original-title', tooltipText);
  });
 });

_layouts/archives.html

@@ -3,8 +3,17 @@
 # The Archives of posts.
 ---
 
-<div id="archives" class="pl-xl-2">
+{% include lang.html %}
+
+{% if site.prefer_datetime_locale == 'en' or lang == 'en' %}
+ {% assign df_strftime_m = '%b' %}
+ {% assign df_dayjs_m = 'MMM' %}
+{% else %}
+ {% assign df_strftime_m = '/ %m' %}
+ {% assign df_dayjs_m = '/ MM' %}
+{% endif %}
 
+<div id="archives" class="pl-xl-2">
 {% for post in site.posts %}
  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
  {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
@@ -17,9 +26,11 @@
  <li>
  <div>
  {% assign ts = post.date | date: '%s' %}
- <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
- <span class="date month small text-muted" data-ts="{{ ts }}" data-df="MMM">
- {{ post.date | date: '%m' }}
+ <span class="date day" data-ts="{{ ts }}" data-df="DD">
+ {{ post.date | date: "%d" }}
+ </span>
+ <span class="date month small text-muted" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
+ {{ post.date | date: df_strftime_m }}
  </span>
  <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
  </div>

_layouts/category.html

@@ -3,6 +3,8 @@
 # The Category layout
 ---
 
+{% include lang.html %}
+
 <div id="page-category">
  <h1 class="pl-lg-2">
  <i class="far fa-folder-open fa-fw text-muted"></i>
@@ -15,9 +17,7 @@ <h1 class="pl-lg-2">
  <li class="d-flex justify-content-between pl-md-3 pr-md-3">
  <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
  <span class="dash flex-grow-1"></span>
- <span class="text-muted small" data-ts="{{ post.date | date: '%s' }}" data-df="ll">
- {{ post.date | date: '%Y-%m-%d' }}
- </span>
+ {% include datetime.html date=post.date wrap='span' class='text-muted small' %}
  </li>
  {% endfor %}
  </ul>

_layouts/home.html

@@ -23,7 +23,6 @@
  {% assign pinned_num = 0 %}
 {% endif %}
 
-
 <!-- Get default posts -->
 
 {% assign default_beg = offset | minus: pinned.size %}
@@ -58,15 +57,11 @@ <h1>
  </div>
 
  <div class="post-meta text-muted d-flex">
-
  <div class="mr-auto">
+
  <!-- posted date -->
  <i class="far fa-calendar fa-fw"></i>
- {% include timeago.html date=post.date tooltip=true capitalize=true %}
-
- <!-- time to read -->
- <i class="far fa-clock fa-fw"></i>
- {% include read-time.html content=post.content %}
+ {% include datetime.html date=post.date %}
 
  <!-- categories -->
  {% if post.categories.size > 0 %}
@@ -78,6 +73,7 @@ <h1>
  {% endfor %}
  </span>
  {% endif %}
+
  </div>
 
  {% if post.pin %}

_layouts/post.html

@@ -61,14 +61,14 @@ <h1 data-toc-skip>{{ page.title }}</h1>
  <!-- published date -->
  <span>
  {{ site.data.locales[lang].post.posted }}
- {% include timeago.html date=page.date tooltip=true %}
+ {% include datetime.html date=page.date tooltip=true %}
  </span>
 
  <!-- lastmod date -->
  {% if page.last_modified_at %}
  <span>
  {{ site.data.locales[lang].post.updated }}
- {% include timeago.html date=page.last_modified_at tooltip=true %}
+ {% include datetime.html date=page.last_modified_at tooltip=true %}
  </span>
  {% endif %}
 

_layouts/tag.html

@@ -3,6 +3,8 @@
 # The layout for Tag page
 ---
 
+{% include lang.html %}
+
 <div id="page-tag">
  <h1 class="pl-lg-2">
  <i class="fa fa-tag fa-fw text-muted"></i>
@@ -14,9 +16,7 @@ <h1 class="pl-lg-2">
  <li class="d-flex justify-content-between pl-md-3 pr-md-3">
  <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
  <span class="dash flex-grow-1"></span>
- <span class="text-muted small" data-ts="{{ post.date | date: '%s' }}" data-df="ll">
- {{ post.date | date: '%Y-%m-%d' }}
- </span>
+ {% include datetime.html date=post.date wrap='span' class='text-muted small' %}
  </li>
  {% endfor %}
  </ul>

_sass/layout/post.scss

@@ -173,6 +173,8 @@ nav[data-toggle=toc] {
 
  em {
  @extend %normal-font-style;
+
+ color: var(--relate-post-date);
  }
 
  .card {
@@ -194,10 +196,6 @@ nav[data-toggle=toc] {
  }
  }
 
- .timeago {
- color: var(--relate-post-date);
- }
-
  p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;