j1-template 2020.0.0

data/_includes/themes/j1/procedures/posts/collate_timeline.proc

@@ -0,0 +1,226 @@
+{% comment %} 
+ # -----------------------------------------------------------------------------
+ # ~/_includes/themes/j1/procedures/posts/collate_timeline.proc
+ # Liquid PROCEDURE to collate posts along a timeline
+ #
+ # http://jekyll.one
+ #
+ # Copyright (C) 2020 Juergen Adams
+ #
+ # J1 Template is licensed under the MIT License.
+ # See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ # -----------------------------------------------------------------------------
+ #  NOTE:
+ #
+ #  Collate posts procedure. Collated posts ordered along a timeline.
+ #
+ #    Usage:
+ #
+ #        1) assign the 'posts_collate' variable to a valid array of posts
+ #        2) include the 'collate_timeline' procedure
+ #
+ #    Example:
+ #
+ #        {% assign posts_collate = site.posts %}
+ #        {% include themes/{{site.template.name}}/procedures/posts/collate_timeline.proc items=posts_collate %}
+ #
+ #    Ordering:
+ #
+ #        Posts are displayed in reverse chronological order (descending).
+ #        For ascending chronological order:
+ #          Change the for loop to this:
+ #            => 'for post in posts_collate reversed'
+ #
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  liquid_var:  {{liquid_var | debug}}
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Variables
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign builder_config  = site.data.builder.blog_navigator.collate_timeline %}
+{% assign header_title    = false %}
+{% assign header_tagline  = false %}
+{% assign posts_collate   = include.items %}
+{% assign limit_excerpt   = include.limit_excerpt %}
+
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+
+  {% if include.header_title %}  {% assign header_title   = include.header_title %}  {% endif %}
+  {% if include.header_tagline %}{% assign header_tagline = include.header_tagline %}{% endif %}
+
+  {% if site.data.template_settings.posts_collate.provider == 'custom' %}
+    <!-- Use custom collator -->
+    {% include themes/{{site.template.name}}/procedures/custom/posts_collate %}
+  {% else %}
+    <!-- Use j1 blog timeline collator -->
+    {% if header_title %}
+    <div class="row timeline-header-box">
+      <div class="text-center mb-3">
+        <h2 class="title notoc">{{header_title}}</h2>
+        {% if header_tagline %}
+        <div class="tagline">
+          <p>{{header_tagline}}</p>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+    {% endif %}
+
+    <ul class="timeline">
+      {% for post in posts_collate %}
+
+      {% assign place_image = false %}
+      {% assign place_icon  = false %}
+
+      <!-- Calculate left|right placement -->
+      {% assign indicator = forloop.index | modulo:2 %}
+      {% if indicator != 0 %}
+        {% assign blog_position = '' %}  <!-- left  -->
+      {% else %}
+        {% assign blog_position = 'timeline-inverted' %} <!-- right -->
+      {% endif %}
+
+      <li class="{{blog_position}}">
+        <div class="timeline-badge"><i class="tmicon rounded-x hidden-xs"></i></div>
+
+        <div class="timeline-panel">
+
+          <div class="timeline-title">
+            <a href="{{post.url}}">
+              <h4 id="{{1000000 | rand}}" class="font-light">{{post.title}}</h4>
+            </a>
+          </div>
+
+          <!-- Collect icon data from frontmatter -->
+          {% if post.icons.category-icon.size > 0 %}
+            {% assign icon_name   = post.icons.category-icon %}
+            {% assign icon_family = post.icons.family | strip | downcase %}
+            {% assign icon_size   = post.icons.size %}
+            {% assign icon_color  = post.icons.color %}
+            {% if icon_name %}
+              <!-- Set category icon: "{{icon_name}}" -->
+              {% assign place_icon = true %}
+              <!-- Flags: place_image = "{{place_image}}", place_icon = "{{place_icon}}" -->
+            {% endif %}
+          {% endif %}
+
+          <!-- Collect image data from frontmatter (overload icon data if configured) -->
+          {% if post.images.category-image.size > 0  %}
+            {% assign image_name = post.images.category-image %}
+            {% assign image_path = post.images.dir %}
+            {% capture image %}{{image_path}}/{{image_name}}{% endcapture %}
+            <!-- Set category image: "{{image}}" -->
+            {% assign place_image = true %}
+            {% assign place_icon  = false %}
+            <!-- Flags: place_image = "{{place_image}}", place_icon = "{{place_icon}}" -->
+          {% endif %}
+
+          {% if place_icon %}
+            {% if icon_family == 'fontawesome' or icon_family == 'fontawesome5' %}
+              {% assign icon_family  = 'fa' %}
+            {% elsif icon_family == 'mdi' %}
+              {% assign icon_family  = 'mdi' %}
+            {% else %}
+              {% assign icon_family  = 'mdi' %}
+            {% endif %}
+          {% endif %}
+
+          {% if place_icon %}
+            <!-- place_icon: {{icon_name}} -->
+            <div class="timeline-body">
+              <div class="timeline-tagline">
+                <p class="card-subtitle text-muted">{{post.tagline}}</p>
+              </div>
+              <div class="timeline-excerpt mb-4">
+                {% assign excerpt = post.excerpt | truncatewords: 50 | strip_html | strip_newlines | strip %}
+                <i class="timeline-icon {{icon_family}} {{icon_family}}-{{icon_name}} {{icon_family}}-{{icon_size}} {{icon_family}}-{{icon_color}}"></i>
+                {{excerpt}}
+              </div>
+              <div class="card-footer">
+                <a href="{{post.url}}#readmore"
+                   class="btn btn-primary btn-raised mb-0">
+                   <i class="fa fa-eye fa-lg" style="color:#FFFFFF;">
+                   </i> Read More
+                </a>
+              </div>
+            </div>
+          {% elsif place_image %}
+            <!-- place_image: "{{image}}" -->
+            <div class="timeline-heading">
+              <img class="img-fluid" src="{{image}}" alt="Category Image"/>
+            </div>
+            <div class="timeline-body">
+              <div class="timeline-tagline">
+                <p class="card-subtitle text-muted">{{post.tagline}}</p>
+              </div>
+              <div class="timeline-excerpt mb-4">
+                {% assign excerpt = post.excerpt | truncatewords: 50 | strip_html | strip_newlines | strip %}
+                {{excerpt}}
+              </div>
+              <div class="card-footer">
+                <a href="{{post.url}}#readmore"
+                   class="btn btn-primary btn-raised mb-0">
+                   <i class="fa fa-eye fa-lg" style="color:#FFFFFF;">
+                   </i> Read More
+                </a>
+              </div>
+            </div>
+          {% else %}
+            <!-- !place_icon && !place_image -->
+            <div class="timeline-body">
+              <div class="timeline-tagline">
+                <p class="card-subtitle text-muted">{{post.tagline}}</p>
+              </div>
+              <div class="timeline-excerpt mb-4">
+                {% assign excerpt = post.excerpt | truncatewords: 50 | strip_html | strip_newlines | strip %}
+                {{excerpt}}
+              </div>
+              <div class="card-footer">
+                <a href="{{post.url}}#readmore"
+                   class="btn btn-primary btn-raised mb-0">
+                   <i class="fa fa-eye fa-lg" style="color:#FFFFFF;">
+                   </i> Read More
+                </a>
+              </div>
+            </div>
+          {% endif %}
+
+          <!-- Collect comment provider details -->
+          {% for sharing in builder_config.sharing_provider %}
+            {% assign provider      = sharing.provider %}
+            {% assign likes_count   = sharing.likes_count %}
+            {% assign comment_count = sharing.comment_count %}
+          {% endfor %}
+
+          <div class="timeline-footer">
+            <ul class="timeline-list-unstyled list-inline blog-info">
+              <li><i class="fa fa-calendar mr-1"></i> {{post.date | date: "%Y %B, %e"}}</li>
+              {% if comment_count %}
+                <!-- comment_count enabled  -->
+                <!-- <li><i class="fa fa-comments-o"></i> <a href="#"> 7 Comments</a></li> -->
+                <li><a href="#"><i class="fa fa-comments-o"></i> 7 Comments</a></li>
+              {% endif %}
+            </ul>
+            {% if likes_count %}
+              <!-- likes_count enabled  -->
+              <a class="likes" href="#"><i class="fa fa-heart"></i> 239</a>
+            {% endif %}
+          </div>
+        </div>
+      </li>
+      {% endfor %}
+      <!-- final|last element placed as an empty list item -->
+      <li class="clearfix" style="float: none;"></li>
+    </ul>
+    <!-- End Timeline Collator -->
+  {% endif %}
+
+<!-- Reset procedure variable -->
+{% assign posts_collate = nil %}

