j1-template 2020.0.9 → 2020.0.14

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

@@ -1,8 +1,10 @@
 ---
 layout:                                 page
 
-title:                                  Tags
+title:                                  Creators Blog
 tagline:                                blog posts by tag
+description:                            Browse articles by tag
+
 #permalink:                             /pages/private/blog/navigator/archive/tagview/
 
 skip_words:                             [ posts ]
@@ -14,7 +16,7 @@ resource_options:
   - attic:
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/library-1920x1280-bw.jpg
+        - url:                          /assets/images/modules/attics/library-1920x1280-bw.webp
           alt:                          library-1920x1280-bw
 ---
 
@@ -35,9 +37,9 @@ 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 %}
 
 {% comment %} jadams: skip_words needs to be configured by yaml data file
@@ -48,7 +50,7 @@ resource_options:
 {% assign letter_group_counter  = 0 %}
 {% assign letter_group_written  = false %}
 
-{% include {{get_page_path}} mode='absolute' %} 
+{% include {{get_page_path}} mode='absolute' %}
 {% assign navigator_path = page_path | remove_first:'archive' %}
 
 {% capture navigator %}{{navigator_path}}{% endcapture %}
@@ -61,18 +63,18 @@ resource_options:
 {% comment %} TODO: skip_words should configured by yaml data file?
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign tags = site.tags | sort %}
-{% capture site_tag_word_list %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
+{% capture site_tag_word_list %}{% for tag in site.tags %}{{tag | first}}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
 {% assign tags = site_tag_word_list | split:',' %}
 
 {% for tag in tags %}
   {% if page.skip_words contains tag %} {% continue %} {% endif %}
-  {% capture tag_list %}{{ tag_list | append: tag }}{% unless forloop.last %},{% endunless %}{% endcapture %} 
+  {% capture tag_list %}{{tag_list | append: tag}}{% unless forloop.last %},{% endunless %}{% endcapture %}
 {% endfor %}
 
 
-{% comment %} Main 
--------------------------------------------------------------------------------- {% endcomment %}  
-<!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] --> 
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+<!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
 {% include {{create_word_cloud}} word_list=tag_list source="tags" %}
 
 <div class="paginator ml-3">
@@ -90,7 +92,7 @@ resource_options:
   {% assign letter_group = letter_group_array[letter_group_counter] %}
 
   {% for item in (0..site.tags.size) %}{% unless forloop.last %}
-    {% capture this_word %}{{ word_array[item] | strip_newlines }}{% endcapture %}
+    {% capture this_word %}{{word_array[item] | strip_newlines}}{% endcapture %}
 
     {% for skip_word in skip_word_array %}
       {% if skip_word contains this_word %} {% assign skip = true %} {% else %} {% assign skip = false %} {% endif %}
@@ -107,7 +109,7 @@ resource_options:
       --------------------------------------------------------------------------
       <!-- jadams, 2018-01-17: logic seems NOT work. Disabled. -->
       {% if letter_group_written == false %}
-        <h3 id="id_{{letter_group}}" class="toc-link mt-5 mb-5"><a title="Back to top" href="#"><i class="fa fa-tags mr-2"></i></a>{{ letter_group | upcase }}</h3>
+        <h3 id="id_{{letter_group}}" class="toc-link mt-5 mb-5"><a title="Back to top" href="#"><i class="fa fa-tags mr-2"></i></a>{{letter_group | upcase}}</h3>
         {% assign letter_group_written = true %}
       {% endif %}
       -------------------------------------------------------------------------- {% endcomment %}
@@ -115,26 +117,26 @@ resource_options:
       {% assign letter_group_counter = letter_group_counter | plus:1 %}
       {% assign letter_group = letter_group_array[letter_group_counter] %}
 
-      {% comment %} jadams, 2018-01-17: logic seems NOT work. 
-                    Added workaround by checking if letter_group has a value 
+      {% comment %} jadams, 2018-01-17: logic seems NOT work.
+                    Added workaround by checking if letter_group has a value
       -------------------------------------------------------------------------- {% endcomment %}
       {% if letter_group %}
       <h3 id="id_{{letter_group}}" class="toc-link mb-3">
         <a title="Back to top" href="#">
           <i class="fa fa-tags mr-2"></i>
-        </a>{{ letter_group | upcase }}
+        </a>{{letter_group | upcase}}
       </h3>
       {% endif %}
       {% assign letter_group_written = true %}
     {% endif %}
 
     {% comment %}
