perf: avoid the layout shift for post datetime

Author: cotes2020

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

_includes/timeago.html

@@ -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);
   });
 });

_javascript/commons/locale-helper.js

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

_javascript/utils/locale-datetime.js

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

_javascript/utils/timeago.js

@@ -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/archives.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/category.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>

_layouts/home.html

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