data/_includes/themes/j1/procedures/posts/create_ad_block.proc

@@ -0,0 +1,56 @@
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #   ~/_includes/themes/j1/procedures/posts/create_ad_block.proc
+ #  Liquid PROCEDURE to create a series header for post series
+ #
+ #  http://jekyll.one
+ #
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+ #   Posts procedure. Generates ...
+ #
+ #    Usage:
+ #
+ #      1)  assign the 'page', 'post' and 'readmore' variables
+ #      2)  include the create_ad_block.proc procedure
+ #
+ #    Example:
+ #
+ #      {% capture create_ad_block %}themes/{{site.template.name}}/procedures/posts/create_ad_block.proc{% endcapture %}
+ #      {% assign my_navigation_data = nav_data_array %}
+ #
+ #      {% include {{create_ad_block}} page=page post=post %}
+ #
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  liquid_var:  {{ liquid_var | debug }}
+ #
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+   ----------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Variables
+   ----------------------------------------------------------------------------- {% endcomment %}
+   {% assign page     = include.page %}
+   {% assign post     = include.post %}
+
+{% comment %} Main
+   ----------------------------------------------------------------------------- {% endcomment %}
+    <div id="ad-block" class="mt-3 mb-5">
+      <div class="card card-blog">
+        <div class="content">
+          <h4 class="notoc card-title mt-3 ml-3">AdBlock</h4>
+          <p class="card-body">
+            Don't be scared of the truth because we need to restart the
+            human foundation in truth And I love you like Kanye loves Kanye
+            I love Rick Owens’ bed design but the back is...
+          </p>
+        </div>
+      </div>
+    </div>

