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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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> <a href="{{ post.url | relative_url }}" rel="permalink">{{ title }}</a>
{% endif %} {% endif %}
</h2> </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 %} {% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
</article> </article>
</div> </div>

View file

@ -31,7 +31,7 @@
{% elsif page.header.show_overlay_excerpt != false and page.excerpt %} {% elsif page.header.show_overlay_excerpt != false and page.excerpt %}
<p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p> <p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p>
{% endif %} {% endif %}
{% include post__meta.html %} {% include page__meta.html %}
{% if page.header.cta_url %} {% 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> <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 %} {% 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 %}

View file

@ -27,7 +27,7 @@ layout: default
{% unless page.header.overlay_color or page.header.overlay_image %} {% unless page.header.overlay_color or page.header.overlay_image %}
<header> <header>
{% if page.title %}<h1 id="page-title" class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>{% endif %} {% 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> </header>
{% endunless %} {% endunless %}

View file

@ -201,6 +201,14 @@
font-size: 0.6em; font-size: 0.6em;
} }
.page__meta-sep {
display: block;
&::before {
display: none;
}
}
.archive__item-title { .archive__item-title {
margin-top: 0.5em; margin-top: 0.5em;
font-size: $type-size-5; font-size: $type-size-5;

View file

@ -299,7 +299,7 @@ body {
text-transform: uppercase; text-transform: uppercase;
} }
.post__meta-sep::before { .page__meta-sep::before {
content: "\2022"; content: "\2022";
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;

View file

@ -311,14 +311,14 @@ To disable reading time for a post, add `read_time: false` to its YAML Front Mat
words_per_minute: 250 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, For example,
```css ```css
.post__meta-sep::before { .page__meta-sep::before {
content: "\2022"; content: "\2022";
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;

View file

@ -0,0 +1,7 @@
---
title: "Posts by Category (grid view)"
layout: categories
permalink: /categories-grid/
entries_layout: grid
author_profile: true
---

View file

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

View file

@ -17,7 +17,7 @@ author_profile: true
{% endunless %} {% endunless %}
{% for post in collection.docs %} {% for post in collection.docs %}
{% unless collection.output == false or collection.label == "posts" %} {% unless collection.output == false or collection.label == "posts" %}
{% include archive-single.html %} {% include archive-single.html type=page.entries_layout %}
{% endunless %} {% endunless %}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}

View file

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

View file

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

View file

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

View file

@ -0,0 +1,7 @@
---
title: "Posts by Tag (grid view)"
permalink: /tags-grid/
layout: tags
entries_layout: grid
author_profile: true
---

View file

@ -0,0 +1,7 @@
---
title: "Posts by Year (grid view)"
permalink: /year-archive-grid/
layout: posts
entries_layout: grid
author_profile: true
---