jmblog-theme 0.1.0 → 1.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a20a568d98011c4dfba65e7c4446d511373fbe51b8824796536293ee406ce30
-  data.tar.gz: 704fc79c1955752318dc53fb05d4e2f5fbb5085454f3c49c0a2191c68dfed176
+  metadata.gz: 04e7a8fea7300246a478a7da49cbaf0867d266561124e5f948dde49ed2c330cc
+  data.tar.gz: c94393335e73e915871ee754573f3bc5749ae6d01ad5d8a6955c53bc62439b55
 SHA512:
-  metadata.gz: 616acb06d10bd2692b79e7ae87b3f8cb883d803ab374966233b75b1796e0d04fcb9ce2c4852a9722994447d02c69a9749629ae9b27d0af23dda09557f36e8077
-  data.tar.gz: bc33711d850d0ffea2f2ea496bff057af501f6074cd53f4da0851953f2f2a7df5aa2387408b6accb9963697c35e976d9042520b6d00610e4e681270d824341c9
+  metadata.gz: c49e013ed1e43be1831c1a6e46ec1e83fcdea305cc1b80f9e9a79f479e41be85754b639136ffd96eb93d7611e689110285a4629554b5c9b8966a3ab1cbf1ce6f
+  data.tar.gz: 610b5f47434f50d62519b06b682bd21e38ffa335f4289482a8f74e92415303faf610051b5768b432f233af6ecac1b74e4c83272a602181a652ec3a4ab5b75494

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,98 @@
+# 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: Website title
+tagline: "Website tagline"
+author: Author Name
+
+description: >-
+  Website description. 
+
+copyright: "copyright Author name 2020. All rights reserved."
+license: "copyright Author name 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.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-XXXXXXX
+
+# 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
+
+
+
+# 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

@@ -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/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>