Skip to content

Commit

Permalink
perf: avoid the layout shift for post datetime
Browse files Browse the repository at this point in the history
  • Loading branch information
cotes2020 committed Apr 25, 2022
1 parent 42c44a8 commit 6d35f5f
Show file tree
Hide file tree
Showing 20 changed files with 87 additions and 160 deletions.
21 changes: 21 additions & 0 deletions _includes/datetime.html
Original file line number Diff line number Diff line change
@@ -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 }}>
5 changes: 1 addition & 4 deletions _includes/related-posts.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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"
Expand All @@ -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>
Expand Down
15 changes: 0 additions & 15 deletions _includes/timeago.html

This file was deleted.

19 changes: 0 additions & 19 deletions _javascript/commons/locale-helper.js

This file was deleted.

31 changes: 28 additions & 3 deletions _javascript/utils/locale-datetime.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
87 changes: 0 additions & 87 deletions _javascript/utils/timeago.js

This file was deleted.

19 changes: 15 additions & 4 deletions _layouts/archives.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions _layouts/category.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
10 changes: 3 additions & 7 deletions _layouts/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
{% assign pinned_num = 0 %}
{% endif %}


<!-- Get default posts -->

{% assign default_beg = offset | minus: pinned.size %}
Expand Down Expand Up @@ -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 %}
Expand All @@ -78,6 +73,7 @@ <h1>
{% endfor %}
</span>
{% endif %}

</div>

{% if post.pin %}
Expand Down
4 changes: 2 additions & 2 deletions _layouts/post.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand Down
6 changes: 3 additions & 3 deletions _layouts/tag.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 2 additions & 4 deletions _sass/layout/post.scss
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,8 @@ nav[data-toggle=toc] {

em {
@extend %normal-font-style;

color: var(--relate-post-date);
}

.card {
Expand All @@ -194,10 +196,6 @@ nav[data-toggle=toc] {
}
}

.timeago {
color: var(--relate-post-date);
}

p {
font-size: 0.9rem;
margin-bottom: 0.5rem;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/dist/categories.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 6d35f5f

Please sign in to comment.