j1-template 2024.3.26 → 2024.3.28

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

@@ -4,7 +4,7 @@ title_extention:                        YouTube Video
 tagline:                                YouTube Video
 
 date:                                   2024-09-21
-#last_modified:                         2024-01-01
+last_modified:                          2025-06-22
 
 description: >
                                         The J1 Template support playing video on web pages
@@ -17,7 +17,7 @@ keywords: >
                                         quicktime, silverlight
 
 categories:                             [ Tester ]
-tags:                                   [ Audio, Amplitude App, YouTube ]
+tags:                                   [ AmpltitudeJS,  YouTube ]
 
 image:
   path:                                 /assets/image/module/attic/1920x1280/markus-spiske.jpg

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

@@ -1,5 +1,5 @@
 ---
-title:                                  J1 SwiperJS Apps
+title:                                  J1 SwiperJS App
 title_extention:                        Selected Examples
 tagline:                                Selected Examples
 date:                                   2025-02-10
@@ -78,7 +78,6 @@ devices. SwiperJS-based sliders are intended to be displayed at their best on
 all types of websites, such as those viewed on desktop computers, tablets, or
 smartphones.
 
-
 [role="mt-4"]
 == What SwiperJS Apps are
 
@@ -201,7 +200,7 @@ used on *desktop* computers.
 
 This Thumb Slider uses minified images that are placed to control the (main)
 slider at the *top* or the *bottom*. This swiper type creates a thumbed Swiper
-that uses *two lanes*, which takes up a *lot of space* but can render the
+that uses *two lines*, which takes up a *lot of space* but can render the
 sliders' images *optimally*.
 
 .Extendend Swiper · Layout Thumb Top
@@ -214,13 +213,13 @@ swiper::thumb_slider_top[role="mb-5"]
 
 A more **mobile**-friendly version of a Thunb slider is created by placing the
 minified images for the slider side-by-side on the *right* or the *left*. This
-swiper use just a *single lane* in the page, but *minifies* the presented images
-as required for the lane *heigth* specified.
+swiper use just a *single line* in the page, but *minifies* the presented images
+as required for the line *heigth* specified.
 
 [role="mb-5"]
 [TIP]
 ====
-Adding a *Lightbox* to a *single-lane* swiper allows users to *enlarge* the
+Adding a *Lightbox* to a *single-line* swiper allows users to *enlarge* the
 presented *images*.
 ====
 
@@ -404,15 +403,11 @@ swiper::neighbor_slider[role="mb-5"]
 [role="mt-5"]
 ==== Layout Panorama
 
-The layout panaorama presents available slides of a slider as a group. The
-group is displayed in a virtual, circular viewing angle. 
-
-[role="mb-5"]
-[TIP]
-====
-The effect is great for slides connected in terms of content to give the user
-a panoramic view impression.
-====
+The *Panorama* layout in SwiperJS sliders is used to create a 3D-like
+panoramic effect, where the slides are animated as they swipe, creating
+a continuous, curved panorama. The layout creates an immersive sense of
+depth and movement, which is especially beneficial when presenting wide
+images, landscapes, or other visual content with a large aspect ratio.
 
 .Extendend Swiper · Layout Panorama
 swiper::swiper_image_panorama[role="mt-4 mb-5"]

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

@@ -1,10 +1,10 @@
 ---
 title:                                  VideoJS
-title_extention:                        Custom VJS Players
-tagline:                                Custom VJS Players
+title_extention:                        Custom video player
+tagline:                                Custom video player
 
 date:                                   2025-06-05
-last_modified:                          2025-06-08
+last_modified:                          2025-06-22
 
 description: >
                                         Test the VideoJS ADOC Macro for
@@ -16,7 +16,7 @@ keywords: >
                                         videojs
 
 categories:                             [ Tester ]
-tags:                                   [ Module, VideoJS ]
+tags:                                   [ VideoJS, YouTube ]
 
 image:
   path:                                 /assets/image/module/attic/markus-spiske-1920x1280.jpg
