Redesign the post meta layout

- posted date
- updated date
- read time
- license statement of post bottom
- also refactor the `timeago.js`
This commit is contained in:
Cotes Chung 2021-12-04 06:56:33 +08:00
parent 6220d09ffb
commit 563e8085e8
14 changed files with 113 additions and 112 deletions

View File

@ -59,7 +59,8 @@ not_found:
# ----- Posts related labels -----
post:
published: 'on'
written_by: By
posted: Posted
updated: Updated
timeago:
day: days ago

View File

@ -59,7 +59,8 @@ not_found:
# ----- Posts related labels -----
post:
published: "pada"
written_by: Oleh
posted: Diterbitkan
updated: Diperbarui
timeago:
day: hari yang lalu

View File

@ -58,7 +58,8 @@ not_found:
# ----- Posts related labels -----
post:
published: 发表于
written_by: 作者
posted: 发表于
updated: 更新于
timeago:
day: 天前

View File

@ -22,9 +22,9 @@
<!-- return element -->
<span class="readtime" data-toggle="tooltip" data-placement="bottom"
title="{{ words }} {{ site.data.locales[lang].post.words }}">
{{- read_time -}}{{" "}}{{- site.data.locales[lang].post.read_time.unit -}}
<em>{{- read_time -}}{{" "}}{{- site.data.locales[lang].post.read_time.unit -}}</em>
{%- if include.prompt -%}
{% assign _prompt_words = read_prompt | number_of_words: 'auto' %}
{% unless _prompt_words > 1 %}{{" "}}{% endunless %}{{ read_prompt }}
{%- assign _prompt_words = read_prompt | number_of_words: 'auto' -%}
{%- unless _prompt_words > 1 -%}{{ " " }}{%- endunless -%}{{ read_prompt }}
{%- endif -%}
</span>

View File

@ -1,27 +1,26 @@
<!--
Date format snippet
See: /assets/js/_utils/timeage.js
See: ${JS_ROOT}/utils/timeago.js
-->
{% assign tooltip_df = site.data.locales[lang].date_format.tooltip %}
{% assign post_long_df = site.data.locales[lang].date_format.post.long %}
{% assign post_short_df = site.data.locales[lang].date_format.post.short %}
{% if include.preposition %}
{{ include.preposition }}
{% endif %}
<span class="timeago {% if include.class %}{{ include.class }}{% endif %}"
{% if include.tooltip %}
data-toggle="tooltip"
data-placement="bottom"
title="{{ include.date | date: tooltip_df }}"
{% endif %}>
<em class="timeago{% if include.class %} {{ include.class }}{% endif %}"
date="{{ include.date }}"
{% if include.tooltip %}
data-toggle="tooltip"
data-placement="bottom"
title="{{ include.date | date: tooltip_df }}"
{% endif %}>
{%- assign this_year = site.time | date: "%Y" -%}
{%- assign post_year = include.date | date: "%Y" -%}
{%- if post_year == this_year -%}
{{ include.date | date: post_short_df }}
{%- else -%}
{{ include.date | date: post_long_df }}
{%- endif -%}
<i class="unloaded">{{ include.date | date_to_xmlschema }}</i>
</span>
</em>

View File

