f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 21:53:26 +00:00
Code Issues Packages Releases Activity

perf: avoid the layout shift for post datetime

Browse Source
This commit is contained in:
Cotes Chung
2022-04-26 00:39:58 +08:00
parent 42c44a8bc1
commit 6d35f5f8da
20 changed files with 87 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
_javascript/commons/locale-helper.js
View File

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

31
_javascript/utils/locale-datetime.js
View File

@@ -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
_javascript/utils/timeago.js
View File

@@ -1,87 +0,0 @@
/**
* Calculate the Timeago
*
* Requirement: <https://github.com/iamkun/dayjs>
*/
$(function() {
const attrTimestamp = LocaleHelper.attrTimestamp();
const attrCapitalize = 'data-capitalize';
const $timeago = $(".timeago");
let timeagoTasks = $timeago.length;
let intervalId = void 0;
dayjs.locale(LocaleHelper.locale());
dayjs.extend(window.dayjs_plugin_relativeTime);
dayjs.extend(window.dayjs_plugin_localizedFormat);
function relativetime($elem) {
const now = dayjs();
const past = dayjs.unix(LocaleHelper.getTimestamp($elem));
let diffMonth = now.diff(past, 'month', true);
if (diffMonth > 10) { // year ago range: 11 months to 17months
$elem.removeAttr(attrTimestamp);
return past.format('ll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
}
let diffMinute = now.diff(past, 'minute', true);
if (diffMinute > 44) { // an hour ago range: 45 to 89 minutes
$elem.removeAttr(attrTimestamp);
}
return past.fromNow();
}
function updateTimeago() {
$timeago.each(function() {
if (typeof $(this).attr(attrTimestamp) === 'undefined') {
timeagoTasks -= 1;
return;
}
let relativeTime = relativetime($(this));
const capitalize = $(this).attr(attrCapitalize);
if (typeof capitalize !== 'undefined' && capitalize === 'true') {
relativeTime = relativeTime.replace(/^\w/, (c) => c.toUpperCase());
}
if ($(this).text() !== relativeTime) {
$(this).text(relativeTime);
}
});
if (timeagoTasks === 0 && typeof intervalId !== "undefined") {
clearInterval(intervalId); /* stop interval */
}
return timeagoTasks;
}
function setupTooltips() {
$timeago.each(function() {
const tooltip = $(this).attr('data-toggle');
if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
return;
}
const df = $(this).attr('data-tooltip-df');
const ts = LocaleHelper.getTimestamp($(this));
const dateStr = dayjs.unix(ts).format(df);
$(this).attr('data-original-title', dateStr);
$(this).removeAttr('data-tooltip-df');
});
}
if (timeagoTasks === 0) {
return;
}
setupTooltips();
if (updateTimeago()) { /* run immediately */
intervalId = setInterval(updateTimeago, 60 * 1000); /* run every minute */
}
});