j1-template 2020.0.5 → 2020.0.10

data/lib/starter_web/_data/template_settings.yml

@@ -118,7 +118,7 @@ cookies:
   user_session:                         j1.user.session
   user_state:                           j1.user.state
 
-    
+
 # ==============================================================================
 # PAGE configuration settings
 #
@@ -132,14 +132,14 @@ cookies:
 #
 #   prettify
 #   ----------------------------------------------------------------------------
-#   If set to true, all generated HTML pages (by Liquid|Jekyll) get 
+#   If set to true, all generated HTML pages (by Liquid|Jekyll) get
 #   formatted "pretty" by layout "default".
 #
 #   NOTE: Used for developent mode ONLY
 #   NOTE: See ~/packages/300_template_src/_layouts/default.html
 #
 # ------------------------------------------------------------------------------
-flicker_timeout:                        250
+flicker_timeout:                        150
 
 # ------------------------------------------------------------------------------
 # HTML PrettyPrint
@@ -159,9 +159,9 @@ user:
   provider:                             j1
   provider_site_url:                    https://jekyll.one
   provider_home_url:                    https://jekyll.one
-  provider_blog_url:                    /pages/public/blog/navigator/ 
+  provider_blog_url:                    /pages/public/blog/navigator/
   provider_member_url:                  /pages/public/learn/whats_up/
-  provider_privacy_url:                 /pages/public/legal/en/privacy/                       
+  provider_privacy_url:                 /pages/public/legal/en/privacy/
   user_name:                            guest
   status:                               active
   provider_membership:                  guest
@@ -191,7 +191,7 @@ fa:
 # Body style settings
 #
 body:
-  scrollbar:                            false 
+  scrollbar:                            false
   background-color:                     md_gray_50
   font-color:                           md_gray_900
   font-size:                            1em
@@ -219,7 +219,7 @@ comments:
   enabled:                              true
   provider:                             disqus
 
-  disqus:    
+  disqus:
     short_name:                         jekyll-one
 
 # facebook:
@@ -228,7 +228,7 @@ comments:
 #   width:                              580
 #   colorscheme:                        light
 
-# custom:    
+# custom:
 #   custom_data:
 
 # ------------------------------------------------------------------------------
@@ -242,7 +242,7 @@ analytics:
   provider:                             google
   google:
     tracking_id:                        'UA-138160879-1'
-  custom:    
+  custom:
     custom_data:
 
 # ------------------------------------------------------------------------------
@@ -254,9 +254,9 @@ analytics:
 advertising:
   enabled:                              false
   provider:                             google
-  google:    
+  google:
     publisher_id:                       ca-pub-6537273267695855
-  custom:    
+  custom:
     custom_data:
 
 # ------------------------------------------------------------------------------
@@ -271,7 +271,7 @@ translation:
 
   google:
     layout:                             default
-    meta_data:                          [google-translate-customization]    
+    meta_data:                          [google-translate-customization]
     page_language:                      en
     translation_languages:              [all]
 
@@ -291,4 +291,4 @@ translation:
 
 
 # ------------------------------------------------------------------------------
-# END config
+# END config

data/lib/starter_web/package.json

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

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

@@ -1,6 +1,6 @@
 ---
-title:                                  Abouttt
-tagline:                                J1 Template
+title:                                  J1 Template
+tagline:                                about
 description:                            Things you should know about this site
 categories:                             [ pages ]
 
@@ -37,4 +37,4 @@ lorem:sentences[5]
 
 == Hall of fame
 
-lorem:sentences[5]
+lorem:sentences[5]

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

@@ -1,6 +1,6 @@
 ---
-title:                                  Become a patron
-tagline:                                help us to create premium content
+title:                                  J1 Template
+tagline:                                become a patron
 description:                            Help to create premium content
 categories:                             [ pages ]
 
