Added estimated reading time and icon for the date

Signed-off-by: Jim Martens <github@2martens.de>

_includes/reading-time.html

@@ -0,0 +1,8 @@
+<span class="far fa-clock"></span>
+{% assign words = include.content | number_of_words %}
+{% if words < 180 %}
+    less than 1 minute read
+{% else %}
+    {{ words | divided_by:180 }} minute read
+{% endif %}
+

_layouts/categories.html

@@ -14,7 +14,14 @@ layout: default
     {% assign posts = posts | sort: 'date' | reverse %}
     {% for post in posts %}
     <li class="mb-4">
-        <span class="small text-muted">{{ post.date | date: "%b %-d, %Y" }}</span>
+        <p class="small text-muted">
+            <span class="far fa-calendar-alt"></span>
+            <time datetime="{{ post.date | date_to_xmlschema }}">
+                {{ post.date | date: "%b %-d, %Y" }}
+            </time>
+            • {% include reading-time.html content=post.content %}
+        </p>
+
         <p class="h4 post-title">
             <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
         </p>

_layouts/category.html

@@ -6,7 +6,13 @@ layout: default
 <ul class="post-list list-unstyled">
     {% for post in site.categories[page.category] %}
     <li class="mb-4">
-        <span class="small text-muted">{{ post.date | date: "%b %-d, %Y" }}</span>
+        <div class="small text-muted">
+            <span class="far fa-calendar-alt"></span>
+            <time datetime="{{ post.date | date_to_xmlschema }}">
+                {{ post.date | date: "%b %-d, %Y" }}
+            </time>
+            • {% include reading-time.html content=post.content %}
+        </div>
         <p class="h4 post-title">
             <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
         </p>

_layouts/post.html

@@ -6,11 +6,13 @@ layout: default
     <header class="post-header">
         <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
         <p class="small text-muted">
+            <span class="far fa-calendar-alt"></span>
             <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
                 {{ page.date | date: "%b %-d, %Y" }}
             </time>
             {% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person">
             <span itemprop="name">{{ page.author }}</span></span>{% endif %}
+            • {% include reading-time.html content=content %}
         </p>
     </header>
 

index.html

@@ -63,7 +63,13 @@ layout: default
 <ul class="post-list list-unstyled">
     {% for post in site.categories['site'] %}
     <li class="mb-4">
-        <span class="small text-muted">{{ post.date | date: "%b %-d, %Y" }}</span>
+        <div class="small text-muted">
+            <span class="far fa-calendar-alt"></span>
+            <time datetime="{{ post.date | date_to_xmlschema }}">
+                {{ post.date | date: "%b %-d, %Y" }}
+            </time>
+            • {% include reading-time.html content=post.content %}
+        </div>
         <p class="h4 post-title">
             <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
         </p>