-    letter_group: {{ letter_group | debug }}
-    this_word: {{ this_word | debug }}
-    first_letter: {{ first_letter | debug }}
+    letter_group: {{letter_group | debug}}
+    this_word: {{this_word | debug}}
+    first_letter: {{first_letter | debug}}
     {% endcomment %}
 
-    <h4 id="{{this_word | replace: '+','_' | replace: ' ','_' | downcase }}" class="toc-link"><a title="Back to top" href="#"><i class="fa fa-tag mr-2"></i></a>{{ this_word }}</h4>
+    <h4 id="{{this_word | replace: '+','_' | replace: ' ','_' | downcase}}" class="toc-link"><a title="Back to top" href="#"><i class="fa fa-tag mr-2"></i></a>{{this_word}}</h4>
 
     {% for post in site.tags[this_word] %}{% if post.title != null %}
       {% include {{get_category}} post=post %}
@@ -147,18 +149,17 @@ resource_options:
       {% assign excerpt = post.excerpt | truncatewords: 50 | strip_html | strip_newlines | strip %}
 
       <!-- place post  -->
-      <div class="card card-flat mb-4">        
+      <div class="card card-flat mb-4">
         <div class="card-body">
           <!-- <span class="post-meta">{{post.date|date: "%B %d, %Y"}}</span> -->
-          <h5 id="{{ 100000 | rand }}" class="card-title">{{ post.title }}</h5>
-          <h6 class="notoc card-subtitle text-muted mb-2">{{ post.tagline }}</h6>
-          <div class="card-text"><p>{{ excerpt }}</p></div>
+          <h5 id="{{100000 | rand}}" class="card-title">{{post.title}}</h5>
+          <h6 class="notoc card-subtitle text-muted mb-2">{{post.tagline}}</h6>
+          <div class="card-text"><p>{{excerpt}}</p></div>
         </div>
         <div class="card-footer">
-          <!-- <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>
@@ -166,7 +167,7 @@ resource_options:
   {% endunless %}{% 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}}] -->
 <script type="text/javascript">
   function setLastPage() {
     var logger = log4javascript.getLogger('j1.BlogNavigator');
@@ -177,11 +178,10 @@ 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}}');
   }
   window.onload = setLastPage();
 </script>
-

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

@@ -3,7 +3,7 @@ layout:                                 blog_archive
 
 title:                                  Creators Blog
 tagline:                                explore posts
-description:                            Page Generator
+description:                            Navigate  all articles
 
 tags:                                   [ Blog, Creator ]
 resources:                              []
@@ -21,9 +21,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:

data/lib/starter_web/pages/public/learn/examples/floating_ad.adoc

