j1-template 2021.3.1 → 2022.0.2

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1_starter",
-  "version": "2021.3.1",
+  "version": "2022.0.2",
   "description": "J1 Template Starter Web",
   "homepage": "https://your.site",
   "author": {
@@ -57,7 +57,7 @@
     "app": "run-p -s app:*",
     "app:rackup": "cross-env SINATRA_ACTIVESUPPORT_WARNING=false WEBSERVER=$npm_package_jekyll_opt_webserver INTERFACE=$npm_package_jekyll_opt_interface PORT=$npm_package_jekyll_opt_app_port j1 rackup",
     "app:jekyll": "cross-var cross-env JEKYLL_ENV=$npm_package_config_mode BUNDLE_GEMFILE=$npm_package_ruby_gemfile bundle exec jekyll b -c $npm_package_jekyll_configfile $npm_package_jekyll_opt_incremental --watch",
-    "app:open": "npm run delay-3s && cross-var opn $npm_package_jekyll_opt_app_url",
+    "app:open": "npm run delay-3s && cross-var open-cli $npm_package_jekyll_opt_app_url",
 
     "delay-1s": "node ./node_modules/npm-delay 1000",
     "delay-2s": "node ./node_modules/npm-delay 2000",
@@ -111,7 +111,7 @@
 
     "setup": "npm --silent run setup-start && npm --silent run setup-base && run-s -s setup:*",
     "setup-start": "echo Setup project for first use ..",
-    "setup-base": "echo Bootstrap base modules .. && echo J1 Project Base modules: > install.log && npm --silent i lnk-cli shx npm-run-all cross-var cross-env -D >> install.log && echo done.",
+    "setup-base": "echo Bootstrap base modules .. && echo J1 Project Base modules: > install.log && npm --silent install shx npm-run-all cross-var cross-env >> install.log && echo done.",
     "setup:env": "echo Configure environment .. && run-s -s set-env:*",
     "set-env:loglevel": "cross-var cross-env npm config set jekyll_one_com:loglevel  $npm_package_config_loglevel",
     "set-env:mode": "cross-var cross-env npm config set jekyll_one_com:mode $npm_package_config_mode && echo done.",
@@ -121,6 +121,7 @@
     "setup:create-etc-folder": "echo Create etc folder .. && shx mkdir ./etc && echo done.",
     "setup:node-modules-base": "echo Bootstrap project modules .. && echo J1 Project modules: >> install.log && npm --silent install >> install.log",
     "setup:node-modules-utilsrv": "echo Bootstrap utility server modules .. && echo J1 Utility Server modules: >> install.log && cd utilsrv && npm --silent install >> ../install.log && cd .. && echo done.",
+    "setup:private-config": "shx cp -f _data/_defaults/private.yml _data/private.yml",
     "setup:detect-os": "echo Detect OS .. && cross-env if-env OS=Windows_NT && cross-var echo \"OS detected: $OS\" || OS=$(echo $(getos)) && echo \"OS detected: $OS\" && echo done.",
     "setup:site": "run-s -s build",
 
@@ -142,12 +143,5 @@
     "j1-cli": "^2019.0.3",
     "npm-delay": "^1.0.4",
     "opn-cli": "^5.0.0"
-  },
-  "devDependencies": {
-    "cross-env": "^7.0.3",
-    "cross-var": "^1.1.0",
-    "lnk-cli": "^1.0.1",
-    "npm-run-all": "^4.1.5",
-    "shx": "^0.3.3"
   }
 }

data/lib/starter_web/pages/_test_pages/100_side-bar-tester.adoc

