jmblog-theme 0.1.0 → 1.1.1

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

@@ -0,0 +1,41 @@
+<section class="comments" id="comment-section">
+    {% if site.data.comments[page.slug] %}
+    <!-- Existing comments -->
+    <div class="comments__existing">
+        <h4 class="title is-4">Comments</h4>
+        {% assign comments = site.data.comments[page.slug] | where_exp: "item", "item.replying_to_uid == ''" %}
+
+        {% assign comments_by_date = comments | sort: 'date' | reverse %}
+        <!-- List main comments in reverse date order, newest first. List replies in date order, oldest first. -->
+        {% for comment in comments_by_date %}
+        {%- assign email = comment.email %}
+        {%- assign name = comment.name %}
+        {%- assign url = comment.url %}
+        {%- assign date = comment.date %}
+        {%- assign message = comment.message %}
+        {%- assign uid = comment._id %}
+        {% include themes/jmblog-theme/components/comment.html is_reply=false uid=uid replying_to=0 email=email name=name url=url date=date
+        message=message uid=uid %}
+        {% endfor %}
+    </div>
+    {% endif %}
+
+    {% unless page.comments == "closed" %}
+    <!-- New comment form -->
+    <div id="respond" class="comment__new">
+        {% capture first_comment %}{% if comments.size < 1 %}true{% else %}false{% endif %}{% endcapture %}
+        {% include themes/jmblog-theme/components/comment_form.html first_comment=first_comment %}
+    </div>
+    {% endunless %}
+</section>
+
+<script async defer src="https://www.google.com/recaptcha/api.js" ></script>
+
+{%- comment %} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> {% endcomment -%}
+{%- comment %} <script src="{{ '/assets/main.js' | relative_url }}"></script> {% endcomment -%}
+{%- comment %} <script src="https://www.google.com/recaptcha/api.js"></script> {% endcomment -%}
+
+{% comment %} 
+https://github.com/travisdowns/travisdowns.github.io/tree/master/_includes
+https://travisdowns.github.io/blog/2020/02/05/now-with-comments.html#fnref:v3
+{% endcomment %}

data/_includes/themes/jmblog-theme/components/comments.html.orig

@@ -0,0 +1,19 @@
+
+{% if page.comments %}
+<div id="disqus_thread"></div>
+<script>
+
+var disqus_config = function () {
+    this.page.url = "{{ page.url | prepend: site.url }}";  // Replace PAGE_URL with your page's canonical URL variable
+    this.page.identifier = "{{ page.slug}}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+};
+(function() { // DON'T EDIT BELOW THIS LINE
+var d = document, s = d.createElement('script');
+s.src = 'https://jmoxon.disqus.com/embed.js';
+s.setAttribute('data-timestamp', +new Date());
+(d.head || d.body).appendChild(s);
+})();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+                            
+{% endif %}

data/_includes/themes/{jmblog → jmblog-theme}/components/footer.html

@@ -6,8 +6,8 @@
         <a href="https://opensource.org/licenses/mit-license.php">MIT</a> and can be found 
         <a href="https://github.com/johnmoxon/johnmoxon.github.io/">
           here on github 
-          <i class="fab fa-github has-text-black"></i>
-        </a>.
+          <i class="fab fa-github has-text-black"></i><br>
+        </a>
         <span xmlns:dct="https://purl.org/dc/terms/" xmlns:cc="https://creativecommons.org/ns#" class="license-text">
           The website content by <strong><span rel="cc:attributionName">John Moxon</span></strong> is licensed under  
           <a href="https://creativecommons.org/licenses/by/4.0">

data/_includes/themes/{jmblog → jmblog-theme}/components/head.html

@@ -1,11 +1,11 @@
-
-
 <title>{{ page.title }} | {{site.title}}</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {% comment %} <meta name="viewport" content="width=device-width, initial-scale=1"> {% endcomment %}
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
 
-    {% include themes/jmblog/components/analytics/googletagmanager_head.html %}
+    {% include themes/jmblog-theme/components/analytics/googletagmanager_head.html %}
 
     <!-- <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> -->
     <link rel="preload" href="/assets/fonts/Cardo/Cardo-Regular.woff2" as="font" crossorigin>
@@ -15,7 +15,7 @@
         font-family: 'Cardo';
         font-style: normal;
         font-weight: 400;
-        font-display: swap;
+        font-display: optional;
         src: local('Cardo'), local('Cardo-Regular'), url(/assets/fonts/Cardo/Cardo-Regular.woff2) format('woff2');
         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
       }
@@ -25,12 +25,19 @@
         font-family: 'Montserrat';
         font-style: normal;
         font-weight: 400;
-        font-display: swap;
+        font-display: optional;
         src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/Montserrat/Montserrat-Regular.woff2) format('woff2');
         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
       }
+
+      .is-family-secondary {
+        font-family: "Cardo","Baskerville","Calibri",serif !important;
+      }
+      body, button, input, select, textarea {
+        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+      }
     </style>
-    <script defer src="https://kit.fontawesome.com/f74caf9b24.js" crossorigin="anonymous"></script>
+    <script async src="https://kit.fontawesome.com/f74caf9b24.js" crossorigin="anonymous"></script>
 
     <!-- Meta tags -->
     <meta name="description"
