j1-template 2021.0.6 → 2021.0.7

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/documents/100_meet_and_greet_jekyll.asciidoc

@@ -1,31 +0,0 @@
-
-*Web in a Day* is the first in a series of tutorials to learn how to
-create modern websites using Jekyll. This Kickstarter focuses 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.
-
-It is highly recommended to read and work on this tutorial by everyone -
-independently from what level of knowledge they begin. Jekyll is from classic
-Content Management Systems (CMS) like Joomla, WordPress or Drupal.
-No surprise: Jekyll and J1 are different as well.
-
-It sounds much, spending a whole day to get Jekyll to know - yes, it is much.
-You'll find a lot of Blog articles like *Jekyll in 15 minutes*. But what can
-be *learned* in 15 minutes?
-
-To be fair, most of these blogs are intended to help *installing Jekyll* and
-get the very first steps managed out of the box. If you run Jekyll out of the
-box, the resulting website (from the build-in theme scaffold) might somewhat
-frustrating. You'll get an elementary site created based on Jekyll's theme
-*minima*.
-
-To not waste time, get through the tutorial and find out what is the
-*Jekyll Way*. And if this the way you want to go.
-
-Have a good time, a good day learning Jekyll.
-
-
-== Meet and greet Jekyll
-
-lorem:sentences[5] +
-lorem:sentences[3] +

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/documents/200_preparations.asciidoc

@@ -1,14 +0,0 @@
-lorem:sentences[5]
-
-To not waste time, get through the turorial and find out what is the *Jekyll Way*.
-And if this the way you want to go.
-
-Have a good time, a good day learning Jekyll.
-
-== Preparations
-
-lorem:sentences[5] +
-lorem:sentences[3] +
-
-
-

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/documents/300_first_awesome_web.asciidoc

@@ -1,11 +0,0 @@
-lorem:sentences[5]
-
-To not waste time, get through the turorial and find out what is the *Jekyll Way*.
-And if this the way you want to go.
-
-Have a good time, a good day learning Jekyll.
-
-== First awesome website
-
-lorem:sentences[5] +
-lorem:sentences[3] +

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/parts.asciidoc

