j1-template 2024.3.27 → 2024.3.29

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

@@ -1,7 +1,7 @@
 ---
 title:                                  Video
-title_extention:                        J1 Template Apps
-tagline:                                J1 Players
+title_extention:                        J1 Video Apps
+tagline:                                J1 Video Apps
 
 date:                                   2020-11-04
 #last_modified:                         2023-01-01
@@ -31,7 +31,7 @@ regenerate:                             false
 permalink:                              /pages/public/tour/video_data/
 
 resources:                              [
-#                                         amplitudejs,
+                                          amplitudejs,
                                           gallery, lightgallery, masonry,
                                           videojs, vimeo-player
                                         ]
@@ -62,7 +62,6 @@ resource_options:
 :time-de--string:                       Minuten
 :time-de--description:                  Lesezeit
 
-
 // Attribute settings for section control
 //
 :ytp_audio:                             false
@@ -70,9 +69,9 @@ resource_options:
 :ytp_rhythm:                            false
 :ytp_sky_elements:                      true
 :dm_video:                              false
-:vm_video:                              true
+:vm_video:                              false
 :masonry:                               true
-:lightGallery:                          false
+:justifiedGallery:                      true
 :dm_gallery:                            true
 :vm_gallery:                            true
 
@@ -88,14 +87,14 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
-The J1 Template system supports playing audio and video on web pages using
-HTML5, the current standard. Visitors can play audio and video files without
-the need for an external player.
+The J1 Template system supports playing video on web pages using native HTML5,
+the current standard. Visitors can play video files without the need for an
+external player.
 
 Modern browsers support the video tag `<video>`. The previous proprietary
-software, like _Flash Player_, _Quicktime_, _Silverlight_ is no longer needed
-as the J1 Template provides audio and video support for local video files
-and online sources.
+software, like _Flash Player_, _Quicktime_, _Silverlight_ is no longer required
+as the J1 Template provides video support for local video files and online
+sources.
 
 [subs=attributes]
 ++++
@@ -109,22 +108,22 @@ and online sources.
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 [role="mt-5"]
-== HTML 5 Player
+== HTML 5 Video
 // See: https://docs.asciidoctor.org/asciidoc/latest/macros/audio-and-video/
 //
-HTML5 video opens the doors to how to present video content on your web.
-All modern browsers support the video tag `<video>.` Browsers already have
-a built-in multimedia framework for decoding and displaying video content.
+HTML5 video opens the doors to present local video content on your
+website. All modern browsers support the video tag `<video>.` This Browsers
+have a built-in multimedia framework for decoding and displaying video content.
 
 Two types of video sources are supported:
 
-* Video files from local folders (your webspace)
-* Video files from online sources (on the Internet) like YouTube, Vimeo, etc.
+* Video from local folders from your webspace
+* Video from online sources like YouTube
 
 Standalone video players embedded in websites are software components that
-integrate and play video sources directly within a page or application. These
-players are essential for all current sites and apps. Embedded players provide
-a seamless and user-friendly way to present multimedia content to your audience.
+integrate and play video sources directly within a web page. These players
+are essential for all current websites. Embedded players provide a seamless
+and user-friendly way to present multimedia content to your audience.
 
 [role="mb-4"]
 All modern browsers universally support the video tag `<video>`. This tag
@@ -140,42 +139,15 @@ without loading *external players*.
 
 video::/assets/video//html5/peck_pocketed.mp4[poster="/assets/video/poster/html5/peck_pocketed.jpg", opts="" role="mt-1 mb-5"]
 