@@ -0,0 +1,221 @@
+---
+title:                                  CSS Examples
+tagline:                                floating ads
+description:                            floating ads
+
+tags:                                   [ Page, Roundtrip ]
+index:                                  [ Start, Template, Whats, Up, Readme, TL;DR ]
+categories:                             [ pages ]
+
+toc:                                    true
+advertising:                            true
+
+permalink:                              /pages/public/learn/fad/
+regenerate:                             false
+
+resources:                              [ lightbox ]
+resource_options:
+---
+
+// Enable the Liquid Preprocessor
+// -----------------------------------------------------------------------------
+:page-liquid:
+
+
+// Set other global page attributes here
+// -----------------------------------------------------------------------------
+//:my-asciidoc-attribute:
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+
+// Initialize entry document environmental attributes
+// -----------------------------------------------------------------------------
+{% include {{set_env_entry_document}} %}
+
+// Load tag, url and data attributes
+// -----------------------------------------------------------------------------
+// include::{includedir}/attributes.asciidoc[tag=tags]
+// include::{includedir}/attributes.asciidoc[tag=urls]
+// include::{includedir}/attributes.asciidoc[tag=data]
+
+// Set local page attributes
+// -----------------------------------------------------------------------------
+// :images-dir:                         {imagesdir}/path/to/page/images
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+
+Welcome to the pages of J1 Template. If your here first time,
+hopefully you get on that page first. For sure, there is no better
+place to step in.
+
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
+a home. And we have really a bunch of them.
+
+== Orientation
+
+To get better orientated, the site is organized for *natural reading*. As we
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
+and pages.
+
+Welcome to the pages of J1 Template. If your here first time,
+hopefully you get on that page first. For sure, there is no better
+place to step in.
+
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
+a home. And we have really a bunch of them.
+
+To get better orientated, the site is organized for *natural reading*. As we
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
+and pages.
+Welcome to the pages of J1 Template. If your here first time,
+hopefully you get on that page first. For sure, there is no better
+place to step in.
+
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
+a home. And we have really a bunch of them.
+
+To get better orientated, the site is organized for *natural reading*. As we
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
+and pages.
+
+
+++++
+<style>
+
+  .advertising {
+    display: none;
+  }
+
+  .adblock {
+  }
+
+  .adblock-fixed {
+    position: fixed;
+  }
+
+/* .sidebar {
+    width:33.33%;
+    float:left;
+    padding: 0 10px;
+} */
+
+/*
+  .floating-div {
+    background-color: #333;
+    padding: 10px 50px;
+    color:#EEE;
+    font-size: 20px;
+    margin-top:10px;
+    position: absolute;
+    right: -40px;
+  }
+*/
+  .floating-div {
+      background-color: #333;
+      /* padding: 10px 50px; */
+      color: #EEE;
+      font-size: 20px;
+      /* margin-top: 10px; */
+      /* position: absolute; */
+      /* right: -40px; */
+  }
+
+  .sticky {
+    position: fixed;
+    top: 150px;
+    right:-40px;
+    margin: 0;
+    width:calc(33.33% - 25px);
+  }
+
+  .abs {
+    position: absolute;
+    bottom: 10px;
+    right:10px;
+    width:calc(33.33% - 20px);
+  }
+</style>
+
+<script>
+  $(document).ready(function() {
+    var dependencies_met_core = setInterval(function() {
+      if (j1.getState() == 'finished') {
+        // variables
+        var logger = log4javascript.getLogger('fad.scrollSpy');
+
+        var $window             = $(window);
+        var $navbar             = $('nav.navbar');
+        var $attic              = $('.attic');
+        var $main_content       = $('.js-toc-content');
+        var $adblock            = $('#adblock');
+        var $footer             = $('#j1_footer');
+
+        var pageHeight          = $window.height();
+        var pageHeightOuter     = $window.outerHeight();
+
+        var atticHeight         = $attic.height();
+        var atticHeightOuter    = $attic.outerHeight()
+        var navbarHeight        = $navbar.height();
+        var navbarHeightOuter   = $navbar.outerHeight()
+
+        var footerHeight        = $footer.height();
+        var footerHeightOuter   = $footer.outerHeight();
+        var footerFromTop       = $footer.offset().top;
+
+        var adFromTop           = $adblock.offset().top;
+        var adblockHeight       = $adblock.height();
+        var adblockHeightOuter  = $adblock.outerHeight();
+
+        var a                   = $adblock.offset().top;
+        var m                   = $main_content.offset().top;
+        var h                   = $attic.length ? $attic.height() : 0;
+        var n                   = $navbar.length ? $navbar.height() : 0;
+
+        var fixPosition         = navbarHeight;
+        var absPosition         = fixPosition - 10;
+
+        $window.scroll(function() {
+          var scrollPos = $(document).scrollTop();
+
+          logger.info('document scroll pos detected as: ' + scrollPos + 'px');
+
+          if ($window.scrollTop() > fixPosition) {
+            $adblock.show();
+            $adblock.addClass('adblock-fixed');
+//          $adblock.css('top', 80);
+            $adblock.css('top', fixPosition);
+          } else if ($window.scrollTop() < absPosition) {
+            $adblock.removeClass('adblock-fixed');
+            $adblock.removeAttr('style');
+            $adblock.hide();
+          } else {
+            $adblock.removeClass('adblock-fixed');
+            $adblock.removeAttr('style');
+            $adblock.hide();
+          }
+        });
+        clearInterval(dependencies_met_core);
+      }
+    }, 25);
+  });
+</script>
+++++

data/lib/starter_web/pages/public/learn/{floating_sidebar.adoc → examples/floating_div.adoc}

@@ -1,7 +1,7 @@
 ---
-title:                                  Floating SideBar
-tagline:                                where to go
-description:                            Where to go
+title:                                  CSS Examples
+tagline:                                floating div
+description:                            floating div
 
 tags:                                   [ Page, Roundtrip ]
 index:                                  [ Start, Template, Whats, Up, Readme, TL;DR ]
