j1-template 2020.0.7 → 2020.0.12

data/lib/starter_web/package.json

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

data/lib/starter_web/pages/public/clear_button.adoc

@@ -0,0 +1,121 @@
+---
+title:                                  Bootstrap Addons
+tagline:                                clear button
+description:                            clear button
+
+tags:                                   [ Page, Bootstrap ]
+index:                                  [ Bootstrap, Addon, Clear, Button ]
+categories:                             [ pages ]
+
+permalink:                              /pages/public/clear_button/
+regenerate:                             true
+
+resources:                              []
+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
+// -----------------------------------------------------------------------------
+
+++++
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<div class="container">
+  <div class="row mt-4">
+    <div class="col">
+      <div class="jumbotron">
+
+        <h1>Clear button for input fields (forms) for Bootstrap 4 - Advanced Components</h1>
+        <p class="lead">by djibe.</p>
+        <span class="text-muted">(thx to BS4 + Daemonite Material Design)</span>
+        <p>
+          Plugin for BS4 to add a clear button to any input with standard BS4 tags and material design.<br> Start typing to see the effect.
+        </p>
+        <ol>
+          <li>
+            Just add the BS4 .position-relative class to the form-group
+          </li>
+          <li>
+            Add the .form-clear span right before the closing div tag of the .form-group<br> If you don't want to use material icons, you can just replace the i tag by a simple x letter
+          </li>
+        </ol>
+        <p>
+          TODO: integrate with floating-label component of Daemonite material design for BS4
+        </p>
+        <div class="form-group position-relative">
+          <label for="example-mail">Email address</label>
+          <input type="email" class="form-control" id="example-mail" placeholder="Enter email">
+          <span class="form-clear d-none"><i class="mdi mdi-format-clear"></i></span>
+        </div>
+        <div class="form-group position-relative">
+          <label for="example-input-text">Your name</label>
+          <input type="text" class="form-control" id="example-input-text" placeholder="Enter your name">
+          <small class="form-text text-muted">Example with a helper text.</small>
+          <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<style>
+/* input:-webkit-autofill {
+    -webkit-box-shadow:0 0 0 50px black inset; /* Change the color to your own background color */
+    -webkit-text-fill-color: white;
+}
+*/
+
+input:-internal-autofill-selected {
+  background-color: #bdbdbd !important;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active  {
+  border-top-left-radius: 5px !important;
+  border-bottom-left-radius: 5px !important;
+  border-top-right-radius: 5px !important;
+  border-bottom-right-radius: 5px !important;
+}
+</style>
+
+
+
+
+++++

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;