j1-template 2024.3.19 → 2024.3.20

data/lib/starter_web/_data/modules/swiper_playlists.yml

@@ -423,6 +423,55 @@ settings:
           description: >
                                         Lightbox Caption
 
+    # --------------------------------------------------------------------------
+    # STACKED Game Posters
+    # --------------------------------------------------------------------------
+    #
+    - playlist:
+      enabled:                          true
+
+      name:                             game_posters
+      type:                             image/jpg
+      image_defaults:
+        base_folder:                    /assets/image/module/swiper/extended/stacked/image
+        parallax_data_elements:         [ data-swiper-parallax-scale="1.1" ]
+
+      # ------------------------------------------------------------------------
+      # SLIDE settings
+      # ------------------------------------------------------------------------
+      #
+      items:
+
+       # slide 01
+        - item:
+          enabled:                      true
+          image:                        1
+
+        # slide 02
+        - item:
+          enabled:                      true
+          image:                        2
+
+        # slide 03
+        - item:
+          enabled:                      true
+          image:                        3
+
+        # slide 04
+        - item:
+          enabled:                      true
+          image:                        4
+
+        # slide 05
+        - item:
+          enabled:                      true
+          image:                        5
+
+        # slide 06
+        - item:
+          enabled:                      true
+          image:                        6
+
     # --------------------------------------------------------------------------
     # NEIGHBOR
     # --------------------------------------------------------------------------
@@ -492,14 +541,15 @@ settings:
           description: >
                                         Lttle Bird
 
+
     # --------------------------------------------------------------------------
     # AUDIO Playlists
     # ==========================================================================
 
+
     # --------------------------------------------------------------------------
     # VIDER Playlists
     # ==========================================================================
 
-
 # ------------------------------------------------------------------------------
 # END config

data/lib/starter_web/_data/resources.yml

@@ -1370,7 +1370,7 @@ resources:
                                           modules/videojs/css/themes/sea,
                                           modules/videojs/css/themes/uno
                                         ]
-        files:                          []
+        files:                          [ adapter/js/videojs.js ]
         js:                             [
                                           modules/videojs/js/video,
                                           modules/videojs/js/plugins/controls/hotkeys/hotkeys,
@@ -1381,7 +1381,7 @@ resources:
                                           modules/videojs/js/plugins/players/wt/wistia,
                                           modules/videojs/js/plugins/players/yt/youtube
                                         ]
-        init_function:                  []
+        init_function:                  [ j1.adapter.videojs.init ]
 
   # ----------------------------------------------------------------------------
   # TikToc Player, Version v1.0.11
@@ -1972,18 +1972,22 @@ resources:
         css:                            [                                          
                                           modules/swiperjs/css/theme/uno,
                                           modules/swiperjs/css/swiper-bundle,
+                                          modules/swiperjs/css/modules/layoutBase,
                                           modules/swiperjs/css/modules/layoutExpanding,
                                           modules/swiperjs/css/modules/layoutNeighbor,
                                           modules/swiperjs/css/modules/layoutPanorama,
+                                          modules/swiperjs/css/modules/layoutParallax,
                                           modules/swiperjs/css/modules/layoutStacked,
                                           modules/swiperjs/css/modules/layoutThumbs
                                         ]
         files:                          [ adapter/js/swiper.js ]
         js:                             [
                                           modules/swiperjs/js/swiper-bundle,
+                                          modules/swiperjs/js/modules/layoutBase,
                                           modules/swiperjs/js/modules/layoutExpanding,
                                           modules/swiperjs/js/modules/layoutNeighbor,
                                           modules/swiperjs/js/modules/layoutPanorama,
+                                          modules/swiperjs/js/modules/layoutParallax,
                                           modules/swiperjs/js/modules/layoutStacked,
                                           modules/swiperjs/js/modules/layoutThumbs
                                         ]

data/lib/starter_web/_data/templates/feed.xml

@@ -57,7 +57,7 @@
   <id>{{ page.url | absolute_url | xml_escape }}</id>
   <post_limited>{{ limit_posts }}</post_limited>
   <template_name>J1 Theme</template_name>
-  <template_version>2024.3.19</template_version>
+  <template_version>2024.3.20</template_version>
 
   {% assign title = site.title | default: site.name %}
   {% if page.collection != "posts" %}

data/lib/starter_web/_plugins/filter/filters.rb

@@ -96,16 +96,6 @@ module Jekyll
       end
     end
 
-    # --------------------------------------------------------------------------
-    #  contains: check if a string contains a substring
-    #
-    #  Example:
-    #
-    # --------------------------------------------------------------------------
-    def contains(input, substr)
-       input.include?(substr) ? true : false
-    end
-
     # --------------------------------------------------------------------------
     #  contain_substr: check if a string contains a substring
     #
@@ -113,7 +103,7 @@ module Jekyll
     #
     # --------------------------------------------------------------------------
     def contain_substr(input, substr)
