Add optional read time

.editorconfig

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

README.md

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

_data/theme.yml

@@ -16,6 +16,7 @@ t:
   posts: "Posts"
   page: "Page"
   of: "of"
+  min_read: "min read"
 
 # Google Fonts
 google_fonts:
@@ -28,4 +29,4 @@ google_fonts:
 
 navigation_pages:
   - about.md
-  - cv.md
+  - cv.md

_includes/entry.html

@@ -9,16 +9,21 @@
     <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 }}
       <p><a href="{{ post.url | relative_url }}" class="more-link">{{ site.data.theme.t.read_more | default: 'Read More' }} <span class="icon icon--arrow-right">{% include icon-arrow-right.svg %}</span></a></p>
     {% endif %}
   </div>
-</article>
+</article>

_includes/icon-calendar.svg

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

_includes/page-intro.html

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

_includes/read-time.html

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

_sass/basically-basic/_entries.scss

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

_sass/basically-basic/_intro.scss

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

example/_config.yml

@@ -64,4 +64,5 @@ defaults:
       path: "_posts"
       type: posts
     values:
-      layout: post
+      layout: post
+      read_time: true

example/_data/theme.yml

@@ -16,6 +16,7 @@ t:
   posts: "Posts"
   page: "Page"
   of: "of"
+  min_read: "min read"
 
 # Google Fonts
 google_fonts:
@@ -28,4 +29,4 @@ google_fonts:
 
 navigation_pages:
   - about.md
-  - cv.md
+  - cv.md