j1-template 2023.1.0 → 2023.2.1

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

@@ -15,7 +15,7 @@ keywords: >
                                         Roundtrip
 
 categories:                             [ Roundtrip ]
-tags:                                   [ Module, Carousel, Lightbox, Image, Slider ]
+tags:                                   [ Module, Carousel, Lightbox, Image, Slider, Slick ]
 
 image:
   path:                                 /assets/images/modules/attics/1920x1280/quino-al-2.jpg
@@ -30,7 +30,7 @@ permalink:                              /pages/public/learn/roundtrip/present_im
 resources:                              [
                                           animate, clipboard, carousel, comments,
                                           justifiedGallery, lightbox, lightGallery,
-                                          masterslider, rouge
+                                          masterslider, rouge, slick
                                         ]
 resource_options:
   - attic:
@@ -63,7 +63,7 @@ resource_options:
 :url-j1-docs--masterslider-module:      https://jekyll.one/pages/public/manuals/modules/masterslider/
 
 :url-j1-masterslider-slider-previewer:  https://jekyll.one/pages/public/previewer/masterslider/
-
+:url-j1-slick-previewer:                /pages/public/previewer/slick/
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -144,6 +144,7 @@ LightGallery can do this by the following example.
 
 gallery::jg_old_times[ role="mb-4 wm-800" ]
 
