~xdavidwu/xdavidwu.link

d530a92c2c9edffb56b751e2c6e602e811f53a13 — Michael Rose 3 years ago 2a0c3ed
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
M _includes/archive-single.html => _includes/archive-single.html +1 -1
@@ 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>

M _includes/page__hero.html => _includes/page__hero.html +1 -1
@@ 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 %}

A _includes/page__meta.html => _includes/page__meta.html +30 -0
@@ 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 %}

D _includes/post__meta.html => _includes/post__meta.html +0 -35
@@ 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

M _layouts/single.html => _layouts/single.html +1 -1
@@ 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 %}


M _sass/minimal-mistakes/_archive.scss => _sass/minimal-mistakes/_archive.scss +8 -0
@@ 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;

M _sass/minimal-mistakes/_page.scss => _sass/minimal-mistakes/_page.scss +1 -1
@@ 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;