@@ -49,7 +49,10 @@ resource_options:
 
 // Attribute settings for section control
 //
-:swiper--features:                      false
+:videojs--youtube-video:                true
+:videojs--masonry:                      false
+:videojs--local-video:                  true
+:videojs--over-youtube:                 false
 
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
@@ -67,119 +70,135 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
-Swiper, the free and most modern mobile touch slider with hardware accelerated
-transitions and amazing native behavior. It is intended to be used in mobile
-websites, mobile web apps, and mobile native/hybrid apps.
+VideoJS is a *free-to-use* open-source JavaScript framework for building
+custom video players for the web. Implementing VideoJS for the J1 Template
+supports local video and several platforms, such as YouTube, Vimeo, Wistia,
+or Dailymotion, for presenting videos *online*.
+
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-// [role="mt-5"]
-// == Local Video
 
-// Videos created by a digicam or a mobile can be played by J1 Template using
-// the lightGallery integration. Present videos you have made at it's best.
+// .Vimeo Video · The Present
+// // 137221158 152985022
+// ++++
+// <iframe
+//     width="930" height="640"
+//     src="https://player.vimeo.com/video/152985022" 
+//     frameborder="0" 
+//     allowfullscreen>
+// </iframe>
+// ++++
 
-// .Local Video over VideoJS · Justified Gallery + LightGallery
-// gallery::jg_video_html5[role="mb-4"]
 
+// .Dailymotion Video · Blödsinn
+// // x7vn9g2 
+// ++++
+// <iframe
+//     width="930" height="640"
+//     src="https://www.dailymotion.com/embed/video/x8oz6w2"
+//     frameborder="0"
+//     allowfullscreen>
+// </iframe>
+// ++++
 
-// == Masonry
 
-// Masonry for J1 Template is a great tool for creating dynamic video galleries.
-// The module makes creating a gallery to display videos of different types easy.
+// .Wistia Video · Blödsinn
+// ++++
+// <iframe
+//     width="930" height="640"
+//     src="https://fast.wistia.net/embed/iframe/zs8hlyi5xz"
+//     allowtransparency="true"
+//     frameborder="0"
+//     scrolling="no"
+//     class="wistia_embed" name="wistia_embed"
+//     allowfullscreen>
+// </iframe>
+// ++++
 
-// .Mixed Video · Masonry + LightGallery
-// masonry::mixed_video_example[role="mb-4"]
+ifeval::[{videojs--local-video} == true]
+[role="mt-5"]
+== Local Video
 
+Videos created by a digicam or a mobile can be played by J1 Template using
+the lightGallery integration. Present videos you have made at it's best.
 
-// [role="mt-4"]
-// == lightGallery (YouTube)
+.Local (MP4) Video · Justified Gallery + LightGallery
+gallery::jg_video_html5[role="mb-4"]
+endif::[]
 
-// 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"]
+ifeval::[{videojs--masonry} == true]
+[role="mt-5"]
+== Masonry
 
+Masonry for J1 Template is a great tool for creating dynamic video galleries.
+The module makes creating a gallery to display videos of different types easy.
 
-// [role="mt-5"]
-// == VideoJS Player over YouTube
+.Mixed Video · Masonry + LightGallery
+masonry::mixed_video_example[role="mb-4"]
+endif::[]
 
-// YouTube is a popular online video-sharing platform that allows users to
-// upload, view, share, and comment on videos. The platform provides services
-// for people and organizations to publish various video content.
 
