j1-template 2020.0.2 → 2020.0.7

data/lib/starter_web/_plugins/uglify.rb

@@ -0,0 +1,41 @@
+# ------------------------------------------------------------------------------
+# ~/_plugins/uglify.rb
+# Liquid filter for J1 Template to uglify JS
+#
+# Product/Info:
+# http://jekyll.one
+#
+# Copyright (C) 2020 Juergen Adams
+#
+# J1 Template is licensed under the MIT License.
+# See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+# ------------------------------------------------------------------------------
+# => Uglifier.compile(File.read(input))
+# ------------------------------------------------------------------------------
+#
+#  NOTE:
+#  CustomFilters cannot be used in SAFE mode (e.g not usable for
+#  rendering pages with Jekyll on GitHub
+#
+#  USAGE:
+#    {% capture cache_name %}
+#
+#      liquid code to generate HTML output goes here
+#
+#    {% endcapture %}
+#    {{ cache_name | uglify }}
+#
+# ------------------------------------------------------------------------------
+require 'uglifier'
+
+module Jekyll
+  module UglifyJS
+    def uglify(input)
+      site_config = @context.scopes[0]["site_config"]
+      path = @context.registers[:page]["url"]
+      Uglifier.compile(File.read("X:/j1/github/j1-template/packages/400_template_site/_site/assets/themes/j1/adapter/js/toccer.js"))
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::UglifyJS)

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1_starter",
-  "version": "2020.0.2",
+  "version": "2020.0.7",
   "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/learn/floating_sidebar.adoc

@@ -0,0 +1,199 @@
+---
+title:                                  Floating SideBar
+tagline:                                where to go
+description:                            Where to go
+
+tags:                                   [ Page, Roundtrip ]
+index:                                  [ Start, Template, Whats, Up, Readme, TL;DR ]
+categories:                             [ pages ]
+
+permalink:                              /pages/public/learn/fsb/
+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
+// -----------------------------------------------------------------------------
+: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
+// -----------------------------------------------------------------------------
+
+++++
+<div class="sidebar">
+  <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
+      scrolls up and down the page.
+    </p>
+  </div>
+</div>
+++++
+
+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.
+
+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
+
+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.
+
+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.
+
+You're welcome!
+
+If you like, continue by walking through the roundtrip examples
+link:/pages/public/learn/roundtrip/present_images/[by starting the tour here].
+
+++++
+<style>
+
+  .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;
+  }
+
+  .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 main_content      = $('.js-toc-content');
+        var m                 = $(main_content).offset().top;
+        var topPosition       = $('.floating-div').offset().top - 10;
+        var floatingDivHeight = $('.floating-div').outerHeight();
+        var footer            = $('#j1_footer');
+        var footerFromTop     = $('#j1_footer').offset().top;
+        var absPosition       = footerFromTop - floatingDivHeight - 20;
+        var win               = $(window);
+        var floatingDiv       = $('.floating-div');
+
+        win.scroll(function() {
+          if (window.matchMedia('(min-width: 768px)').matches) {
+            if ((win.scrollTop() > topPosition) && (win.scrollTop() < absPosition)) {
+              floatingDiv.addClass('sticky');
+              floatingDiv.removeClass('abs');
+
+            } else if ((win.scrollTop() > topPosition) && (win.scrollTop() > absPosition)) {
+              floatingDiv.removeClass('sticky');
+              floatingDiv.addClass('abs');
+
+            } else {
+              floatingDiv.removeClass('sticky');
+              floatingDiv.removeClass('abs');
+            }
+          }
+        });
+        clearInterval(dependencies_met_core);
+      }
+    }, 25);
+  });
+</script>
+++++

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

@@ -1,5 +1,5 @@
 ---
-title:                                  Roundtripppp
+title:                                  Roundtrip
 tagline:                                present images
 description:                            J1 Template Roundtrip - Present image based data
 
@@ -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*.
@@ -276,7 +276,7 @@ and high quality *justified* image galleries. J1 Template combines the gallery
 with the *lightboxes* supported to *enlage* the images of a gallery.
 
 See *Justified Gallery* in action - and for sure all what you see is even
-responsive. Change the size of your current browser window, by width or height, 
+responsive. Change the size of your current browser window, by width or height,
 to see what will happen!
 
 === Justified Gallery

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

@@ -63,11 +63,11 @@ include::{includedir}/attributes.asciidoc[tag=data]
 == Typography
 
 Typography serves as one the most crucial branding elements for any business.
-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 
+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 +124,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 +174,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]