jmblog-theme 1.0 → 1.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee91a9beb803c54100ddb62f34229941e61eac7bbb8cf140a508028fde11bf29
-  data.tar.gz: 38bde2c3ca9e36cbe73b94ef6e67c928f80579f6593db94f91995447ef7fed6b
+  metadata.gz: 5f5dda63de4b05c3d1e993578fa546c534b7c4511580af8161aeba3ac22d0309
+  data.tar.gz: 73af0abd16ab17c8865c1423a5bf714e8a3d8a0cc3fc6381b9b8af392be99632
 SHA512:
-  metadata.gz: cbe344707fa3debf4f19edfc2f613932db425b5b8af1fc780eae3a72c6ff825596c72bf5c4745adc2d4b27e91590a9c6655bb69b8223900358b8ec6ba9b08756
-  data.tar.gz: fa781b60719133e733daf53c16b75a297f068214c5c9731dcb9d86aa22fd300f653c7a32ddf5849c3fce4574a4c550dd8a4e6299b98c720277ad0fb884998e50
+  metadata.gz: 5f058b099b78d282f86916c042cf7fd34b5f7a6724e026857f268c3fc22581229d17ff3fa1c3098cbfff99dc3aa40573edc9505a82e715c7c6416abdca5c1b01
+  data.tar.gz: 4d28be490195ac9b8888563640267abb75525983b2978a702b9c78bad88065ef2cbb6d8b3b99bf5f95898cf7772e0eb28d7ce774b2a361fae269b5a186e65e8b

data/_config.yml

@@ -13,18 +13,15 @@ collections:
 # 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
+title: Website title
+tagline: "Website tagline"
+author: Author Name
 
 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. 
+  Website description. 
 
-copyright: "copyright John Moxon 2020. All rights reserved."
-license: "copyright John Moxon 2020. All rights reserved."
+copyright: "copyright Author name 2020. All rights reserved."
+license: "copyright Author name 2020. All rights reserved."
 
 paginate: 5
 paginate_path: "/articles/page:num/"
@@ -38,17 +35,17 @@ 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'
+url: https://www.yourwebsite.com # the base hostname & protocol for your site, e.g. http://example.com
+twitter_username : https://twitter.com/yourtwitterhandle
+github_username : http://github.com/githubusername/
+linkedin_username : https://www.linkedin.com/in/linkedinprofile/
+medium_username : https://medium.com/@mediumusername
+meeting_url: 'https://meetings.hubspot.com/meetingurl'
 
 # GTM Tracking ID
 analytics:
   gtm:
-    tracking_id: GTM-WGHRT3
+    tracking_id: GTM-XXXXXXX
 
 # Build settings
 markdown: kramdown
@@ -78,3 +75,24 @@ plugins:
 
 kramdown:
   input: GFM
+
+
+
+# The URL for the staticman API bridge endpoint
+# You will want to modify some of the values:
+#  ${github-username}: the username of the account with which you publish your blog
+#  ${blog-repo}: the name of your blog repository in github
+#  master: this the branch out of which your blog is published, often master or gh-pages
+#  ${bridge_app_name}: the name you chose in Heroku for your bridge API
+#  comments: the so-called property, this defines the key in staticman.yml where the configuration is found
+#
+# for me, this line reads:
+# https://staticman-travisdownsio.herokuapp.com/v2/entry/travisdowns/travisdowns.github.io/master/comments
+# staticman_url: https://staticmaninstance.herokuapp.com/v2/entry/githubusername/repository/branch/comments
+
+# reCaptcha configuration info: the exact same site key and *encrypted* secret that you used in staticman.yml
+# I personally don't think the secret needs to be included in the generated site, but the staticman API bridge uses
+# it to ensure the site configuration and bridge configuration match (but why not just compare the site key?)
+# reCaptcha:
+#   siteKey: yoursitekey
+#   secret: yourencryptedsecretkey

data/_data/navigation.yml

@@ -3,6 +3,6 @@ items:
   - name: Home
     link: /
   - name: About
-    link: /authors/john
+    link: /authors/john_doe
   - name: Contact
     link: /contact

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

