j1-template 2024.3.12 → 2024.3.13

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.12</template_version>
+  <template_version>2024.3.13</template_version>
 
   {% assign title = site.title | default: site.name %}
   {% if page.collection != "posts" %}

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

@@ -394,6 +394,6 @@ end
 
 module Jekyll
   module J1LunrSearch
-    VERSION = '2024.3.12'
+    VERSION = '2024.3.13'
   end
 end

data/lib/starter_web/package.json

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

data/lib/starter_web/pages/public/tools/previewer/_includes/attributes.asciidoc

@@ -19,6 +19,22 @@ tag::urls[]
 
 :url-asciidoc-extensions--gist-example:           //gist.github.com/mojavelinux/5546622
 
+:url-tour--data-slider-picker:                    /pages/public/tour/data_slider_picker
+:url-tour--image_headers:                         /pages/public/tour/image_header
+:url-tour--readme-first:                          /pages/public/learn/read_me_first/
+:url-tour--present-images:                        /pages/public/tour/present_images/
+:url-tour--playback-audio:                        /pages/public/tour/playback_audio/
+:url-tour--playback-video:                        /pages/public/tour/playback_video/
+:url-tour--cards:                                 /pages/public/tour/cards/
+:url-tour--typography:                            /pages/public/tour/typography/
+:url-tour--asciidoc-extensions:                   /pages/public/tour/asciidoc_extensions/
+:url-tour--rouge-hightlighter:                    /pages/public/tour/rouge/
+:url-tour--extended-modals:                       /pages/public/tour/modals/
+:url-tour--icon-fonts:                            /pages/public/tour/mdi_icon_font/
+:url-tour--responsive-tables:                     /pages/public/tour/responsive_tables/
+:url-tour--themes:                                /pages/public/tour/themes/
+:url-tour--quicksearch:                           /pages/public/tour/quicksearch/
+
 end::urls[]
 
 

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

@@ -39,8 +39,8 @@ tag::urls[]
 :url-tour--image_headers:                         /pages/public/tour/image_header
 :url-tour--readme-first:                          /pages/public/learn/read_me_first/
 :url-tour--present-images:                        /pages/public/tour/present_images/
-:url-tour--present-audio:                         /pages/public/tour/present_audio/
-:url-tour--present-video:                         /pages/public/tour/present_video/
+:url-tour--playback-audio:                        /pages/public/tour/playback_audio/
+:url-tour--playback-video:                        /pages/public/tour/playback_video/
 :url-tour--cards:                                 /pages/public/tour/cards/
 :url-tour--typography:                            /pages/public/tour/typography/
 :url-tour--asciidoc-extensions:                   /pages/public/tour/asciidoc_extensions/

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

