jmblog-theme 0.1.2 → 1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 99622d170db84ca1cc391972b5fc35411f7353445cae8c6722b5b9aa1ad32c5c
-  data.tar.gz: 2acb7d882101bd128b6fe6f694d90a6290c047e173710c9e7437880b246fffeb
+  metadata.gz: ee91a9beb803c54100ddb62f34229941e61eac7bbb8cf140a508028fde11bf29
+  data.tar.gz: 38bde2c3ca9e36cbe73b94ef6e67c928f80579f6593db94f91995447ef7fed6b
 SHA512:
-  metadata.gz: a6d97d41c5ca543fe246bd1216896d50994fff51a8145354784569e205541767d4c740ecf3e2cc4040d46a5b0c969cdd89805cc1dd1e2a7860ee0812be82e4e1
-  data.tar.gz: 33d845122e6805df48f8b24702699850b60853047d7e950a5c06cd54be494b3bc0c1d0a671a1d725d8ed917262a7faaca4043d69a37683f8566cdaf35a4868b3
+  metadata.gz: cbe344707fa3debf4f19edfc2f613932db425b5b8af1fc780eae3a72c6ff825596c72bf5c4745adc2d4b27e91590a9c6655bb69b8223900358b8ec6ba9b08756
+  data.tar.gz: fa781b60719133e733daf53c16b75a297f068214c5c9731dcb9d86aa22fd300f653c7a32ddf5849c3fce4574a4c550dd8a4e6299b98c720277ad0fb884998e50

data/_authors/john_doe.md

@@ -0,0 +1,15 @@
+---
+layout: bio
+short_name: John
+name: John Doe 
+position: Descriptive Job Title
+social:
+    linkedin: johnmoxon
+    twitter: johnmoxon
+    medium:
+email: email@email.com
+summary: >-
+  This summary will appear where author information is included as a
+  snippet or following an article 
+---
+This is the main body of the summary text and will appear on the author generated page.

data/_config.yml

@@ -0,0 +1,80 @@
+# This is a sample _config.yml and can be switched out for another if required
+
+destination: ./_site
+include:
+  - _pages
+collections:
+  authors:
+    output: true
+
+
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+title: Learn. Grow. Lead.
+tagline: "Lessons Learned Through A Career In Digital Leadership"
+author: John Moxon
+
+description: >-
+  Personal blog for John Moxon | Digital Leader, Life-long-learner,
+  Risk mitigator, Technology/Fintech evangelist and amateur 
+  beer brewer. Writing articles about what I know and what I learn as I 
+  find my own path in my career and life. 
+
+copyright: "copyright John Moxon 2020. All rights reserved."
+license: "copyright John Moxon 2020. All rights reserved."
+
+paginate: 5
+paginate_path: "/articles/page:num/"
+
+# permalink: /:categories/:title
+relative_permalinks: false
+
+timezone: Australia/Brisbane
+
+quiet: false
+verbose: false
+
+baseurl: "" # the subpath of your site, e.g. /blog
+url: https://www.jmoxon.net # the base hostname & protocol for your site, e.g. http://example.com
+twitter_username : https://twitter.com/johnmoxon
+github_username : http://github.com/johnmoxon/
+linkedin_username : https://www.linkedin.com/in/johnmoxon/
+medium_username : https://medium.com/@johnmoxon
+meeting_url: 'https://meetings.hubspot.com/jmoxon'
+
+# GTM Tracking ID
+analytics:
+  gtm:
+    tracking_id: GTM-WGHRT3
+
+# Build settings
+markdown: kramdown
+theme: jmblog-theme
+
+# Currently only plugins used that are supported on github pages, though now using netlify so may swap out for pagination v2 in the future
+plugins:
+- jekyll-gist
+- jekyll-mentions
+- jekyll-paginate
+- jekyll-feed
+- jekyll-sitemap
+- jekyll-seo-tag
+
+
+# Exclude from processing.
+# The following items will not be processed, by default. Create a custom list
+# to override the default setting.
+# exclude:
+#   - Gemfile
+#   - Gemfile.lock
+#   - node_modules
+#   - vendor/bundle/
+#   - vendor/cache/
+#   - vendor/gems/
+#   - vendor/ruby/
+
+kramdown:
+  input: GFM

data/_data/navigation.yml

@@ -0,0 +1,8 @@
+# _data/navigation.yml
+items:
+  - name: Home
+    link: /
+  - name: About
+    link: /authors/john
+  - name: Contact
+    link: /contact

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

