jmblog-theme 0.1.2 → 1.0

data/_includes/themes/jmblog-theme/components/reading-time.html

@@ -0,0 +1,6 @@
+{% capture words %}
+{{ postcontent | number_of_words | minus: 180 }}
+{% endcapture %}
+{% unless words contains '-' %}
+{{ words | plus: 180 | divided_by: 180 | append: ' mins read' }}
+{% endunless %}

data/_includes/themes/jmblog-theme/components/related_articles.html

@@ -0,0 +1,73 @@
+<section class="hero is-dark">
+    <div class="hero-body">
+        <h4 class="title is-6 is-spaced">Related posts</h4>
+        
+        <div class="columns is-multiline">
+
+            {% assign maxRelated = 4 %}
+            {% assign minCommonTags = 1 %}
+            {% assign maxRelatedCounter = 0 %}
+
+            {% assign posts = site.posts |  where_exp: "item", "item.slug != page.slug" %}
+            {% for post in posts %}
+                {% assign sameTagCount = 0 %}
+
+                {% for category in post.categories %}
+                    {% if page.categories contains category %}
+                        {% assign sameTagCount = sameTagCount | plus: 1 %}
+                    {% endif %}
+                {% endfor %}
+
+                {% if sameTagCount >= minCommonTags %}
+                    <!-- START related component -->
+                    <div class="column is-one-quarter">
+                        <a href="{{ post.url }}">
+                        <div class="box has-min-height px-3 py-3 is-shadowless">
+                            <article class="media">
+                                <div class="media-left is-hidden-tablet-only">
+                                    <figure class="image is-64x64">
+                                        <img src="{{ post.image.path | default: '/assets/img/ph.png' | append: '?nf_resize=smartcrop&w=64&h=64' }}" alt="{{ post.title }}">
+                                    </figure>
+                                </div>
+                                <div class="media-content">
+                                    <p class="is-size-6 has-text-black">
+                                        {{ post.title | truncatewords: 15 }}
+                                    </p>
+                                </div>
+                            </article>
+                        </div>
+                        </a>
+                    </div>
+
+
+                    <!-- END related component -->
+                    {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+                    {% if maxRelatedCounter >= maxRelated %}
+                        {% break %}
+                    {% endif %}
+                {% endif %}
+
+            {% endfor %}
+
+
+
+
+
+
+
+
+
+
+
+            
+
+
+
+        </div>
+
+                    
+    </div>
+</section>                        
+                            
+
+

data/_includes/themes/jmblog-theme/components/share_buttons.html

@@ -0,0 +1,20 @@
+<span class="icons is-pulled-right">
+    <span class="is-size-7">share </span>
+    <span class="icon">
+        {%- comment -%} <a href="http://twitter.com/home?
+            status={{page.description | uri_escape}}%20{{site.production_url}}{{page.url | uri_escape}}" title="Share with twitter" data-toggle="tooltip" data-placement="top" data-provider="twitter"> {%- endcomment -%}
+        <a href="https://twitter.com/intent/tweet?url={{ page.url | prepend: site.url | uri_encode }}&text={{ page.summary | truncate: 130 | uri_escape }}&hashtags={{ page.tags | join: "," }}">
+            <i class="fab fa-twitter"></i>
+        </a>
+    </span>
+    <span class="icon">
+        <a href="https://www.facebook.com/sharer.php?u={{ page.url | prepend: site.url | uri_encode }}" title="Share with facebook">
+            <i class="fab fa-facebook"></i>
+        </a>
+    </span>
+    <span class="icon">
+        <a href="https://www.linkedin.com/shareArticle?url={{ page.url | prepend: site.url | uri_encode }}&mini=true&title={{ page.title | uri_escape }}&summary={{ page.summary | uri_escape }}&source={{ site.author | append: ' | ' | uri_escape }}{{ site.title | uri_escape }}" title="Share with facebook">
+            <i class="fab fa-linkedin"></i>
+        </a>
+    </span>
+</span>

data/_includes/themes/jmblog-theme/components/social_buttons_small.html

@@ -0,0 +1,38 @@
+{% if page.author != null %}
+{% assign author = site.authors | find: "name", page.author | first %}
+{% comment %} page author is not null {% endcomment %}
+{% else %}
+{% assign author = site.authors | find: "name", site.author | first %}
+{% comment %} page author is null revert to {{ site.author }} {% endcomment %}
+{% endif %}
+{% unless author.social.linkedin == null %}
+<span class="icon">
+    <a href="https://www.linkedin.com/in/{{ author.social.linkedin }}">
+    <i class="fab fa-linkedin has-text-black"></i>
+    </a>
+</span>
+{% endunless %}
+{% unless author.social.twitter == null %}
+<span class="icon">
+    <a href="https://twitter.com/{{ author.social.twitter }}">
+    <i class="fab fa-twitter has-text-black"></i>
+    </a>
+</span>
+{% endunless %}
+{% unless author.social.medium == null %}
+<span class="icon">
+    <a href="https://medium.com/{{ author.social.medium }}">
+    <i class="fab fa-medium-m has-text-black"></i>
+    </a>
+</span>
+{% endunless %}
+<span class="icon">
+    <a href="/feed.xml" class="RSS Feed">
+    <i class="fas fa-rss has-text-black"></i>
+    </a>
+</span>
+<span class="icon">
+    <a href="javascript:void(0)" class="bookmark-this">
+    <i class="far fa-bookmark has-text-black"></i>
+    </a>
+</span>

data/_includes/themes/jmblog-theme/home.html

@@ -0,0 +1,94 @@
+
+<!-- Featured post -->
+<div class="container">
+{% assign iter = "first" %}
+{% for post in paginator.posts %}
+    {% if iter == "first" %}
+    
+
+    {% if paginator.page == 1 %}
+    {% assign first_page_first_post = true %}
+    <section class="section featured-post">
+        <a href="{{ post.url }}">
+        <div class="card is-shadowless">
+        <h2 class="title is-size-3 is-size-5-mobile padded-multiline">
+            <span>{{post.title}}
+            {% unless post.subtitle == null %} - {{ post.subtitle }}{% endunless %}
+            </span></h2>
+        <div class="card-image">
+            <figure class="image is-2by1 is-relative">
+            <a href="{{ post.url }}">
+                <img 
+                    data-src="{{ post.image.path | default: 'https://via.placeholder.com/910x455.png' | append: '?nf_resize=fit&w=910'}}" 
+                    data-lowsrc="{{ post.image.path | default: 'https://via.placeholder.com/910x455.png' | append: '?nf_resize=fit&w=100'}}" 
+                    alt="Image by {{page.image.author}} on {{page.image.source}}"
+                    class="lazyload blur-up">
+            </a>
+            {% assign postcontent = post.content %}{% comment  %}TODO: improve this as a include parameter{% endcomment %}
+            {% capture readingtime %}{% include themes/jmblog-theme/components/reading-time.html %}{% endcapture %}
+            {% if readingtime.size > 1 %}
+            <span class="tag is-white is-ontop-right">{{ readingtime | strip }}</span>
+            {% endif %}
+            </figure>
+        </div>
+        <div class="card-content">
+            
+            
+
+            <div class="content">
+            <a href="{{ post.url }}" class="has-text-black">
+                {{ post.summary }}
+            </a>
+            </div>
+            <div class="tags">
+                {% for tag in post.tags %}
+                <span class="tag">#{{ tag }}</span>
+                {% endfor %}
+            </div>
+        </div>
+        </div>
+        </a>
+    </section>
+
+    <hr>
+        {% endif %}<!-- End page 1 -->
+
+    
+    <!-- Main section -->
+    <section class="section">
+        <div class="columns">
+            <!-- Main area column -->
+            <div class="column is-two-thirds">
+
+                {% if paginator.page == 1 %}
+                <h2 class="title is-3 is-uppercase">Recent Articles</h2>
+                {% endif %}
+
+                <div class="article-list">
+    {% endif %}<!-- End first iteration-->
+
+                    <!-- Articles -->
+                    {% unless first_page_first_post %}
+                    {% include themes/jmblog-theme/components/article_highlight.html post=post %}
+                    {% endunless %}
+
+{% assign iter = null %}
+{% assign first_page_first_post = false %}               
+{% endfor %}
+                </div><!-- End articles list -->
+
+                {% include themes/jmblog-theme/components/pagination_links.html %}
+
+            </div><!-- end left column -->
+
+            <!-- Right side column -- Author details -->
+            <div class="column">
+                <h2 class="title is-3 is-uppercase">The Author</h2>
+                {% include themes/jmblog-theme/components/author.html sidebar=true %}
+            </div>
+
+        </div><!-- End columns container -->
+
+    </section>
+
+</div>

data/_includes/themes/jmblog-theme/page.html

@@ -1,19 +1,26 @@
-<div class="debug debug-themes__jmblog-theme__page">
 
 {%comment%}
 Wrap user content, potentially include components that
 render front matter as content
 {%endcomment%}
+<span class="is-block has-text-centered is-hidden-desktop">
+  <span class="icon">
+    <i class="fas fa-infinity"></i>
+    {%- comment -%} <i class="fas fa-paper-plane"></i> {%- endcomment -%}
+    {%- comment -%} <i class="fas fa-leaf"></i> {%- endcomment -%}
+    {%- comment -%} <i class="fas fa-grip-lines"></i> {%- endcomment -%}
+    {%- comment -%} <i class="fas fa-mug-hot"></i> {%- endcomment -%}
+  </span>
+</span>
 
-{% include themes/jmblog-theme/components/centred_buttons.html %}
-
-<!-- Summary -->
-<div class="columns has-text-centered">
-    <div class="column content">
-        {{ content }}
+<section class="section">
+    <div class="container">
+        <div class="columns">
+            <div class="column is-10 is-offset-1">
+                <div class="content">
+                    {{ content }}
+                </div>
+            </div>
+        </div>
     </div>
-</div>
-
-{% include themes/jmblog-theme/components/social_buttons_large.html %}
-
-</div>
+</section>

data/_includes/themes/jmblog-theme/post.html

@@ -1,51 +1,77 @@
-<article class="post post-single" data-words="{{ content | number_of_words}}">
+<span class="is-block has-text-centered is-hidden-desktop">
+  <span class="icon">
+    <i class="fas fa-infinity"></i>
+    {%- comment -%} <i class="fas fa-paper-plane"></i> {%- endcomment -%}
+    {%- comment -%} <i class="fas fa-leaf"></i> {%- endcomment -%}
+    {%- comment -%} <i class="fas fa-grip-lines"></i> {%- endcomment -%}
+    {%- comment -%} <i class="fas fa-mug-hot"></i> {%- endcomment -%}
+  </span>
+</span>
+{%- comment -%} <span class="is-size-3 is-block is-family-secondary has-text-centered"></span> {%- endcomment -%}
+<section class="section" id="main_article">
+  <div class="container">
+    <div class="columns">
+      <div class="column is-10 is-offset-1">
 
-<div class="page-header">
-  {% unless page.intro.herounit == true %}
-  <h1>{{ page.title }} {% if page.tagline %}<small>{{page.tagline}}</small>{% endif %}</h1>
-  {% else %}
-  <h2 class="h1">{{ page.title }} {% if page.tagline %}<small>{{page.tagline}}</small>{% endif %}</h2>
-  {% endunless %}
-  <div class="post-date">
-    {% unless page.tags == empty %}
-    <ul class="tag-box list-inline pull-right hidden-xs hidden-sm">
-      {% assign tags_list = page.tags %}
-      {% assign nobadges = true %}
-      {% include JB/tags_list %}
-    </ul>
-    {% endunless %}
-    {{ page.date | date_to_long_string }} - <small class="reading-time eta">calculating reading time...</small> -
+        <article 
+          data-words="{{ content | number_of_words }}" 
+          class="pb-4">
+          <h1 class="title is-2 is-family-secondary" id="article_heading">{{ page.title }}</h1>
+          {% unless page.subtitle == null %}
+          <h2 class="subtitle is-6 is-uppercase">{{ page.subtitle }}</h2>
+          {% endunless %}
+          <time class="is-size-7 has-text-black" datetime="{{ page.date | date_to_xmlschema }}"><em>{{ page.date | date: "%e %b" | append: " -" }}</em></time>
 
-    {% unless page.description == null %}
-    {% include themes/grayscale/components/share_buttons %}
-    {% endunless %}
-  </div>
-</div>
+          {% assign postcontent = content %}
+          {% capture readingtime %}{% include themes/jmblog-theme/components/reading-time.html %}{% endcapture %}
+          {% if readingtime.size > 1 %}
+          <span class="is-size-7 has-text-black">{{ readingtime | strip }}</span>
+          {% endif %}
 
-<section class="row-fluid post-full">
-  <div class="span12">
-    <div class="content" id="{{page.id}}">
-      {{ content }}
-    </div>
+          {% include themes/jmblog-theme/components/share_buttons.html %}
+          {% include themes/jmblog-theme/components/img.html src=page.image.path alt=page.title %}
+          <span class="is-size-7 mb-5 is-block">Image by <a href="{{ page.image.url }}">{{ page.image.author }}</a> from <a href="{{ page.image.url }}">{{ page.image.source }}</a></span>
+          
+          <div class="content is-double-spaced is-size-5 is-family-secondary pb-6">
+            {{content}}
+          </div>
+
+          <div class="columns is-mobile">
+            <div class="column">
+              <div class="tags">
+              {% if page.tags.size > 0 %}
+                {% for tag in page.tags %}
+                <span class="tag">#{{ tag }}</span>
+                {% endfor %}
+              {% endif %}
+              </div>
+            </div>
+            <div class="column">
+              {% include themes/jmblog-theme/components/share_buttons.html %}
+            </div>
+          </div>
+{%- comment -%} 
+          <div class="is-clearfix">
+            {% if page.tags.size > 0 %}
+              {% for tag in page.tags %}
+              <span class="tag">#{{ tag }}</span>
+              {% endfor %}
+            {% endif %}
+            {% include themes/jmblog-theme/components/share_buttons.html %}
+          </div> {%- endcomment -%}
+
+        <hr>
+        </article>
+        
+        <h4 class="title is-6">The Author</h4>
+        {% include themes/jmblog-theme/components/author.html is_media_object=true %}
+    
+        <hr>
+
+        {% include themes/jmblog-theme/components/comments.html %}
 
-    <hr>
-    <div class="">
-      <ul class="pager">
-      {% if page.previous %}
-        <li class="previous"><a href="{{ BASE_PATH }}{{ page.previous.url }}" title="{{ page.previous.title }}" data-toggle="tooltip" data-placement="right">&larr; Previous</a></li>
-      {% else %}
-        <li class="previous disabled"><a>&larr; Previous</a></li>
-      {% endif %}
-        {% comment %}<li><a href="{{ BASE_PATH }}{{ site.JB.archive_path }}">Archive</a></li>{% endcomment %}
-      {% if page.next %}
-        <li class="next"><a href="{{ BASE_PATH }}{{ page.next.url }}" title="{{ page.next.title }}" data-toggle="tooltip" data-placement="left">Next &rarr;</a></li>
-      {% else %}
-        <li class="next disabled"><a>Next &rarr;</a>
-      {% endif %}
-      </ul>
+      </div>
     </div>
-    <hr>
-    {% include JB/comments %}
   </div>
 </section>
-</article>
+{% include themes/jmblog-theme/components/related_articles.html %}

data/_includes/themes/jmblog-theme/theme/{error.html → _old_error.html}

@@ -41,6 +41,6 @@
   <!-- Include analytics -->
   <!-- {% include JB/analytics %} -->
 
-  <script src="/assets/js/error.bundle.js?20e6e1354f6f6d602a28"></script></body>
+  </body>
 </html>
 </div>

data/_includes/themes/jmblog-theme/theme/default.html

@@ -0,0 +1 @@
+<!doctype html><html><head>{% include themes/jmblog-theme/components/head.html %}</head><body id="jmoxon">{% include themes/jmblog-theme/components/analytics/googletagmanager_body.html %}<header><section class="section">{% comment %}<div class="hero-body">{% endcomment %}<div class="container has-text-centered"><h2 class="subtitle is-size-4 is-size-6-mobile is-spaced is-uppercase">{{ site.tagline | default: "Set a site level variable called 'tagline'" }}</h2><h1 class="title is-size-1 is-size-2-mobile has-text-black is-family-secondary"><a href="/" class="has-text-black">{{ site.title }}</a></h1></div>{% comment %}</div>{% endcomment %}</section></header>{% include themes/jmblog-theme/components/navigation.html %} {{ content }} {% include themes/jmblog-theme/components/footer.html %}<script src="/assets/js/default.bundle.js?49eab7ab08d1346380ca"></script><script src="/assets/js/vendor.bundle.js?49eab7ab08d1346380ca"></script></body></html>

data/_includes/themes/jmblog-theme/theme/maintenance.html

@@ -0,0 +1 @@
+<div class="debug debug-themes__jmblog__theme__holding"><!doctype html><html><head>{% comment %} Base template - this file should allow front end development without compiling jekyll build Todo: in-line critical site elements to allow development of theme outside of jekyll workflow {% endcomment %} {% include themes/jmblog-theme/components/head.html %}</head><body id="jmoxon">{% include themes/jmblog-theme/components/analytics/googletagmanager_body.html %}<main><section class="hero is-fullheight is-bold"><div class="hero-body"><div class="has-text-centered container"><div class="is-horizontal-center is-flex"><figure class="image is-128x128"><a href="/"><img class="is-rounded" src="{{ page.peep-image | default: '/assets/img/head-shot-square.jpg' }}?nf_resize={{ page.peep_image_nfresize | default: 'fit' }}&w={{page.peep_image_nfresize_w | default: 128 }}&h={{page.peep_image_nfresize_h | default: 128}}" alt="John Moxon - BA"><div class="is-rounded rounded-image-has-inner-shadow"></div></a></figure></div><h1 class="title is-size-1 is-size-2-mobile has-text-black is-family-secondary is-spaced"><a href="/" class="has-text-black">{{ page.headline }}</a></h1>{% unless page.quote == null %}<h2 class="subtitle is-size-4 is-size-6-mobile">{{ page.quote }} {% unless page.quote-attribution == null %} - <span class="is-size-6">{{ page.quote-attribution }}</span> {% endunless %}</h2>{% endunless %} {{ content }}</div></div></section></main>{% include themes/jmblog-theme/components/footer.html %}<script src="/assets/js/maintenance.bundle.js?49eab7ab08d1346380ca"></script></body></html></div>

data/_layouts/bio.html

@@ -0,0 +1,11 @@
+---
+theme: 
+    name: jmblog-theme
+layout: default
+---
+{%comment%} 
+* Specifies layout to inherit -> _layouts/default.html
+* Specified theme to embed
+{% endcomment %}
+
+{% include themes/jmblog-theme/bio.html %}

data/_layouts/default.html

@@ -3,8 +3,9 @@ theme :
   name : jmblog-theme
 ---
 {%comment%}
-Top level template - No markup
+Highest level template - No markup
 * Specifies the base html template -> themes/jmblog-theme/theme/default.html
+Cascades {{content}} tag down
 {%endcomment%}
 
-<div class="debug debug-layouts__default">{% include themes/jmblog-theme/theme/holding.html %}</div>
+{% include themes/jmblog-theme/theme/default.html %}

data/_layouts/error.html

@@ -1,7 +1,11 @@
 ---
 theme :
-    name : jmblog-theme
-layout: default
+  name : jmblog-theme
 ---
+{%comment%}
+Top level template - No markup
+* Specifies the base html template -> themes/jmblog-theme/theme/default.html
+* Alternate to the `default` template
+{%endcomment%}
 
-<div class="debug debug-layouts__error">{% include themes/jmblog-theme/error.html %}</div>
+{% include themes/jmblog-theme/theme/maintenance.html %}