@@ -0,0 +1,79 @@
+{%- capture article_class %}media js-comment comment{% if include.name == site.author.name %} admin{% endif %}{% if
+include.is_reply %} child{% endif %}{% endcapture %}
+{% assign comment_id = include.uid | prepend: 'comment-' %}
+
+<article class="{{ article_class }}" id="{{ comment_id }}" uid="{{ include.uid }}">
+    <!-- Gravatar here -->
+    <figure class="media-left">
+        <p class="image is-64x64">
+            {% if include.avatar %}
+            <img src="{{ include.avatar }}" 
+                alt="{{ include.name | escape }}" 
+                width="64px" 
+                height="64px" 
+                class="is-rounded">
+            {% elsif include.email != "" %}
+            <img src="https://www.gravatar.com/avatar/{{ include.email }}?d={{ '/assets/img/user-circle-solid.svg' | absolute_url | url_encode }}&&s=64"
+                srcset="https://www.gravatar.com/avatar/{{ include.email }}?d={{ '/assets/img/user-circle-solid.svg' | absolute_url | url_encode }}&&s=128 2x" 
+                alt="{{ include.name | escape }}"
+                width="64px"
+                height="64px"
+                class="is-rounded">
+            {% else %}
+            <img src="{{ '/assets/img/user-circle-solid.svg' | absolute_url }}" 
+                alt="{{ include.name | escape }}" 
+                width="64px"
+                height="64px"
+                class="is-rounded">
+            {% endif %}
+        </p>
+    </figure>
+    <!-- end gravatar -->
+    <div class="media-content">
+        <div class="comment__author">
+            <p>
+                <strong>{{- include.name | strip_html -}}</strong> <small class="comment__date">
+                    {%- if include.date -%}
+                    <a href="#{{ comment_id}}" title="Permalink to this comment">
+                        {{- include.date | date:"%B %eth, %Y %H:%M" -}}
+                    </a>
+                    {%- endif -%}
+                </small>
+                <br>
+                {{ include.message | strip_html | markdownify }}
+            </p>
+        </div>     
+{% unless include.is_reply %}
+
+
+        <nav class="level is-mobile">
+            <div class="level-left">
+                <a rel="nofollow" 
+                    class="level-item comment__reply-link"
+                    data-comment-id="{{ comment_id }}"
+                    data-page-slug="{{ page.slug }}"
+                    data-uid="{{ include.uid }}" 
+                    data-respond-id="respond">
+                    <span class="icon is-small pr-3">
+                        <i class="fas fa-reply"></i></span> <small>reply to {{ include.name }}</small>
+                </a> 
+            </div>
+        </nav>
+
+{%- capture this_uid %}{{ include.uid }}{% endcapture %}
+{%- assign replies = site.data.comments[page.slug] | where_exp: 'item', 'item.replying_to_uid == this_uid' %}
+{%- assign replies_date = replies | sort: 'date' %}
+{% for reply in replies_date %}
+{%- assign email = reply.email -%}
+{%- assign name = reply.name -%}
+{%- assign url = reply.url -%}
+{%- assign date = reply.date -%}
+{%- assign message = reply.message -%}
+{%- assign uid = reply._id -%}
+{% include themes/jmblog-theme/components/comment.html is_reply=true uid=uid email=email name=name url=url date=date message=message %}
+{% endfor %}
+
+<!-- <hr style="border-top: 1px solid #ccc; background: transparent; margin-bottom: 10px;"> -->
+{% endunless %}
+    </div>
+</article>

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

