j1-template 2020.0.9 → 2020.0.14

data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-24-narcisse-snake-dens.adoc

@@ -21,7 +21,7 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
         - url:                          /assets/images/collections/blog/wikipedia/narcise-snake-pits.1200x400.jpg
           alt:                          Narcisse Snake Pits
@@ -58,8 +58,8 @@ image::/assets/images/collections/blog/wikipedia/narcise-snake-pits.1200x400.jpg
 
 These pits are the largest concentration in the world of this particular type
 of snake. Their winter dens are subterranean caverns formed by the area's
-water-worn limestone bedrock. In the spring, they come up from their dens to 
-the snake pits, where they engage in mating rituals. Then they disperse into 
+water-worn limestone bedrock. In the spring, they come up from their dens to
+the snake pits, where they engage in mating rituals. Then they disperse into
 the nearby marshes for the summer.
 
 The population of red-sided garter snakes around Narcisse was roughly 70,000

data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-26-columbia-river.adoc

@@ -7,9 +7,9 @@ date:                                   2016-11-26 00:00:00 +0100
 series:
 
 tags:                                   [ Wikipedia ]
-index:                                  [ 
-                                          USA, Northwest Region, Rocky 
-                                          Mountains, Rivers 
+index:                                  [
+                                          USA, Northwest Region, Rocky
+                                          Mountains, Rivers
                                         ]
 categories:                             []
 
@@ -20,7 +20,7 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
         - url:                          /assets/images/collections/blog/wikipedia/columbia-river.1200x400.jpg
           alt:                          Columbia River

data/lib/starter_web/index.html

@@ -1,6 +1,6 @@
 ---
 layout:                                 home
-regenerate:                             true 
+regenerate:                             true
 
 title:                                  J1
 tagline:                                create your web
@@ -11,7 +11,7 @@ index:                                  []
 categories:                             []
 indexed:                                false
 
-debug:                                  false          
+debug:                                  false
 debug2:                                 false
 
 analytics:                              false
@@ -19,28 +19,29 @@ advertising:                            false
 comments:                               false
 toc:                                    false
 
+robots:
+  index:                                true
+  follow:                               true
+
 #permalink:                             /
 scrollbar:                              false
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/alex-holyoake-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/alex-holyoake-1920x1280.webp
           alt:                          Photo by Alex Holyoake on Unsplash
-#         caption:                      
-#           text:                       Photo by Alex Holyoake on Unsplash
-#           href:                       https://unsplash.com/@stairhopper
           badge:
             type:                       unsplash
             author:                     Alex Holyoake
             href:                       https://unsplash.com/@stairhopper
 ---
 
-<pre> 
+<pre>
 
   This page is created by the layout: {{ page.layout }}.
 
@@ -53,7 +54,7 @@ resource_options:
   (inheritance) is correct.
 
   If you see this page within the J1 Template DEVELOPMENT system,
-  re-run a site built running: 
+  re-run a site built running:
 
     yarn rebuilt site
 

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1_starter",
-  "version": "2020.0.9",
+  "version": "2020.0.14",
   "description": "J1 Template starter Web",
   "homepage": "https://your.site",
   "author": {

data/lib/starter_web/pages/public/about/about_site.adoc

@@ -18,7 +18,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/ian-schneider-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/ian-schneider-1920x1280.webp
           alt:                          Photo by Ian Schneider on Unsplash
           badge:
             type:                       unsplash

data/lib/starter_web/pages/public/about/become_a_patron.adoc

@@ -18,7 +18,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/premium-1920x1280-bw.jpg
+        - url:                          /assets/images/modules/attics/premium-1920x1280-bw.webp
           alt:                          Photo by Anders Nord on Unsplash
           badge:
             type:                       unsplash

data/lib/starter_web/pages/public/blog/navigator/archive.html

@@ -1,22 +1,23 @@
 ---
 layout:                                 page
 
-title:                                  Archive
+title:                                  Creators Blog
 tagline:                                all posts
+description:                            Browse all articles
 
 #permalink:                             /pages/private/blog/navigator/archive/
 noindex:                                true
 
-regenerate:                             false 
+regenerate:                             false
 
 resources:                              []
 resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/matthaeus-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/matthaeus-1920x1280.webp
           alt:                          Photo by Matthaeus
           alignY:                       top
           badge:
@@ -37,12 +38,12 @@ resource_options:
 {% assign view_description    = view_config.description %}
 
 {% if site.permalink == 'none' %}
-  {% capture browser_page_url %}{{ page.url }}.html{% endcapture %}
+  {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
 {% else %}
-  {% capture browser_page_url %}{{ page.url }}{% endcapture %}
+  {% capture browser_page_url %}{{page.url}}{% endcapture %}
 {% endif %}
 
-{% include {{get_page_path}} mode='absolute' %} 
+{% include {{get_page_path}} mode='absolute' %}
 
 {% capture navigator %}{{page_path}}/{% endcapture %}
 {% capture blog_preview %}{{page_path}}/archive/preview/{% endcapture %}
@@ -54,7 +55,7 @@ resource_options:
 {% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
 <!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
-<div class="paginator ml-2"> 
+<div class="paginator ml-2">
   <ul class="pagination raised-z0">
     <li class="page-item"><a class="page-link" href="{{navigator     | prepend: site.baseurl}}" title="Blog View">Navigator</a></li>
     <li class="page-item"><a class="page-link" href="{{category_view | prepend: site.baseurl}}" title="View by Category">By Category</a></li>
@@ -65,31 +66,36 @@ resource_options:
 
 <div id="index" class="post-archive-search-results col-md-10 col-sm-10 col-xs-11">
   <div class="view-description">{{view_description}}</div>
-  <div class="post-headline"> 
+  <div class="post-headline">
     <h2 id="post-headline" class="mt-5">All Posts</h2>
   </div>
+
   <!-- ul class="list-unstyled link-news" -->
   {% for post in site.posts %}
     {% assign excerpt = post.excerpt | truncatewords: 50 | strip_html | strip_newlines | strip %}
-    <div class="card card-flat mb-4">        
+    <div class="card card-flat" style="background-color: #fafafa">
       <div class="card-body">
         <!-- <span class="post-meta">{{post.date|date: "%B %d, %Y"}}</span> -->
-        <h3 id="{{ 100000 | rand }}" class="card-title">{{ post.title }}</h3>
-        <h5 class="notoc card-subtitle text-muted mb-2">{{ post.tagline }}</h5>
-        <div class="card-text"><p>{{ excerpt }}</p></div>
+        <h3 id="{{100000 | rand}}" class="card-title">{{post.title}}</h3>
+        <h5 class="notoc card-subtitle text-muted mb-2">{{post.tagline}}</h5>
+        <div class="card-text"><p>{{excerpt}}</p></div>
+        <span class="d-block text-muted text-uppercase g-font-weight-600 g-font-size-12">
+          <i class="mdi mdi-calendar-blank"></i>
+          {{post.date|date:'%Y %B, %e'}}
+        </span>
       </div>
-      <div class="card-footer">
+      <div class="card-footer" style="background-color: #fafafa">
         <!-- <a class="card-link" href="{{post.url}}#readmore" target="_blank">Read more ..</a> -->
         <a class="btn btn-primary btn-raised btn-flex" href="{{post.url}}#readmore">
-          <i class="fa fa-eye fa-lg" style="color:#FFFFFF;"></i>
-          Read more
+          <i class="fa fa-eye fa-lg mr-2" style="color:#FFFFFF;"></i>
+          Read · {{post.tagline}}
         </a>
       </div>
     </div>
   {% endfor %}
 </div>
 
-<!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [{{page.title}} - Save the current page to cookieUserState cookie: {{ browser_page_url }}] -->
+<!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [{{page.title}} - Save the current page to cookieUserState cookie: {{browser_page_url}}] -->
 {% comment %} Update cookie for lastpage
 -------------------------------------------------------------------------------- {% endcomment %}
 <script type="text/javascript">
@@ -102,7 +108,7 @@ resource_options:
     user_state.last_page            = user_state_last_page;
 //  j1.setUserState( {last_page:user_state_last_page} );
     j1.writeCookie({
-      name: user_state_cookie_name, 
+      name: user_state_cookie_name,
       data: user_state
     });
     logger.info('Saved current Post Browser page to cookie: {{browser_page_url}}');

data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html

@@ -1,8 +1,9 @@
 ---
 layout:                                 page
 
-title:                                  Categories
+title:                                  Creators Blog
 tagline:                                posts by category
+description:                            Browse articles by category
 
 sort:                                   date
 #permalink:                             /pages/private/blog/navigator/archive/categoryview/
@@ -17,9 +18,9 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/matthaeus-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/matthaeus-1920x1280.webp
           alt:                          Photo by Matthaeus
           alignY:                       top
           badge:
@@ -30,7 +31,7 @@ resource_options:
 
 {% comment %} Debugging|Helpers
 -------------------------------------------------------------------------------- {% endcomment %}
-{% comment %} site_category_word_list:  {{ site_category_word_list | debug }} {% endcomment %}
+{% comment %} site_category_word_list:  {{site_category_word_list|debug}} {% endcomment %}
 
 
 {% comment %} Liquid procedures
@@ -46,13 +47,13 @@ resource_options:
 {% assign view_description    = view_config.description %}
 
 {% if site.permalink == 'none' %}
-  {% capture browser_page_url %}{{ page.url }}.html{% endcapture %}
+  {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
 {% else %}
-  {% capture browser_page_url %}{{ page.url }}{% endcapture %}
+  {% capture browser_page_url %}{{page.url}}{% endcapture %}
 {% endif %}
 
-{% include {{get_page_path}} mode='absolute' %} 
-{% assign navigator_path = page_path | remove_first:'archive' %}
+{% include {{get_page_path}} mode='absolute' %}
+{% assign navigator_path = page_path|remove_first:'archive' %}
 
 {% capture navigator %}{{navigator_path}}{% endcapture %}
 {% capture date_view %}{{page_path}}/dateview/{% endcapture %}
@@ -61,21 +62,21 @@ resource_options:
 {% capture all_view %}{{page_path}}/{% endcapture %}
 
 {% if page.sort == 'title' %}
-  {% assign sorted_posts = site.posts | sort: 'title' %}
+  {% assign sorted_posts = site.posts|sort: 'title' %}
 {% elsif page.sort == 'date' %}
-  {% assign sorted_posts = site.posts | sort: 'date' %}
+  {% assign sorted_posts = site.posts|sort: 'date' %}
 {% else %}
-  {% assign sorted_posts = site.posts | sort: 'date' %}
+  {% assign sorted_posts = site.posts|sort: 'date' %}
 {% endif %}
 
 {% comment %} TODO: skip_words configured by yaml data file?
 -------------------------------------------------------------------------------- {% endcomment %}
-{% capture site_category_word_list %}{% for tag in site.categories %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
-{% assign categories = site_category_word_list | split:',' %}
+{% capture site_category_word_list %}{% for tag in site.categories %}{{tag|first}}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
+{% assign categories = site_category_word_list|split:',' %}
 
 {% for category in categories %}
   {% if page.skip_words contains category %} {% continue %} {% endif %}
-  {% capture category_list %}{{ category_list | append: category }}{% unless forloop.last %},{% endunless %}{% endcapture %} 
+  {% capture category_list %}{{category_list|append: category}}{% unless forloop.last %},{% endunless %}{% endcapture %}
 {% endfor %}
 
 {% comment %} Main
@@ -85,44 +86,48 @@ resource_options:
 
 <div class="paginator ml-3">
   <ul class="pagination raised-z0">
-    <li class="page-item"><a class="page-link" href="{{navigator | prepend: site.baseurl}}" title="Blog View">Navigator</a></li>
-    <li class="page-item"><a class="page-link" href="{{date_view | prepend: site.baseurl}}" title="View by Date">By Date</a></li>
-    <!-- li class="page-item"><a class="page-link" href="{{tag_view  | prepend: site.baseurl}}" title="View by Tag">By Tag</a></li -->
-    <li class="page-item"><a class="page-link" href="{{all_view  | prepend: site.baseurl}}" title="View All">All Posts</a></li>
+    <li class="page-item"><a class="page-link" href="{{navigator|prepend: site.baseurl}}" title="Blog View">Navigator</a></li>
+    <li class="page-item"><a class="page-link" href="{{date_view|prepend: site.baseurl}}" title="View by Date">By Date</a></li>
+    <!-- li class="page-item"><a class="page-link" href="{{tag_view |prepend: site.baseurl}}" title="View by Tag">By Tag</a></li -->
+    <li class="page-item"><a class="page-link" href="{{all_view |prepend: site.baseurl}}" title="View All">All Posts</a></li>
   </ul>
 </div>
 
 <div class="post-search-results col-md-10 col-sm-10 col-xs-11">
 
   <div class="view-description">{{view_description}}</div>
-  <div class="post-headline"> <h2 id="post-headline" class="mt-5">Categories</h2></div>
-  {% assign tags = site.categories | sort %}
+  <div class="post-headline">
+    <h2 id="post-headline" class="mt-5">Posts by Category</h2>
+  </div>
+  {% assign tags = site.categories|sort %}
   {% for tag in tags %}
     {% assign category = tag|first %}
     {% unless category_list contains category %} {% continue %} {% endunless %}
-    <!-- h2 id="{{tag|first}}" class="toc-link mt-5 mb-4"><i class="fa fa-thumbtack mr-3"></i>{{tag|first|capitalize}} <i class="badge ml-1">{{tag|last|size}}</i></h2 -->
-    <h3 id="{{tag|first}}" class="toc-link mt-5 mb-4"><i class="fa fa-thumbtack mr-3"></i>{{tag|first|capitalize}}</h3>
+    <h3 id="{{tag|first}}" class="toc-link"><i class="mdi mdi-pin mr-1"></i>{{tag|first|capitalize}}</h3>
 
       {% for post in sorted_posts %}
         {%if post.categories contains tag[0]%}
-          {% assign category = tag | first %}
+          {% assign category = tag|first %}
           {% include {{get_category_item}} category=category %}
           {% include {{select_icon_size}} family=icon_family size=icon_size %}
           {% assign icon_size = size %}
-          {% assign excerpt = post.excerpt | truncatewords: 50 | strip_html | strip_newlines | strip %}
+          {% assign excerpt = post.excerpt|truncatewords: 50|strip_html|strip_newlines|strip %}
 
-          <div class="card card-flat mb-4">        
+          <div class="card card-flat" style="background-color: #fafafa">
             <div class="card-body">
               <!-- <span class="post-meta">{{post.date|date: "%B %d, %Y"}}</span> -->
-              <h4 id="{{ 100000 | rand }}" class="card-title">{{ post.title }}</h4>
-              <h5 class="notoc card-subtitle text-muted mb-2">{{ post.tagline }}</h5>
-              <div class="card-text"><p>{{ excerpt }}</p></div>
+              <h4 id="{{100000|rand}}" class="card-title">{{post.title}}</h4>
+              <h5 class="notoc card-subtitle text-muted mb-2">{{post.tagline}}</h5>
+              <div class="card-text"><p>{{excerpt}}</p></div>
+              <span class="d-block text-muted text-uppercase g-font-weight-600 g-font-size-12">
+                <i class="mdi mdi-calendar-blank"></i>
+                {{post.date|date:"%Y %B, %e"}}
+              </span>
             </div>
-            <div class="card-footer">
-              <!-- <a class="card-link" href="{{post.url}}#readmore" target="_blank">Read more ..</a> -->
+            <div class="card-footer" style="background-color: #fafafa">
               <a class="btn btn-primary btn-raised btn-flex" href="{{post.url}}#readmore">
-                <i class="fa fa-eye fa-lg" style="color:#FFFFFF;"></i>
-                Read more
+                <i class="mdi mdi-eye mdi-lg mr-2" style="color:#FFFFFF;"></i>
+                Read · {{post.tagline}}
               </a>
             </div>
           </div>
@@ -131,7 +136,7 @@ resource_options:
   {% endfor %}
 </div>
 
-<!-- [INFO   ] [j1.page.{{page.title}}                   ] [Save the current page to cookieUserState cookie: {{ browser_page_url }}] -->
+<!-- [INFO   ] [j1.page.{{page.title}}                   ] [Save the current page to cookieUserState cookie: {{browser_page_url}}] -->
 {% comment %} Update cookie for lastpage
 -------------------------------------------------------------------------------- {% endcomment %}
 <script type="text/javascript">
@@ -144,7 +149,7 @@ resource_options:
     user_state.last_page            = user_state_last_page;
 //  j1.setUserState( {last_page:user_state_last_page} );
     j1.writeCookie({
-      name: user_state_cookie_name, 
+      name: user_state_cookie_name,
       data: user_state
     });
     logger.info('Saved current Post Browser page to cookie: {{browser_page_url}}');

data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html

@@ -1,8 +1,9 @@
 ---
 layout:                                 page
 
-title:                                  Date
+title:                                  Creators Blog
 tagline:                                posts by date
+description:                            Browse articles by date
 
 #permalink:                             /pages/private/blog/navigator/archive/dateview/
 noindex:                                true
@@ -14,9 +15,9 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/matthaeus-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/matthaeus-1920x1280.webp
           alt:                          Photo by Matthaeus
           alignY:                       top
           badge:
@@ -37,13 +38,13 @@ resource_options:
 {% assign view_description    = view_config.description %}
 
 {% if site.permalink == 'none' %}
-  {% capture browser_page_url %}{{ page.url }}.html{% endcapture %}
+  {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
 {% else %}
-  {% capture browser_page_url %}{{ page.url }}{% endcapture %}
+  {% capture browser_page_url %}{{page.url}}{% endcapture %}
 {% endif %}
 
-{% include {{get_page_path}} mode='absolute' %} 
-{% assign navigator_path = page_path | remove_first:'archive' %}
+{% include {{get_page_path}} mode='absolute' %}
+{% assign navigator_path = page_path|remove_first:'archive' %}
 
 {% capture navigator %}{{navigator_path}}{% endcapture %}
 {% capture date_view %}{{page_path}}/dateview/{% endcapture %}
@@ -54,64 +55,76 @@ resource_options:
 {% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
 <!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
-<div class="post-headline"> <h2 id="post-headline" class="mt-2">Posts By Date</h2></div> 
 <div class="paginator ml-3">
   <ul class="pagination raised-z0">
-    <li class="page-item"><a class="page-link" href="{{navigator     | prepend: site.baseurl}}" title="Blog View">Navigator</a></li>
-    <li class="page-item"><a class="page-link" href="{{category_view | prepend: site.baseurl}}" title="View by Category">By Category</a></li>
-    <!-- li class="page-item"><a class="page-link" href="{{tag_view      | prepend: site.baseurl}}" title="View by Tag">By Tag</a></li -->
-    <li class="page-item"><a class="page-link" href="{{all_view      | prepend: site.baseurl}}" title="View All">All Posts</a></li>
+    <li class="page-item"><a class="page-link" href="{{navigator|prepend: site.baseurl}}" title="Blog View">Navigator</a></li>
+    <li class="page-item"><a class="page-link" href="{{category_view|prepend: site.baseurl}}" title="View by Category">By Category</a></li>
+    <li class="page-item"><a class="page-link" href="{{all_view|prepend: site.baseurl}}" title="View All">All Posts</a></li>
   </ul>
 </div>
 
 <div id="index" class="post-search-results col-md-10 col-sm-10 col-xs-11">
 
   <div class="view-description">{{view_description}}</div>
-
+  <div class="post-headline">
+    <h2 id="post-headline" class="mt-5">Posts by Date</h2>
+  </div>
   {% assign openList = '<ul class="list-unstyled link-news">' %}
   {% assign closeList = '</ul>' %}
 
   {% for post in site.posts %}
 
-    {% capture month %}{{ post.date | date: '%m%Y' }}{% endcapture %}
-    {% capture nmonth %}{{ post.next.date | date: '%m%Y' }}{% endcapture %}
+    {% capture month %}{{post.date|date:'%m%Y'}}{% endcapture %}
+    {% capture nmonth %}{{post.next.date|date:'%m%Y'}}{% endcapture %}
     {% capture monthHead %}
       {% if month != nmonth %}
-      {% if  forloop.index != 1  %}{{ closeList }}{%endif %}
-      <h3 id="{{ 100000 | rand }}" class="toc-link mt-5 mb-0">{% if year != nyear %}<a id="{{ post.date | date: '%Y' }}"></a>{% endif %}<a id="{{ post.date | date:  '%Y-%m'  }}"></a><a title="Back to top" href="#"><i class="fa fa-calendar mr-3"></i></a>{{ post.date | date: '%B %Y' }}</h3>
-      {{ openList }}
+      {% if  forloop.index != 1  %}{{closeList}}{%endif %}
+      <h3 id="{{100000|rand}}"
+        class="toc-link mt-5 mb-2">
+        {% if year != nyear %}
+        <a id="{{post.date|date:'%Y'}}"></a>
+        {% endif %}<a id="{{post.date|date:'%Y-%m' }}">
+        </a>
+        <a> <i class="mdi mdi-calendar-blank"></i></a>
+        {{post.date|date:'%B %Y'}}
+      </h3>
+      {{openList}}
       {% endif %}
     {% endcapture %}
 
     {% capture link %}
-      {% assign excerpt = post.excerpt | truncatewords: 50 | strip_html | strip_newlines | strip %}
+      {% assign excerpt = post.excerpt|truncatewords:50|strip_html|strip_newlines|strip %}
       <li>
-        <div class="card card-flat mb-4">        
+        <div class="card card-flat mb-4" style="background-color: #fafafa">
           <div class="card-body">
-            <!-- <span class="post-meta">{{post.date|date: "%B %d, %Y"}}</span> -->
-            <h4 id="{{ 100000 | rand }}" class="card-title">{{ post.title }}</h4>
-            <h5 class="notoc card-subtitle text-muted mb-2">{{ post.tagline }}</h5>
-            <div class="card-text"><p>{{ excerpt }}</p></div>
+            <!-- <span class="post-meta">{{post.date|date:'%B %d, %Y'}}</span> -->
+            <h4 id="{{100000|rand}}" class="card-title">{{post.title}}</h4>
+            <h5 class="notoc card-subtitle text-muted mb-2">{{post.tagline}}</h5>
+            <div class="card-text"><p>{{excerpt}}</p></div>
+            <span class="d-block text-muted text-uppercase g-font-weight-600 g-font-size-12">
+              <i class="mdi mdi-calendar-blank"></i>
+              {{post.date|date:'%Y %B, %e'}}
+            </span>
           </div>
-          <div class="card-footer">
+          <div class="card-footer" style="background-color: #fafafa">
             <!-- <a class="card-link" href="{{post.url}}#readmore" target="_blank">Read more ..</a> -->
             <a class="btn btn-primary btn-raised btn-flex" href="{{post.url}}#readmore">
-              <i class="fa fa-eye fa-lg" style="color:#FFFFFF;"></i>
-              Read more
+              <i class="mdi mdi-eye mdi-lg mr-2" style="color:#FFFFFF;"></i>
+              Read · {{post.tagline}}
             </a>
           </div>
         </div>
       </li>
     {% endcapture %}
 
-    {{ monthHead }}{{ link }}
+    {{monthHead}}{{link}}
 
   {% endfor %}
   {{closeList}}
 
 </div>
 
-<!-- [INFO   ] [j1.page.{{page.title}}                   ] [Save the current page to cookieUserState cookie: {{ browser_page_url }}] -->
+<!-- [INFO   ] [j1.page.{{page.title}}                   ] [Save the current page to cookieUserState cookie: {{browser_page_url}}] -->
 {% comment %} Update cookie for lastpage
 -------------------------------------------------------------------------------- {% endcomment %}
 <script type="text/javascript">
@@ -124,7 +137,7 @@ resource_options:
     user_state.last_page            = user_state_last_page;
 //  j1.setUserState( {last_page:user_state_last_page} );
     j1.writeCookie({
-      name: user_state_cookie_name, 
+      name: user_state_cookie_name,
       data: user_state
     });
     logger.info('Saved current Post Browser page to cookie: {{browser_page_url}}');