@@ -1,197 +1,188 @@
----
-title:                                  Audio Player
-title_extention:                        Playback Audio using J1 Template
-tagline:                                Playback Audio
-
-date:                                   2024-04-16
-#last_modified:                         2024-01-01
-
-description: >
-                                        J1 Template provides playing audio on web pages
-                                        by HTML5 and supports custom players created
-                                        by AmplitudeJS to playback audio individually.
-keywords: >
-                                        open source, free, template, jekyll, jekyllone, web,
-                                        sites, static, jamstack, bootstrap, html, html5,
-                                        asciidoctor, audio
-
-categories:                             [ Tour ]
-tags:                                   [ Audio, Module ]
-
-image:
-  path:                                 /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
-  width:                                1920
-  height:                               1280
-
-tts:                                    true
-comments:                               false
-exclude_from_search:                    false
-regenerate:                             false
-personalization:                        true
-permalink:                              /pages/public/tour/playback_audio/
-
-resources:                              [ amplitudejs ]
-resource_options:
-  - toccer:
-      collapseDepth:                    2
-  - attic:
-      slides:
-        - url:                          /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
-          alt:                          Photo by Alexey Ruban on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Alexey Ruban
-            href:                       //unsplash.com/de/@intelligenciya
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
-
-// See: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs
-// See: https://docs.asciidoctor.org/asciidoc/latest/macros/audio-and-video/
-//
-[role="dropcap"]
-The Audio tag in HTML5 is a great way to add audio media to web pages.
-However, the browser fully controls the audio playback interface,
-which can limit or even break a page's design if audio media is used.
-
-AmplitudeJS for J1 Template offers a straightforward solution for web
-developers. It allows them to easily customize the appearance of their audio
-players without the need for complex scripting. By leveraging J1 Template
-and Amplitude's API, web designers can craft unique interfaces that define
-the visual and functional aspects of a player's audio control elements.
-
-mdi:clock-time-five-outline[24px, md-gray mt-4 mb-5 mr-2]
-*5-10 Minutes* to read
-
-
-[role="mt-5"]
-== HTML 5 Audio
-
-Audio players can easily be embedded in web pages using the *audio* tag
-`<audio>.` Browsers have a built-in framework for decoding and playing audio
-content directly within a webpage.
-
-.Ambient Piano
-audio::/assets/audio/sound-effects/ambient-piano.mp3[role="mt-4 mb-5"]
-
-
-[role="mt-5"]
-== AmplitudeJS Audio
-
-The J1 Template implements custom players based on 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 Player
-* Compact Player (default payer)
-* Large Player
-
-[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 Player
-
-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
-offers basic playback controls, such as pause, play, and
-volume adjustment, while taking up less screen space.
-
-Mini players are beneficial when you want to listen to audio in the
-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 · From Dusk To Dawn
-amplitude::free_emancipator_mini[role="mt-3 mb-5"]
-
-.Royalty Free Music · Disco 80th
-amplitude::free_disco_mini[role="mt-3 mb-5"]
-
-lorem:sentences[5]
-
-
-[role="mt-5"]
-== Compact Player
-
-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 *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.
-
-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 · From Dusk To Dawn
-amplitude::free_emancipator_compact[role="mt-3 mb-5"]
-
-.Royalty Free Music · Disco 80th
-amplitude::free_disco_compact[role="mt-3 mb-5"]
-
-lorem:sentences[5]
-
-
-[role="mt-5"]
-== Large Player
-
-lorem:sentences[5]
-
-.Emancipator · From Dusk To Dawn
-amplitude::free_emancipator_large[role="mt-3 mb-5"]
-
-.Royalty Free Music · Disco 80th
-amplitude::free_disco_large[role="mt-3 mb-5"]
-
-
-[role="mt-5"]
-== What next
-
-I hope, you've enjoyed exploring the possibilities J1 offers for playing
-digital audio content. But much, much more can the J1 do for your web in
-terms of multimedia.
-
-The J1 Template support playing video on web pages by using the
-HTML5 video support, the new standard of HTML. HTML5 implements a
-pure HTML way to show play video on the web. Modern browsers
-support the the video tag `<video>` for the current HTML5 standard.
-
-The previous proprietary de facto standard software like a Flash Player,
-Quicktime, or Silverlight is no longer needed as the Theme JekyllOne provides
-HTML5 video for local content and from online sources on the Internet.
-
-[role="mb-7"]
-Incredible? See the next example page link:{url-tour--present-video}[Video Player].
+---
+title:                                  Audio Player
+title_extention:                        Playback Audio using J1 Template
+tagline:                                Playback Audio
+
+date:                                   2024-04-16
+#last_modified:                         2024-01-01
+
+description: >
+                                        J1 Template provides playing audio on web pages
+                                        by HTML5 and supports custom players created
+                                        by AmplitudeJS to playback audio individually.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap, html, html5,
+                                        asciidoctor, audio
+
+categories:                             [ Tour ]
+tags:                                   [ Audio, Module ]
+
+image:
+  path:                                 /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
+  width:                                1920
+  height:                               1280
+
+tts:                                    true
+comments:                               false
+exclude_from_search:                    false
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/tour/playback_audio/
+
+resources:                              [ amplitudejs ]
+resource_options:
+  - toccer:
+      collapseDepth:                    2
+  - attic:
+      slides:
+        - url:                          /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
+          alt:                          Photo by Alexey Ruban on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Alexey Ruban
+            href:                       //unsplash.com/de/@intelligenciya
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+// See: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs
+// See: https://docs.asciidoctor.org/asciidoc/latest/macros/audio-and-video/
+//
+[role="dropcap"]
+The Audio tag in HTML5 is a great way to add audio media to web pages.
+However, the browser fully controls the audio playback interface,
+which can limit or even break a page's design if audio media is used.
+
+AmplitudeJS for J1 Template offers a straightforward solution for web
+developers. It allows them to easily customize the appearance of their audio
+players without the need for complex scripting. By leveraging J1 Template
+and Amplitude's API, web designers can craft unique interfaces that define
+the visual and functional aspects of a player's audio control elements.
+
+mdi:clock-time-five-outline[24px, md-gray mt-4 mb-5 mr-2]
+*5-10 Minutes* to read
+
+
+[role="mt-5"]
+== HTML 5 Audio
+
+Audio players can easily be embedded in web pages using the *audio* tag
+`<audio>.` Browsers have a built-in framework for decoding and playing audio
+content directly within a webpage.
+
+.Ambient Piano
+audio::/assets/audio/sound-effects/ambient-piano.mp3[role="mt-4 mb-5"]
+
+
+[role="mt-5"]
+== AmplitudeJS Audio
+
+The J1 Template implements custom players based on 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 Player
+* Compact Player (default player)
+* Large Player
+
+[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 Player
+
+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
+offers basic playback controls, such as pause, play, and
+volume adjustment, while taking up less screen space.
+
+Mini players are beneficial when you want to listen to audio in the
+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 · From Dusk To Dawn
+amplitude::free_emancipator_mini[role="mt-3 mb-5"]
+
+.Royalty Free Music · Disco 80th
+amplitude::free_disco_mini[role="mt-3 mb-5"]
+
+
+[role="mt-5"]
+== Compact Player
+
+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.
+
+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 · From Dusk To Dawn
+amplitude::free_emancipator_compact[role="mt-3 mb-5"]
+
+.Royalty Free Music · Disco 80th
+amplitude::free_disco_compact[role="mt-3 mb-5"]
+
+
+[role="mt-5"]
+== Large Player
+
+A large player supports a design for displaying all components but requires
+the full (horizontal) space in a webpage. This player type makes it easy for
+all users to navigate and plaback all titles provided.
+
+.Emancipator · From Dusk To Dawn
+amplitude::free_emancipator_large[role="mt-3 mb-5"]
+
+.Royalty Free Music · Disco 80th
+amplitude::free_disco_large[role="mt-3 mb-5"]
+
+
+[role="mt-5"]
+== What next
+
+I hope, you've enjoyed exploring the possibilities J1 offers for playing
+digital audio content. But much, much more can the J1 do for your web in
+terms of multimedia.
+
+The J1 Template support playing video on web pages by using the
+HTML5 video support, the new standard of HTML. HTML5 implements a
+pure HTML way to show play video on the web. Modern browsers
+support the the video tag `<video>` for the current HTML5 standard.
+
+The previous proprietary de facto standard software like a Flash Player,
+Quicktime, or Silverlight is no longer needed as the Theme JekyllOne provides
+HTML5 video for local content and from online sources on the Internet.
+
+[role="mb-7"]
+Incredible? See the next examples on how to playback video on the page
+link:{url-tour--playback-video}[Video Player].

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

@@ -493,4 +493,5 @@ Quicktime, or Silverlight is no longer needed as the Theme JekyllOne provides
 HTML5 video for local content and from online sources on the Internet.
 
 [role="mb-7"]
-Incredible? See the next example page link:{url-tour--present-audio}[Audio Player].
+Incredible? See the next example page forcussing on playing audio:
+link:{url-tour--playback-audio}[Audio Player].

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: j1-template
 version: !ruby/object:Gem::Version
-  version: 2024.3.12
+  version: 2024.3.13
 platform: ruby
 authors:
 - juergen_jekyll_one
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-08-06 00:00:00.000000000 Z
+date: 2024-08-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -2859,13 +2859,7 @@ files:
 - lib/starter_web/pages/public/plans/_includes/attributes.asciidoc
 - lib/starter_web/pages/public/plans/plans.adoc
 - lib/starter_web/pages/public/tools/previewer/_includes/attributes.asciidoc
-- lib/starter_web/pages/public/tools/previewer/_includes/documents/amplitudejs.large.css.asciidoc
-- lib/starter_web/pages/public/tools/previewer/_includes/documents/frame.hover.html
-- lib/starter_web/pages/public/tools/previewer/_includes/documents/frame.nested.html
-- lib/starter_web/pages/public/tools/previewer/_includes/documents/frame.textarea.html
-- lib/starter_web/pages/public/tools/previewer/_includes/documents/my.content.html
 - lib/starter_web/pages/public/tools/previewer/_includes/documents/readme
-- lib/starter_web/pages/public/tools/previewer/preview_amplitudejs.adoc
 - lib/starter_web/pages/public/tools/previewer/preview_bootstrap_theme.adoc
 - lib/starter_web/pages/public/tour/_includes/attributes.asciidoc
 - lib/starter_web/pages/public/tour/_includes/documents/100_gistblock.asciidoc