j1-template 2021.3.2 → 2022.0.3

data/lib/starter_web/collections/posts/public/featured/_posts/2021-02-01-site-generators.adoc

@@ -42,7 +42,7 @@ resource_options:
 This article highlights top OpenSource projects providing static site
 generators in many different programming languages. And Jekyll is only
 one of them. Have a look if a full-blown CMS is (really) needed for your
-project!
+project.
 
 excerpt__end
 
@@ -58,7 +58,7 @@ excerpt__end
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 
 [[readmore]]

data/lib/starter_web/collections/posts/public/featured/_posts/2021-03-03-about-j1.adoc

@@ -7,7 +7,7 @@ tags:                                   [ J1, Template ]
 
 image:                                  /assets/images/modules/attics/runner-1920x1200.jpg
 
-fam_menu_id:                            default
+fab_menu_id:                            default
 
 regenerate:                             false
 
@@ -59,7 +59,7 @@ excerpt__end
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 
 ifeval::[{badges-enabled} == true]

data/lib/starter_web/collections/posts/public/series/_posts/2020-01-01-post-wiki-series.adoc

@@ -55,7 +55,7 @@ excerpt__end
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // Read: link:{wikipedia-article}[From Wikipedia, the free encyclopedia, window="_blank"].
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 [[readmore]]
 == Physical

data/lib/starter_web/collections/posts/public/series/_posts/2020-01-02-post-wiki-series.adoc

@@ -55,7 +55,7 @@ excerpt__end
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // Read: link:{wikipedia-article}[From Wikipedia, the free encyclopedia, window="_blank"].
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 [[readmore]]
 == Conservation

data/lib/starter_web/collections/posts/public/series/_posts/2020-01-03-post-wiki-series.adoc

@@ -55,7 +55,7 @@ excerpt__end
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 
 //  Load Liquid procedures
@@ -71,7 +71,7 @@ excerpt__end
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // Read: link:{wikipedia-article}[From Wikipedia, the free encyclopedia, window="_blank"].
 
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 [[readmore]]
 == Columbia River

data/lib/starter_web/index.html

@@ -26,7 +26,7 @@ analytics:                              true
 advertising:                            false
 comments:                               false
 
-fam_menu_id:                            default
+fab_menu_id:                            default
 scrollbar:                              false
 toc:                                    false
 

data/lib/starter_web/package.json

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

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>
+++++