j1-template 2023.9.1 → 2023.9.2

data/lib/j1/version.rb

@@ -1,3 +1,3 @@
 module J1
-  VERSION = '2023.9.1'
+  VERSION = '2023.9.2'
 end

data/lib/starter_web/README.md

@@ -379,7 +379,7 @@ This command creates a **initial** project in folder **my-starter**.
   2023-02-28 18:12:12 - GENERATE: Resolving dependencies...
   2023-02-28 18:12:12 - GENERATE: Using bundler 2.3.7
   ...
-  2023-02-28 18:12:12 - GENERATE: Using j1-template 2023.9.1
+  2023-02-28 18:12:12 - GENERATE: Using j1-template 2023.9.2
   2023-02-28 18:12:12 - GENERATE: Bundle complete! 31 Gemfile dependencies, 78 gems now installed.
   2023-02-28 18:12:12 - GENERATE: Bundled gems are installed into `../../.gem`
   2023-02-28 18:12:12 - GENERATE:  C:/Users/xxx/.gem/ruby/3.1.0;C:/DevTools/Ruby31-x64/lib/ruby/gems/3.1.0;
@@ -415,7 +415,7 @@ commands are available as well.
   2023-02-28 18:17:48 - SETUP: Initialize the project ...
   2023-02-28 18:17:48 - SETUP: Be patient, this will take a while ...
   2023-02-28 18:17:49 - SETUP:
-  2023-02-28 18:17:49 - SETUP: > j1@2023.9.1 setup C:\Users\xxx\j1-projects\my-starter
+  2023-02-28 18:17:49 - SETUP: > j1@2023.9.2 setup C:\Users\xxx\j1-projects\my-starter
   2023-02-28 18:17:49 - SETUP: > npm --silent run setup-start && npm --silent run setup-base && run-s -s setup:*
   2023-02-28 18:17:49 - SETUP:
   2023-02-28 18:17:50 - SETUP: Setup project for first use ..
@@ -460,7 +460,7 @@ browser. Let's start the journey ...
   Check setup state of the J1 project ...
   2023-02-28 18:26:18 - SITE: Starting up your site ...
   2023-02-28 18:26:18 - SITE:
-  2023-02-28 18:26:18 - SITE: > j1@2023.9.1 j1-site C:\Users\jadams\j1-projects\my-starter
+  2023-02-28 18:26:18 - SITE: > j1@2023.9.2 j1-site C:\Users\jadams\j1-projects\my-starter
   2023-02-28 18:26:18 - SITE: > run-p -s j1-site:*
   2023-02-28 18:26:18 - SITE:
   2023-02-28 18:26:20 - SITE: Startup UTILSRV ..
@@ -499,7 +499,7 @@ Check setup state of the J1 project ...
 REBUILD: Rebuild the projects website ...
 REBUILD: Be patient, this will take a while ...
 2023-02-28 18:45:09 - REBUILD:
-2023-02-28 18:45:09 - REBUILD: > j1@2023.9.1 rebuild C:\Users\xxx\j1-projects\my-starter
+2023-02-28 18:45:09 - REBUILD: > j1@2023.9.2 rebuild C:\Users\xxx\j1-projects\my-starter
 2023-02-28 18:45:09 - REBUILD: > run-s -s rebuild:* && run-s -s post-rebuild:*
 2023-02-28 18:45:09 - REBUILD:
 2023-02-28 18:45:10 - REBUILD: Rebuild site incremental ..
@@ -547,7 +547,7 @@ using Lerna for all packages:
   2023-02-28 18:29:07 - RESET: Reset the project to factory state ...
   2023-02-28 18:29:07 - RESET: Be patient, this will take a while ...
   2023-02-28 18:29:08 - RESET:
-  2023-02-28 18:29:08 - RESET: > j1@2023.9.1 reset C:\Users\xxx\j1-projects\my-starter
+  2023-02-28 18:29:08 - RESET: > j1@2023.9.2 reset C:\Users\xxx\j1-projects\my-starter
   2023-02-28 18:29:08 - RESET: > run-s -s reset:*
   2023-02-28 18:29:08 - RESET:
   2023-02-28 18:29:08 - RESET: Reset project to factory state ..

data/lib/starter_web/_config.yml

@@ -53,7 +53,7 @@ environment:                            development
 # ------------------------------------------------------------------------------
 # Sets the build version of the site
 #
-version:                                2023.9.1
+version:                                2023.9.2
 
 # copyright
 # ------------------------------------------------------------------------------

data/lib/starter_web/_data/modules/defaults/speak2me.yml

@@ -29,8 +29,11 @@ defaults:
   speechSelector:                       main
   chrome_pause_resume_cycle:            5000
 