-ifeval::[{ytp_audio} == true]
-[role="mt-5"]
-== AmplitudeJS (over YouTube Video)
-
-The example below demonstrates playing only the *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 for the audio part.
-
-[role="mt-4 mb-4"]
-[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-4"]
-
-[NOTE]
-====
-AmplitudeJS YT Player can only be used with the J1 Template. Currently, only
-AJS players of type *large * are supported.
-====
-endif::[]
-
+// video::179528528[vimeo] // doesn#'t work for current Vimeo Players
+// video::RvRhUHTV_8k/PLDitloyBcHOm49bxNhvGgg0f9NRZ5lSaP[youtube]
 
 [role="mt-5"]
 == VideoJS
 
 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*.
+custom video players for the web. Implementing VideoJS for J1 Template
+supports *local video* and several *online platforms*, such as YouTube.
 
 For *online sources*, VideoJS uses plugins, such as the so-called VJS
 Playback Technology. With the help of *plugins*, it is possible to present
@@ -183,10 +155,10 @@ Playback Technology. With the help of *plugins*, it is possible to present
 better user experience.
 
 [role="mt-5"]
-=== Native Video
+=== Local Video
 
-VideoJS provides a flexible and customizable platform for displaying and
-controlling MPEG 4 video content on websites and web applications.
+VideoJS provides a flexible and customizable platform for MPEG4 video content
+on web pages.
 
 .Peck Pocketed · Local Video over VideoJS
 videojs::/assets/video//html5/peck_pocketed.mp4[poster="/assets/video/poster/html5/peck_pocketed.jpg", opts="" role="mb-5"]
@@ -197,9 +169,9 @@ videojs::/assets/video//html5/peck_pocketed.mp4[poster="/assets/video/poster/htm
 [role="mt-5"]
 === YouTube
 
-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.
+Today, YouTube is the most used online video-sharing platform that allows
+users to upload, view, share, and comment on videos. YouTube provides services
+for people and organizations to publish various video content on the internet.
 
 ifeval::[{ytp_best_2024} == true]
 The season 19 (2024) of _America's Got Talent_ (AGT) is special. In the long
@@ -294,7 +266,7 @@ Find below examples of video galleries of locally stored (MP4) video resources
 
 ifeval::[{masonry} == true]
 [role="mt-5"]
-=== Masonry
+=== Masonry Gallery
 
 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.
@@ -312,22 +284,18 @@ link:{url-j1-masonry-previewer}[Masonry Preview, {browser-window--new}] page.
 endif::[]
 
 
-ifeval::[{lightGallery} == true]
+ifeval::[{justifiedGallery} == true]
 [role="mt-5"]
-=== lightGallery (YouTube)
+=== Justified Gallery
 
 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-5"]
-[[local-video-2]]
-=== Local Video
+[role="mt-4"]
+[[justified-gllery-local-video]]
+==== 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.
@@ -345,9 +313,9 @@ HD 720p (1280x720 pixel).
 gallery::jg_video_html5[role="mb-4"]
 
 
-ifeval::[{yt_gallery} == true]
 [role="mt-5"]
-=== YouTube
+[[justified-gllery-youtube]]
+==== YouTube
 
 The community at link:{url-youtube--home}[YouTube, {browser-window--new}]
 is large, with over 1 billion users that watch hundreds of millions of
@@ -355,24 +323,14 @@ hours of content every day. The number of YouTube channels is enormous.
 Today, it's a must for TV stations or musicians to publish videos of their
 shows or songs on YouTube.
 
-A really great channel at YouTube is presented by _Taylor Swift_ for her
-new studio album *The Tortured Poets Department: The Anthology*, released on
-April 19, 2024.
-
-.Taylor Swift - The Tortured Poets Department · Justified Gallery + LightGallery
-gallery::jg_video_online_taylor_swift[role="mb-4"]
-
-[role="mb-5"]
-[TIP]
-====
-An *anthology* is a collection of selected texts or, in a broader sense,
-a thematic compilation of literary or musical works.
-====
+.YouTube Video · justifiedGallery + LightGallery
+gallery::jg_video_youtube_james_and_adele[role="mb-4"]
 endif::[]
 
+
 ifeval::[{vm_gallery} == true]
 [role="mt-5"]
-=== Vimeo
+==== Vimeo
 
 [role="mb-4"]
 link:{url-vimeo--home}[Vimeo, {browser-window--new}] is a video-sharing
@@ -400,7 +358,7 @@ endif::[]
 
 ifeval::[{dm_gallery} == true]
 [role="mt-5"]
-=== Dailymotion
+==== Dailymotion
 
 link:{url-dailymotion--home}[Dailymotion, {browser-window--new}] is a
 video-sharing platform. The platform is available worldwide in 180+
@@ -415,6 +373,37 @@ every video.
 gallery::jg_video_online_dailymotion[role="mb-4"]
 endif::[]
 
+
+ifeval::[{ytp_audio} == true]
+[role="mt-5"]
+// == YouTube Audio (over AmplitudeJS)
+== YouTube Audio
+
+The example below demonstrates playing only the *Audio* track from YouTube
+Video using AmplitudJS for the player. The J1 template uses the video
+*plugin* ytp to extend the native functionality of AmplitudeJS to playback
+YouTube files for the audio part.
+
+[role="mt-4 mb-4"]
+[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.
+====
+
+.Bea and her Business · YouTube 2025
+amplitude::bea_yt_large[role="mb-5"]
+
+[NOTE]
+====
+AmplitudeJS YT Player can only be used with the J1 Template. Currently, only
+AJS players of type *large* are supported.
+====
+endif::[]
+
+
 [role="mt-5"]
 == What next
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: j1-template
 version: !ruby/object:Gem::Version
-  version: 2024.3.27
+  version: 2024.3.29
 platform: ruby
 authors:
 - juergen_jekyll_one
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-06-21 00:00:00.000000000 Z
+date: 2025-06-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -2468,10 +2468,12 @@ files:
 - lib/starter_web/assets/image/module/attic/1920x1280/milad-fakurian.jpg
 - lib/starter_web/assets/image/module/attic/1920x1280/mohammad-rahmani.jpg
 - lib/starter_web/assets/image/module/attic/1920x1280/nasa.jpg
+- lib/starter_web/assets/image/module/attic/1920x1280/nick-fewings.jpg
+- lib/starter_web/assets/image/module/attic/1920x1280/no-revisions.jpg
 - lib/starter_web/assets/image/module/attic/1920x1280/quino-al-2.jpg
 - lib/starter_web/assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
 - lib/starter_web/assets/image/module/attic/1920x1280/towfiqu-barbhuiya.jpg
-- lib/starter_web/assets/image/module/attic/cookies-1920x1200.jpg
+- lib/starter_web/assets/image/module/attic/1920x1280/wolfgang-weiser.jpg
 - lib/starter_web/assets/image/module/attic/katie-moum-1920x1280.jpg
 - lib/starter_web/assets/image/module/attic/lunr-1280x800.jpg
 - lib/starter_web/assets/image/module/attic/machine-generator-1920x1280.jpg
@@ -2757,6 +2759,7 @@ files:
 - lib/starter_web/assets/image/page/features/full-text-search-1280x800.jpg
 - lib/starter_web/assets/image/page/features/global-mobile-traffic-1920x1080.jpg
 - lib/starter_web/assets/image/page/features/google-lighthouse-1080x300.jpg
+- lib/starter_web/assets/image/page/features/google-lighthouse-scores.jpg
 - lib/starter_web/assets/image/page/features/intro-panel-1280x800.jpg
 - lib/starter_web/assets/image/page/features/master-header-1280x600.jpg
 - lib/starter_web/assets/image/page/features/mobile-navigation-600x800.jpg
@@ -2765,6 +2768,7 @@ files:
 - lib/starter_web/assets/image/page/features/nbi-barchart-1280x800.jpg
 - lib/starter_web/assets/image/page/features/teaser-banner-1280x600.jpg
 - lib/starter_web/assets/image/page/features/translator-1280x800.jpg
+- lib/starter_web/assets/image/page/features/tts-1280x500.jpg
 - lib/starter_web/assets/image/page/html_validator/appdevtools-html-validator.jpg
 - lib/starter_web/assets/image/page/html_validator/freeformatter-html-validator.jpg
 - lib/starter_web/assets/image/page/html_validator/w3c-nu-checker.jpg
@@ -2958,9 +2962,9 @@ files:
 - lib/starter_web/collections/posts/protected/_posts/readme
 - lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1.adoc.erb
 - lib/starter_web/collections/posts/public/featured/_posts/2021-01-01-about-cookies.adoc
-- lib/starter_web/collections/posts/public/featured/_posts/2021-02-01-static-site-generators.adoc
-- lib/starter_web/collections/posts/public/featured/_posts/2022-02-01-about-j1.adoc
-- lib/starter_web/collections/posts/public/featured/_posts/2023-10-18-url-types.adoc
+- lib/starter_web/collections/posts/public/featured/_posts/2022-10-18-url-types.adoc
+- lib/starter_web/collections/posts/public/featured/_posts/2023-02-01-static-site-generators.adoc
+- lib/starter_web/collections/posts/public/featured/_posts/2024-02-01-about-j1.adoc
 - lib/starter_web/collections/posts/public/featured/_posts/_includes/attributes.asciidoc
 - lib/starter_web/collections/posts/public/featured/_posts/_includes/documents/readme
 - lib/starter_web/collections/posts/public/featured/_posts/_includes/tables/readme
@@ -3034,8 +3038,8 @@ files:
 - lib/starter_web/pages/public/blog/navigator/archive/dateview.html
 - lib/starter_web/pages/public/blog/navigator/archive/tagview.html
 - lib/starter_web/pages/public/blog/navigator/index.html
-- lib/starter_web/pages/public/features/general.adoc
-- lib/starter_web/pages/public/features/template.adoc
+- lib/starter_web/pages/public/features/core-features.adoc
+- lib/starter_web/pages/public/features/theme-features.adoc
 - lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_biography.adoc
 - lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_fantasy.adoc
 - lib/starter_web/pages/public/learn/bookshelf/article_previewer/viewer_romance.adoc
@@ -3086,7 +3090,6 @@ files:
 - lib/starter_web/pages/public/tour/highlghter_rouge.adoc
 - lib/starter_web/pages/public/tour/icon_fonts.adoc
 - lib/starter_web/pages/public/tour/image_data.adoc
-- lib/starter_web/pages/public/tour/modal_extentions.adoc
 - lib/starter_web/pages/public/tour/quicksearch.adoc
 - lib/starter_web/pages/public/tour/responsive_tables.adoc
 - lib/starter_web/pages/public/tour/typography.adoc

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

@@ -1,126 +0,0 @@
----
-title:                                  Advanced Modals
-title_extention:                        Advanced Bootstrap V5 Modals for J1 Template
-tagline:                                Best Visitor Experience for Your Web
-
-date:                                   2020-11-08
-#last_modified:                         2023-01-01
-
-description: >
-                                        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. Modals are positioned over everything else in the
-                                        document so that messages get the full user's attention.
-keywords: >
-                                        open source, free, template, jekyll, jekyllone, web,
-                                        sites, static, jamstack, bootstrap,
-                                        modals, advanced, extension
-
-categories:                             [ Roundtrip ]
-tags:                                   [ Bootstrap, Modal, Extension ]
-
-image:
-  path:                                 /assets/image/module/attic/1920x1280/bootstrap-modal.jpg
-  width:                                1920
-  height:                               1280
-
-regenerate:                             false
-permalink:                              /pages/public/tour/modals/
-
-resources:                              []
-resource_options:
-  - attic:
-      slides:
-        - url:                          /assets/image/module/attic/1920x1280/bootstrap-modal.jpg
-          alt:                          Bootstrap Framework Logo
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Attribute settings for page content control (e.g includes)
-//
-:documentdir:                           _includes/documents
-
-// Attribute settings for page section control
-//
-:time-num--string:                      5-10
-:time-en--string:                       Minutes
-:time-en--description:                  to read
-:time-de--string:                       Minuten
-:time-de--description:                  Lesezeit
-
-// Additiona page attributes
-// -----------------------------------------------------------------------------
-// :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" %}
-
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-[role="dropcap"]
-J1 Template supports a rich set of advanced Bootstrap Modals that add dialogs
-to your web pages for user notifications. This 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.
-
-[subs=attributes]
-++++
-<div class="video-title">
-  <i class="mdib mdib-clock-outline mdib-24px mr-2"></i>
-  {time-num--string} {time-en--string} {time-en--description}
-</div>
-++++
-
-// Include sub-documents (hidden content)
-// -----------------------------------------------------------------------------
-include::{documentdir}/419_advanced_modals_demo.asciidoc[]
-
-[role="mt-5"]
-== Modal Examples
-
-Improve your reader's experience with important information that be noticed.
-Modals are a great choice to bring the user's attention. Using the J1 Template
-enhanced modal styles, emotional weight is added to the information displayed.
-Ranging from an info level, a simple warning to critical messages.
-
-[TIP]
-====
-For more information on how to use Bootstrap’s JavaScript modal
-plugin, refer to: link:{url-bs-docs--components-modal}[Bootstrap Docs, {browser-window--new}].
-====
-
-// Include sub-documents (table for BS Modal examples)
-include::{documentdir}/410_table_bs_modal_examples.asciidoc[]
-
-
-[role="mt-5"]
-== What next
-
-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"]
-Check out from here what
-link:{url-tour--responsive-tables}[Responsive Tables] can do!