Add posts, categories, category, tags, tag, and collection layouts

Replace sample pages with hard coded HTML and Liquid in favor of a layout that does all the heavy lifting. Assign the appropriate `layout` via YAML Front Matter and away you go.

_includes/documents-collection.html

@@ -0,0 +1,19 @@
+{% assign entries = site[include.collection] %}
+
+{% if include.sort_by == 'title' %}
+  {% if include.sort_order == 'reverse' %}
+    {% assign entries = entries | sort: 'title' | reverse %}
+  {% else %}
+    {% assign entries = entries | sort: 'title' %}
+  {% endif %}
+{% elsif include.sort_by == 'date' %}
+  {% if include.sort_order == 'reverse' %}
+    {% assign entries = entries | sort: 'date' | reverse %}
+  {% else %}
+    {% assign entries = entries | sort: 'date' %}
+  {% endif %}
+{% endif %}
+
+{%- for post in entries -%}
+  {% include archive-single.html %}
+{%- endfor -%}

_includes/posts-category.html

@@ -0,0 +1,3 @@
+{%- for post in site.categories[include.taxonomy] -%}
+  {% include archive-single.html %}
+{%- endfor -%}

_includes/posts-tag.html

@@ -0,0 +1,3 @@
+{%- for post in site.tags[include.taxonomy] -%}
+  {% include archive-single.html %}
+{%- endfor -%}

_layouts/categories.html

@@ -0,0 +1,48 @@
+---
+layout: archive
+---
+
+{{ content }}
+
+<ul class="taxonomy-index">
+  {% assign categories_max = 0 %}
+  {% for category in site.categories %}
+    {% if category[1].size > categories_max %}
+      {% assign categories_max = category[1].size %}
+    {% endif %}
+  {% endfor %}
+  {% for i in (1..categories_max) reversed %}
+    {% for category in site.categories %}
+      {% if category[1].size == i %}
+        <li>
+          <a href="#{{ category[0] | slugify }}">
+            <strong>{{ category[0] }}</strong> <span class="taxonomy-count">{{ i }}</span>
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  {% endfor %}
+</ul>
+
+{% assign categories_max = 0 %}
+{% for category in site.categories %}
+  {% if category[1].size > categories_max %}
+    {% assign categories_max = category[1].size %}
+  {% endif %}
+{% endfor %}
+
+{% for i in (1..categories_max) reversed %}
+  {% for category in site.categories %}
+    {% if category[1].size == i %}
+      <section id="{{ category[0] | slugify | downcase }}" class="taxonomy-section">
+        <h2 class="archive__subtitle">{{ category[0] }}</h2>
+        <div class="entries-{{ page.entries_layout | default: 'list' }}">
+          {% for post in category.last %}
+            {% include archive-single.html %}
+          {% endfor %}
+        </div>
+        <a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
+      </section>
+    {% endif %}
+  {% endfor %}
+{% endfor %}

_layouts/category.html

@@ -0,0 +1,9 @@
+---
+layout: archive
+---
+
+{{ content }}
+
+<div class="entries-{{ page.entries_layout | default: 'list' }}">
+  {% include posts-category.html taxonomy=page.taxonomy %}
+</div>

_layouts/collection.html

@@ -0,0 +1,9 @@
+---
+layout: archive
+---
+
+{{ content }}
+
+<div class="entries-{{ page.entries_layout | default: 'list' }}">
+  {% include documents-collection.html collection=page.collection sort_by=page.sort_by sort_order=page.sort_order %}
+</div>

_layouts/posts.html

@@ -0,0 +1,29 @@
+---
+layout: archive
+---
+
+{{ content }}
+
+<ul class="taxonomy-index">
+  {% assign postsInYear = site.posts | group_by_exp: 'post', 'post.date | date: "%Y"' %}
+  {% for year in postsInYear %}
+    <li>
+      <a href="#{{ year.name }}">
+        <strong>{{ year.name }}</strong> <span class="taxonomy-count">{{ year.items | size }}</span>
+      </a>
+    </li>
+  {% endfor %}
+</ul>
+
+{% assign postsByYear = site.posts | group_by_exp: 'post', 'post.date | date: "%Y"' %}
+{% for year in postsByYear %}
+  <section id="{{ year.name }}" class="taxonomy-section">
+    <h2 class="archive__subtitle">{{ year.name }}</h2>
+    <div class="entries-{{ page.entries_layout | default: 'list' }}">
+      {% for post in year.items %}
+        {% include archive-single.html %}
+      {% endfor %}
+    </div>
+    <a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
+  </section>
+{% endfor %}