data/_includes/themes/j1/procedures/posts/create_series_header.proc

@@ -0,0 +1,96 @@
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/_includes/themes/j1/procedures/posts/create_series_header.proc
+ #  Liquid PROCEDURE to create a series header for post series
+ #
+ #  http://jekyll.one
+ #
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+ #   Posts procedure. Generates ...
+ #
+ #    Usage:
+ #
+ #      1)  assign the 'page', 'post' and 'readmore' variables
+ #      2)  include the create_series_header.proc procedure
+ #
+ #    Example:
+ #
+ #      {% capture create_series_header %}themes/{{site.template.name}}/procedures/posts/create_series_header.proc{% endcapture %}
+ #      {% assign my_navigation_data = nav_data_array %}
+ #
+ #      {% include {{create_series_header}} page=page post=post %}
+ #
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  liquid_var:  {{liquid_var | debug}}
+ #
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Variables
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign readmore = false %}
+{% assign page     = include.page %}
+{% assign post     = include.post %}
+{% assign readmore = include.readmore %}
+
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign count = '0' %}
+{% assign idx = '0' %}
+{% assign list = '' %}
+
+{% capture open %}
+<div id="post_series">
+ <div class="series-navigator ml-3"> 
+   <div class="content series-navigation">
+
+     <div class="row">
+       <div class="col-xs-12 col-md-12 col-lg-12 mb-4">
+         <h5 id="blog_series_list" class="notoc mt-2 mr-2 mb-4">This article is <strong>part <<idx>> </strong> in a <strong><<count>>-part</strong> series:</h5>
+         <ul class="side-nav">
+ {% endcapture %}
+         {% for post in site.posts reversed %}
+           {% if post.series == page.series %}
+             {% assign count = count | plus: 1 %}
+             {% if post.url == page.url %}
+               {% assign idx = count %}
+               {% assign excerpt = post.excerpt %}
+               {% assign excerpt_title = post.tagline|capitalize %}
+             {% endif %}
+             {% capture list_tmp %}{{list}}{% if page.url == post.url %}<li class="current"><a data-proofer-ignore href="#">{{post.date|date: "%Y-%m-%d"}} · Part {{count}} · {{post.title}}</a>{% else %}<li><a data-proofer-ignore href="{{site.baseurl}}{{post.url}}">{{post.date|date: "%Y-%m-%d"}} · Part {{count}} · {{post.title}}</a>{% endif %}</li>{% endcapture %}
+             {% assign list = list_tmp %}
+           {% endif %}
+         {% endfor %}
+         {{open | replace: '<<count>>', count | replace: '<<idx>>', idx}}{{list}}
+         </ul>
+       </div>
+
+       <div class="col-xs-12 col-md-12 col-lg-12 mt-2">
+         <h5 class="notoc series-exerpt-title">{{excerpt_title}}</h5>
+         <div class="series-exerpt mr-3">
+           <div class="paragraph">
+             <p>{{excerpt}}</p>
+           </div>
+           {% if readmore %}
+           <div class="card-footer">
+             <a href="#readmore" class="btn btn-info btn-raised pull-right smoothscroll"> <i class="mdi mdi-eye mdi-lg" style="color:#FFFFFF" %}=""></i> Read More </a>
+           </div>
+           {% endif %}
+
+         </div>
+       </div>
+     </div>
+
+   </div>
+ </div>
+</div>

