Show date of posts (#2526)

* add date to read-time.html

* add option for show_date, dynamic icon style

* change read-time to post__meta

* cleanup post__metal.html

* cleanup post__meta include variables

* put date before read time

* remove space in include variable

* allow customisation of post__meta separator

* add some documentation

* oops fix typo derp

* add post date image

* change page meta separator customisation to CSS

_includes/archive-single.html

@@ -24,9 +24,7 @@
         <a href="{{ post.url | relative_url }}" rel="permalink">{{ title }}</a>
       {% endif %}
     </h2>
-    {% if post.read_time %}
-      <p class="page__meta"><i class="far fa-clock" aria-hidden="true"></i> {% include read-time.html %}</p>
-    {% endif %}
+    {% include post__meta.html type=include.type %}
     {% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
   </article>
 </div>

_includes/page__hero.html

@@ -31,9 +31,7 @@
       {% elsif page.header.show_overlay_excerpt != false and page.excerpt %}
         <p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p>
       {% endif %}
-      {% if page.read_time %}
-        <p class="page__meta"><i class="far fa-clock" aria-hidden="true"></i> {% include read-time.html %}</p>
-      {% endif %}
+      {% include post__meta.html %}
       {% if page.header.cta_url %}
         <p><a href="{{ page.header.cta_url | relative_url }}" class="btn btn--light-outline btn--large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a></p>
       {% endif %}

_includes/post__meta.html

@@ -0,0 +1,35 @@
+{% assign page = post | default: page %}
+
+{% if page.read_time or page.show_date %}
+  <p class="page__meta">
+
+    {% if page.show_date %}
+      {% assign date = page.date %}
+      <i class="far {% if include.type == 'grid' and page.read_time and page.show_date %}fa-fw {% endif %}fa-calendar-alt" aria-hidden="true"></i>
+      <time datetime="{{ date | date_to_xmlschema }}">{{ date | date: "%B %-d, %Y" }}</time>
+    {% endif %}
+
+    {% if page.read_time and page.show_date %}
+      {% if include.type == "grid" %}
+        <br \>
+      {% else %}
+      <span class="post__meta-sep"></span>
+      {% endif %}
+    {% endif %}
+
+    {% if page.read_time %}
+      {% assign words_per_minute = page.words_per_minute | default: site.words_per_minute | default: 200 %}
+      {% assign words = page.content | strip_html | number_of_words %}
+
+      <i class="far {% if include.type == 'grid' and page.read_time and page.show_date %}fa-fw {% endif %}fa-clock" aria-hidden="true"></i>
+      {% if words < words_per_minute %}
+        {{ site.data.ui-text[site.locale].less_than | default: "less than" }} 1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
+      {% elsif words == words_per_minute %}
+        1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
+      {% else %}
+        {{ words | divided_by:words_per_minute }} {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
+      {% endif %}
+    {% endif %}
+
+  </p>
+{% endif %}

_includes/read-time.html

@@ -1,15 +0,0 @@
-{% assign words_per_minute = page.words_per_minute | default: site.words_per_minute | default: 200 %}
-
-{% if post.read_time %}
-  {% assign words = post.content | strip_html | number_of_words %}
-{% elsif page.read_time %}
-  {% assign words = page.content | strip_html | number_of_words %}
-{% endif %}
-
-{% if words < words_per_minute %}
-  {{ site.data.ui-text[site.locale].less_than | default: "less than" }} 1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
-{% elsif words == words_per_minute %}
-  1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
-{% else %}
-  {{ words | divided_by:words_per_minute }} {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
-{% endif %}