@@ -16,7 +16,7 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
         - url:                          /assets/images/modules/attics/premium-1920x1280-bw.jpg
           alt:                          Photo by Anders Nord on Unsplash
@@ -29,9 +29,9 @@ resource_options:
 // Page content
 // -----------------------------------------------------------------------------
 
-_Patron_ allows fans -- the *patrons* -- to pay creators for their work. Many 
-of these creators are influencers: photographers on Instagram, comedians 
-on YouTube, podcasters that tweet, creative technicians providing useful 
+_Patron_ allows fans -- the *patrons* -- to pay creators for their work. Many
+of these creators are influencers: photographers on Instagram, comedians
+on YouTube, podcasters that tweet, creative technicians providing useful
 software, tools and tutorials.
 
 Simple like this.
@@ -40,11 +40,9 @@ Simple like this.
 == Become a Patron
 
 What does that mean? A _Patron_ support a _Creator_ for the provided content
-they love, they like to use: excellent content services -- created with passion. 
+they love, they like to use: excellent content services -- created with passion.
 
 What does a creator need to provide outstanding, useful products to the people?
 
-No surprise: time and money. What is, vice versa, quite the same. But that's not 
-all. 
-
-
+No surprise: time and money. What is, vice versa, quite the same. But that's not
+all.

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/kickstarter/web_in_a_day/100_meet_and_greet_jekyll.adoc

@@ -1,7 +1,12 @@
 ---
-title:                                  Web in a Day 
+title:                                  Web in a Day
 tagline:                                meet & greet jekyll
-description:                            Modern static website in a day
+description: >
+                                        Web in a Day is the first in a series of tutorials to
+                                        learn how to create modern websites using Jekyll. This
+                                        Kickstarter focus on the basics of Jekyll and the
+                                        J1 Template which all people needs to know for a successful
+                                        way to a modern static website using Jekyll and J1 Template
 
 tags:                                   [ Kickstarter ]
 index:                                  [ Introduction, Web, Website, Jekyll ]
@@ -15,7 +20,7 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
         - url:                          /assets/images/pages/kickstarter/web_in_a_day/get-started-1920x1280-bw.jpg
           alt:                          Photo by JESHOOTS.COM on Unsplash
@@ -26,7 +31,7 @@ resource_options:
             href:                       https://unsplash.com/@jeshoots/portfolio
 ---
 
-// Enable the Liquid Preprocessor 
+// Enable the Liquid Preprocessor
 // -----------------------------------------------------------------------------
 :page-liquid:
 

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc

@@ -105,7 +105,7 @@ Both lightboxes are fully integrated to be used as standalone modules or to be
 used as helpers _under-the-hood_ by other apps or modules focussing on image
 data like *gallery* or *carousel*, the build-in carousel module.
 
-=== Lightbox Examples
+== Lightbox Examples
 
 Find below an example of using the lightbox Lightbox *standalone*. See how
 *single* (individual) images are linked for the use with *Lightbox*.

data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc

@@ -13,8 +13,8 @@ toc:                                    true
 permalink:                              /pages/public/learn/roundtrip/present_videos/
 regenerate:                             true
 
