Add optional read time

This commit is contained in:
Michael Rose 2017-03-17 09:36:47 -04:00
parent c925877d01
commit 6888d43804
11 changed files with 88 additions and 24 deletions

View File

@ -11,3 +11,6 @@ insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[*.svg]
trim_trailing_whitespace = false

View File

@ -21,7 +21,9 @@ Basically Basic is a [Jekyll theme](https://jekyllrb.com/docs/themes/) meant as
4. [Navigation](#navigation)
5. [Pagination](#pagination)
6. [Author](#author)
7. [Comments (via Disqus)](#comments-via-disqus)
7. [Reading Time](#reading-time)
8. [Comments (via Disqus)](#comments-via-disqus)
9. [Google Analytics](#google-analytics)
3. [Layouts](#layouts)
1. [Default](#layout-default)
2. [Post](#layout-post)
@ -103,6 +105,7 @@ t:
posts: "Posts"
page: "Page"
of: "of"
min_read: "min read"
```
### Navigation
@ -184,6 +187,10 @@ drlight:
Currently `author.picture` is only used in `layout: about`. Recommended size is `300 x 300` pixels.
### Reading Time
To enable reading time counts add `read_time: true` to a post or page's YAML Front Matter.
### Comments (via Disqus)
Optionally, if you have a [Disqus](https://disqus.com/) account, you can show a comments section below each post.

View File

@ -16,6 +16,7 @@ t:
posts: "Posts"
page: "Page"
of: "of"
min_read: "min read"
# Google Fonts
google_fonts:

View File

@ -9,12 +9,17 @@
<h3 class="entry-title">
<a href="{{ post.url | relative_url }}" rel="bookmark">{{ title }}</a>
</h3>
<p class="entry-meta">
{% if post.date %}
<time class="entry-time" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time>
{% endif %}
</p>
</header>
<footer class="entry-meta">
<ul>
{% if post.date %}
<li><span class="icon">{% include icon-calendar.svg %}</span><time class="entry-time" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time></li>
{% endif %}
{% if post.read_time %}
<li><span class="icon">{% include icon-stopwatch.svg %}</span>{% capture read_time %}{% include read-time.html %}{% endcapture %}{{ read_time | strip }}</li>
{% endif %}
</ul>
</footer>
<div class="entry-excerpt">
{% if post.excerpt %}
{{ post.excerpt | markdownify }}

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="379 72 16 16"><g><g><path fill="none" d="M380.8,86.7h12.3v-8.8h-12.3V86.7z M389.5,78.8h1.7v1.4h-1.7V78.8z M389.5,81.3h1.7v1.4h-1.7V81.3z M389.5,83.8h1.7v1.4h-1.7V83.8z M386.1,78.8h1.7v1.4h-1.7V78.8z M386.1,81.3h1.7v1.4h-1.7V81.3z M386.1,83.8h1.7v1.4h-1.7V83.8z M382.8,78.8h1.7v1.4h-1.7V78.8z M382.8,81.3h1.7v1.4h-1.7V81.3z M382.8,83.8h1.7v1.4h-1.7V83.8z"/><polygon fill="none" points="384.7 75.1 383.4 75.1 383.4 74.3 380.8 74.3 380.8 76.6 393.2 76.6 393.2 74.3 390.6 74.3 390.6 75.1 389.3 75.1 389.3 74.3 384.7 74.3"/><rect x="382.8" y="78.8" width="1.7" height="1.4"/><rect x="386.1" y="78.8" width="1.7" height="1.4"/><rect x="389.5" y="78.8" width="1.7" height="1.4"/><rect x="382.8" y="81.3" width="1.7" height="1.4"/><rect x="386.1" y="81.3" width="1.7" height="1.4"/><rect x="389.5" y="81.3" width="1.7" height="1.4"/><rect x="382.8" y="83.8" width="1.7" height="1.4"/><rect x="386.1" y="83.8" width="1.7" height="1.4"/><rect x="389.5" y="83.8" width="1.7" height="1.4"/><path d="M383.4,72v1.1h-3.8V88h14.9V73.1h-3.8V72h-1.3v1.1h-4.7V72H383.4z M393.2,86.7h-12.3v-8.8h12.3L393.2,86.7L393.2,86.7z M389.3,74.3v0.8h1.3v-0.8h2.5v2.3h-12.3v-2.3h2.5v0.8h1.3v-0.8H389.3z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -20,7 +20,7 @@
{% if page.date %}
{% include author %}
<p class="entry-meta">
{% if author_name %}<span class="byline-item">{{ author_name | prepend: 'by ' }}</span>{% endif %}<span class="byline-item"><time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time></span>
{% if author_name %}<span class="byline-item">{{ author_name | prepend: 'by ' }}</span>{% endif %}<span class="byline-item"><span class="icon">{% include icon-calendar.svg %}</span><time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time></span>{% if page.read_time %} <span class="byline-item"><span class="icon">{% include icon-stopwatch.svg %}</span>{% capture read_time %}{% include read-time.html %}{% endcapture %}{{ read_time | strip }}</span>{% endif %}
</p>
{% endif %}

13
_includes/read-time.html Normal file
View File

@ -0,0 +1,13 @@
{% assign words_per_minute = site.words_per_minute | default: 200 %}
{% if post.read_time %}
{% assign words = post.content | strip_html | number_of_words %}
{% elsif page.read_time %}
{% assign words = page.content | strip_html | number_of_words %}
{% endif %}
{% if words < words_per_minute %}
~1 {{ site.data.theme.t.min_read | default: 'min read' }}
{% else %}
{{ words | divided_by:words_per_minute }} {{ site.data.theme.t.min_read | default: 'min read' }}
{% endif %}

View File

@ -37,11 +37,15 @@
.byline-item {
&:not(:first-child)::before {
margin: 0 0.5em;
content: '\00b7';
&:not(:first-child) {
margin-left: 1.5rem;
}
}
.icon {
margin-right: 0.5em;
fill: $accent-color;
}
}
/*
@ -53,24 +57,28 @@
.entry-header {
@include breakpoint($medium) {
@include span(5 of 16);
@include suffix(1 of 16);
// @include span(5 of 16);
// @include suffix(1 of 16);
/* remove space after last child element */
> *:last-child {
margin-bottom: 0;
}
// > *:last-child {
// margin-bottom: 0;
// }
}
}
/* break long words that could overflow */
.entry-title {
word-wrap: break-word;
word-wrap: break-word; /* break long words that could overflow */
a:hover {
color: $accent-color;
}
}
.entry-excerpt {
@include breakpoint($medium) {
@include span(11 of 16 last);
@include span(11 of 16);
}
/* normalize font sizes */
@ -86,7 +94,7 @@
.entry-content {
@include breakpoint($medium) {
@include span(11 of 16 last);
@include span(11 of 16);
}
/* remove space after last child element */
@ -94,6 +102,30 @@
margin-bottom: 0;
}
}
.entry-meta {
@include breakpoint($medium) {
@include span(5 of 16 last);
@include prefix(1 of 16);
}
ul {
@include list-unstyled();
@include breakpoint(max-width $medium) {
li {
display: inline-block;
margin-right: 1.5rem;
}
}
@include breakpoint($medium) {
li {
padding-bottom: 0.5rem;
}
}
}
}
}
.entry-content {

View File

@ -11,7 +11,7 @@
.intro-image {
position: relative;
margin-top: -3rem; /* compensate for intro top margin */
margin-bottom: 2rem;
margin-bottom: 3rem;
&::before {
position: absolute;

View File

@ -65,3 +65,4 @@ defaults:
type: posts
values:
layout: post
read_time: true

View File

@ -16,6 +16,7 @@ t:
posts: "Posts"
page: "Page"
of: "of"
min_read: "min read"
# Google Fonts
google_fonts: