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.
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.