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
This commit is contained in:
Michael Rose
2020-08-30 20:52:12 -04:00
committed by GitHub
parent 7a6060a55a
commit c6f10529a4
17 changed files with 131 additions and 45 deletions

View File

@@ -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>

View File

@@ -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 %}

30
_includes/page__meta.html Normal file
View File

@@ -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 %}

View File

@@ -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 %}