Add optional read time
This commit is contained in:
Michael Rose
parent
c925877d01
commit
6888d43804
|
|
@ -11,3 +11,6 @@ insert_final_newline = true
|
|||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.svg]
|
||||
trim_trailing_whitespace = false
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ t:
|
|||
posts: "Posts"
|
||||
page: "Page"
|
||||
of: "of"
|
||||
min_read: "min read"
|
||||
|
||||
# Google Fonts
|
||||
google_fonts:
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -65,3 +65,4 @@ defaults:
|
|||
type: posts
|
||||
values:
|
||||
layout: post
|
||||
read_time: true
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ t:
|
|||
posts: "Posts"
|
||||
page: "Page"
|
||||
of: "of"
|
||||
min_read: "min read"
|
||||
|
||||
# Google Fonts
|
||||
google_fonts:
|
||||
|
|
|
|||
Loading…
Reference in New Issue