+
 == J1 Carousel
 
 J1 Carousel is based on OWL Carousel V1 in the latest (and unfortunately
@@ -233,6 +234,53 @@ many images the show contains.
 .One Slide Carousel
 carousel::demo_oneslide[role="mb-4"]
 
+
+== J1 Slick Carousel
+
+[role="mb-4"]
+_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. The plugin is designed to be
+lightweight, fast, and easy to use, making it a popular choice for all web
+developers. It has many features, including multiple navigation options,
+lazy loading, or autoplay. Slick carousels are compatible with all modern
+browsers and devices, making it a great choice to create a responsive and
+mobile-friendly website.
+
+=== Slick Image Carousel
+
+[role="mb-4"]
+An _Slick_ image carousel typically consists of a container with images and
+a navigation system, including buttons, arrows, or dots that allow users to
+move back and forth between images or select a specific image. Image carousels
+can also include animation effects, such as fade-in or slide-in transitions
+between images, to make the presentation more engaging and visually appealing.
+
+.Carousel + Arrows + Dots + Captions + Lightbox
+slick::image_carousel_mega_cities_lightbox[role="mb-5"]
+
+=== Slick Carousel from Collections
+
+[role="mb-4"]
+A carousel from a collection for J1 Template is a *pre-defined* carousel
+type to display collection *articles* on a webpage as a carousel. Collection
+carousels pull content from a specific *collection*. All Carousels
+for collections display the article image and a link to the article as a
+caption. All Slick carousels for the J1 Theme can be easily customized in
+various ways, such as changing the slider speed, or the navigation options
+like *Arrows* and *Dots*.
+
+.Collection Biography + Arrows + Dots + Gutters
+slick::collection_carousel_biography[role="mb-3"]
+
+=== More about Slick Carousels
+
+[role="mb-4"]
+If you're interested to learn more about _Slick_, go previewer page
+link:{url-j1-slick-previewer}[Slick Previewer, {browser-window--new}],
+
+
 == J1 Master Slider
 
 The Javascript tool _Master Slider_ is a 3rd party plugin fully integrated
@@ -323,13 +371,14 @@ masterslider::ms_00009[role="mb-5"]
 
 === More about Master Slider
 
+[role="mb-5"]
 If you're interested to learn more about MS Slider, go for the following
 documents:
 
 * MS Slider link:{url-j1-masterslider-slider-previewer}[Previewer, {browser-window--new}]
 * MS Slider link:{url-j1-docs--masterslider-module}[Module documentation, {browser-window--new}]
 
-[role="mt-5"]
+
 == JustifiedGallery
 
 link:{url-justified-gallery--home}[JustifiedGallery, {browser-window--new}]

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

@@ -22,7 +22,7 @@ image:
   alt:                                  Photo by Markus Spiske on Unsplash
 
 flowtext:                               false
-fab_menu_id:                            page_ctrl
+fab_menu_id:                            open_toc
 scrollbar:                              true
 
 regenerate:                             false

data/lib/starter_web/pages/public/plans/plans.adoc

@@ -1,13 +1,12 @@
 ---
 title:                                  J1 Starter
-tagline:                                Plan Setails
+tagline:                                Plan Details
 date:                                   2020-11-03 00:00:00
 description: >
-                                        A good user experience browsing a Web site is one of the most important
-                                        features a website offers as a must, besides excellent content. Presenting
-                                        content at its best on all devices for all window sizes makes a great Web
-                                        brilliant. J1 Theme supports your Web for full responsiveness, for the
-                                        best user experience on all modern devices.
+                                        Service plans give customers a clear understanding of what services
+                                        they will receive, how they will be provided, and what they will cost. Service
+                                        plans help ensure that the service provider and the customer are on the same
+                                        page and can work together effectively.
 
 categories:                             [ Info ]
 tags:                                   [ Plan, Template ]
@@ -17,7 +16,7 @@ robots:
   follow:                               false
 
 image:
-  path:                                 /assets/images/modules/attics/gift-from-hand-1920x1280.jpg
+  path:                                 /assets/images/modules/attics/1920x1280/kira-auf-der-heide.jpg
   width:                                1920
   height:                               1280
   alt:                                  Plan Details
@@ -33,8 +32,12 @@ resource_options:
   - attic:
       padding_top:                      600
       slides:
-        - url:                          /assets/images/modules/attics/gift-from-hand-1920x1280.jpg
-          alt:                          Plan Details
+        - url:                          /assets/images/modules/attics/1920x1280/kira-auf-der-heide.jpg
+          alt:                          Photo by Kira auf der Heide on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Kira auf der Heide
+            href:                       https://unsplash.com/@kadh
 ---
 
 // Page Initializer
@@ -61,15 +64,25 @@ resource_options:
 // -----------------------------------------------------------------------------
 == Plans
 
-lorem:sentences[5]
+Service plans are typically contracts or agreements between a service provider
+and a customer, outlining the terms and conditions of a particular service or
+set of services that will be provided.
 
-lorem:sentences[3]
+Service plans may include details such as the scope of the service, the level
+of support provided, the duration of the contract, the payment terms, and any
+additional fees or charges. Some service plans may also include warranties or
+guarantees, outlining what the customer can expect regarding quality or
+reliability.
+
+Overall, service plans give customers a clear understanding of what services
+they will receive, how they will be provided, and what they will cost. Service
+plans help ensure that the service provider and the customer are on the same
+page and can work together effectively.
 
 === Starter
 
 lorem:sentences[5]
 
-
 === Base
 
 lorem:sentences[5]

data/lib/starter_web/pages/public/previewer/preview_bootstrap_theme.adoc

@@ -18,7 +18,7 @@ image:
   alt:                                  Photo by Clem Onojeghuo on Unsplash
 
 comments:                               false
-fab_menu_id:                            page_ctrl
+fab_menu_id:                            open_toc
 scrollbar:                              false
 regenerate:                             false
 permalink:                              /pages/public/previewer/current_theme/
@@ -1686,11 +1686,11 @@ ifeval::[{navs} == true]
 == Navs
 
 Navigation available in Bootstrap shares general markup and styles, from the
-base .nav class to the active and disabled states. Swap modifier classes to
+base `.nav` class to the active and disabled states. Swap modifier classes to
 switch between each style.
 
-The base .nav component is built with a flexbox and provides a strong foundation
-for building all navigation components. It includes some style
+The base `.nav` component is built with a flexbox and provides a strong
+foundation for building all navigation components. It includes some style
 overrides (for working with lists), link padding for larger hit areas,
 and basic disabled styling.
 
@@ -1700,51 +1700,43 @@ link:{url-bs-docs--components-navs}[Bootstrap Docs {char-middot} Navs, {browser-
 ifeval::[{navs_tabs} == true]
 === Tabs
 
-Tabs takes the basic nav from above and adds the .nav-tabs class to generate
-a tabbed interface. Use them to create tabbable regions with our tab
+Tabs takes the basic nav from above and adds the `.nav-tabs` class to generate
+a tabbed interface. Use them to create tabbable regions with the BS5 tab
 JavaScript plugin.
 
 ++++
 <div class="doc-example mb-3">
-  <ul class="nav nav-tabs mb-3">
-    <li class="nav-item">
-      <a class="link-no-decoration nav-link active" data-bs-toggle="tab" href="#home">Home</a>
+
+  <ul id="myTab" class="nav nav-tabs mb-3" role="tablist">
+    <li class="nav-item mr-1" role="presentation">
+      <button id="home-tab" class="nav-link active" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
     </li>
-    <li class="nav-item">
-      <a class="link-no-decoration nav-link" data-bs-toggle="tab" href="#profile">Profile</a>
+    <li class="nav-item mr-1" role="presentation">
+      <button id="profile-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false" tabindex="-1">Profile</button>
     </li>
-    <li class="nav-item dropdown">
-      <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
-        role="button"
-        aria-haspopup="true" aria-expanded="false">
-        Dropdown
-      </a>
-      <div class="dropdown-menu">
-        <a href="javascript:void(0)" class="dropdown-item">Action</a>
-        <a href="javascript:void(0)" class="dropdown-item">Another action</a>
-        <a href="javascript:void(0)" class="dropdown-item">Something else here</a>
-        <div class="dropdown-divider"></div>
-        <a href="javascript:void(0)" class="dropdown-item">Separated link</a>
-      </div>
+    <li class="nav-item mr-1" role="presentation">
+      <button id="contact-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false" tabindex="-1">Contact</button>
     </li>
-    <li class="nav-item">
-      <a href="javascript:void(0)" class="nav-link disabled">Disabled</a>
+    <li class="nav-item mr-1" role="presentation">
+      <button id="disabled-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled="" tabindex="-1">Disabled</button>
     </li>
   </ul>
+
   <div id="myTabContent" class="tab-content">
-    <div class="tab-pane fade active show" id="home">
-      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+    <div id="home-tab-pane" class="tab-pane fade active show" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
-    <div class="tab-pane fade" id="profile">
-      <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
+    <div id="profile-tab-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
-    <div class="tab-pane fade" id="dropdown1">
-      <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
+    <div id="contact-tab-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
-    <div class="tab-pane fade" id="dropdown2">
-      <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
+    <div id="disabled-tab-pane" class="tab-pane fade" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Disabled tab's</strong> associated content.</p>
     </div>
   </div>
+
 </div>
 ++++
 endif::[]
@@ -1752,61 +1744,41 @@ endif::[]
 ifeval::[{navs_pills} == true]
 === Pills
 
-Take that same HTML as Tabs, but use .nav-pills class instead.
+Take that same HTML as Tabs, but use `.nav-pills` class instead.
 
 ++++
 <div class="doc-example mb-3">
-  <div class="row mb-5">
 
-    <div class="col-md-6 p-0">
-      <h4 class="notoc">Standard Pills</h4>
-      <ul class="nav nav-pills">
-        <li class="nav-item mr-1 mb-2">
-          <a href="javascript:void(0)" class="nav-link active">Active</a>
-        </li>
-        <li class="nav-item dropdown mr-1">
-          <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-          <div class="dropdown-menu">
-            <a href="javascript:void(0)" class="dropdown-item">Action</a>
-            <a href="javascript:void(0)" class="dropdown-item">Another action</a>
-            <a href="javascript:void(0)" class="dropdown-item">Something else here</a>
-            <div class="dropdown-divider"></div>
-            <a href="javascript:void(0)" class="dropdown-item">Separated link</a>
-          </div>
-        </li>
-        <li class="nav-item mr-1 mb-2">
-          <a href="javascript:void(0)" class="nav-link">Link</a>
-        </li>
-        <li class="nav-item mr-1 mb-2">
-          <a href="javascript:void(0)" class="nav-link disabled">Disabled</a>
-        </li>
-      </ul>
+  <ul id="pills-tab" class="nav nav-pills mb-3" role="tablist">
+    <li class="nav-item mr-1" role="presentation">
+      <button id="pills-home-tab" class="nav-link active" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
+    </li>
+    <li class="nav-item mr-1" role="presentation">
+      <button id="pills-profile-tab" class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false" tabindex="-1">Profile</button>
+    </li>
+    <li class="nav-item mr-1" role="presentation">
+      <button id="pills-contact-tab" class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false" tabindex="-1">Contact</button>
+    </li>
+    <li class="nav-item mr-1" role="presentation">
+      <button id="pills-disabled-tab" class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled="" tabindex="-1">Disabled</button>
+    </li>
+  </ul>
+
+  <div id="pills-tabContent" class="tab-content">
+    <div id="pills-home" class="tab-pane fade active show" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
-    <div class="col-md-6 p-0">
-      <h5 class="notoc">Stacked Pills (vertical)</h5>
-      <ul class="nav nav-pills flex-column mb-4">
-        <li class="nav-item mb-2">
-          <a href="javascript:void(0)" class="nav-link active">Active</a>
-        </li>
-        <li class="nav-item dropdown mb-1">
-          <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-          <div class="dropdown-menu">
-            <a href="javascript:void(0)" class="dropdown-item">Action</a>
-            <a href="javascript:void(0)" class="dropdown-item">Another action</a>
-            <a href="javascript:void(0)" class="dropdown-item">Something else here</a>
-            <div class="dropdown-divider"></div>
-            <a href="javascript:void(0)" class="dropdown-item">Separated link</a>
-          </div>
-        </li>
-        <li class="nav-item mb-2">
-          <a href="javascript:void(0)" class="nav-link">Link</a>
-        </li>
-        <li class="nav-item mb-2">
-          <a href="javascript:void(0)" class="nav-link disabled">Disabled</a>
-        </li>
-      </ul>
+    <div id="pills-profile" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    </div>
+    <div id="pills-contact" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
+    </div>
+    <div id="pills-disabled" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">
+      <p>This is some placeholder content the <strong>Disabled tab's</strong> associated content.</p>
     </div>
   </div>
+
 </div>
 ++++
 endif::[]

data/lib/starter_web/utilsrv/_defaults/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "utls",
-  "version": "2023.1.0",
+  "version": "2023.2.1",
   "description": "J1 Theme Utility Server",
   "homepage": "https://jekyll.one",
   "author": {

data/lib/starter_web/utilsrv/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "utls",
-  "version": "2023.1.0",
+  "version": "2023.2.1",
   "description": "J1 Theme Utility Server",
   "homepage": "https://jekyll.one",
   "author": {