data/_layouts/app.html

@@ -0,0 +1,68 @@
+---
+layout:                                 default
+debug:                                  false
+---
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #   ~/_layouts/app.html
+ #  Liquid layout template for all pages of content-type APP
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+ #  NOTE:
+ #    This is the layout for all content pages of type APP.
+ #    Layout APP is based on layout BASE to inherit all (HTML) data.
+ # -----------------------------------------------------------------------------
+ #  NOTE:
+ #    By J1 template, "Liquid Procedures" are being used intensively. To load
+ #    HTML data for a region (lane), the (Liquid) procedure "section_loader"
+ #    places the components based on the YAML data file: app.yml.
+ # -----------------------------------------------------------------------------
+ #  NOTE:
+ #    Do NOT add any CONTENT here. If needed, go for a "next level" layout
+ #    that extents the layout BASE by additional data for your specific
+ #    needs based on YAML configuration data files.
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  liquid_var:  {{ liquid_var | debug }}
+ #
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+{% capture default_writer %}themes/{{site.template.name}}/procedures/layouts/default_writer.proc{% endcapture %}
+{% capture content_writer %}themes/{{site.template.name}}/procedures/layouts/content_writer.proc{% endcapture %}
+
+{% comment %} Variables
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign lanes_collate = site.data.layouts.app.lanes %}
+
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+
+  {% comment %} Collect the BODY-HEADER region
+  ------------------------------------------------------------------------------ {% endcomment %}
+
+  <!-- [INFO   ] [j1.layout.app.html                 ] [ call default_writer for region: 'body-header' ] -->
+  <header id="header">
+    {% include  {{default_writer}} region='body-header' items=lanes_collate %}
+  </header>
+  <!-- [INFO   ] [j1.layout.app.html                  ] [ end processing default_writer for region: 'body-header' ] -->
+
+  {% comment %} Collect the BODY-MAIN region
+  ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.layout.app.html                 ] [ call content_writer for region: 'body-main' ] -->
+  <div class="row">
+      {% include  {{content_writer}} region='body-main' items=lanes_collate %}
+  </div>
+  <!-- [INFO   ] [j1.layout.app.html                  ] [end processing content_writer for region: 'body-main' ] -->