-       input.include?(substr) ? true : false
+       input.include?(substr.to_s) ? true : false
     end
 
     # --------------------------------------------------------------------------

data/lib/starter_web/_plugins/index/lunr.rb

@@ -394,6 +394,6 @@ end
 
 module Jekyll
   module J1LunrSearch
-    VERSION = '2024.3.19'
+    VERSION = '2024.3.20'
   end
 end

data/lib/starter_web/package.json

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

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

@@ -107,7 +107,29 @@ mobile devices.
 
 
 [role="mt-5"]
-== Mini Player
+== AmplitudeJS
+
+The J1 Template suports *native audio* files (e.g. mp3) using *custom players*
+based on *AmplitudeJS* using the the (default) theme Uno. The color scheme
+used matches the look and feel of the template to preserve the page design.
+
+Three types of AmplitudeJS players are build-in for the J1 template system:
+
+* *Mini* Players
+* *Compact* Players (default payer)
+* *Large* Players
+
+[role="mt-4"]
+[NOTE]
+====
+Amplitude players for the J1 Template are mobile-friendly. Instead of
+clicking on the appropriate elements, touch events are applied to all
+mobile devices.
+====
+
+
+[role="mt-5"]
+=== Mini Players
 
 In the context of complex components on a web page, like an audio player,
 a mini player refers to a minimized version of full players. It typically
@@ -119,54 +141,80 @@ background without dedicating the entire screen to the player. They
 are commonly found on music streaming services, podcast platforms, and
 websites with embedded audio content.
 
-.Emancipator · Dusk To Dawn
-amplitude::free_emancipator_mini[role="mt-3 mb-5"]
+.Emancipator · From Dusk To Dawn
+amplitude::emancipator_mini[role="mb-5"]
 
 .Royalty Free Music · Disco 80th
-amplitude::free_disco_mini[role="mt-3 mb-5"]
+amplitude::disco_mini[role="mb-5"]
 
-lorem:sentences[5]
 
 [role="mt-5"]
-== Compact Player
+=== Compact Players
 
-A complex component like an audio player on a web page, *compact*
-typically refers to a design or layout that minimizes the component's
-space while maintaining its functionality and usability.
+The design of a *Compact player* is an efficient approach that involves
+condensing the player controls and display elements into a smaller area.
+It allows the audio player to fit neatly within the web page's layout without
+overwhelming or dominating the content around it.
 
-////
-The *compact design* for an audio player is an efficient approach that
-involves condensing the player controls and display elements into a smaller
-area. It uses icons or symbols instead of text labels where possible, and
-possibly hides less frequently used features behind menus or dropdowns to
-reduce clutter, thereby instilling confidence in its effectiveness.
+The player aims to balance functionality and space efficiency, ensuring users
+can easily access and control the audio playback without sacrificing too much
+screen space or placing  multiple players side-by-side.
 
-A *compact* design allows the audio player to fit neatly within the web
-page's layout without overwhelming or dominating the content around it.
-The design aims to balance functionality and space efficiency, ensuring
-users can easily access and control the audio playback without sacrificing
-too much screen space.
-////
-
-.Emancipator · Dusk To Dawn
-amplitude::free_emancipator_compact[role="mt-3 mb-5"]
+.Emancipator · From Dusk To Dawn
+amplitude::emancipator_compact[role="mb-5"]
 
 .Royalty Free Music · Disco 80th
-amplitude::free_disco_compact[role="mt-3 mb-5"]
-
-lorem:sentences[5]
+amplitude::disco_compact[role="mb-5"]
 
 
 [role="mt-5"]
-== Large Player
+=== Large Players
 
-lorem:sentences[5]
+A complex component, like an audio player on a web page, typically refers
+to a design or layout that minimizes the component's space while maintaining
+its functionality and usability.
 
-.Emancipator · Dusk To Dawn
-amplitude::free_emancipator_large[role="mt-3 mb-5"]
+[role="mt-4"]
+==== Emancipator
 
-.Royalty Free Music · Disco 80th
-amplitude::free_disco_large[role="mt-3 mb-5"]
+The large design provides the full functionality of an audio player to ensure
+users can easily control audio playback. The player behaves similarly to a
+compact player, but all controls are displayed in a single window; there is
+no need to open other widgets.
+
+.Emancipator · From Dusk To Dawn
+amplitude::emancipator_large[role="mb-5"]
+
+[role="mt-4"]
+==== Disco 80th
 
-[role="mb-8"]
 lorem:sentences[3]
