Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 
ssg  

It is common in a blog, not to write the calendar date of the post, but rather elapsed time (e.g some time ago). I found a good PHP script years ago, cryptic using array and loop. Looks smart, and efficient.

Elapsed Time in Jekyll Liquid

Now I’m using liquid. Liquid is not a scripting language, but rather a templating Engine. A templating engine is designed to have a very limited capability. Liquid in Jekyll does not support array constructor. So I have a porting problem here.

Static

Again, let’s rewrite. KISS. Keep the code simple and stupid.

From PHP to Jekyll Liquid.

Original PHP Script:

Jekyll Liquid Port:

You can examine both script, and see how a different approach can be achieved from just one idea. The code looks entirely altered now.

{% capture spaceless %}
  {% assign now = 'now' | date: '%s' %}
  {% assign postdate = page.date | date: '%s' %}
  {% assign epoch_diff = now | minus: postdate %}
  
  {% assign a_year = 12 * 30 * 24 * 60 * 60 %}
  {% assign a_second = 1 %}
  {% assign a_minute = a_second | times:  60 %}
  {% assign an_hour  = a_minute | times:  60 %}
  {% assign a_day    = an_hour  | times:  24 %}
  {% assign a_week   = a_day    | times:   7 %}
  {% assign a_month  = a_day    | times:  30 %}
  {% assign a_year   = a_day    | times: 365 %}

  {% if (epoch_diff > a_year) %}
     {% assign elapsed_time = epoch_diff | divided_by: a_year %}
     {% assign elapsed_text = 'year' %}
  {% elsif (epoch_diff > a_month) %}
     {% assign elapsed_time = epoch_diff | divided_by: a_month %}
     {% assign elapsed_text = 'month' %}
  {% elsif (epoch_diff > a_week) %}
     {% assign elapsed_time = epoch_diff | divided_by: a_week %}
     {% assign elapsed_text = 'week' %}
  {% elsif (epoch_diff > a_day) %}
     {% assign elapsed_time = epoch_diff | divided_by: a_day %}
     {% assign elapsed_text = 'day' %}
  {% elsif (epoch_diff > an_hour) %}
     {% assign elapsed_time = epoch_diff | divided_by: an_hour %}
     {% assign elapsed_text = 'hour' %}
  {% elsif (epoch_diff > a_minute) %}
     {% assign elapsed_time = epoch_diff | divided_by: a_minute %}
     {% assign elapsed_text = 'minute' %}     
  {% elsif (epoch_diff > a_second) %}
     {% assign elapsed_time = epoch_diff | divided_by: a_second %}
     {% assign elapsed_text = 'second' %}     
  {% else %}
     {% assign elapsed_time = 0 %}
     {% assign elapsed_text = 'second' %}
  {% endif %}  

  {% if elapsed_time > 1 %}
     {% assign elapsed_text = elapsed_text | append: 's' %}  
  {% endif %}       

  {% if elapsed_time > 0 %}
     {% assign elapsed_text = elapsed_text | append: ' ago' %}  
  {% endif %}       

{% endcapture %} 
 
          <span title="{{ page.date | date: "%b %-d, %Y" }}">
            {{ elapsed_time }} {{ elapsed_text }}
          </span>

Done.

Caveat

No, I’m not done yet, after a while, I realize that I have to build Jekyll everyday in order to update the posting date.


Javascript

Luckily, there is a good small javascript, to achieved this.

    <time datetime="{{ page.date | date_to_xmlschema }}" 
          itemprop="datePublished">
      <span class="timeago" 
            datetime="{{ page.date | date: "%Y-%m-%d %T" }}">
      </span></time>

    <script src="{{ site.baseurl }}/assets/vendors/js/timeago.min.js"></script>
    <script type="text/javascript">
      var timeagoInstance = timeago();
      var nodes = document.querySelectorAll('.timeago');
      timeagoInstance.render(nodes, 'en_US');
      timeago.cancel();
      timeago.cancel(nodes[0]);
    </script>

Now, I think, it is done.