-// ++++
-// <div class="video-title">
-//   <i class="mdib mdib-video mdib-24px mr-2"></i>
-//   The Breathtaking Beauty of Nature
-// </div>
-
-// <div class="mb-8">
-//   <video
-//     id="vid_2rtQOsWaAXc"
-//     class="video-js vjs-theme-uno"
-//     controls
-//     width="640"
-//     height="360"
-//     poster="//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg" alt="Beauty of Nature" 
-//     aria-label="The Breathtaking Beauty of Nature"
-//     data-setup='{
-//         "fluid" : true,
-//         "techOrder": [
-//             "youtube", "html5"
-//         ],
-//         "sources": [{
-//             "type": "video/youtube",
-//             "src": "//youtube.com/watch?v=IUN664s7N-c"
-//         }],
-//         "controlBar": {      
-//           "pictureInPictureToggle": false,
-//           "volumePanel": {
-//               "inline": false
-//           }
-//         }
-//       }'
-//   ></video>
-// </div>
-// ++++
+ifeval::[{videojs--youtube-video} == true]
+[role="mt-5"]
+== 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"]
+
+
+.NPR Tiny Desk Concerts · Latin
+gallery::tdc_latin[role="mb-5"]
+endif::[]
 
+
+ifeval::[{videojs--over-youtube} == true]
 [role="mt-5"]
-== VideoJS Player over Dailymotion
+== VideoJS Player over YouTube
 
-link:{url-dailymotion--home}[Dailymotion, {browser-window--new}] is a
-video-sharing platform. The platform is available worldwide in 180+
-languages, featuring websites for their video content.
+YouTube is a popular online video-sharing platform that allows users to
+upload, view, share, and comment on videos. The platform provides services
+for people and organizations to publish various video content.
 
-The platform is a *monetization* solution that allows allows to directly
-connect to high-quality advertisers through a proprietary Advertising system.
-Like YouTube, videos can be watched for free, but ads are shown on each and
-every video.
+++++
+<style>
+
+/* -----------------------------------------------------------------------------
+  styles moved to VJS theme uno at: 
+  assets/theme/j1/modules/videojs/css/themes/uno.css
+*/
+
+</style>
+++++
 
 ++++
 <div class="video-title">
   <i class="mdib mdib-video mdib-24px mr-2"></i>
-  Morning Energy
+  The Breathtaking Beauty of Nature
 </div>
 
 <div class="mb-8">
   <video
-    id="vid_x887s09"
+    id="2rtQOsWaAXc"
     class="video-js vjs-theme-uno"
     controls
     width="640"
     height="360"