+
+.Royalty Free Music · Disco 80th
+amplitude::disco_large[role="mb-5"]
+[role="mt-5"]
+== AmplitudeJS on Youtube
+
+The example demonstrates playing *Audio* track from *YouTube Video* using an
+AmplitudJS player. The J1 template uses the video *plugin ytp* to extend the
+native functionality of the AmplitudeJS API to playback YouTube files only for
+the audio part.
+
+[role="mt-4 mb-5"]
+[CAUTION]
+====
+Playing audio tracks is currently supported only for videos from YouTube (YT).
+The YT plugin *ytp* embeds a YouTube (iframe) player and mimics the AmplitudeJS
+player buttons and controls to manage a *playlist* of videos the same as known
+for native audio files.
+====
+
+.Manon Mélodie · YouTube 2025
+amplitude::manon_melodie_yt_large[role="mb-5"]
+
+[role="mt-4 mb-5"]
+[NOTE]
+====
+AmplitudeJS YT Player can only be used with the J1 Template. Currently, only
+AJS players of type *large* are supported.
+====

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

@@ -158,6 +158,7 @@ endif::[]
 
 
 ifeval::[{ytp--audio-player} == true]
+
 [role="mt-5"]
 == Amplitude YouTube Player
 
@@ -173,6 +174,7 @@ Find the complete *playlist* for Manon Mélodie on
 link:{manon-melodie--playlist}[YouTube, {browser-window--new}].
 ====
 
+
 [role="mt-4"]
 [[manon_melodie]]
 === Manon Mélodie
@@ -180,24 +182,69 @@ link:{manon-melodie--playlist}[YouTube, {browser-window--new}].
 lorem:sentences[3]
 
 .Manon Mélodie · YouTube 2025
-amplitude::manon_melodie_yt_large[role="mt-4 mb-5"]
+amplitude::manon_melodie_yt_large[role="mb-5"]
+
+[role="mt-4"]
+[[bea]]
+=== Bea and her Business
+
+lorem:sentences[3]
+
+.Bea and her Business · YouTube 2025
+amplitude::bea_yt_large[role="mb-5"]
+
+
+[role="mt-4"]
+=== Diana Krall
+
+lorem:sentences[3]
+
+.Diana Krall · YouTube
+amplitude::diana_krall_yt_large[role="mb-5"]
+
+
+[role="mt-4"]
+=== Ephraim Kishon
+
+lorem:sentences[5]
+
+[role="mt-4"]
+==== Beste Familiengeschichten
+
+lorem:sentences[3]
 
-// [role="mt-4"]
-// === Mimi Rutherfurt
+.Ephraim Kishon · Beste Familiengeschichten
+amplitude::ephraim_kishon_beste_familiengeschichten_yt_large[role="mb-5"]
 
-// lorem:sentences[3]
 
-// .Mimi Rutherfurt · Maritim Verlag
-// amplitude::mimi_rutherfurt_yt_large[role="mt-4 mb-5"]
+[role="mt-4"]
+==== Beste Autofahrergeschichten
+
+lorem:sentences[3]
+
+.Ephraim Kishon · Beste Autofahrergeschichten
+amplitude::ephraim_kishon_beste_autofahrer_geschichten_yt_large[role="mb-5"]
 
-// [role="mt-4"]
-// [[faelle_des_bnd]]
-// === Die größten Fälle des BND
 
-// lorem:sentences[3]
+[role="mt-4"]
+=== Emancipator
+
+The large design provides the full functionality of an audio player to ensure
+users can easily control audio playback. The player behaves similarly to a
+compact player, but all controls are displayed in a single window; there is
+no need to open other widgets.
+
+.Royalty Free Music · Disco 80th
+amplitude::disco_large[role="mb-5"]
+
+
+[role="mt-4"]
+=== Mimi Rutherfurt
+
+lorem:sentences[3]
 
-// .Die größten Fälle des BND · Maritim Verlag
-// amplitude::faelle_des_bnd_yt_large[role="mt-4 mb-5"]
+.Mimi Rutherfurt · Maritim Verlag
+amplitude::mimi_rutherfurt_yt_large[role="mb-5"]
 
 endif::[]
 
@@ -221,7 +268,7 @@ ifeval::[{ms-slider-video--example} == true]
 lorem:sentences[5]
 
 .Slider using Video
-masterslider::ms_00010[role="mt-4 mb-5"]
+masterslider::ms_00010[role="mb-5"]
 
 
 [role="mt-5"]
@@ -232,7 +279,7 @@ upload, view, share, and comment on videos. The platform provides services
 for people and organizations to publish various video content.
 
 .Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift
-youtube::q3zqJs7JUCQ[poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg" role="mt-4 mb-5"]
+youtube::q3zqJs7JUCQ[poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg" role="mb-5"]
 
 
 [role="mt-5"]
@@ -242,5 +289,5 @@ VideoJS provides a flexible and customizable platform for displaying and
 controlling MPEG 4 video content on websites and web applications.
 
 .Video over VideoJS
-gallery::jg_video_html5_videojs[role="mt-4 mb-5"]
+gallery::jg_video_html5_videojs[role="mb-5"]
 endif::[]