From c6f10529a4904fbf29274c11a242114c6091cd55 Mon Sep 17 00:00:00 2001
From: Michael Rose <mmistakes@users.noreply.github.com>
Date: Sun, 30 Aug 2020 20:52:12 -0400
Subject: [PATCH] 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            |  2 +-
 _includes/page__hero.html                |  2 +-
 _includes/page__meta.html                | 30 ++++++++++++++++++++
 _includes/post__meta.html                | 35 ------------------------
 _layouts/single.html                     |  2 +-
 _sass/minimal-mistakes/_archive.scss     |  8 ++++++
 _sass/minimal-mistakes/_page.scss        |  2 +-
 docs/_docs/05-configuration.md           |  6 ++--
 test/_pages/category-archive-grid.md     |  7 +++++
 test/_pages/collection-archive-grid.html | 28 +++++++++++++++++++
 test/_pages/collection-archive.html      |  4 +--
 test/_pages/edge-case-grid.md            |  9 ++++++
 test/_pages/markup-grid.md               |  9 ++++++
 test/_pages/page-archive-grid.html       | 16 +++++++++++
 test/_pages/page-archive.html            |  2 +-
 test/_pages/tag-archive-grid.md          |  7 +++++
 test/_pages/year-archive-grid.md         |  7 +++++
 17 files changed, 131 insertions(+), 45 deletions(-)
 create mode 100644 _includes/page__meta.html
 delete mode 100644 _includes/post__meta.html
 create mode 100644 test/_pages/category-archive-grid.md
 create mode 100644 test/_pages/collection-archive-grid.html
 create mode 100644 test/_pages/edge-case-grid.md
 create mode 100644 test/_pages/markup-grid.md
 create mode 100644 test/_pages/page-archive-grid.html
 create mode 100644 test/_pages/tag-archive-grid.md
 create mode 100644 test/_pages/year-archive-grid.md

diff --git a/_includes/archive-single.html b/_includes/archive-single.html
index df4f8dfc..68174807 100644
--- a/_includes/archive-single.html
+++ b/_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>
diff --git a/_includes/page__hero.html b/_includes/page__hero.html
index 8e477535..3f55aaa6 100644
--- a/_includes/page__hero.html
+++ b/_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 %}
diff --git a/_includes/page__meta.html b/_includes/page__meta.html
new file mode 100644
index 00000000..1afc3d8f
--- /dev/null
+++ b/_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 %}
diff --git a/_includes/post__meta.html b/_includes/post__meta.html
deleted file mode 100644
index 1ea81e5b..00000000
--- a/_includes/post__meta.html
+++ /dev/null
@@ -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 %}
\ No newline at end of file
diff --git a/_layouts/single.html b/_layouts/single.html
index 7116d72d..71cb4e83 100644
--- a/_layouts/single.html
+++ b/_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 %}
 
diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss
index 3df29961..9f576323 100644
--- a/_sass/minimal-mistakes/_archive.scss
+++ b/_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;
diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss
index c4bf8ae7..f25f75f6 100644
--- a/_sass/minimal-mistakes/_page.scss
+++ b/_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;
diff --git a/docs/_docs/05-configuration.md b/docs/_docs/05-configuration.md
index 3cb1de04..11c22a64 100644
--- a/docs/_docs/05-configuration.md
+++ b/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;
diff --git a/test/_pages/category-archive-grid.md b/test/_pages/category-archive-grid.md
new file mode 100644
index 00000000..3558be0a
--- /dev/null
+++ b/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
+---
diff --git a/test/_pages/collection-archive-grid.html b/test/_pages/collection-archive-grid.html
new file mode 100644
index 00000000..3280bf7b
--- /dev/null
+++ b/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 %}
diff --git a/test/_pages/collection-archive.html b/test/_pages/collection-archive.html
index 80d28164..219592b6 100644
--- a/test/_pages/collection-archive.html
+++ b/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 %}
\ No newline at end of file
+{% endfor %}
diff --git a/test/_pages/edge-case-grid.md b/test/_pages/edge-case-grid.md
new file mode 100644
index 00000000..c2f73e5a
--- /dev/null
+++ b/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`.
diff --git a/test/_pages/markup-grid.md b/test/_pages/markup-grid.md
new file mode 100644
index 00000000..7ebf0bad
--- /dev/null
+++ b/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`.
diff --git a/test/_pages/page-archive-grid.html b/test/_pages/page-archive-grid.html
new file mode 100644
index 00000000..269dc2a1
--- /dev/null
+++ b/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>
diff --git a/test/_pages/page-archive.html b/test/_pages/page-archive.html
index a4e515ab..ce11172e 100644
--- a/test/_pages/page-archive.html
+++ b/test/_pages/page-archive.html
@@ -7,4 +7,4 @@ author_profile: false
 
 {% for post in site.pages %}
   {% include archive-single.html %}
-{% endfor %}
\ No newline at end of file
+{% endfor %}
diff --git a/test/_pages/tag-archive-grid.md b/test/_pages/tag-archive-grid.md
new file mode 100644
index 00000000..fa4df813
--- /dev/null
+++ b/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
+---
diff --git a/test/_pages/year-archive-grid.md b/test/_pages/year-archive-grid.md
new file mode 100644
index 00000000..5029212c
--- /dev/null
+++ b/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
+---