@@ -1,193 +0,0 @@
-// ~/document_base_folder/000_includes
-//  Asciidoc part includes:                 parts.asciidoc
-// -----------------------------------------------------------------------------
-
-
-// Summarize
-// -----------------------------------------------------------------------------
-//  tag::summarize[]
-//
-A lot you've learned, time to summarize what is in behind. The last chapter 
-*Summarize!* should help on that. Summarize! offer some handy sections to
-remember what was presented this chapter, giving an outlook what could be
-done next, an overview on all chapters this tutorial and finally useful
-links to read more.
-
-See all *sections* below: +
-mdi:backup-restore[24px, md-grey ml-3]
-<<Recap>> -- What has been done, what's *explored in current section* +
-mdi:skip-next[24px, md-grey ml-3]
-<<Whats Next>> -- Find to go further, what's *planned next* +
-mdi:format-section[24px, md-grey ml-3]
-<<All Chapters>> -- The full chain, *all chapters* +
-// mdi:book-open[24px, md-grey ml-3]
-// <<Further Reading>> -- List of helpful links to *get more* +
-
-//
-//  end::summarize[]
-
-// End Summarize ---------------------------------------------------------------
-
-
-// Recap
-// -----------------------------------------------------------------------------
-//  tag::recap_100_meet_and_greet_jekyll[]
-//
-To manage controlled page access, a web is transformed into an application.
-Additional software is needed for that: the J1 *AuthManager*. Build on the 
-_Ruby_ software framework _Rack_.
-
-A middleware system based on Rack is not a *monolithic* block. It is a *stack*
-of *multiple* middleware components -- what the name *Rack* implies. What is 
-called *Middlewares* is the next great magic: _Ruby_ libraries (Gem)
-managing a *specific* job as *service* in such a *chain*.
-
-For now folks, keep in mind a *Jekyll Site* can be transformed into an 
-*Web Application* as a additional *mode* using *Rack*. Rack provides the 
-*magic* in the middle to add additional dynamic processes provided by
-J1 AuthManager: *Services*.
-//
-//  end::recap_100_meet_and_greet_jekyll[]
-
-//  tag::recap_200_preparations[]
-//
-Running a web as an app is not that hard, isn't it? The magic is under the 
-hood - the middlewares used by J1 AuthManager.
-
-lorem:sentences[5] +
-lorem:sentences[3] +
-
-Find here is a list of the basic Chocolatey commands used this section. 
-And some more related ones. If you'd like to explore the Chocolatey CLI a bit 
-*more*, give it a try before moving on.
-
-[cols="8a,4", options="header", role="rtable, full-width"]
-|===============================================================================
-|Command |Description
-
-|
-[source, bash]
-----
-docker build -t first-app .
-----
-|Create the `image` *friendlyname* using this directory's Dockerfile
-
-|
-[source, bash]
-----
-docker run -p 4000:80 first-app
-----
-|Run `container` *friendlyname* with a mapping of port 4000 to 80
-
-|
-[source, bash]
-----
-docker run -d -p 4000:80 first-app
-----
-|Run container *friendlyname* with mapping, but in `detached mode`
-
-|===============================================================================
-//
-//  end::recap_200_preparations[]
-
-//  tag::recap_300_first_awesome_web[]
-//
-OAuth2 is an authentication framework, a protocol suite that enables 
-applications to obtain (limited) access to user account data hosted at 
-service providers.
-
-The protocol suite introduces four roles, discussed in section <<OAuth Roles>>,
-that interacts each other in a sequence, a *flow*. In section <<Base OAuth Flow>>
-the sequence was discussed in more detail.
-
-// ifdef::backend-html5[]
-// .High Level OAuth Protocol Flow
-// lightbox::oauth-abstract-protocol-flow[ 800, {data-oauth-abstract-protocol-flow} ]
-// endif::[]
-
-Keep in mind the *roles* and the fact, the OAuth framework introduce a sequence,
-a *flow*. All this is theory - yes for sure, but good to know.
-//
-//  end::recap_300_first_awesome_web[]
-
-// End Recap -------------------------------------------------------------------
-
-
-// Whats Next
-// -----------------------------------------------------------------------------
-//  tag::whats_next_100_meet_and_greet_jekyll[]
-//
-Well done, folks. You learned all the basics, started an transformed web as
-an app. And you've seen what is basicly going on under the hood. Now, you're
-well prepared for going further, to have a more inside view.
-
-For the next, a bit more knowledge, some theory is needed what *service providers*
-are and how *authentication* works. You need to know what is *OAuth*, what
-is *authentication* using the OAuth *framework*.
-
-Welcome to the world of *OAuth2*, a leading technology for authentication, 
-for creating relationships (associations) across different providers for
-your new amazing site, for your new project.
-
-mdi:skip-next[24px, md-grey]
-Go for link:{j1-web-in-a-day-preparations}[Preparations] then!
-//
-//  end::whats_next_100_meet_and_greet_jekyll[]
-
-//  tag::whats_next_200_preparations[]
-//
-After some practise and theory, you got a picture of what the OAuth 
-framework is, a base understanding about the flow - what will happen. Now 
-it's the time to see in real world what was discsused sofar.
-
-The following chapter is focussing a web that is *protected*. The app is not
-longer passing all the content pages. The content will be under *control*.
-
-// mdi:skip-next[24px, md-grey] 
-// To make protected *J1 Webs* real, continue on link:{j1-web-apps-run-an-secured-app}[Run an Secured J1 App]
-// then!
-
-//
-//  end::whats_next_200_preparations[]
-
-//  tag::whats_next_300_first_awesome_web[]
-//
-After some practise and theory, you got a picture of what the OAuth 
-framework is, a base understanding about the flow - what will happen. Now 
-it's the time to see in real world what was discsused sofar.
-
-The following chapter is focussing a web that is *protected*. The app is not
-longer passing all the content pages. The content will be under *control*.
-
-// mdi:skip-next[24px, md-grey] 
-// To make protected *J1 Webs* real, continue on link:{j1-web-apps-run-an-secured-app}[Run an Secured J1 App]
-// then!
-
-//
-//  end::whats_next_300_first_awesome_web[]
-
-// End Whats Next --------------------------------------------------------------
-
-
-// Chapters
-// -----------------------------------------------------------------------------
-//  tag::chapters[]
-//
-Find here an overview on *all* chapters this tutorial. +
-//
-//  end::chapters[]
-
-//  tag::chapters_100_meet_and_greet_jekyll[]
-//
-mdi:format-section[24px, md-grey ml-3]
-link:#[You are here -- Meet & Greet Jekyll] +
-mdi:format-section[24px, md-indigo ml-3]
-link:{j1-web-in-a-day-preparations}[Preparations] +
-mdi:format-section[24px, md-indigo ml-3]
-link:{j1-web-in-a-day-first-awesome-web}[A first awesome Web]
-//
-//  end::chapters_100_meet_and_greet_jekyll[]
-
-
-// End Chapters ----------------------------------------------------------------
-

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/tables/debug_variables.asciidoc

