Permalink
Browse files

Added working time to read

  • Loading branch information...
twinklebob committed Apr 11, 2017
1 parent e864c5c commit b6f144c8ccab2f280e088b4eca99b40e489ea8e6
Showing with 59 additions and 12 deletions.
  1. +2 −1 .vscode/settings.json
  2. +2 −0 _config.yml
  3. +20 −0 _drafts/jekyll-updates.md
  4. +24 −10 _includes/article-header.html
  5. +8 −0 _includes/read_time.html
  6. +3 −1 _layouts/default.html
View
@@ -13,5 +13,6 @@
"MD002": {
"level": 2
}
}
},
"editor.formatOnSave": false
}
View
@@ -86,6 +86,8 @@ ogp:
admin: david.lumm # facebook admin id
app_id: 139176982849302 # facebook application id
wpm: 180
#
# Gems.
#
View
@@ -0,0 +1,20 @@
---
layout: post
title: Update on Jekyll updates (meta)
tags: geek programming jekyll
categories: geek programming
eye_catch: https://visualhunt.com/photos/m/7/technologe-screens-monitors.jpg
---
Although I haven't posted much recently (sorry, got a couple of ideas I want to write about, but I'm taking ages to do it), I have been making some tweaks to the website. I really like Jekyll for this sort of development, it's extremely flexible in the design and development stages but as it outputs static pages the site itself is lightening fast.
Although I took a available theme, I've made a few modifications and I wanted to document a few of them.
1. I [added the category pages](https://github.com/twinklebob/twinklebob.github.io/commit/b2b37321ecad4a0c48aa32be23b092c10764b201), linked from the site header, with a little help from [Christian Specht](https://christianspecht.de/2014/10/25/separate-pages-per-tag-category-with-jekyll-without-plugins/).
2. I modified the link to [point to the about page](https://github.com/twinklebob/twinklebob.github.io/commit/fceedbfe5a26ee2edba99f83badadb4930e13190) when on the homepage, why waste a perfectly good link?
3. I also added a Twitter widget, to add some live content to the site, when I haven't updated for a while. I [made that dynamic](https://github.com/twinklebob/twinklebob.github.io/commit/39505c6c30135a73fa7054240d4b790d73493de9), so if I change my Twitter handle I only have to change it once for the site.
4. I then [re-ordered the social icons](https://github.com/twinklebob/twinklebob.github.io/commit/bcd993e8dbbc79905ea893680227acfa786c0fcc), I made the alphabetical in the _config.yml_ file and just sorted them into a more logical order in the _icons.html_ include file and adding title attributes. I also added an icon for Goodreads, although Font Awesome doesn't have an official icon.
5. I [added Twitter card metadata](https://github.com/twinklebob/twinklebob.github.io/commit/08d1066f31856cfc5bd36917e8b96f88ffdd8c50) to the default template to match the OpenGraph data that was already there.
6. Last but not least I added Medium-style "time to read" to the header of each post with a little help from [Carlos Becker](https://carlosbecker.com/posts/jekyll-reading-time-without-plugins/) which I think looks great
Photo via [VisualHunt.com](https://visualhunt.com/re/bd3be1)
@@ -9,9 +9,11 @@ <h1>
</h1>
<ul class="tags">
{% assign tags_num = (page.tags | size) %} {% if tags_num > 0 %}
{% assign tags_num = (page.tags | size) %}
{% if tags_num > 0 %}
<li><i class="fa fa-tags"></i></li>
{% endif %} {% for tag in page.tags %}
{% endif %}
{% for tag in page.tags %}
<li>
<a class="tag" href="{{ '/search/?t=' | append: tag | prepend: site.baseurl }}">#{{ tag }}</a>
</li>
@@ -24,20 +26,24 @@ <h1>
<li>
<i class="fa fa-calendar"></i> {{ page.date | date: "%Y-%m-%d" }}
</li>
{% endif %} {% if page.author %}
{% endif %}
{% if page.author %}
<li>
<a href="{{ '/search/?a=' | append: page.author | prepend: site.baseurl }}">
<i class="fa fa-user"></i> {{ page.author }}
</a>
</li>
{% if page.icons %}
{% if page.icons %}
<li>
<ul class="icons">
{% include icons.html icons=page.icons %}
</ul>
</li>
{% endif %} {% endif %}
{% endif %}
{% endif %}
<li>
<i class="fa fa-clock-o"></i> {% include read_time.html page=page %}
</li>
</ul>
</div>
</div>
@@ -46,10 +52,18 @@ <h1>
<div style="margin-top: 1em;">
{% include share-buttons.html page=page %}
</div>
{% endif %} {% if include.eye_catch != false and page.eye_catch %} {% if page.eye_catch_size.width %} {% assign width_html
= (page.eye_catch_size.width | prepend: ' width="' | append: '"') %} {% else %} {% assign width_html = '' %} {% endif
%} {% if page.eye_catch_size.height %} {% assign height_html = (page.eye_catch_size.height | prepend: ' height="' | append:
'"') %} {% else %} {% assign height_html = '' %} {% endif %}
{% endif %}
{% if include.eye_catch != false and page.eye_catch %}
{% if page.eye_catch_size.width %}
{% assign width_html = (page.eye_catch_size.width | prepend: ' width="' | append: '"') %}
{% else %}
{% assign width_html = '' %}
{% endif%}
{% if page.eye_catch_size.height %}
{% assign height_html = (page.eye_catch_size.height | prepend: ' height="' | append: '"') %}
{% else %}
{% assign height_html = '' %}
{% endif %}
<p style="text-align: center">
<img class="eye-catch" src="{{ page.eye_catch }}" {{ width_html }}{{ height_html }}/>
</p>
View
@@ -0,0 +1,8 @@
{% assign page = include.page %}
{% assign words = page.content | number_of_words %}
{% if words < site.wpm %}
Less than 1 minute
{% else %}
~{{ words | divided_by:site.wpm }} minute
{% endif %}
read
View
@@ -41,7 +41,7 @@
<meta property="og:description" content="{{ description }}" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@CyberneticDave">
<meta name="twitter:site" content="@{{ site.icons.twitter }}">
<meta name="twitter:title" content="{{ title }}">
<meta name="twitter:description" content="{{ description }}">
<meta name="twitter:image" content="{{ ogp_image_url }}">
@@ -123,6 +123,8 @@ <h2>{{ site.str_recent_posts }}</h2>
<footer class="site-footer">
<div class="inner">
<span>Powered by <a href="http://jekyllrb.com">Jekyll</a> with <a href="https://github.com/ttskch/jekyll-ttskch-theme">TtskchTheme</a></span>
<i class="fa fa-github"></i>
<span><a href="https://github.com/twinklebob/twinklebob.github.io">See the source</a></span>
</div>
</footer>

0 comments on commit b6f144c

Please sign in to comment.