From 6d35f5f8da044cfad071628bb53776de03efaae4 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 26 Apr 2022 00:39:58 +0800 Subject: [PATCH] perf: avoid the layout shift for post datetime --- _includes/datetime.html | 21 +++++++ _includes/related-posts.html | 5 +- _includes/timeago.html | 15 ----- _javascript/commons/locale-helper.js | 19 ------ _javascript/utils/locale-datetime.js | 31 +++++++++- _javascript/utils/timeago.js | 87 ---------------------------- _layouts/archives.html | 19 ++++-- _layouts/category.html | 6 +- _layouts/home.html | 10 +--- _layouts/post.html | 4 +- _layouts/tag.html | 6 +- _sass/layout/post.scss | 6 +- assets/js/dist/categories.min.js | 2 +- assets/js/dist/commons.min.js | 2 +- assets/js/dist/home.min.js | 2 +- assets/js/dist/misc.min.js | 2 +- assets/js/dist/page.min.js | 2 +- assets/js/dist/post.min.js | 2 +- assets/js/dist/pvreport.min.js | 2 +- gulpfile.js/tasks/js.js | 4 +- 20 files changed, 87 insertions(+), 160 deletions(-) create mode 100644 _includes/datetime.html delete mode 100644 _includes/timeago.html delete mode 100644 _javascript/commons/locale-helper.js delete mode 100644 _javascript/utils/timeago.js diff --git a/_includes/datetime.html b/_includes/datetime.html new file mode 100644 index 0000000..47e38bd --- /dev/null +++ b/_includes/datetime.html @@ -0,0 +1,21 @@ + + +{% 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 }}> diff --git a/_includes/related-posts.html b/_includes/related-posts.html index bbda00b..a673b19 100644 --- a/_includes/related-posts.html +++ b/_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 %}
diff --git a/_includes/timeago.html b/_includes/timeago.html
deleted file mode 100644
index 899d41b..0000000
--- a/_includes/timeago.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
- {{ include.date | date: '%Y-%m-%d' }}
-
diff --git a/_javascript/commons/locale-helper.js b/_javascript/commons/locale-helper.js
deleted file mode 100644
index 196ca6c..0000000
--- a/_javascript/commons/locale-helper.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * 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
index a7766f0..571dd0f 100644
--- a/_javascript/utils/locale-datetime.js
+++ b/_javascript/utils/locale-datetime.js
@@ -4,17 +4,42 @@
* Requirement:
@@ -15,9 +17,7 @@ layout: page
@@ -14,9 +16,7 @@ layout: page