_layouts/tag.html

@@ -0,0 +1,9 @@
+---
+layout: archive
+---
+
+{{ content }}
+
+<div class="entries-{{ page.entries_layout | default: 'list' }}">
+  {% include posts-tag.html taxonomy=page.taxonomy %}
+</div>

_layouts/tags.html

@@ -0,0 +1,48 @@
+---
+layout: archive
+---
+
+{{ content }}
+
+<ul class="taxonomy-index">
+  {% assign tags_max = 0 %}
+  {% for tag in site.tags %}
+    {% if tag[1].size > tags_max %}
+      {% assign tags_max = tag[1].size %}
+    {% endif %}
+  {% endfor %}
+  {% for i in (1..tags_max) reversed %}
+    {% for tag in site.tags %}
+      {% if tag[1].size == i %}
+        <li>
+          <a href="#{{ tag[0] | slugify }}">
+            <strong>{{ tag[0] }}</strong> <span class="taxonomy-count">{{ i }}</span>
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  {% endfor %}
+</ul>
+
+{% assign tags_max = 0 %}
+{% for tag in site.tags %}
+  {% if tag[1].size > tags_max %}
+    {% assign tags_max = tag[1].size %}
+  {% endif %}
+{% endfor %}
+
+{% for i in (1..tags_max) reversed %}
+  {% for tag in site.tags %}
+    {% if tag[1].size == i %}
+      <section id="{{ tag[0] | slugify | downcase }}" class="taxonomy-section">
+        <h2 class="archive__subtitle">{{ tag[0] }}</h2>
+        <div class="entries-{{ page.entries_layout | default: 'list' }}">
+          {% for post in tag.last %}
+            {% include archive-single.html %}
+          {% endfor %}
+        </div>
+        <a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
+      </section>
+    {% endif %}
+  {% endfor %}
+{% endfor %}

_sass/minimal-mistakes/_page.scss

@@ -295,6 +295,72 @@
   }
 }
 
+.taxonomy-section {
+  margin-bottom: 2em;
+  padding-bottom: 1em;
+
+  &:not(:last-child) {
+    border-bottom: solid 1px $border-color;
+  }
+
+  .archive__item-title {
+    margin-top: 0;
+  }
+
+  .archive__subtitle {
+    border: 0;
+  }
+
+  + .taxonomy-section {
+    margin-top: 2em;
+  }
+}
+
+.taxonomy-title {
+  margin-bottom: 0.5em;
+  color: lighten($text-color, 60%);
+}
+
+.taxonomy-count {
+  color: lighten($text-color, 50%);
+}
+
+.taxonomy-index {
+  display: grid;
+  grid-column-gap: 2em;
+  grid-template-columns: repeat(2, 1fr);
+  margin: 0;
+  padding: 0;
+  font-size: 0.75em;
+  list-style: none;
+
+  @include breakpoint($large) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  a {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 0.25em 0;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    color: inherit;
+    text-decoration: none;
+    border-bottom: 1px solid $border-color;
+  }
+}
+
+.back-to-top {
+  display: block;
+  color: lighten($text-color, 50%);
+  font-size: 0.6em;
+  text-transform: uppercase;
+  text-align: right;
+  text-decoration: none;
+}
+
 /*
    Comments
    ========================================================================== */

test/_pages/category-archive.html

@@ -1,6 +1,6 @@
 ---
 layout: archive
-permalink: /categories/
+permalink: /categories-archive/
 title: "Posts by Category"
 author_profile: true
 ---

test/_pages/recipes-archive.html

@@ -1,7 +1,7 @@
 ---
 layout: archive
 title: "Recipes"
-permalink: /recipes/
+permalink: /recipes-archive/
 author_profile: false
 ---
 

test/_pages/tag-archive.html

@@ -1,6 +1,6 @@
 ---
 layout: archive
-permalink: /tags/
+permalink: /tags-archive/
 title: "Posts by Tag"
 author_profile: true
 ---