@@ -1,47 +0,0 @@
-ifeval::["{debug}" == "true"]
-.Liquid variables
-[cols="2,4,6a, options="header", role="table-responsive, full-width"]
-|===============================================================================
-|name |value |description
-
-|`page.path`
-|{{ page.path }}
-|The path to the raw post or page. Example usage: Linking back to the page
-or post's source on GitHub. This can be overridden in the `YAML Front Matter`.
-
-|`site.collections_dir`
-|{{ site.collections_dir }}
-|lorem:sentences[1]
-
-|`page.images.dir`
-|{{ page.images.dir }}
-|Image path set pagewise. See FRONTMATTER defaults in `_config.yml` for the
-images path specified by: `images.dir` for specific page *type*. See the
-example below for a page of type *pages*.
-[source, yaml]
-----
-defaults:
-  - scope:
-      path:          pages
-      type:          pages
-
-    values:
-      images:
-        dir:        /assets/images/pages
-----
-
-|`page-imagesdir`
-|{{ page-imagesdir }}
-| Images path set in the page by `:page-imagesdir:`.
-
-|`template`
-|{{ site.template.name }}
-|Name of the template used for rendering a page. Settings are taken from
-sitewide configuration defined by `_config.yml`.
-
-|`includedir`
-|{{ includedir }}
-|lorem:sentences[1]
-
-|===============================================================================
-endif::[]

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/tables/readme

@@ -1 +0,0 @@
-bla

data/lib/starter_web/pages/public/learn/roundtrip/610_fam.adoc

@@ -1,294 +0,0 @@
----
-title:                                  Floating Action Menu
-tagline:                                using fam buttons
-date:                                   2020-11-08 00:00:00
-description: >
-                                        A floating action button (FAB) represents the primary action/s
-                                        of a page. Multiple actions can be configured as a FAM, the
-                                        floating action menu. See FAM buttons and menus in action
-
-tags:                                   [ Roundtrip, Introduction, FAM ]
-categories:                             [ Module ]
-
-toc:                                    true
-advertising:                            false
-scrollbar:                              false
-
-image:                                  /assets/images/modules/attics/cookies-1920x1200-bw.jpg
-permalink:                              /pages/public/learn/roundtrip/fam/
-regenerate:                             false
-
-resources:                              [ lightbox, rouge, clipboard, fam ]
-resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/modules/attics/cookies-1920x1200-bw.jpg
-          alt:                          jekyll.1200x600-bw.jpg
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set page (local) attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-// :debug:
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="none" %}
-
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-// See: https://material.io/components/buttons-floating-action-button
-
-A floating action button (FAB) represents the primary action/s
-of a page. Multiple actions can be configured as a FAM, the
-floating action menu. See FAM buttons and menus in action
-
-== Floating Action Menu (FAM)
-
-If you want a fixed floating action button, you can add multiple actions
-that will appear on hover. Our demo is in the bottom righthand corner of
-the page.
-
-[source, html]
-----
-<div class="fam-btn">
-  <a class="btn-fab-floating btn-large red">
-    <i class="large material-icons">mode_edit</i>
-  </a>
-  <ul>
-    <li><a class="btn-fab-floating red"><i class="material-icons">insert_chart</i></a></li>
-    <li><a class="btn-fab-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
-    <li><a class="btn-fab-floating green"><i class="material-icons">publish</i></a></li>
-    <li><a class="btn-fab-floating blue"><i class="material-icons">attach_file</i></a></li>
-  </ul>
-</div>
-----
-
-== Initialization
-
-[source, javascript]
-----
-  document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.fam-btn');
-    var instances = j1.fam.init(elems, options);
-  });
-----
-
-or using *jQuery*
-
-[source, javascript]
-----
-  $(document).ready(function(){
-    $('.fam-btn').j1.fam();
-  });
-----
-
-=== Options
-
-[cols=",,,", options="header", ]
-|===============================================================================
-|Name |Type |Default |Description
-
-|`direction`
-|String
-|`top`
-|Direction FAM menu opens. Can be `top`, `right`, `buttom`, or `left`
-
-|`hoverEnabled`
-|Boolean
-|`true`
-|If `true`, FAM menu will open on hover instead of click
-
-|`toolbarEnabled`
-|Boolean
-|`false`
-|Enable transit the FAM into a toolbar on click
-
-|===============================================================================
-
-== Methods
-
-Because jQuery is no longer a dependency, all the methods are called on
-the plugin instance. You can get the plugin instance like this:
-
-[source, javascript]
-----
-  var instance = j1.fam.getInstance(elem);
-----
-
-or using *jQuery*
-
-[source, javascript]
-----
-  $('.fam-btn').fam('methodName');
-  $('.fam-btn').fam('methodName', paramName);
-----
-
-WARNING: You can still use the old jQuery plugin method calls.
-But you won't be able to access instance properties.
-
-=== `open()`
-
-Opens a FAM.
-
-[source, javascript]
-----
-  instance.open();
-----
-
-=== `close()`
-
-Closes a FAM.
-
-[source, javascript]
-----
-  instance.close();
-----
-
-=== `destroy()`
-
-Destroy plugin instance and teardown
-
-[source, javascript]
-----
-  instance.destroy();
-----
-
-=== Properties
-
-[cols=",,", options="header", ]
-|===============================================================================
-|Name |Type |Description
-
-|`el`
-|Element
-|The DOM element the plugin was initialized with.
-
-|`options`
-|Object
-|The options the instance was initialized with.
-
-|`isOpen`
-|Boolean
-|Describes open/close state of the FAM.
-
-|===============================================================================
-
-== Horizontal FAM
-
-Creating a horizontal FAM is easy! Just set the direction option.
-
-[source, javascript]
-----
-  document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.fam-btn');
-    var instances = j1.fam.init(elems, {
-      direction: 'left'
-    });
-  });
-----
-
-== Click-only FAM
-
-If you want to disable the hover behaviour, and instead toggle the FAM
-menu when the user clicks on the large button (works great on mobile!),
-just add the `click-to-toggle` class to the FAM.
-
-[source, javascript]
-----
-  document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.fam-btn');
-    var instances = j1.fam.init(elems, {
-      direction: 'left',
-      hoverEnabled: false
-    });
-  });
-----
-
-/////
-== FAM to Toolbar
-
-Instead of displaying individual button options, you can transition your
-FAM into a toolbar on click. Just add the `toolbar` class to the FAM.
-
-[source, javascript]
-----
-  document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.fam-btn');
-    var instances = j1.fam.init(elems, {
-      toolbarEnabled: true
-    });
-  });
-----
-
-Or using jQuery
-
-[source, javascript]
-----
-  $('.fam-btn').fam({
-    toolbarEnabled: true
-  });
-----
-/////
-
-/////
-++++
-<div class="fam-btn">
-  <a id="page_ctrl_button" class="btn-fab-floating btn-large btn-md-red raised-z5"><i class="mdi mdi-chevron-down"></i></a>
-  <ul id="page_ctrl_items">
-    <li><a id="fam_reload_page" class="btn-fab-floating btn-md-red raised-z5"><i class="mdi mdi-reload"></i></a></li>
-    <li><a id="open_mmenu_toc" class="btn-fab-floating btn-md-blue raised-z5"><i class="mdi mdi-wrap"></i></a></li>
-    <li><a id="fam_scroll_to_top" class="btn-fab-floating btn-md-green raised-z5"><i class="mdi mdi-step-backward-2 mdi-rotate-90"></i></a></li>
-    <li><a id="fam_next_section" class="btn-fab-floating btn-md-green raised-z5"><i class="mdi mdi-step-forward mdi-rotate-90"></i></a></li>
-    <li><a id="fam_previous_section" class="btn-fab-floating btn-md-green raised-z5"><i class="mdi mdi-step-backward mdi-rotate-90"></i></a></li>
-    <!--
-    <li><a id="ssm_scroll_to_bottom" class="btn-fab-floating btn-md-green raised-z5"><i class="mdi mdi-step-forward-2 mdi-rotate-90"></i></a></li>
-    -->
-  </ul>
-</div>
-++++
-
-
-++++
-<script>
-  $(document).ready(function() {
-    var FloatingActionOptions = { direction: 'top',
-                                  hoverEnabled: true,
-                                  toolbarEnabled: false };
-
-    var elems         = document.querySelectorAll('.fam-btn');
-    var instances     = j1.fam.init(elems, FloatingActionOptions);
-//  var $instances    = $('.fam-btn').j1.fam(FloatingActionOptions);
-    var $ActionButton = $('#page_ctrl_button');
-
-    if (FloatingActionOptions.hoverEnabled) {
-      $ActionButton.hover(
-        function() {
-          $('.mdi').toggleClass('mdi-chevron-down mdi-chevron-up');
-        }, function() {
-          $('.mdi').toggleClass('mdi-chevron-down mdi-chevron-up');
-        }
-      );
-    } else {
-      $ActionButton.on('click', function (e) {
-        $('.mdi').toggleClass('mdi-chevron-down mdi-chevron-up');
-      });
-    }
-
-  });
-</script>
-++++
-/////