@ -3,11 +3,8 @@
*/
$(function() {
const timeagoElem = $(".timeago");
let toRefresh = timeagoElem.length;
let tasks = timeagoElem.length;
let intervalId = void 0;
const dPrompt = $("meta[name=day-prompt]").attr("content");
@ -15,20 +12,19 @@ $(function() {
const minPrompt = $("meta[name=minute-prompt]").attr("content");
const justnowPrompt = $("meta[name=justnow-prompt]").attr("content");
function timeago(isoDate, dateStr) {
function timeago(date, initDate) {
let now = new Date();
let past = new Date(isoDate);
let past = new Date(date);
if (past.getFullYear() !== now.getFullYear()
|| past.getMonth() !== now.getMonth()) {
return dateStr;
return initDate;
}
let seconds = Math.floor((now - past) / 1000);
let day = Math.floor(seconds / 86400);
if (day >= 1) {
toRefresh -= 1;
return ` ${day} ${dPrompt}`;
}
@ -47,22 +43,30 @@ $(function() {
function updateTimeago() {
$(".timeago").each(function() {
if ($(this).children("i").length > 0) {
let dateStr = $(this).clone().children().remove().end().text();
let node = $(this).children("i");
let iosDate = node.text(); /* ISO Date: "YYYY-MM-DDTHH:MM:SSZ" */
$(this).text(timeago(iosDate, dateStr));
$(this).append(node);
if ($(this)[0].hasAttribute("date") === false) {
tasks -= 1;
return;
}
let date = $(this).attr("date");
let initDate = $(this).text();
let relativeDate = timeago(date, initDate);
if (relativeDate === initDate) {
$(this).removeAttr("date");
} else {
$(this).text(relativeDate);
}
});
if (toRefresh === 0 && typeof intervalId !== "undefined") {
if (tasks === 0 && typeof intervalId !== "undefined") {
clearInterval(intervalId); /* stop interval */
}
return toRefresh;
return tasks;
}
if (toRefresh === 0) {
if (tasks === 0) {
return;
}

View File

@ -57,9 +57,9 @@ layout: page
</p>
</div>
<div class="post-meta text-muted d-flex justify-content-between">
<div class="post-meta text-muted d-flex">
<div>
<div class="mr-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw"></i>
{% include timeago.html date=post.date tooltip=true %}
@ -78,7 +78,6 @@ layout: page
{% endfor %}
</span>
{% endif %}
</div>
{% if post.pin %}

View File

@ -12,37 +12,45 @@ tail_includes:
<h1 data-toc-skip>{{ page.title }}</h1>
<div class="post-meta text-muted d-flex flex-column">
<!-- Published date and author -->
<div class="post-meta text-muted">
<!-- author -->
<div>
<span class="semi-bold">
{{ page.author | default: site.social.name }}
</span>
{% capture _preposition %}{{ site.data.locales[lang].post.published }}{% endcapture %}
{% include timeago.html date=page.date tooltip=true preposition=_preposition %}
{{ site.data.locales[lang].post.written_by }}
<em>{{ page.author | default: site.social.name }}</em>
</div>
<div>
<!-- lastmod -->
{% if page.last_modified_at %}
<div class="d-flex">
<div>
<!-- published date -->
<span>
{{ site.data.locales[lang].post.posted }}
{% include timeago.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 class="lastmod" tooltip=true %}
{% include timeago.html date=page.last_modified_at tooltip=true %}
</span>
{% endif %}
{% endif %}
<!-- read time -->
{% include read-time.html content=content prompt=true %}
<!-- read time -->
{% include read-time.html content=content prompt=true %}
<!-- page views -->
{% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
<span id="pv" class="pageviews">
<i class="fas fa-spinner fa-spin fa-fw"></i>
<!-- page views -->
{% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
<span>
<em id="pv" class="pageviews">
<i class="fas fa-spinner fa-spin fa-fw"></i>
</em>
{{ site.data.locales[lang].post.pageview_measure }}
</span>
{{ site.data.locales[lang].post.pageview_measure }}
{% endif %}
{% endif %}
</div>
</div>
</div> <!-- .d-flex -->
</div> <!-- .post-meta -->

View File

@ -332,23 +332,6 @@ i { // fontawesome icons
}
}
.post {
h1 {
margin-top: 3rem;
margin-bottom: 1rem;
}
em { /* MarkDown italic */
padding-right: 0.2rem;
}
a:hover {
code {
@extend %link-hover;
}
}
}
/* --- Begin of Markdown table style --- */
.table-wrapper { // it will be created by Liquid
@ -390,6 +373,19 @@ i { // fontawesome icons
/* --- post --- */
.post {
h1 {
margin-top: 3rem;
margin-bottom: 1rem;
}
a:hover {
code {
@extend %link-hover;
}
}
}
.pageviews .fa-spinner {
font-size: 80%;
}
@ -409,6 +405,10 @@ i { // fontawesome icons
@extend %link-hover;
}
}
em {
@extend %normal-font-style;
}
}
.post-content {
@ -575,10 +575,6 @@ i { // fontawesome icons
/* --- Effects classes --- */
.semi-bold {
font-weight: 600 !important;
}
.loaded {
display: block !important;

View File

@ -63,6 +63,10 @@
cursor: pointer;
}
%normal-font-style {
font-style: normal;
}
/* ---------- scss mixin --------- */
@mixin no-text-decoration {
@ -88,10 +92,6 @@
opacity: 0.6;
}
@mixin semi-bold {
font-weight: 600;
}
@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
color: $color;
font-size: $font-size;

View File

@ -74,10 +74,14 @@
.post-meta {
i {
font-size: 0.73rem;
&:not(:first-child) {
margin-left: 1.2rem;
}
}
span:not(:last-child) {
margin-right: 1.2rem;
em {
@extend %normal-font-style;
}
}

View File

@ -16,18 +16,19 @@
border-color: var(--btn-border-color);
}
@mixin dot($pl: 0.2rem, $pr: 0.4rem) {
@mixin dot($pl: 0.25rem, $pr: 0.25rem) {
content: "\2022";
color: rgba(158, 158, 158, 0.8);
padding-left: $pl;
padding-right: $pr;
}
h1 + .post-meta {
> div:nth-child(2) {
> span:not(:first-child)::before {
@include dot;
}
span + span::before {
@include dot;
}
em {
color: var(--text-color);
}
}
@ -165,6 +166,10 @@ nav[data-toggle=toc] {
@include label(1.1rem, 600);
}
em {
@extend %normal-font-style;
}
.card {
border-color: var(--card-border-color);
background-color: var(--card-bg);
@ -308,7 +313,7 @@ nav[data-toggle=toc] {
line-height: 1.2rem;
> a {
font-weight: 600;
color: var(--text-color);
&:hover {
@extend %link-hover;
@ -338,23 +343,6 @@ nav[data-toggle=toc] {
}
}
@media all and (min-width: 768px) {
#core-wrapper {
h1 + .post-meta {
> div:not(:first-child)::before {
@include dot(0.5rem, 0.2rem);
}
&.flex-column {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}
}
} // .post
}
/* Hide SideBar and TOC */
@media all and (max-width: 830px) {
.post-navigation {

View File

@ -3,4 +3,4 @@
* © 2019 Cotes Chung
* MIT Licensed
*/
$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$("#mode-toggle-wrapper").keyup(e=>{13===e.keyCode&&flipMode()})}),$(function(){const e=$("#sidebar-trigger"),t=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),n=$("#main"),l=$("#topbar-title"),s=$("#search-wrapper"),r=$("#search-result-wrapper"),d=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),p={on(){e.addClass("unloaded"),l.addClass("unloaded"),t.addClass("unloaded"),s.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),s.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),t.removeClass("unloaded")}},h=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),n.addClass("unloaded"),e=!0)},off(){e&&(d.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),n.removeClass("unloaded"),u.release(),i.val(""),e=!1)},isVisible(){return e}}}();function f(){return o.hasClass("loaded")}t.click(function(){p.on(),h.on(),i.focus()}),o.click(function(){p.off(),h.off()}),i.focus(function(){s.addClass("input-focus")}),i.focusout(function(){s.removeClass("input-focus")}),i.on("keyup",function(e){8===e.keyCode&&""===i.val()?f()?c.removeClass("unloaded"):h.off():""!==i.val()&&(h.on(),a.hasClass("visible")||a.addClass("visible"),f()&&c.addClass("unloaded"))}),a.on("click",function(){i.val(""),f()?(c.removeClass("unloaded"),d.empty()):h.off(),i.focus(),a.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let t=!1;const o=$("body");return{toggle(){!1===t?o.attr(e,""):o.removeAttr(e),t=!t}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),o=$("#toc-wrapper"),a=$(".access"),n=$("#search-input");let l,s=0;const r=t.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var e=$(this).scrollTop();Math.abs(s-e)<=5||(e>s&&e>r?(t.removeClass("topbar-down").addClass("topbar-up"),0<o.length&&o.removeClass("topbar-down"),0<a.length&&a.removeClass("topbar-down"),n.is(":focus")&&n.blur()):e+$(window).height()<$(document).height()&&(t.removeClass("topbar-up").addClass("topbar-down"),0<o.length&&o.addClass("topbar-down"),0<a.length&&a.addClass("topbar-down")),s=e)}(),l=!1)},250)}),$(function(){const e=$("#topbar-title"),t=$("div.post>h1"),o=e.text().trim();let a=(0<t.length?t:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||t.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==a&&e.text(a):e.text()!==o&&e.text(o))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){let n=$(".timeago").length,e=void 0;const l=$("meta[name=day-prompt]").attr("content"),s=$("meta[name=hour-prompt]").attr("content"),r=$("meta[name=minute-prompt]").attr("content"),d=$("meta[name=justnow-prompt]").attr("content");function t(){return $(".timeago").each(function(){if(0<$(this).children("i").length){var t=$(this).clone().children().remove().end().text();let e=$(this).children("i");var o=e.text();$(this).text(function(e,t){let o=new Date,a=new Date(e);return a.getFullYear()!==o.getFullYear()||a.getMonth()!==o.getMonth()?t:(e=Math.floor((o-a)/1e3),1<=(t=Math.floor(e/86400))?(--n,` ${t} `+l):1<=(t=Math.floor(e/3600))?` ${t} `+s:1<=(e=Math.floor(e/60))?` ${e} `+r:d)}(o,t)),$(this).append(e)}}),0===n&&void 0!==e&&clearInterval(e),n}0!==n&&0<t()&&(e=setInterval(t,6e4))});
$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$("#mode-toggle-wrapper").keyup(t=>{13===t.keyCode&&flipMode()})}),$(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),s=$("#main"),n=$("#topbar-title"),l=$("#search-wrapper"),r=$("#search-result-wrapper"),d=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),u=function(){let t=0;return{block(){t=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(t)},getOffset(){return t}}}(),p={on(){t.addClass("unloaded"),n.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),n.removeClass("unloaded"),e.removeClass("unloaded")}},f=function(){let t=!1;return{on(){t||(u.block(),r.removeClass("unloaded"),s.addClass("unloaded"),t=!0)},off(){t&&(d.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),s.removeClass("unloaded"),u.release(),i.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),f.on(),i.focus()}),o.click(function(){p.off(),f.off()}),i.focus(function(){l.addClass("input-focus")}),i.focusout(function(){l.removeClass("input-focus")}),i.on("keyup",function(t){8===t.keyCode&&""===i.val()?h()?c.removeClass("unloaded"):f.off():""!==i.val()&&(f.on(),a.hasClass("visible")||a.addClass("visible"),h()&&c.addClass("unloaded"))}),a.on("click",function(){i.val(""),h()?(c.removeClass("unloaded"),d.empty()):f.off(),i.focus(),a.removeClass("visible")})}),$(function(){var t=function(){const t="sidebar-display";let e=!1;const o=$("body");return{toggle(){!1===e?o.attr(t,""):o.removeAttr(t),e=!e}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#topbar-wrapper"),o=$("#toc-wrapper"),a=$(".access"),s=$("#search-input");let n,l=0;const r=e.outerHeight();$(window).scroll(function(t){$("#topbar-title").is(":hidden")&&(n=!0)}),setInterval(function(){n&&(function(){var t=$(this).scrollTop();Math.abs(l-t)<=5||(t>l&&t>r?(e.removeClass("topbar-down").addClass("topbar-up"),0<o.length&&o.removeClass("topbar-down"),0<a.length&&a.removeClass("topbar-down"),s.is(":focus")&&s.blur()):t+$(window).height()<$(document).height()&&(e.removeClass("topbar-up").addClass("topbar-down"),0<o.length&&o.addClass("topbar-down"),0<a.length&&a.addClass("topbar-down")),l=t)}(),n=!1)},250)}),$(function(){const t=$("#topbar-title"),e=$("div.post>h1"),o=t.text().trim();let a=(0<e.length?e:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||e.is(":hidden")||t.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?t.text()!==a&&t.text(a):t.text()!==o&&t.text(o))}),t.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){let o=$(".timeago").length,t=void 0;const s=$("meta[name=day-prompt]").attr("content"),n=$("meta[name=hour-prompt]").attr("content"),l=$("meta[name=minute-prompt]").attr("content"),r=$("meta[name=justnow-prompt]").attr("content");function e(){return $(".timeago").each(function(){var t,e;!1!==$(this)[0].hasAttribute("date")?(e=function(t,e){let o=new Date,a=new Date(t);return a.getFullYear()!==o.getFullYear()||a.getMonth()!==o.getMonth()?e:(t=Math.floor((o-a)/1e3),1<=(e=Math.floor(t/86400))?` ${e} `+s:1<=(e=Math.floor(t/3600))?` ${e} `+n:1<=(t=Math.floor(t/60))?` ${t} `+l:r)}($(this).attr("date"),t=$(this).text()))===t?$(this).removeAttr("date"):$(this).text(e):--o}),0===o&&void 0!==t&&clearInterval(t),o}0!==o&&0<e()&&(t=setInterval(e,6e4))});

File diff suppressed because one or more lines are too long