jmblog-theme 1.0 → 1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee91a9beb803c54100ddb62f34229941e61eac7bbb8cf140a508028fde11bf29
-  data.tar.gz: 38bde2c3ca9e36cbe73b94ef6e67c928f80579f6593db94f91995447ef7fed6b
+  metadata.gz: e96b81ded7f0c6e9cd7e976bd09aaf0e85aecb8c6b22bcca45b8ac4b118cf0d3
+  data.tar.gz: 7554fe243f6d204b8dc0a7fe1c1ceb3fd1c90334aa6a000f9218e095dffe4beb
 SHA512:
-  metadata.gz: cbe344707fa3debf4f19edfc2f613932db425b5b8af1fc780eae3a72c6ff825596c72bf5c4745adc2d4b27e91590a9c6655bb69b8223900358b8ec6ba9b08756
-  data.tar.gz: fa781b60719133e733daf53c16b75a297f068214c5c9731dcb9d86aa22fd300f653c7a32ddf5849c3fce4574a4c550dd8a4e6299b98c720277ad0fb884998e50
+  metadata.gz: d60733fafdf3bcd789149f45f53af2e1237fb118ffc7e3568853ac8e82a1527945e7912b9978114fed3fd77e5b1eb774197746a3a8de6f640e05da3e87421fd3
+  data.tar.gz: fa1e354cd115bf4833b0b9c3ee07f2d2d0a12d25ae8920d2872c7ffa13ee47b1223ab19dff4f4e35ad79469834d37557d7acb19bc3754a0bfeb61dd6dad6e054

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/_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.svg' | absolute_url | url_encode }}&&s=64"
+                srcset="https://www.gravatar.com/avatar/{{ include.email }}?d={{ '/assets/img/user-circle.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.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/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">
@@ -17,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;
       }
@@ -27,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"

data/_includes/themes/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
@@ -12,4 +12,4 @@ render front matter as content
 
 {% include themes/jmblog-theme/components/social_buttons_large.html %}
 
-</div>
+{% comment %} </div> {% endcomment %}

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

@@ -19,8 +19,8 @@
             <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'}}" 
+                    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>

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

@@ -30,7 +30,7 @@
 
           {% 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>
+          <span class="is-size-7 mb-5 is-block">Image by&nbsp;<a href="{{ page.image.url }}">{{ page.image.author }}</a>&nbsp;from&nbsp;<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}}
@@ -50,25 +50,16 @@
               {% 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 %}
     
+        {% if page.comments %}
         <hr>
-
         {% include themes/jmblog-theme/components/comments.html %}
+        {% endif %}
 
       </div>
     </div>