Redesign the post meta layout

- posted date
- updated date
- read time
- license statement of post bottom
- also refactor the `timeago.js`

_data/locales/en.yml

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

_data/locales/id-ID.yml

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

_data/locales/zh-CN.yml

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

_includes/read-time.html

@@ -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' %}
+    {%- assign _prompt_words = read_prompt | number_of_words: 'auto' -%}
-    {% unless _prompt_words > 1 %}{{" "}}{% endunless %}{{ read_prompt }}
+    {%- unless _prompt_words > 1 -%}{{ " " }}{%- endunless -%}{{ read_prompt }}
   {%- endif -%}
 </span>

_includes/timeago.html

@@ -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 %}
+<em class="timeago{% if include.class %} {{ include.class }}{% endif %}"
-  {{ include.preposition }}
+    date="{{ include.date }}"
-{% endif %}
+    {% if include.tooltip %}
-<span class="timeago {% if include.class %}{{ include.class }}{% endif %}"
+      data-toggle="tooltip"
-  {% if include.tooltip %}
+      data-placement="bottom"
-    data-toggle="tooltip"
+      title="{{ include.date | date: tooltip_df }}"
-    data-placement="bottom"
+    {% endif %}>
-    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>
+</em>
-</span>

_javascript/utils/timeago.js

@@ -3,11 +3,8 @@
  */
 
 $(function() {
-
   const timeagoElem = $(".timeago");
-
+  let tasks = timeagoElem.length;
-  let toRefresh = 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) {
+      if ($(this)[0].hasAttribute("date") === false) {
-        let dateStr = $(this).clone().children().remove().end().text();
+        tasks -= 1;
-        let node = $(this).children("i");
+        return;
-        let iosDate = node.text(); /* ISO Date: "YYYY-MM-DDTHH:MM:SSZ" */
-        $(this).text(timeago(iosDate, dateStr));
-        $(this).append(node);
       }
+
+      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;
   }
 

_layouts/home.html

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

_layouts/post.html

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

_sass/addon/commons.scss

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

_sass/addon/module.scss

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

_sass/layout/home.scss

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

_sass/layout/post.scss

@@ -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 + span::before {
-    > span:not(:first-child)::before {
+    @include dot;
-      @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 {

assets/js/dist/home.min.js

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