+  mobilesDisabled:                      true
+  browsersDisabled:                     []                                      # [Firefox, Opera]
+
   modal:
-    title:                              Text-2-Speech Translation
+    title:                              Text-2-Speech Control
 
     settings:
       voice_settings_title:             Voice Settings
@@ -40,13 +43,13 @@ defaults:
       speak_button_text:                Speak
       speak_button_style:               success
       stop_button_text:                 Stop
-      stop_button_style:                primary
+      stop_button_style:                danger
       pause_button_text:                Pause
-      pause_button_style:               info
+      pause_button_style:               warning
       resume_button_text:               Resume
       resume_button_style:              info
       exit_button_text:                 Close
-      exit_button_style:                warning
+      exit_button_style:                primary
 
       voice_speed_min:                  0.1
       voice_speed_max:                  3.0

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

data/lib/starter_web/_plugins/asciidoctor/carousel-block.rb

@@ -36,7 +36,7 @@ Asciidoctor::Extensions.register do
     def process parent, target, attrs
 
       title_html  = (attrs.has_key? 'title') ? %(<div class="carousel-title">#{attrs['title']}</div>\n) : nil
-      html = %(#{title_html} <carousel id="#{target}" class="#{attrs['role']}"></carousel>)
+      html = %(#{title_html} <div id="#{target}" class="slider #{attrs['role']}"></div>)
       create_pass_block parent, html, attrs, subs: nil
     end
   end

data/lib/starter_web/_plugins/asciidoctor/gallery-block.rb

@@ -34,7 +34,7 @@ Asciidoctor::Extensions.register do
 
     def process parent, target, attrs
       title_html  = (attrs.has_key? 'title') ? %(<div class="gallery-title">#{attrs['title']}</div>\n) : nil
-      html = %(#{title_html} <gallery><div id="#{target}" class="#{attrs['role']}"></div></gallery>)
+      html = %(#{title_html} <div id="#{target}" class="gallery #{attrs['role']}"></div>)
       create_pass_block parent, html, attrs, subs: nil
     end
   end

data/lib/starter_web/_plugins/asciidoctor/lightbox-block.rb

@@ -73,7 +73,7 @@ Asciidoctor::Extensions.register do
       end
       content = html_block.target! # See: https://stackoverflow.com/questions/4961609/extra-to-s-when-using-builder-to-generate-xml
 
-      html = %(#{title_html} <lightbox id="lb-#{target}" class="imageblock"> #{content} </lightbox>)
+      html = %(#{title_html} <div id="lb-#{target}" class="lightbox-block imageblock"> #{content} </div>)
 
       create_pass_block parent, html, attrs, subs: nil
     end

data/lib/starter_web/_plugins/asciidoctor/masonry-block.rb

@@ -38,7 +38,7 @@ Asciidoctor::Extensions.register do
 
     def process parent, target, attrs
       title_html  = (attrs.has_key? 'title') ? %(<div class="masonry-title">#{attrs['title']}</div>\n) : nil
-      html = %(#{title_html} <masonry id="#{target}_parent" class="masonry-parent #{attrs['role']}"></masonry>)
+      html = %(#{title_html} <div id="#{target}_parent" class="masonry masonry-parent #{attrs['role']}"></div>)
       create_pass_block parent, html, attrs, subs: nil
     end
 

data/lib/starter_web/_plugins/asciidoctor/masterslider-block.rb

@@ -38,7 +38,7 @@ Asciidoctor::Extensions.register do
     def process parent, target, attrs
 
       title_html  = (attrs.has_key? 'title') ? %(<div class="carousel-title">#{attrs['title']}</div>\n) : nil
-      html = %(#{title_html} <slider id="p_#{target}" class="master-slider-parent #{attrs['role']}"></slider>)
+      html = %(#{title_html} <div id="p_#{target}" class="slider master-slider-parent #{attrs['role']}"></div>)
       create_pass_block parent, html, attrs, subs: nil
     end
   end

data/lib/starter_web/_plugins/asciidoctor/slick-block.rb

@@ -39,7 +39,7 @@ Asciidoctor::Extensions.register do
     def process parent, target, attrs
 
       title_html  = (attrs.has_key? 'title') ? %(<div class="carousel-title">#{attrs['title']}</div>\n) : nil
-      html = %(#{title_html} <carousel id="#{target}_parent" class="slider-parent #{attrs['role']}"></carousel>)
+      html = %(#{title_html} <div id="#{target}_parent" class="slider slider-parent #{attrs['role']}"></div>)
       create_pass_block parent, html, attrs, subs: nil
     end
   end

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

@@ -391,6 +391,6 @@ end
 
 module Jekyll
   module J1LunrSearch
-    VERSION = '2023.9.1'
+    VERSION = '2023.9.2'
   end
 end

data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1.adoc.erb

@@ -104,7 +104,7 @@ performance beyond the limits of a database-driven site.
 [role="mt-4"]
 === What's different?
 
-A dynamic website uses a database and PHP/MySQL to generate the content of
+A dynamic website uses a database and PHP to generate the content of
 a page when a user requests it. For example, building a website using
 WordPress CMS will result in having a dynamic Website.
 

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1",
-  "version": "2023.9.1",
+  "version": "2023.9.2",
   "description": "J1 Theme Starter Web",
   "homepage": "https://your.site",
   "author": {

data/lib/starter_web/pages/public/learn/roundtrip/present_images.adoc

@@ -79,11 +79,11 @@ resource_options:
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
 Welcome to the preview page focussing on image modules. This page shows
-all the valuable features of the J1 Template to manage your image-based
+all of the powerful features of the J1 Template to manage your image-based
 content using lightboxes, carousels, sliders, grids, and galleries.
 
 The image-related modules of the J1 Template offer a wide range of complex
-functionality based on powerful Open Source libraries like Lightbox V2,
+functionality based on powerful Open Source libraries like Lightbox Version 2,
 Slick Slider, Master Slider, or Masonry Grid and JustifiedGallery to create
 masonry-styled preview maps.
 
@@ -98,14 +98,14 @@ mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
 
 A Lightbox is a helper which displays enlarged, almost screen-filling versions
 of images while dimming the remainder of the page. The technique, introduced
-by Lightbox V2, gained widespread popularity thanks to its simple style. The
-term *Lightbox* has been employed since then for Javascript libraries to
+by Lightbox Version 2, gained widespread popularity thanks to its simple style.
+The term *Lightbox* has been employed since then for Javascript libraries to
 support such functionality.
 
 For J1 Template, different lightbox modules are available:
 
-* Lightbox V2 (default)
-* LightGallery Lightbox (optional)
+* Lightbox Version 2 (default)
+* Lightbox LightGallery (optional)
 * Slick Lightbox (for Slick Carousels only)
 
 The *default* tool employed by J1 Template is Lightbox V2, a Javascript
@@ -127,8 +127,8 @@ under the link:{url-j1-docs--lightbox-module}[Lightbox module, {browser-window--
 === Default Lightbox
 
 [role="mb-4"]
-Find below an example of using the rhe default lightbox used for standalone
-images. See how single (individual) images are linked.
+Find below an example of using the the default lightbox used for standalone
+images. See how individual images are linked.
 
 .Lightbox for standalone images
 lightbox::example-standalone[ 800, {data-images-standalone}, role="mb-4" ]
@@ -164,8 +164,8 @@ gallery::jg_old_times[]
 == J1 Carousel
 
 J1 Carousel is based on OWL Carousel V1 in the latest version. OWL Carousel
-is a clean and neat _jQuery_ slider plugin for creating fully responsive and
-touch-enabled carousel sliders.
+is a powerful jQuery plugin for creating fully responsive and touch-enabled
+carousel sliders.
 
 [role="mt-4"]
 === Simple Text Carousel
@@ -178,20 +178,19 @@ displayed as a slide show: simple text, for example.
 .Text Carousel
 carousel::demo_text_carousel[role="mb-4"]
 
-Important statements or topics can be placed, e.g., on top of an article or
-a paragraph, to give them better visibility. In one line, you can present
+Important statements or topics can be placed on top of an article or
+a paragraph to give them better visibility. In one line, you can present
 many facts to know animated for the reader's attention within a single
-line. No much space is needed!
+line.
 
 [role="mt-4"]
 === Parallax Text Carousel
 
 [role="mb-4"]
-A more visual type of text-based slide show is a parallax text slider. If
-you want to emphasize your statements focussing the meaning, this kind of a
-slide show may be interesting. Image-based slide shows may draw off the
-reader's attention from the text, therefore a pure text-based presentation
-maybe the better choice.
+A more emphasized type of text-based carousel is a parallax text slider. If
+you want to focus the meaning, this kind of a slide show may be interesting.
+Image-based slide shows may draw off the reader's attention from the text,
+therefore a pure text-based presentation maybe the better choice.
 
 .Parallax Text
 carousel::demo_text_carousel_parallax[role="mb-4"]
@@ -228,16 +227,15 @@ carousel::demo_simple[role="mb-4"]
 
 Carousels are used for an exceptionally compact form of image galleries.
 This example shows some pictures having individual caption text and supports
-a lightbox to enlarge images full size. For the example below, an almost simple
-lightbox is used: Lightbox2; or short: lightbox.
+a lightbox to enlarge images full size.
 
 .Image Carousel + Lightbox
 carousel::demo_cats[role="mb-3"]
 
 The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
 features for displaying images. For example, the lightbox can display all
-images (of a carousel) as a group. If one picture is opened in the lightbox,
-others are browsed by easy-to-use control buttons.
+images as a group. If one picture is opened in the lightbox, others are
+browsed by easy-to-use control buttons.
 
 [role="mt-4"]
 === One Slide Carousel + Lightbox
@@ -254,7 +252,7 @@ carousel::demo_oneslide[role="mb-4"]
 == J1 Slick Carousel
 
 [role="mb-4"]
-_Slick_ is a popular jQuery plugin for creating responsive and fully
+Slick is a popular jQuery plugin for creating responsive and fully
 customizable carousels. It allows developers to easily create beautiful
 and dynamic carousels that can display images, videos, or any other type
 of content in a visually appealing way.
@@ -329,11 +327,11 @@ link:{url-j1-slick-previewer}[Slick Previewer, {browser-window--new}],
 [[masterSlider]]
 == J1 Master Slider
 
-The Javascript library _Master Slider_ is a 3rd party plugin fully integrated
-into the J1 Template by the module `masterslider`. J1 Template uses the *free*
-version *MS Lite*. The free version of Master Slider does *not* support
-all features: the functionality of  *filters*, *layouts* are limited and no
-*overlay* techniques are supported by MS Lite.
+Masterslider is a jQuery plugin fully integrated into the J1 Template.
+Jekyll One uses the *free* version of Masterslider well-known as MS Lite.
+The lite version does *not* support all features of the full product.
+The functionality of filters and  layouts are limited and no overlay
+techniques are supported by the MS Lite version.
 
 [role="mt-4"]
 [[carousel_versus_slider]]
@@ -398,26 +396,19 @@ masterslider::ms_00003[]
 
 [role="mt-4"]
 [[thumb_images]]
-=== MS Slider using ThumbImages
+=== [role="mt-4"] Slider using Thumb Elements
 
 To give the users better control over a slideshow, sliders provide complex UI
-elements like *thumbs* placed side-by-side (left|right), at the top, or at
-the bottom of a slideshow. Find two examples to control a slideshow by
-*thumb images*.
+elements to place dor example mini-images or short text elements side-by-side
+left or right, or at the bottom of a slideshow. Find two examples below how
+to control such a carousel element.
 
-.Slider using ThumbImages
-masterslider::ms_00004[]
+.Image controls
+masterslider::ms_00004[role="mb-5"]
 
-[role="mt-4"]
-[[thumb_info]]
-=== MS Slider using ThumbInfo
-
-To give the users better control over a slideshow, MS Slider provides
-complex UI elements like thumbs placed side-by-side (left|right), at the
-top, or at the bottom of a slideshow.
+.Text controls
+masterslider::ms_00007[role="mt-4 mb-5"]
 
-.Slider using ThumbInfo
-masterslider::ms_00007[]
 
 [role="mt-4"]
 [[partialview]]
@@ -445,32 +436,22 @@ documents:
 [role="mt-5"]
 == J1 Masonry
 
-J1 Masonry is based on the popular JavaScript library _Masonry_,  enabling
-the creation of responsive, dynamic grid layouts of *groups* of content
-elements. It uses a unique algorithm to arrange elements vertically, then
-horizontally in a responsive grid.
+J1 Masonry is a great tool to create dynamic image galleries. Image galleries
+are popular on many websites, and masonry can be a useful tool for creating
+dynamic and visually appealing galleries.
 
-The module provides a flexible configuration to enabling developers to
-customize the layout, adjust the column width, gutter size, and add
-animations.
-
-[role="mt-4"]
-=== Grid of Images
+[role="mb-4"]
+By using masonry, you can create a gallery that displays images of different
+sizes in an aesthetically pleasing and functional way.
 
-Bootstrap cards are a popular component of the Bootstrap front-end framework
-that provides a flexible and customizable way to display content on a website.
-Find an example below of how Bootstrap cards can be combined with the Masonry
-module for a fully responsive image grid.
+.Image Cards
+masonry::card_example[role="mb-5"]
 
 [TIP]
 ====
-Resize your browser window for the width to see the J1 Masonry module
-in action.
+Change the size of your current browser width to see what will happen!
 ====
 
-.Grid of Images
-masonry::card_example[]
-
 
 [role="mt-5"]
 == JustifiedGallery
@@ -494,6 +475,7 @@ You'll have seen it in use all over the Internet!
 .Masonry Grid Gallery
 gallery::jg_customizer[]
 
+
 [role="mt-5"]
 == What next