-resources:                              [ 
-                                          light_gallery, justified_gallery, video_js, 
+resources:                              [
+                                          light_gallery, justified_gallery, video_js,
                                           vimeo_player, vimeo_player, vimeo_froogaloop
                                         ]
 resource_options:
@@ -44,7 +44,7 @@ resource_options:
 
 ---
 
-// Enable the Liquid Preprocessor 
+// Enable the Liquid Preprocessor
 // -----------------------------------------------------------------------------
 :page-liquid:
 
@@ -107,7 +107,7 @@ WARNING: *LightGallery* can be used *for free* for *private use* but for
 business use, a *commercial license* is needed. See link:{light-gallery-license}[Light Gallery license]
 how to use LightGallery for *commercial* webs and projects.
 
-=== Local video content
+== Local video content
 
 Digital image content, simple pictures or vidoes, are quite easy to make.
 Today, each and every mobile has a camera - not that bad! Presenting a bunch
@@ -127,7 +127,7 @@ HTML5 Video formats browsers support today such as *MP4*, *WebM*, and *Ogg*.
 .HTML5 video gallery
 gallery::jg_video_html5[role="mb-5"]
 
-=== Online video content
+== Online video content
 
 The Internet is full of interesting content. Video content is very popular,
 the number of channels at e.g. _YouTube_ is enormous. If you want to present
@@ -141,12 +141,11 @@ gallery::jg_video_online_youtube[role="mb-5"]
 .Vimeo Video Gallery - Fashion
 gallery::jg_video_online_vimeo[role="mb-5"]
 
-
 == Whats next
 
 Images and videos are quite *visual* - and could be impressive, for sure.
 But the most visual component is *text* for all pages, for all sites on the
-Internet. To see how text could be presented great for modern responsive 
+Internet. To see how text could be presented great for modern responsive
 websites, check the section *Typography* next.
 
 What? Find out how it works. go for: link:{roundtrip-typography}[Typography].

data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc

@@ -10,8 +10,12 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/typography/
 regenerate:                             false
 
+toc:                                    true
+
 resources:                              []
 resource_options:
+# - ssm:
+#     mode:                             menu
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -67,7 +71,7 @@ Typography matters for any media presenting text. Text will take on a important
 role of acting not only as plain text but will also serve as something like
 images.
 
-=== Responsive Text
+== Responsive Text
 
 One common flaw seen in many templates and frameworks (sadly to say: the same
 to Bootstrap) is a lack of support for truly *responsive text*. While elements
@@ -124,7 +128,7 @@ will happen in terms of responsiveness.
 To see Responsive Text `r-text` in action, use the button above to toggle on
 and off Responsive Text to see the difference!
 
-=== Scaling Responsive Text
+== Scaling Responsive Text
 
 Responsive Text comes in five different scale factors in a range from 100 to
 500. Scaling `r-text` gives you the flexibility to use `r-text` everywhere. Or
@@ -174,7 +178,7 @@ of the text in action.
 </script>
 ++++
 
-=== Scale factors
+== Scale factors
 
 As mentioned, `r-text` comes in five levels of size. The base of `r-text` are
 the Fibonacci numbers extracted from the Fibonacci series. These numbers are

data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc

@@ -67,20 +67,20 @@ J1 Template support popular icons font sets out-of-the-box:
 * link:{fontawesome-home}[FontAwesome Icons V5, {window}] (FA)
 * link:{iconify-home}[Iconify Icons, {window}] (II)
 
-The icon sets MDI and FA are very good in design and have a rich set of 
-different icons for many categories used for the Web. See below some details 
+The icon sets MDI and FA are very good in design and have a rich set of
+different icons for many categories used for the Web. See below some details
 for <<Material Design Icons>> and <<FontAwesome Icons>>.
 
-Iconify Icons is not a local stored icon set like MDI or FA. All icons are 
-loaded over the *Internet* using the so-called unified open source icon 
+Iconify Icons is not a local stored icon set like MDI or FA. All icons are
+loaded over the *Internet* using the so-called unified open source icon
 framework. See section <<Iconify Icons>> for more information.
 
 
-=== Material Design Icons
+== Material Design Icons
 
-The primary icon set for J1 Template are link:{mdi-home}[Material Design Icons, {window}], 
-because it is an rich set providing more than 3300+ icons (v3.3.92). From a design 
-prospective, _MDI_ has an excellent Material Design support an comes with the 
+The primary icon set for J1 Template are link:{mdi-home}[Material Design Icons, {window}],
+because it is an rich set providing more than 3300+ icons (v3.3.92). From a design
+prospective, _MDI_ has an excellent Material Design support an comes with the
 original icon set created by _Google_ build-in.
 
 _Material Design Icons_ (MDI) is a very helpful design resource for Web Design
@@ -187,7 +187,7 @@ mdi:heart[5x md-red-900 mdi-pulsed]
 
 |===============================================================================
 
-NOTE: Using Material Design Icons with Asciidoc is quite easy as an inline macro 
+NOTE: Using Material Design Icons with Asciidoc is quite easy as an inline macro
 `mdi:` is avaialble to place icons where ever you want. See more about
 this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
@@ -204,14 +204,12 @@ J1 implemetation regarding sizes, colors, animations etc. Go for the
 link:{previewer-mdi}[Preview Page, {window}] and check-out what's
 possible using MDI font icons!
 
+== FontAwesome Icons
 
-
-=== FontAwesome Icons
-
-FontAwesome is a font and icon toolkit based on CSS. It was originally created 
-by Dave Gandy. The previous version 4 was mainly for the use with Twitter 
-Bootstrap V3. The new version V5, released in December 2017, is focussing all 
-frameworks used for web development. Today, FA comes with 2300+ icons included. 
+FontAwesome is a font and icon toolkit based on CSS. It was originally created
+by Dave Gandy. The previous version 4 was mainly for the use with Twitter
+Bootstrap V3. The new version V5, released in December 2017, is focussing all
+frameworks used for web development. Today, FA comes with 2300+ icons included.
 
 
 [NOTE]
@@ -323,7 +321,7 @@ fas:heart[5x md-red-900 fa-pulsed]
 
 |===============================================================================
 
-NOTE: Using FontAwesome with Asciidoc is quite easy as two inline macros 
+NOTE: Using FontAwesome with Asciidoc is quite easy as two inline macros
 `fas:` and `fas:` are avaialble to place icons where ever you want. See more about
 this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
@@ -335,7 +333,7 @@ license only. For the *Free* version, a subset of 900+ icons is available.
 NOTE: The CSS styles for FontAwesome V5 has been extended for J1 Template to
 the *same* styles (and their respective *names*) as for other Font Icon sets.
 Already existing styles like `fa-flip-vertical` is available as `fa-flip-v`
-as well. See all styles that can be used with the MDI 
+as well. See all styles that can be used with the MDI
 link:{previewer-mdi}[Preview Page, {window}].
 
 You can checkout what icons available at link:{fontawesome-icons}[FontAwesome Icons,
@@ -348,18 +346,18 @@ link:{fontawesome-get-started}[Get started, {window}] pages to learn
 the basics and features and styles.
 
 
-=== Iconify Icons
+== Iconify Icons
 
 MDI and FA are quite rich icon sets but designed for *general* use. Sometimes
 icons are missing in one of these fonts like specific *brand* or *theme*
 icons.
 
-An interesting solution for using font icons from a *remote* repository is 
-link:{iconify-home}[Iconify, {window}]. Iconify is a so-called unified 
-*open source icon framework* that makes it possible to use icons from different 
+An interesting solution for using font icons from a *remote* repository is
+link:{iconify-home}[Iconify, {window}]. Iconify is a so-called unified
+*open source icon framework* that makes it possible to use icons from different
 icon sets using one syntax.
 
-To access that framework, a Javascript client is needed. For J1 Template, the 
+To access that framework, a Javascript client is needed. For J1 Template, the
 client is available with the JS assets (/assets/themes/j1/extensions/iconify)
 and is loaded per default. To see what icon sets available with that framework,
 check the page link:{iconify-icon-sets}[Iconify Icon Sets, {window}].
@@ -417,7 +415,7 @@ iconify:medical-icon:i-ear-nose-throat[5x]
 
 |===============================================================================
 
-NOTE: Using Iconify icons with Asciidoc is quite easy as an inline macro 
+NOTE: Using Iconify icons with Asciidoc is quite easy as an inline macro
 `iconify:` is avaialble to place icons where ever you want. See more about
 this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]