@@ -0,0 +1,45 @@
+{%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>
+<section class="section">
+    <div class="container">
+        <div class="columns">
+            <div class="column is-10 is-offset-1">
+                <div class="media">
+                    <figure class="media-left">
+                        <p class="image is-64x64">
+                        <img 
+                            src="/assets/img/{{ page.name | slugify: 'pretty' }}-square.jpg?nf_resize=fit&w=64&h=64" 
+                            alt="{{ page.name }}"
+                            class="is-rounded">
+                        </p>
+                    </figure>
+                    <div class="media-content">
+                        <div class="content">
+                            <p class="title is-5">
+                                <strong>{{ page.name }}</strong><br><small class="is-size-7">{{ page.position }}</small>
+                            </p>
+                            <p class="is-size-6">{{ content }}</p>
+                        </div>
+                        <nav class="level is-mobile">
+                            <div class="level-left">
+                                {% include themes/jmblog-theme/components/social_buttons_small.html %}
+                            </div>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</section>

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

@@ -0,0 +1,48 @@
+<div class="card is-shadowless">
+                        <div class="columns is-gapless">
+                            <div class="column">
+                                <div class="card-image">
+                                    <figure class="image is-4by5 is-relative">
+                                        <a href="{{ post.url }}">
+                                        <img 
+                                            data-src="{{ post.image.path | default: "https://via.placeholder.com/290x362.png?text=image+is+4by5"}}?nf_resize=smartcrop&w=290&h=362" 
+                                            data-lowsrc="{{ post.image.path | default: "https://via.placeholder.com/290x362.png?text=image+is+4by5"}}?nf_resize=smartcrop&w=72&h=90" 
+                                            alt="Image by {{page.image.author}} on {{page.image.source}}"
+                                            class="lazyload blur-up">
+                                        </a>
+                                        {% assign postcontent = post.content %}
+                                        {% capture readingtime %}{% include themes/jmblog-theme/components/reading-time.html %}{% endcapture %}
+                                        {% if readingtime.size > 1 %}
+                                        <span class="tag is-white is-ontop">{{ readingtime | strip }}</span>
+                                        {% endif %}
+                                    </figure>
+                                </div>
+                            </div>
+                            <div class="column">
+                                <div class="card-content">
+                                    <div class="media">
+                                        {% comment %} <div class="media-left">
+                                        <figure class="image is-48x48">
+                                            <img class="is-rounded" src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
+                                        </figure>
+                                        </div> {% endcomment %}
+                                        <div class="media-content">
+                                        <h2 class="title is-4"><a href="{{post.url}}" class="has-text-black">{{ post.title }}</a></h2>
+                                        </div>
+                                    </div>
+
+                                    <div class="content">
+                                        <a href="{{ post.url }}" class="has-text-black">
+                                            {{ post.summary | truncatewords: 15 }}
+                                        </a>
+                                            <div class="tags">
+                                                {% for tag in post.tags %}
+                                                <span class="tag">#{{tag}}</span>
+                                                {% endfor %}
+                                            </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <hr>

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

@@ -0,0 +1,45 @@
+{% 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 %}
+
+{%- comment -%} <div class="is-rounded rounded-image-has-inner-shadow"></div> {%- endcomment -%}
+
+{% if include.sidebar == true %}
+<figure class="image is-4by3 has-border-black mb-1">
+	<img class="" 
+		src="/assets/img/{{ author.name | slugify: 'pretty' }}.jpg?nf_resize=fit&w=250" 
+		alt="{{ author.name }}">
+</figure>
+{% endif %}
+
+<div class="media">
+  {% unless include.sidebar == true %}
+  <figure class="media-left">
+    <p class="image is-64x64">
+      <img 
+	  	src="/assets/img/{{ author.name | slugify: 'pretty' }}-square.jpg?nf_resize=fit&w=64&h=64" 
+	  	alt="{{ author.name }}"
+		class="is-rounded">
+    </p>
+  </figure>
+  {% endunless %}
+  <div class="media-content">
+    <div class="content">
+      <p class="title is-5">
+		<strong>{{ author.name }}</strong><br><small class="is-size-7">{{ author.position }}</small>
+	  </p>
+      {% unless include.show_summary == false %}
+	  <p class="is-size-6">{{ author.summary }}</p>
+	  {% endunless %}
+    </div>
+    <nav class="level is-mobile">
+      <div class="level-left">
+        {% include themes/jmblog-theme/components/social_buttons_small.html %}
+      </div>
+    </nav>
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+{% 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-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-theme/components/head.html

@@ -3,7 +3,9 @@
 <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-theme/components/analytics/googletagmanager_head.html %}
 

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

@@ -1,7 +1,66 @@
-<nav>
-    {% for item in site.data.navigation.items %}
-    <a href="{{ site.baseurl }}{{ item.link }}" {% if page.url == item.link %}style="color: red;" {% endif %}>
-        {{ item.name }}
-    </a>
-    {% endfor %}
-</nav>
+<!-- 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 %}