~xdavidwu/xdavidwu.link

8fdbf62a0cc8cd4d3756bd06fb43b2c8c6695691 — Michael Rose 6 years ago 4606e4d
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.
A _includes/documents-collection.html => _includes/documents-collection.html +19 -0
@@ 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 -%}

A _includes/posts-category.html => _includes/posts-category.html +3 -0
@@ 0,0 1,3 @@
{%- for post in site.categories[include.taxonomy] -%}
  {% include archive-single.html %}
{%- endfor -%}

A _includes/posts-tag.html => _includes/posts-tag.html +3 -0
@@ 0,0 1,3 @@
{%- for post in site.tags[include.taxonomy] -%}
  {% include archive-single.html %}
{%- endfor -%}

A _layouts/categories.html => _layouts/categories.html +48 -0
@@ 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 %}

A _layouts/category.html => _layouts/category.html +9 -0
@@ 0,0 1,9 @@
---
layout: archive
---

{{ content }}

<div class="entries-{{ page.entries_layout | default: 'list' }}">
  {% include posts-category.html taxonomy=page.taxonomy %}
</div>

A _layouts/collection.html => _layouts/collection.html +9 -0
@@ 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>

A _layouts/posts.html => _layouts/posts.html +29 -0
@@ 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 %}
\ No newline at end of file

A _layouts/tag.html => _layouts/tag.html +9 -0
@@ 0,0 1,9 @@
---
layout: archive
---

{{ content }}

<div class="entries-{{ page.entries_layout | default: 'list' }}">
  {% include posts-tag.html taxonomy=page.taxonomy %}
</div>

A _layouts/tags.html => _layouts/tags.html +48 -0
@@ 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 %}

M _sass/minimal-mistakes/_page.scss => _sass/minimal-mistakes/_page.scss +66 -0
@@ 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
   ========================================================================== */