@@ -73,4 +80,4 @@
     <meta name="twitter:title" content="{{ page.title }}" />
     <meta name="twitter:description" content="{% unless page.description == null %}{{ page.description }}{% endunless %}" />
 
-    <link rel="icon" href="/assets/img/favicon.png">
+    <link rel="icon" href="/assets/img/favicon.png">

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

@@ -0,0 +1,12 @@
+{% capture img_attrs %}
+?nf_resize={{ include.mode | default: 'fit' }}
+&w={{ include.w | default: 790 }}
+{% if include.h %}&h={{ include.h }}{% endif %}
+{% endcapture %}
+<figure class="image{{ include.res | default: 'is-3by2' | prepend: ' ' }}">
+  <img 
+    data-src="{{ include.src | default: '/assets/img/ph.png' }}{{ img_attrs | strip }}" 
+    data-lowsrc="{{ include.src | default: '/assets/img/ph.png' }}?nf_resize={{ include.mode | default: 'fit' }}&w=100"
+    alt="{{ include.alt | default: page.title }}"
+    class="lazyload blur-up">
+</figure>

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

@@ -0,0 +1,17 @@
+<script>
+  if ('loading' in HTMLImageElement.prototype) {
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    images.forEach(img => {
+      img.src = img.dataset.src;
+    });
+  } else {
+    // Dynamically import the LazySizes library
+    const script = document.createElement('script');
+    script.src = 
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/plugins/blur-up/ls.blur-up.min.js'
+    document.body.appendChild(script);
+    script.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
+    document.body.appendChild(script); 
+  }
+</script>

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

@@ -0,0 +1,66 @@
+<!-- Navigation bar -->
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a role="button" class="navbar-burger burger is-fixed-top" aria-label="menu" aria-expanded="false" data-target="navbar-menu">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="navbar-menu" class="navbar-menu">
+      <div class="navbar-start">
+
+        {% for item in site.data.navigation.items %}
+        {% assign ln = item.link %}
+        <a class="navbar-item{% if page.url == item.link %} is-active{% endif %}" 
+          href="{{ item.link }}">
+          {{ item.name }}
+        </a>
+        {% endfor %}
+        
+        {% comment %} 
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link">
+            Acticles
+          </a>
+
+          <div class="navbar-dropdown">
+            <a class="navbar-item">
+              Fintech
+            </a>
+            <a class="navbar-item">
+              Travel
+            </a>
+            <a class="navbar-item">
+              Contact
+            </a>
+            <hr class="navbar-divider">
+            <a class="navbar-item">
+              Miscealaneous
+            </a>
+          </div>
+        </div>
+        {% endcomment %}
+
+        <div class="navbar-item sharing-utility">
+            {% include themes/jmblog-theme/components/social_buttons_small.html %}
+        </div>
+      </div>
+
+      <div class="navbar-end">
+        {% comment %}
+        <div class="navbar-item">
+          <div class="buttons">
+            <a class="button is-primary">
+              <strong>Sign up</strong>
+            </a>
+            <a class="button is-light">
+              Log in
+            </a>
+          </div>
+        </div>
+        {% endcomment %}
+      </div>
+    </div>
+  </nav>

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

@@ -0,0 +1,39 @@
+{% if paginator.total_pages > 1 %}
+<nav class="pagination" role="navigation" aria-label="pagination">
+
+    {% if paginator.previous_page %}
+    <a class="pagination-previous" 
+        title="This is the first page"
+        href="{{ paginator.previous_page_path | relative_url }}">Previous</a>
+    {% else %}
+    <a class="pagination-previous" title="This is the first page" disabled>Previous</a>
+    {% endif %}
+
+    {% if paginator.next_page %}
+    <a class="pagination-next" 
+        href="{{ paginator.next_page_path | relative_url }}">Next page</a>
+    {% else %}
+    <a class="pagination-next" title="This is the last page" disabled>Next page</a>
+    {% endif %}
+    
+
+    <ul class="pagination-list">
+    {% for page in (1..paginator.total_pages) %}
+        <li>
+        {% if page == paginator.page %}
+        <a class="pagination-link is-current" aria-label="Page {{page}}" aria-current="page">{{ page }}</a>
+        {% elsif page == 1 %}
+        <a class="pagination-link" 
+            aria-label="Page 1" 
+            aria-current="page"
+            href="{{ '/' | relative_url }}">{{ page }}</a>
+        {% else %}
+        <a class="pagination-link" 
+            aria-label="Goto page {{page}}"
+            href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
+        {% endif %}
+        </li>
+    {% endfor %}
+    </ul>
+</nav>
+{% endif %}

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 → jmblog-theme}/error.html

@@ -1,4 +1,4 @@
-<div class="debug debug-themes__jmblog__error">
+{% comment %} <div class="debug debug-themes__jmblog__error"> {% endcomment %}
 
 {%comment%}
 Wrap user content, potentially include components that
@@ -10,6 +10,6 @@ render front matter as content
     </div>
 </div>
 
-{% include themes/jmblog/components/social_buttons_large.html %}
+{% include themes/jmblog-theme/components/social_buttons_large.html %}
 
-</div>
+{% comment %} </div> {% endcomment %}

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=smartcrop&w=910&h=455'}}" 
+                    data-lowsrc="{{ post.image.path | default: 'https://via.placeholder.com/910x455.png' | append: '?nf_resize=smartcrop&w=100&h=50'}}" 
+                    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>