@@ -0,0 +1,87 @@
+<div id="comments__form" class="container mt-6">
+    <form class="comments-form form" method="post" action="{{ site.staticman_url }}">
+        <input type="hidden" name="options[origin]" value="{{ page.url | absolute_url }}">
+        <input type="hidden" name="options[parent]" value="{{ page.url | absolute_url }}">
+        <input type="hidden" id="comment-replying-to-uid" name="fields[replying_to_uid]" value="">
+        <input type="hidden" name="options[slug]" value="{{ page.slug }}">
+        <input type="hidden" name="options[reCaptcha][siteKey]" value="{{ site.reCaptcha.siteKey }}">
+        <input type="hidden" name="options[reCaptcha][secret]"  value="{{ site.reCaptcha.secret }}">
+
+        <div class="field">
+            <label class="label" for="comment-form-message">
+            {% if include.first_comment == true %}Be The First To {% endif %}
+            Leave A Comment
+            </label>
+            <div class="control">
+                <textarea class="textarea comments-field" 
+                    name="fields[message]"
+                    id="comment-form-message"
+                    placeholder="Your comment (markdown accepted)"
+                    required></textarea>
+            </div>
+        </div>
+
+        <div class="field">
+            <label class="label" for="comment-form-name">Name</label>
+            <div class="control has-icons-left">
+                <input class="input comments-field" 
+                    name="fields[name]"
+                    id="comment-form-name"
+                    type="text" 
+                    placeholder="Your name (required)"
+                    required>
+                <span class="icon is-small is-left">
+                    <i class="fas fa-user"></i>
+                </span>
+            </div>
+        </div>
+
+        <div class="field">
+            <label class="label">Email</label>
+            <div class="control has-icons-left">
+                <input class="input comments-field" 
+                    name="fields[email]"
+                    id="comment-form-email"
+                    type="email" 
+                    placeholder="Your email (optional)">
+                <span class="icon is-small is-left">
+                    <i class="fas fa-envelope"></i>
+                </span>
+            </div>
+        </div>
+
+        <div class="is-hidden field textfield narrowfield hp">
+            <label class="label">Website</label>
+            <div class="control has-icons-left">
+                <input class="textfield__input input" 
+                    name="fields[hp]" 
+                    id="hp" 
+                    type="text" 
+                    placeholder="Leave blank">
+                <span class="icon is-small is-left">
+                    <i class="fas fa-globe-africa"></i>
+                </span>
+            </div>
+        </div>
+
+
+        <div id="reCaptcha" class="g-recaptcha" data-sitekey="{{ site.reCaptcha.siteKey }}"></div>
+
+        <div class="field is-grouped mt-3 mb-5">
+            <p class="control">
+                <button class="button is-primary" id="comment-form-submit">
+                    Submit
+                </button>
+            </p>
+            <p class="control">
+                <button class="button is-hidden" id="cancel-comment-reply-link">
+                    Cancel
+                </button>
+            </p>
+        </div>
+        
+
+        
+
+    </form>
+</div>

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

@@ -1,18 +1,41 @@
-{% if page.comments %}
-<div id="disqus_thread"></div>
-<script>
+<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 == ''" %}
 
-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 %}
+        {% 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-theme/components/footer.html

@@ -2,22 +2,18 @@
   <footer class="footer">
     <div class="container has-text-centered">
       <p>
-        The source code for this website is licensed by 
-        <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><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  
+        The source code for this website is licensed by&nbsp;
+        <a href="https://opensource.org/licenses/mit-license.php">MIT</a> and can be found&nbsp;
+        <a href="https://github.com/johnmoxon/johnmoxon.github.io/">here on github <i class="fab fa-github has-text-black"></i></a><br>
+        <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&nbsp;
           <a href="https://creativecommons.org/licenses/by/4.0">
-            CC BY 4.0
+            CC BY 4.0&nbsp;
             <img
               style="height:22px!important;margin-left: 3px;vertical-align:text-bottom;"
-              src="https://search.creativecommons.org/static/img/cc_icon.svg" />
-            <img
-              style="height:22px!important;margin-left: 3px;vertical-align:text-bottom;"
-              src="https://search.creativecommons.org/static/img/cc-by_icon.svg" />
+              src="https://creativecommons.org/wp-content/uploads/2016/06/brain.png" height="22px" />
           </a>
         </span>
       </p>

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

@@ -1,5 +1,3 @@
-
-
 <title>{{ page.title }} | {{site.title}}</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -31,8 +29,15 @@
         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"

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

@@ -1,14 +1,15 @@
+{% assign maxRelated = 4 %}
+{% assign minCommonTags = 1 %}
+{% assign maxRelatedCounter = 0 %}
+
+{% assign posts = site.posts |  where_exp: "item", "item.slug != page.slug" %}
+{% if posts.size >= 1%}
 <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 %}
 
@@ -39,7 +40,6 @@
                         </a>
                     </div>
 
-
                     <!-- END related component -->
                     {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
                     {% if maxRelatedCounter >= maxRelated %}
@@ -48,26 +48,7 @@
                 {% endif %}
 
             {% endfor %}
-
-
-
-
-
-
-
-
-
-
-
-            
-
-
-
         </div>
-
-                    
     </div>
 </section>                        
-                            
-
-
+{% endif %}