From 6888d4380442e63581dc891c4bf5a9ad8125d456 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Fri, 17 Mar 2017 09:36:47 -0400 Subject: [PATCH] Add optional read time --- .editorconfig | 3 ++ README.md | 9 ++++- _data/theme.yml | 3 +- _includes/entry.html | 17 +++++---- _includes/icon-calendar.svg | 1 + _includes/page-intro.html | 2 +- _includes/read-time.html | 13 +++++++ _sass/basically-basic/_entries.scss | 56 ++++++++++++++++++++++------- _sass/basically-basic/_intro.scss | 2 +- example/_config.yml | 3 +- example/_data/theme.yml | 3 +- 11 files changed, 88 insertions(+), 24 deletions(-) create mode 100644 _includes/icon-calendar.svg create mode 100644 _includes/read-time.html diff --git a/.editorconfig b/.editorconfig index 5d12634..0003105 100644 --- a/.editorconfig +++ b/.editorconfig @@ -11,3 +11,6 @@ insert_final_newline = true [*.md] trim_trailing_whitespace = false + +[*.svg] +trim_trailing_whitespace = false diff --git a/README.md b/README.md index 028cf9c..95b9dcb 100644 --- a/README.md +++ b/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. diff --git a/_data/theme.yml b/_data/theme.yml index 779af36..638eb05 100644 --- a/_data/theme.yml +++ b/_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 \ No newline at end of file + - cv.md diff --git a/_includes/entry.html b/_includes/entry.html index 9f5ee82..c214fca 100644 --- a/_includes/entry.html +++ b/_includes/entry.html @@ -9,16 +9,21 @@

{{ title }}

-

- {% if post.date %} - - {% endif %} -

+
{% if post.excerpt %} {{ post.excerpt | markdownify }}

{{ site.data.theme.t.read_more | default: 'Read More' }} {% include icon-arrow-right.svg %}

{% endif %}
- \ No newline at end of file + diff --git a/_includes/icon-calendar.svg b/_includes/icon-calendar.svg new file mode 100644 index 0000000..410a49c --- /dev/null +++ b/_includes/icon-calendar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/page-intro.html b/_includes/page-intro.html index cb8a968..9163e07 100644 --- a/_includes/page-intro.html +++ b/_includes/page-intro.html @@ -20,7 +20,7 @@ {% if page.date %} {% include author %}

- {% if author_name %}{{ author_name | prepend: 'by ' }}{% endif %} + {% if author_name %}{{ author_name | prepend: 'by ' }}{% endif %}{% include icon-calendar.svg %}{% if page.read_time %} {% include icon-stopwatch.svg %}{% capture read_time %}{% include read-time.html %}{% endcapture %}{{ read_time | strip }}{% endif %}

{% endif %} diff --git a/_includes/read-time.html b/_includes/read-time.html new file mode 100644 index 0000000..0cf008b --- /dev/null +++ b/_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 %} diff --git a/_sass/basically-basic/_entries.scss b/_sass/basically-basic/_entries.scss index 09432a3..a758c8e 100644 --- a/_sass/basically-basic/_entries.scss +++ b/_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 { diff --git a/_sass/basically-basic/_intro.scss b/_sass/basically-basic/_intro.scss index 7f6b3d5..c7c5905 100644 --- a/_sass/basically-basic/_intro.scss +++ b/_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; diff --git a/example/_config.yml b/example/_config.yml index 56b8c2a..9dcd0fb 100644 --- a/example/_config.yml +++ b/example/_config.yml @@ -64,4 +64,5 @@ defaults: path: "_posts" type: posts values: - layout: post \ No newline at end of file + layout: post + read_time: true diff --git a/example/_data/theme.yml b/example/_data/theme.yml index 779af36..638eb05 100644 --- a/example/_data/theme.yml +++ b/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 \ No newline at end of file + - cv.md