j1-template 2024.3.23 → 2024.3.24

data/lib/starter_web/index.html

@@ -27,7 +27,7 @@ robots:
   follow:                               true
 
 image:
-  path:                                 /assets/image/module/attic/ideas-start-here-1920x1280.jpg
+  path:                                 //assets.trainingindustry.com/content/uploads/2019/06/Company-Culture_Zappos-6.5.19-928x522.jpg
   width:                                1920
   height:                               1200
 
@@ -96,7 +96,8 @@ resources:                             [ animate, scroller ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/ideas-start-here-1920x1280.jpg
+#       - url:                          /assets/image/module/attic/1920x1280/ideas-start-here-1920x1280.jpg
+        - url:                          //assets.trainingindustry.com/content/uploads/2019/06/Company-Culture_Zappos-6.5.19-928x522.jpg
           alt:                          ideas-start-here-1920x1280.jpg
 #         badge:
 #           type:                       unsplash

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1",
-  "version": "2024.3.23",
+  "version": "2024.3.24",
   "description": "J1 Template",
   "homepage": "https://your.site",
   "author": {

data/lib/starter_web/pages/public/panels/intro_panel/_includes/attributes.asciidoc

@@ -29,7 +29,7 @@ tag::data[]
 :data-images-standalone:                          "assets/image/module/gallery/old_times/image_02.jpg, GrandPa's 80th Birthday"
 :data-images-group:                               "assets/image/module/gallery/old_times/image_03.jpg, GrandPa's annual journey, assets/image/module/gallery/old_times/image_04.jpg, GrandPa's annual journey"
 
-:data-images--themes-menu:                        "assets/image/page/tour/themes-1920x1280.jpg, Themes menu (Bootswatch)"
+:data-images--bootswatch-themes:                  "assets/image/page/tour/bootswatch-themes.jpg, Bootswatch Themes"
 
 :data-quicksearch--icon:                          "assets/image/page/tour/600_quicksearch/quicksearch_icon.jpg, Search button (magnifier) in the quick access area"
 :data-quicksearch--input:                         "assets/image/page/tour/600_quicksearch/quicksearch_input.jpg, Input bar for a QuickSearch"

data/lib/starter_web/pages/public/tools/previewer/preview_bootstrap_theme.adoc

@@ -21,7 +21,7 @@ categories:                             [ Previewer ]
 tags:                                   [ Theme, Bootstrap ]
 
 image:
-  path:                                 /assets/image/module/attic/themes-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
   width:                                1920
   height:                               1280
 
@@ -35,12 +35,12 @@ resource_options:
       collapseDepth:                    4
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/themes-1920x1280-bw.jpg
-          alt:                          Photo by Clem Onojeghuo on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
+          alt:                          Photo by Stories & Ink Tattoo Care on Unsplash
           badge:
             type:                       unsplash
-            author:                     Clem Onojeghuo
-            href:                       //unsplash.com/@clemono
+            author:                     Stories & Ink Tattoo Care
+            href:                       https://unsplash.com/de/@storiesandink
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tools/tester/app_tester_amplitudejs_yt.adoc

@@ -20,7 +20,7 @@ categories:                             [ Tester ]
 tags:                                   [ Audio, Amplitude App, YouTube ]
 
 image:
-  path:                                 /assets/image/module/attic/markus-spiske-1920x1280.jpg
+  path:                                 /assets/image/module/attic/1920x1280/markus-spiske.jpg
   width:                                1920
   height:                               1280
 
@@ -33,8 +33,12 @@ resources:                              [ amplitudejs ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/markus-spiske-1920x1280.jpg
-          alt:                          Video Tester
+        - url:                          /assets/image/module/attic/1920x1280/markus-spiske.jpg
+          alt:                          Photo by Markus Spiske on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Markus Spiske
+            href:                       https://unsplash.com/de/@markusspiske/ 
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tools/tester/app_tester_swiperjs.adoc

@@ -22,7 +22,7 @@ categories:                             [ Tester ]
 tags:                                   [ Swiper App ]
 
 image:
-  path:                                 /assets/image/module/attic/markus-spiske-1920x1280.jpg
+  path:                                 /assets/image/module/attic/1920x1280/markus-spiske.jpg
   width:                                1920
   height:                               1280
 
@@ -37,8 +37,12 @@ resource_options:
       collapseDepth:                    3
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/markus-spiske-1920x1280.jpg
-          alt:                          Swiper Tester
+        - url:                          /assets/image/module/attic/1920x1280/markus-spiske.jpg
+          alt:                          Photo by Markus Spiske on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Markus Spiske
+            href:                       https://unsplash.com/de/@markusspiske/ 
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tools/tester/videojs_macro_tester.adoc

@@ -28,14 +28,18 @@ regenerate:                             false
 personalization:                        true
 permalink:                              /pages/public/tester/videojs_yt/
 
-resources:                              [ videojs ]
+resources:                              [ gallery, lightgallery, videojs ]
 resource_options:
   - toccer:
       collapseDepth:                    3
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/markus-spiske-1920x1280.jpg
-          alt:                          Swiper Tester
+        - url:                          /assets/image/module/attic/1920x1280/markus-spiske.jpg
+          alt:                          Photo by Markus Spiske on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Markus Spiske
+            href:                       https://unsplash.com/de/@markusspiske/ 
 ---
 
 // Page Initializer
@@ -69,6 +73,17 @@ websites, mobile web apps, and mobile native/hybrid apps.
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
+[role="mt-4"]
+== lightGallery (YouTube)
+
+The galley maker *justifiedGallery* in combination with the *lightbox*
+lightGallery is a great toolset for creating dynamic video galleries.
+The module combinati0n makes creating a gallery to access videos easy.
+
+.YouTube Video · justifiedGallery + LightGallery
+gallery::jg_video_youtube_james_and_adele[role="mb-4"]
+
+
 == VideoJS Player over YouTube
 
 lorem:sentences[3]

data/lib/starter_web/pages/public/tour/_includes/attributes.asciidoc

@@ -99,8 +99,7 @@ end::tags[]
 // -----------------------------------------------------------------------------
 tag::data[]
 
-:data-images--themes-menu:                        "assets/image/page/tour/themes-1920x1280.jpg, Themes menu (Bootswatch)"
-:data-images--styles-menu:                        "assets/image/page/tour/styles-menu-1280x800.jpg, Styles menu (Bootswatch)"
+:data-images--bootswatch-themes:                  "assets/image/page/tour/bootswatch-themes.jpg, Bootswatch Themes"
 
 :data-quicksearch--icon:                          "assets/image/page/tour/600_quicksearch/quicksearch_icon.jpg, Search button (magnifier) in the quick access area"
 :data-quicksearch--input:                         "assets/image/page/tour/600_quicksearch/quicksearch_input.jpg, Input bar for a QuickSearch"

data/lib/starter_web/pages/public/tour/_includes/documents/themes_bootstrap.asciidoc

@@ -15,7 +15,7 @@ link:{url-w3schools--css-tutorial}[Design base, {browser-window--new}] of each
 and every website.
 
 .Theme menu (Bootswatch)
-lightbox::images--themes-menu[ 1280, {data-images--themes-menu} ]
+lightbox::data-images--themes-menu[1280, {data-images--themes-menu}]
 
 Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
 a great set of already prepared Bootstrap stylesheets in various designs are

data/lib/starter_web/pages/public/tour/asciidoc_extensions.adoc

@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Asciidoc, Extension ]
 
 image:
-  path:                                 /assets/image/page/tour/puzzle-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/martin-sanchez.jpg
   width:                                1920
   height:                               1280
 
@@ -36,8 +36,12 @@ resources:                              [
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/puzzle-1920x1280-bw.jpg
-          alt:                          puzzle-1920x1280-bw
+        - url:                          /assets/image/module/attic/1920x1280/martin-sanchez.jpg
+          alt:                          Photo by Martin Sanchez on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     BP Miller
+            href:                       //unsplash.com/de/@bp_miller
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tour/bootstrap_themes.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Themes
 title_extention:                        Bootstrap V5 Themes
-tagline:                                Individual Bootstrap Styles
+tagline:                                Individual Style
 
 date:                                   2020-11-10
 #last_modified:                         2023-01-01
@@ -21,7 +21,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Bootstrap, Module, Theme ]
 
 image:
-  path:                                 /assets/image/module/attic/themes-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
   width:                                1920
   height:                               1280
 
@@ -32,12 +32,12 @@ resources:                              [ lightbox ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/themes-1920x1280-bw.jpg
-          alt:                          Photo by Clem Onojeghuo on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
+          alt:                          Photo by Stories & Ink Tattoo Care on Unsplash
           badge:
             type:                       unsplash
-            author:                     Clem Onojeghuo
-            href:                       //unsplash.com/@clemono
+            author:                     Stories & Ink Tattoo Care
+            href:                       https://unsplash.com/de/@storiesandink
 ---
 
 // Page Initializer
@@ -84,9 +84,64 @@ defined CSS classes in Bootstrap to customize a layout individually.
 </div>
 ++++
 
+
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-include::{documentdir}/themes_bootstrap.asciidoc[]
+[role="mt-5"]
+== The Themes
+
+Styles adjust the website's appearance based on the CSS rules and definitions
+of Bootstrap. Styles do not change the framework's functionality but modify
+rule-based, e.g., the color scheme, fonts, sizes, or the appearance of more
+complex elements like forms or tables. Additionally, a style may add additional
+components to extend the Bootstrap's framework.
+
+Modifying the CSS styles of link:{url-bs--home}[Bootstrap, {browser-window--new}]
+is not rocket science. But, to be honest, some knowledge is needed for the
+link:{url-w3org--css-spec}[CSS technology, {browser-window--new}] to do so.
+I encourage you to spend some time on learning CSS, the
+link:{url-w3schools--css-tutorial}[Design base, {browser-window--new}] of each
+and every website.
+
+.Bootswatch Themes (Examples)
+lightbox::bootswatch-themes[1280, {data-images--bootswatch-themes}]
+
+Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
+a great set of already prepared Bootstrap stylesheets in various designs are
+available on their website; no need to start from scratch. It is not
+required to re-define all the Bootstrap variables and rebuild the framework.
+Many different styles are available. What is already available at Bootswatch
+is at least a good base for your modifications -- your unique design.
+
+Besides the bunch of different stylesheets at *Bootswatch*, an
+link:{url-bootswatch--api}[Integration API, {browser-window--new}] is provided
+that helps a lot to make designs available for an existing site. This API
+is the base to integrate selectable Bootswatch stylesheets into the J1 Template
+navigation system.
+
+[role="mt-4"]
+=== Apply a Style
+
+The base for designing pages using the J1 Template is the style Uno, a modern
+light or dark CSS layout used for many types of websites. What I mentioned
+already, web design is not: one size fits all. The style Uno can be seen as
+a good base, a starting point. Combining Uno and a different styles may be
+a fast solution for your site!
+
+You can find all available stylesheets to be applied on your pages from the
+*Themes* menu. You're invited to check how a page is changing for its design
+if a different stylesheet for web design is used.
+
+[WARNING]
+====
+For changing from one style to the next at *runtime*, the current
+version of the J1 Template system tries add new styles to J1 specific
+components like fonts, headlines, lists or paragraphs. Changing the style
+will work for the most *common* elements, but *not all* of them for now.
+====
+
+Select a style from the *Themes* menu, and the new BS-based stylesheet is
+automatically applied to all pages of your website.
 
 
 [role="mt-5"]

data/lib/starter_web/pages/public/tour/icon_fonts.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Icon Fonts
 title_extention:                        Icons for J1 Template
-tagline:                                Popular Icons for Your Web
+tagline:                                Icons for Your Web
 
 date:                                   2020-11-06
 #last_modified:                         2023-01-01
@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Icon ]
 
 image:
-  path:                                 assets/image/page/tour/icon-fonts-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/material_symbols.jpg
   width:                                1920
   height:                               1280
 
@@ -31,12 +31,8 @@ resources:                              [ iconify ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/icon-fonts-1920x1280-bw.jpg
-          alt:                          Photo by Harpal Singh on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Harpal Singh
-            href:                       //unsplash.com/@aquatium
+        - url:                          /assets/image/module/attic/1920x1280/material_symbols.jpg
+          alt:                          Material Design Symbols
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tour/modal_extentions.adoc

@@ -21,7 +21,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Bootstrap, Modal, Extension ]
 
 image:
-  path:                                 /assets/image/page/tour/bootstrap-1920x1000-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/bootstrap-modal.jpg
   width:                                1920
   height:                               1280
 
@@ -32,7 +32,7 @@ resources:                              []
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/bootstrap-1920x1000-bw.jpg
+        - url:                          /assets/image/module/attic/1920x1280/bootstrap-modal.jpg
           alt:                          Bootstrap Framework Logo
 ---
 

data/lib/starter_web/pages/public/tour/responsive_tables.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Responsive Tables
 title_extention:                        Responsive tables for J1 Template
-tagline:                                Tables viewed best
+tagline:                                Present tables at its best
 
 date:                                   2020-11-09
 #last_modified:                         2023-01-01
@@ -30,12 +30,12 @@ resources:                              []
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/tables-1920x1280-bw.jpg
-          alt:                          Photo by Markus Spiske on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/towfiqu-barbhuiya.jpg
+          alt:                          Photo by Towfiqu barbhuiya on Unsplash
           badge:
             type:                       unsplash
-            author:                     Markus Spiske
-            href:                       //unsplash.com/@markusspiske/portfolio
+            author:                     Towfiqu barbhuiya
+            href:                       https://unsplash.com/de/@towfiqu999999
 ---
 
 // Page Initializer
@@ -89,7 +89,7 @@ a compromise. To fit the everyday needs for tables, viewed well on desktop
 and mobile devices, two types of *responsive* tables are implemented by the
 J1 Template system:
 
-.Types of responsive tables
+.Types of Responsive Tables
 [cols="3a,3a,6a", options="header", width="100%", role="rtable mt-4"]
 |===
 |Style |Type |Description
@@ -123,7 +123,7 @@ tablets.
 
 
 [role="mt-5"]
-== Bootstrap Tables
+== Bootstrap Tables (striped)
 
 Tables are widely used for documentation pages. Below, simple 2-column tables
 are used to explain some of the Jekyll variables for templating your content
@@ -140,7 +140,7 @@ normally and do not scroll horizontally.
 .Bootstrap using fixed text size `no-rtext`
 [source, asciidoc, role="noclip"]
 ----
-[cols="4a,8a", options="header", width="100%", role="table-responsive-md no-rtext"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive-md no-rtext"]
 |===
 |Variable |Description
 
@@ -157,7 +157,7 @@ depending upon what Liquid is being processed and what `page` is.
 ----
 
 .Bootstrap, fixed text size `no-rtext`
-[cols="4a,8a", options="header", width="100%", role="table-responsive-md no-rtext mt-4"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive-md no-rtext mt-4"]
 |===
 |Variable |Description
 
@@ -184,7 +184,7 @@ Post's front matter by specifying a new date/time in the format
 .Bootstrap using responsive text size
 [source, asciidoc, role="noclip"]
 ----
-[cols="4a,8a", options="header", width="100%", role="table-responsive-md"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive-md"]
 |===
 |Variable |Description
 
@@ -198,7 +198,7 @@ depending upon what Liquid is being processed and what `page` is.
 ----
 
 .Bootstrap, responsive text size
-[cols="4a,8a", options="header", width="100%", role="table-responsive mt-4"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive mt-4"]
 |===
 |Variable |Description
 
@@ -219,7 +219,8 @@ Post's front matter by specifying a new date/time in the format
 |===
 
 [role="mt-4"]
-== Responsive Tables
+[[rtables-striped]]
+== Responsive Tables (striped)
 
 Responsive tables *rebuild* a table. The header is set to invisible, and
 all columns get vertically *stacked as rows*.
@@ -227,7 +228,7 @@ all columns get vertically *stacked as rows*.
 .R Table using responsive text size
 [source, asciidoc, role="noclip"]
 ----
-[cols="4a,8a", options="header", width="100%", role="rtable"]
+[cols="4a,8a", options="header", width="100%", role="table-striped rtable"]
 |===
 |Variable |Description
 
@@ -241,7 +242,7 @@ depending upon what Liquid is being processed and what `page` is.
 ----
 
 .R Table, responsive text size
-[cols="4a,8a", options="header", width="100%", role="rtable mt-4"]
+[cols="4a,8a", options="header", width="100%", role="table-striped rtable mt-4"]
 |===
 |Variable |Description
 
@@ -261,7 +262,12 @@ Post's front matter by specifying a new date/time in the format
 
 |===
 
-.R Table using fixed font size
+
+[role="mt-4"]
+[[rtables-not-striped]]
+== Responsive Tables (NOT striped)
+
+.R Table using fixed font size (no rtext)
 [source, asciidoc, role="noclip"]
 ----
 [cols="4a,8a", options="header", width="100%", role="rtable no-rtext"]

data/lib/starter_web/pages/public/tour/typography.adoc

@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Typography ]
 
 image:
-  path:                                 /assets/image/page/tour/typography-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/bp-miller.jpg
   width:                                1920
   height:                               1280
 
@@ -35,12 +35,12 @@ resource_options:
       transitionDuration:               fast
       resolutionRefreshRate:            500
       slides:
-        - url:                          /assets/image/page/tour/typography-1920x1280-bw.jpg
-          alt:                          Photo by Alice Donovan Rousel on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/bp-miller.jpg
+          alt:                          Photo by BP Miller on Unsplash
           badge:
             type:                       unsplash
-            author:                     Alice Donovan Rousel
-            href:                       //unsplash.com/@alicekat/portfolio
+            author:                     BP Miller
+            href:                       //unsplash.com/de/@bp_miller
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tour/video_data.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Video
 title_extention:                        J1 Template Apps
-tagline:                                Players
+tagline:                                J1 Players
 
 date:                                   2020-11-04
 #last_modified:                         2023-01-01
@@ -21,7 +21,7 @@ categories:                             [ Tour ]
 tags:                                   [ Video, Module ]
 
 image:
-  path:                                 /assets/video/headers/present_videos/still/underground-broadway.jpg
+  path:                                 /assets/image/module/attic/1920x1280/alexander-shatov.jpg
   width:                                1920
   height:                               1280
 
@@ -40,8 +40,12 @@ resource_options:
       collapseDepth:                    3
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/lianhao-1920x1280.jpg
-          alt:                          Playback Video
+        - url:                          /assets/image/module/attic/1920x1280/alexander-shatov.jpg
+          alt:                          Photo by Alexander Shatov on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Alexander Shatov
+            href:                       //unsplash.com/de/@alexbemore
 ---
 
 // Page Initializer
@@ -67,6 +71,7 @@ resource_options:
 :dm_video:                              false
 :vm_video:                              true
 :masonry:                               true
+:lightGallery:                          false
 :dm_gallery:                            true
 :vm_gallery:                            true
 
@@ -279,7 +284,7 @@ how to use lightGallery for *commercial* websites and projects.
 ====
 
 Find below examples of video galleries of locally stored (MP4) video resources
-and video content provided online.
+*and* video content provided online.
 
 ifeval::[{masonry} == true]
 [role="mt-4"]
@@ -300,6 +305,20 @@ link:{url-j1-masonry-previewer}[Masonry Preview, {browser-window--new}] page.
 ====
 endif::[]
 
+
+ifeval::[{lightGallery} == true]
+[role="mt-4"]
+=== lightGallery (YouTube)
+
+The galley maker *justifiedGallery* in combination with the *lightbox*
+lightGallery is a great toolset for creating dynamic video galleries.
+The module combinati0n makes creating a gallery to access videos easy.
+
+.YouTube Video · justifiedGallery + LightGallery
+gallery::jg_video_youtube_james_and_adele[role="mb-4"]
+endif::[]
+
+
 [role="mt-4"]
 [[local-video-2]]
 === Local Video