@@ -0,0 +1,244 @@
+---
+title:                                  Tester
+tagline:                                sidebar
+date:                                   2020-11-03 00:00:00 +100
+description: >
+                                        Welcome to the preview page focussing on the image module. This page
+                                        shows some valuable features of the J1 Template to manage your image-based
+                                        content using lightboxes, carousels (slider), and galleries.
+
+categories:                             [ Testpages ]
+tags:                                   [ Example ]
+
+comments:                               false
+fab_menu_id:                            page_ctrl_simple
+
+permalink:                              /pages/public/learn/side_bar_tester/
+regenerate:                             false
+
+resources:                              [
+                                          clipboard, rouge, carousel, lightbox,
+                                          justifiedGallery, lightGallery
+                                        ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+          alt:                          Photo by Ricardo Gomez Angel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Ricardo Gomez Angel
+            href:                       https://unsplash.com/@ripato/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+Welcome to the first preview page focussing on the image module. This page
+shows some valuable features of the J1 Template to manage your image-based
+content using lightboxes, carousels (slider), and galleries.
+
+The image module offers complex functionality based on powerful OpenSource
+libraries like JustifiedGallery for high-end, masonry-styled preview maps.
+J1 Template uses the jQuery plugin Owl Carousel as a base for image sliders.
+A carousel app (slider) lets you present your images as shows.
+
+Lightboxes like LightGallery or Lightbox V2 support your web for enlarged
+image views of your picture or video content. Have a look, a quick tour
+of what J1 can do for image data. Have fun!
+
+== J1 Lightboxes
+
+A Lightbox, in general, is a helper which displays enlarged, almost
+screen-filling versions of pictures (or videos) while dimming the rest of the
+page. The technique, introduced by Lightbox V2, gained widespread popularity
+due to its simple and elegant style. The term lightbox is used since then for
+Javascript libraries to support such functionality.
+
+For the J1 Template, two different lightboxes can be used:
+
+* Lightbox V2 (lightbox)
+* LightGallery
+
+The default lightbox used by J1 Template is Lightbox V2, a Javascript library
+written by _Lokesh Dhakar_. The name of that (build-in) is simply: lightbox.
+For more complex use cases, like a thumbnail gallery preview or video support,
+LightGallery can be used alternatively.
+
+NOTE: The name LightGallery implies a sort of a Gallery, but the library is a
+_lightbox_. And, LightGallery provides much more functionality on image-based
+data rather than enlarged displaying of images. See the examples below to check
+for the differences in comparison to the simpler Lightbox V2 lightbox.
+
+Both lightboxes are fully integrated to be used as standalone modules or
+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
+
+Find below an example of using the lightbox Lightbox standalone. See how
+single (individual) images are linked for use with Lightbox.
+
+.Lightbox block for standalone images
+lightbox::example-standalone[ 400, {data-images-standalone} ]
+
+Lightbox supports image groups (image sets). Click on the images below to
+see how Lightbox manages a group of images.
+
+.Lightbox block for grouped images
+lightbox::example-group[ 400, {data-images-group}, group ]
+
+=== LightGallery Example
+
+LightGallery provides more complex functions on image data. The module
+supports a gallery-style thumbnail preview plus image resizing, a download
+dialog, sharing provider support, and some more helpful. Check what
+LightGallery can do by the following example.
+
+gallery::jg_old_times[]
+
+
+++++
+
+<button class="btn u-sidebar-navigation__toggler" id="sideNav-toggler" aria-haspopup="true" aria-expanded="false" aria-controls="sideNav" aria-label="Toggle Header" data-bs-target="#sideNav" style="display: block;">
+<i id="fam-icon" class="mdi mdi-wrap mdi-"></i>
+</button>
+
+<style>
+
+/* Sidebar shortcode navigation styles */
+/*------------------------------------
+  Sidebar Navigation
+------------------------------------*/
+@media all and (min-width: 992px) {
+  .u-sidebar-navigation {
+    position: fixed;
+    top: 0;
+    left: -21.42857rem;
+    width: 300px;
+  }
+}
+
+/*
+.u-sidebar-navigation-inner {
+  background-color: #1c2434;
+  color: #fff;
+  padding: 20px 0;
+}
+
+.u-sidebar-navigation__search-input {
+  border-radius: 3px;
+  border: none;
+}
+
+.u-sidebar-navigation .nav-link {
+  color: #fff;
+  padding: 0.5rem 1.42857rem;
+}
+
+.u-sidebar-navigation .nav-link:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.u-sidebar-navigation .nav-link.active {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+*/
+.u-sidebar-navigation__toggler {
+  position: fixed;
+  top: 120px;
+  left: 0;
+  width: 53px;
+  height: 53px;
+  background-color: #1c2434;
+  color: #fff;
+  border-radius: 0 3px 3px 0;
+  font-size: 22px;
+  z-index: 2;
+}
+
+.u-sidebar-navigation__toggler:hover, .u-sidebar-navigation__toggler:focus {
+  color: #fff;
+}
+
+/*
+.u-sidebar-navigation__closer {
+  position: absolute;
+  top: 22px;
+  right: 15px;
+  width: 25px;
+  height: 25px;
+  padding: 0;
+  color: #fff;
+  background-color: transparent;
+  z-index: 3;
+}
+
+.u-sidebar-navigation__closer:hover, .u-sidebar-navigation__closer:focus {
+  color: #fff;
+}
+
+@media all and (max-width: 992px - 1) {
+  .u-sidebar-navigation-list {
+    display: block;
+    -webkit-columns: 4;
+            columns: 4;
+  }
+  .u-sidebar-navigation-list .dropdown-toggle {
+    display: none;
+  }
+  .u-sidebar-navigation-list .dropdown-menu {
+    display: block;
+    max-height: 100%;
+    margin: 0;
+    float: none;
+    opacity: 1;
+  }
+}
+
+@media all and (max-width: 768px - 1) {
+  .u-sidebar-navigation-list {
+    -webkit-columns: 3;
+            columns: 3;
+  }
+}
+
+@media all and (max-width: 576px - 1) {
+  .u-sidebar-navigation-list {
+    -webkit-columns: 1;
+            columns: 1;
+  }
+}
+
+.u-has-sidebar-navigation .u-header__overlay {
+  display: none;
+}
+*/
+
+</style>
+++++

data/lib/starter_web/pages/_test_pages/_includes/attributes.asciidoc

@@ -0,0 +1,110 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+
+:bootstrap-home:                                  https://getbootstrap.com/
+:bs_doc_components_modal:                         https://getbootstrap.com/docs/4.3/components/modal/
+
+:bootswatch-home:                                 https://bootswatch.com/
+:bootswatch-api:                                  https://bootswatch.com/help/#api
+
+:mdb-home:                                        https://mdbootstrap.com/
+:mdb-bs-modals:                                   https://mdbootstrap.com/docs/jquery/modals/basic/
+:mdb-bs-modals-legacy:                            https://mdbootstrap.com/legacy/4.3.2/?page=javascript/modals
+
+:w3org-css-spec:                                  https://www.w3.org/Style/CSS/specs.en.html
+:w3schools-css-tutorial:                          https://www.w3schools.com/css/default.asp
+
+:fontawesome-home:                                https://fontawesome.com/
+:fontawesome-icons:                               https://fontawesome.com/icons?d=gallery
+:fontawesome-get-started:                         https://fontawesome.com/get-started
+
+:mdi-home:                                        https://materialdesignicons.com/
+:mdi-icons-cheatsheet:                            https://cdn.materialdesignicons.com/3.3.92/
+
+:iconify-home:                                    https://iconify.design/
+:iconify-icon-sets:                               https://iconify.design/icon-sets/
+:iconify-medical-icons:                           https://iconify.design/icon-sets/medical-icon/
+:iconify-brand-icons:                             https://iconify.design/icon-sets/logos/
+
+:jekyll-one-core-doc-color-scheme:                https://support.jekyll-one.com/user_guide/core/color_scheme
+
+:light-gallery-license:                           http://sachinchoolur.github.io/lightGallery/docs/license.html
+
+:asciidoctor-extensions-lab:                      https://github.com/asciidoctor/asciidoctor-extensions-lab
+:asciidoctor-extensions-use-extension:            https://github.com/asciidoctor/asciidoctor-extensions-lab#using-an-extension
+:asciidoctor-user-manual-extensions:              http://asciidoctor.org/docs/user-manual/#extensions
+
+:roundtrip_data_slider_picker:                    /pages/public/learn/roundtrip/data_slider_picker
+:roundtrip_image_headers:                         /pages/public/learn/roundtrip/image_header
+:roundtrip_image_headers:                         /pages/public/learn/roundtrip/image_header
+
+:roundtrip-readme-first:                          /pages/public/learn/read_me_first/
+:roundtrip-present-images:                        /pages/public/learn/roundtrip/present_images/
+:roundtrip-present-videos:                        /pages/public/learn/roundtrip/present_videos/
+:roundtrip-cards:                                 /pages/public/learn/roundtrip/cards/
+:roundtrip-typography:                            /pages/public/learn/roundtrip/typography/
+:roundtrip-asciidoc-extensions:                   /pages/public/learn/roundtrip/asciidoc_extensions/
+:roundtrip-extended-modals:                       /pages/public/learn/roundtrip/modals/
+:roundtrip-icon-fonts:                            /pages/public/learn/roundtrip/mdi_icon_font/
+:roundtrip-responsive-tables:                     /pages/public/learn/roundtrip/responsive_tables/
+:roundtrip-themes:                                /pages/public/learn/roundtrip/themes/
+:roundtrip-quicksearch:                           /pages/public/learn/roundtrip/quicksearch/
+
+:github-gist-home:                                https://gist.github.com/
+:asciidoc-extensions-gist-example:                https://gist.github.com/mojavelinux/5546622
+
+:previewer-emoji:                                 /pages/public/previewer/twitter_emoji/
+:previewer-mdi:                                   /pages/public/previewer/mdi_font/
+
+:previewer-theme:                                 /pages/public/previewer/theme/
+
+:kickstarter-web-in-a-day:                        https://jekyll.one/pages/public/learn/kickstarter/web_in_a_day/meet_and_greet/
+end::urls[]
+
+
+// FOOTNOTES, global asciidoc attributes (variables)
+// -----------------------------------------------------------------------------
+tag::footnotes[]
+end::footnotes[]
+
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+end::tags[]
+
+
+// Data - Data elements for Asciidoctor extensions
+// -----------------------------------------------------------------------------
+tag::data[]
+
+:data-images-standalone:                          "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+:data-images-group:                               "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+
+:data-quicksearch-icon:                           "pages/roundtrip/600_quicksearch/quicksearch_icon-800x200.jpg, Search button (magnifier) in the quick access area"
+:data-quicksearch-input:                          "pages/roundtrip/600_quicksearch/quicksearch_input-800x200.jpg, Input bar for a QuickSearch"
+
+end::data[]
+
+
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products[]
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
+// -----------------------------------------------------------------------------
+tag::authors[]
+end::authors[]

data/lib/starter_web/pages/_test_pages/_includes/documents/100_gistblock.asciidoc

@@ -0,0 +1,28 @@
+== Github Gist
+
+Code snippets may helpful to support your readers for existing code examples.
+An excellent place for code snippets is Gist at Github. To embed an existing
+gist into your documents, the Asciidoc Extention *Gist block* provides the
+block macro `gist::` to do so.
+
+The following gist snippet is taken from {asciidoc-extensions-gist-example}[this example, window="_blank"]:
+
+[source, prometheus, role="noclip"]
+----
+.Gist title
+gist::git_address[] <1>
+----
+<1> For `git_address`, {github-gist-home}[, window="_blank"] is prepended automatically
+
+.Example of a gist block
+[source, prometheus, role="noclip"]
+----
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+----
+
+[.result]
+====
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+====

data/lib/starter_web/pages/_test_pages/_includes/documents/410_bottom_info.asciidoc

@@ -0,0 +1,14 @@
+// === Bottom Info
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button"
+    class="btn btn-primary"
+    data-bs-toggle="modal"
+    data-bs-target="#frameModalBottomSuccessDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/_test_pages/_includes/documents/410_bottom_left_warning.asciidoc

@@ -0,0 +1,11 @@
+// === Bottom Left Warning
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalBLWarningDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/_test_pages/_includes/documents/410_bottom_right_danger.asciidoc

@@ -0,0 +1,11 @@
+// === Bottom Right Danger
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalBRDangerDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/_test_pages/_includes/documents/410_central_success.asciidoc

@@ -0,0 +1,11 @@
+// === Central Success
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centralModalSuccessDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/_test_pages/_includes/documents/410_full_height_left_info.asciidoc

@@ -0,0 +1,11 @@
+// === Full Height Left Info
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fluidModalLeftInfoDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/_test_pages/_includes/documents/410_full_height_right_success.asciidoc

@@ -0,0 +1,11 @@
+// === Full Height Right Success
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fluidModalRightSuccessDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/_test_pages/_includes/documents/410_table_bs_modal_examples.asciidoc

@@ -0,0 +1,47 @@
+
+.Selected extended BS modal examples
+[cols="6a,3a,3a", options="header", width="100%", role="rtable"]
+|===============================================================================
+|Postion |Class | Example
+
+|`top`
+|`info`
+|
+include::./410_top_info.asciidoc[]
+
+|`top-right`
+|`success`
+|
+include::./410_top_right_success.asciidoc[]
+
+|`top-left`
+|`info`
+|
+include::./410_top_left_info.asciidoc[]
+
+|`bottom`
+|`info`
+|
+include::./410_bottom_info.asciidoc[]
+
+|`bottom-right`
+|`danger`
+|
+include::./410_bottom_right_danger.asciidoc[]
+
+|`bottom-left`
+|`warning`
+|
+include::./410_bottom_left_warning.asciidoc[]
+
+|`full-height right`
+|`success`
+|
+include::./410_full_height_right_success.asciidoc[]
+
+|`full-height left`
+|`info`
+|
+include::./410_full_height_left_info.asciidoc[]
+
+|===============================================================================

data/lib/starter_web/pages/_test_pages/_includes/documents/410_top_info.asciidoc

@@ -0,0 +1,11 @@
+// === Top Info
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#frameModalTopInfoDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/_test_pages/_includes/documents/410_top_left_info.asciidoc

@@ -0,0 +1,11 @@
+// === Top Left Info
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalTLInfoDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/_test_pages/_includes/documents/410_top_right_success.asciidoc

@@ -0,0 +1,11 @@
+// === Top Right Success
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalTRSuccessDemo">
+    Launch Example
+  </button>
+</div>
+++++