Refactor page meta (#2641)

* Rename include

* Add grid view test pages

* Rename `.post__meta-sep` and use CSS to add line break

* Improve collection grid archive

* Improve page grid archive

* Enable `grid`

* Don't show date icon if there is no `date` value

* Add blank line at EOF

* Add space

* Wrap date and reading time in named `span` elements

_includes/archive-single.html

@@ -24,7 +24,7 @@
         <a href="{{ post.url | relative_url }}" rel="permalink">{{ title }}</a>
       {% endif %}
     </h2>
-    {% include post__meta.html type=include.type %}
+    {% include page__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,7 +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 %}
-      {% include post__meta.html %}
+      {% include page__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/page__meta.html

@@ -0,0 +1,30 @@
+{% assign document = post | default: page %}
+{% if document.read_time or document.show_date %}
+  <p class="page__meta">
+    {% if document.show_date and document.date %}
+      {% assign date = document.date %}
+      <span class="page__meta-date">
+        <i class="far {% if include.type == 'grid' and document.read_time and document.show_date %}fa-fw {% endif %}fa-calendar-alt" aria-hidden="true"></i>
+        <time datetime="{{ date | date_to_xmlschema }}">{{ date | date: "%B %-d, %Y" }}</time>
+      </span>
+    {% endif %}
+
+    {% if document.read_time and document.show_date %}<span class="page__meta-sep"></span>{% endif %}
+
+    {% if document.read_time %}
+      {% assign words_per_minute = document.words_per_minute | default: site.words_per_minute | default: 200 %}
+      {% assign words = document.content | strip_html | number_of_words %}
+
+      <span class="page__meta-readtime">
+        <i class="far {% if include.type == 'grid' and document.read_time and document.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 %}
+      </span>
+    {% endif %}
+  </p>
+{% endif %}

_includes/post__meta.html

@@ -1,35 +0,0 @@
-{% 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 %}

_layouts/single.html

@@ -27,7 +27,7 @@ layout: default
       {% unless page.header.overlay_color or page.header.overlay_image %}
         <header>
           {% if page.title %}<h1 id="page-title" class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>{% endif %}
-          {% include post__meta.html %}
+          {% include page__meta.html %}
         </header>
       {% endunless %}
 

_sass/minimal-mistakes/_archive.scss

@@ -201,6 +201,14 @@
     font-size: 0.6em;
   }
 
+  .page__meta-sep {
+    display: block;
+
+    &::before {
+      display: none;
+    }
+  }
+
   .archive__item-title {
     margin-top: 0.5em;
     font-size: $type-size-5;

_sass/minimal-mistakes/_page.scss

@@ -299,7 +299,7 @@ body {
   text-transform: uppercase;
 }
 
-.post__meta-sep::before {
+.page__meta-sep::before {
   content: "\2022";
   padding-left: 0.5em;
   padding-right: 0.5em;

docs/_docs/05-configuration.md

@@ -311,14 +311,14 @@ To disable reading time for a post, add `read_time: false` to its YAML Front Mat
 words_per_minute: 250
 ```
 
-### Post meta separator
+### Page meta separator
 
-To customise the separator between the post date and reading time (if both are enabled), edit `.post__meta-sep::before` in a [custom stylesheet]({{ "/docs/stylesheets/" | relative_url }}).
+To customise the separator between the page date and reading time (if both are enabled), edit `.page__meta-sep::before` in a [custom stylesheet]({{ "/docs/stylesheets/" | relative_url }}).
 
 For example,
 
 ```css
-.post__meta-sep::before {
+.page__meta-sep::before {
   content: "\2022";
   padding-left: 0.5em;
   padding-right: 0.5em;

test/_pages/category-archive-grid.md

@@ -0,0 +1,7 @@
+---
+title: "Posts by Category (grid view)"
+layout: categories
+permalink: /categories-grid/
+entries_layout: grid
+author_profile: true
+---

test/_pages/collection-archive-grid.html

@@ -0,0 +1,28 @@
+---
+layout: archive
+title: "Posts by Collection (grid view)"
+permalink: /collection-archive-grid/
+entries_layout: grid
+author_profile: true
+---
+
+{% assign entries_layout = page.entries_layout | default: 'list' %}
+{% capture written_label %}'None'{% endcapture %}
+
+{% for collection in site.collections %}
+  {% unless collection.output == false or collection.label == "posts" %}
+    <section class="taxonomy__section">
+      {% capture label %}{{ collection.label }}{% endcapture %}
+      {% if label != written_label %}
+        <h2 id="{{ label | slugify }}" class="archive__subtitle">{{ label }}</h2>
+        {% capture written_label %}{{ label }}{% endcapture %}
+      {% endif %}
+      <div class="entries-{{ entries_layout }}">
+        {% for post in collection.docs %}
+          {% include archive-single.html type=entries_layout %}
+        {% endfor %}
+      </div>
+      <a href="#page-title" class="back-to-top">{{ site.data.ui-text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
+    </section>
+  {% endunless %}
+{% endfor %}

test/_pages/collection-archive.html

@@ -17,7 +17,7 @@ author_profile: true
   {% endunless %}
   {% for post in collection.docs %}
     {% unless collection.output == false or collection.label == "posts" %}
-      {% include archive-single.html %}
+      {% include archive-single.html type=page.entries_layout %}
     {% endunless %}
   {% endfor %}
 {% endfor %}

test/_pages/edge-case-grid.md

@@ -0,0 +1,9 @@
+---
+title: Edge Case (grid view)
+layout: category
+permalink: /categories/edge-case-grid/
+taxonomy: Edge Case
+entries_layout: grid
+---
+
+Sample post listing for the category `Edge Case`.

test/_pages/markup-grid.md

@@ -0,0 +1,9 @@
+---
+title: Markup (grid view)
+layout: tag
+permalink: /tags/markup-grid/
+taxonomy: markup
+entries_layout: grid
+---
+
+Sample post listing for the tag `markup`.

test/_pages/page-archive-grid.html

@@ -0,0 +1,16 @@
+---
+layout: archive
+title: "Page Archive"
+permalink: /page-archive-grid/
+entries_layout: grid
+author_profile: false
+---
+
+{% assign entries_layout = page.entries_layout | default: 'list' %}
+<section class="taxonomy__section">
+  <div class="entries-{{ entries_layout }}">
+    {% for post in site.pages %}
+      {% include archive-single.html type=entries_layout %}
+    {% endfor %}
+  </div>
+</section>

test/_pages/tag-archive-grid.md

@@ -0,0 +1,7 @@
+---
+title: "Posts by Tag (grid view)"
+permalink: /tags-grid/
+layout: tags
+entries_layout: grid
+author_profile: true
+---

test/_pages/year-archive-grid.md

@@ -0,0 +1,7 @@
+---
+title: "Posts by Year (grid view)"
+permalink: /year-archive-grid/
+layout: posts
+entries_layout: grid
+author_profile: true
+---