-    poster="/assets/video/poster/dailymotion/meditation.jpg" alt="Morning Energy" 
-    aria-label="Morning Energy"
+    poster="//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg" alt="Beauty of Nature" 
+    aria-label="The Breathtaking Beauty of Nature"
     data-setup='{
         "fluid" : true,
         "techOrder": [
-            "dailymotion", "html5"
+            "youtube", "html5"
         ],
         "sources": [{
-            "type": "video/dailymotion",
-            "src": "//dai.ly/x887s09"
+            "type": "video/youtube",
+            "src": "//youtube.com/watch?v=IUN664s7N-c"
         }],
         "controlBar": {      
           "pictureInPictureToggle": false,
@@ -192,18 +211,6 @@ every video.
 </div>
 ++++
 
-
-++++
-<style>
-
-/* -----------------------------------------------------------------------------
-  styles moved to VJS theme uno at: 
-  assets/theme/j1/modules/videojs/css/themes/uno.css
-*/
-
-</style>
-++++
-
 ++++
 <script>
 
@@ -247,7 +254,7 @@ $(function() {
       // create div|caption container
       const newDiv = document.createElement('div');
       newDiv.classList.add('caption');
-      newDiv.textContent = 'Morning Energy';
+      newDiv.textContent = 'The Breathtaking Beauty of Nature';
 
       // insert div|caption container AFTER the image
       image.parentNode.insertBefore(newDiv, image.nextSibling);
@@ -265,17 +272,15 @@ $(function() {
     var j1CoreFinished  = (j1.getState() === 'finished') ? true : false;
 
     if (j1CoreFinished && pageVisible) {
-      // const vjs_player  = document.getElementById("vid_2rtQOsWaAXc");
-      const vjs_player  = document.getElementById('vid_x887s09');
+      const vjs_player  = document.getElementById("2rtQOsWaAXc");
 
       // add captions (on poster image)
-      // naddCaptionAfterImage('//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg');
-      addCaptionAfterImage('/assets/video/poster/dailymotion/meditation.jpg');
-      
+      addCaptionAfterImage('//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg');
+
       // scroll page to the players top position
       // -----------------------------------------------------------------------
       vjs_player.addEventListener('click', function(event) {
-        const targetDiv         = document.getElementById("vid_x887s09");
+        const targetDiv         = document.getElementById("2rtQOsWaAXc");
         const targetDivPosition = targetDiv.offsetTop;
         const scrollOffset      = (window.innerWidth >= 720) ? -130 : -110;
 
@@ -290,12 +295,12 @@ $(function() {
   // customize the yt player created
   // ---------------------------------------------------------------------------
   var dependencies_met_vjs_player_exist = setInterval(function(options) {
-    var vjsPlayerExist = document.getElementById("vid_x887s09") ? true : false;
+    var vjsPlayerExist = document.getElementById("2rtQOsWaAXc") ? true : false;
 
     if (vjsPlayerExist) {
 
       // apply player customization on 'player ready'
-      videojs("vid_x887s09").ready(function() {
+      videojs("2rtQOsWaAXc").ready(function() {
         const vjsPlayer = this;
 
         // create customControlContainer for progressControlSilder|time (display) elements
@@ -367,4 +372,4 @@ $(function() {
 
 </script>
 ++++
-
+endif::[]

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

@@ -797,26 +797,18 @@ include::{documentdir}/100_gistblock.asciidoc[]
 [role="mt-5"]
 == What next
 
-Asciidoc extensions open up advanced possibilities for placing specific
-content elements on a page. The number of available extensions will grow.
-Extensions for Asciidoc gives handy and powerful functionality needed for
-modern web pages.
-
-[NOTE]
-====
-Asciidoc extensions are available for all content pages based on the Markup
-Language Asciidoc created for J1 Template. For content pages based on
-*Markdown*, extensions are *not* supported.
-====
-
-J1 Template supports a rich set of *advanced Bootstrap Modals* that add
-dialogs to your web pages for user notifications. The advanced Modals
-highlight important information to your visitors. The dialogs are positioned
-over everything else in the document so that messages get the full user's
-attention.
+Bootstrap is a helpful framework that offers a complete set of styles to
+create excellent responsive designs. In the sense that all can be improved,
+responsive tables supported by Bootstrap should get some enhancement to
+display on low-resolution devices or smaller window sizes better.
+
+The theme Jekyll One supports a new design for responsive tables but based
+on Bootstrap. The approach used by J1 Template is based on CSS styles on
+top of the classic Bootstrap tags for simplicity and portability to be viewed
+best on all devices and browsers. Responsive tables help to read this
+important information on mobiles a lot - this feature is what is meant to be
+fully responsive!
 
 [role="mb-7"]
-Have a look at the preview page
-link:{url-tour--extended-modals}[Advanced Bootstrap Modals] to explore
-the possibilities of the *extended* Bootstrap features provided by J1 Template
-for your new website.
+Check out from here what
+link:{url-tour--responsive-tables}[Responsive Tables] can do.

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

@@ -1,7 +1,7 @@
 ---
 title:                                  Audio
-title_extention:                        J1 Template Apps
-tagline:                                Players
+title_extention:                        J1 Audio Apps
+tagline:                                J1 Audio Apps
 
 date:                                   2024-04-16
 last_modified:                          2025-05-17

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

@@ -753,4 +753,4 @@ Asciidoc block elements. I'm sure, you'll love it.
 
 [role="mb-7"]
 Check the more J1 Template offer and go for
-link:{url-tour--asciidoc-extensions}[Asciidoc Extensions] made for J1!
+link:{url-tour--asciidoc-extensions}[Asciidoc Extensions] made for J1.