@@ -12,17 +12,6 @@ regenerate:                             false
 
 resources:                              [ lightbox ]
 resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/modules/attics/runner-1920x1200-bw.jpg
-          alt:                          Photo by Alexander Redl on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Alexander Redl
-            href:                       https://unsplash.com/@alexanderredl
 ---
 
 // Enable the Liquid Preprocessor
@@ -53,7 +42,6 @@ resource_options:
 // -----------------------------------------------------------------------------
 // :images-dir:                         {imagesdir}/path/to/page/images
 
-
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
@@ -61,7 +49,21 @@ resource_options:
 // -----------------------------------------------------------------------------
 
 ++++
-<div class="sidebar">
+    <div id="adblock" class="row no-gutters adblock">
+      <div class="doc-example mb-3">
+        <button type="button" class="btn btn-primary btn-raised">Primary</button>
+        <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
+        <button type="button" class="btn btn-success btn-raised">Success</button>
+        <button type="button" class="btn btn-info btn-raised">Info</button>
+        <button type="button" class="btn btn-warning btn-raised">Warning</button>
+        <button type="button" class="btn btn-danger btn-raised">Danger</button>
+        <button type="button" class="btn btn-link btn-raised">Link</button>
+      </div>
+    </div>
+++++
+
+++++
+<div class="">
   <div class="floating-div">
     <p>This "floating div" could be a form, a call to action, an ad,
       or whatever other content you want to float in sidebar as the user
@@ -86,54 +88,52 @@ use the English language for our international vistors (we are German),
 right (LTR), and from top to down a page. The same to all menus, sections
 and pages.
 
-To read the site it is recommended to go for LTR. Other languages, other
-countries and cultures go for RTL, but currently we've *no* support for RTL
-implemented.
-
-For that reason, it was a good decision to start from here.
-
-== Whats up
-
-First of all, you've started already! The important first step in to find
-your way to Jekyll is done. Congratiulations.
-
-The *Learn* section contains all you need to learn what Jekyll and J1 can do
-for your website. For your new static web - if you like.
-
-With this section you'll find a:
-
-. *Roundtrip* to show some of the main features of the template system
-  *J1*.
-
-. *Kickstarter* are Tutorials. The most important one to start is *Web in a Day*.
-  This tutorial guides you through all the steps to build a website using
-  the template system Jekyll One - your site using Jekyll and the template J1.
-
-== Where to go
+Welcome to the pages of J1 Template. If your here first time,
+hopefully you get on that page first. For sure, there is no better
+place to step in.
 
-You should go for the *Roundtrip* first. See what you will get. As an overview
-of some of the main features of *J1*. The roundtrip is a *visual* tour. No
-technical stuff, nothing academic.
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
+a home. And we have really a bunch of them.
 
-Let's go more deeper and make things real - and your hands dirty. We
-recomment to work on the Kickstarter *Web in a Day*. A nice one-day journey
-diving into the world of Jekyll. You'll learn a lot and at the end of that day
-you know what Jekyll, static webs and the template system J1 is all about.
+To get better orientated, the site is organized for *natural reading*. As we
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
+and pages.
+Welcome to the pages of J1 Template. If your here first time,
+hopefully you get on that page first. For sure, there is no better
+place to step in.
 
-You're welcome!
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
+a home. And we have really a bunch of them.
 
-If you like, continue by walking through the roundtrip examples
-link:/pages/public/learn/roundtrip/present_images/[by starting the tour here].
+To get better orientated, the site is organized for *natural reading*. As we
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
+and pages.
 
 ++++
 <style>
 
+  .adblock {
+  }
+
+  .adblock-fixed {
+    position: fixed;
+  }
+
   .sidebar {
     width:33.33%;
     float:left;
     padding: 0 10px;
   }
 
+/*
   .floating-div {
     background-color: #333;
     padding: 10px 50px;
@@ -143,6 +143,16 @@ link:/pages/public/learn/roundtrip/present_images/[by starting the tour here].
     position: absolute;
     right: -40px;
   }
+*/
+  .floating-div {
+      background-color: #333;
+      /* padding: 10px 50px; */
+      color: #EEE;
+      font-size: 20px;
+      /* margin-top: 10px; */
+      /* position: absolute; */
+      /* right: -40px; */
+  }
 
   .sticky {
     position: fixed;