j1-template 2023.0.16 → 2023.1.0

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

@@ -0,0 +1,375 @@
+---
+title:                                  J1 Slick
+tagline:                                Slider Previews
+date:                                   2023-03-02 00:00:00
+description: >
+                                        Slick slider is a popular jQuery plugin for creating responsive and fully
+                                        customizable sliders on websites created by J1. 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.
+
+categories:                             [ Previewer ]
+tags:                                   [ Slick, Slider, Example ]
+
+comments:                               false
+fab_menu_id:                            open_toc
+scrollbar:                              false
+regenerate:                             false
+permalink:                              /pages/public/previewer/slick/
+
+
+resources:                              [ clipboard, lightbox, rouge, slick ]
+resource_options:
+  - attic:
+      padding_top:                      600
+      slides:
+        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+          alt:                          Photo by Ricardo Gomez Angel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Ricardo Gomez Angel
+            href:                       https://unsplash.com/@ripato/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="none" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[role="dropcap"]
+Slick slider is a popular jQuery plugin for creating responsive and fully
+customizable sliders on websites created by J1. 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 sliders are
+compatible with all modern browsers and devices, making it a great choice to
+create a responsive and mobile-friendly website.
+
+[role="mb-4"]
+The slider for J1 Template is a *best friend* for all web programmers because
+of its flexibility, a rich set of callbacks and simple configuration to make
+carousels as individual and powerful as possible. Find by the following examples
+what Slick sliders can do.
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+== General Features
+
+Slick sliders are using various tools and frameworks, such as Bootstrap, jQuery,
+and pure CSS. Slick offers a wide range of customization options, such as slide
+transitions, autoplay, navigation controls to create a visually appealing and
+interactive user experience.
+
+[role="mb-4"]
+* Carousels are fully responsive for configurable screen sizes
+* Separate slider option settings per breakpoint
+* Uses CSS3 if available for a browser, fully functional if not
+* Swipe enabled. Or disabled, if prefered
+* Desktop mouse dragging
+* Infinite looping and Autoplay
+* Fully accessible with arrow key and dots navigation
+* Add, remove, filter and unfilter slides
+* Rich set of callbacks to enable individual behaviour of sliders
+
+
+== Post Slider
+
+A Post Slider for J1 Template is a pre-defined carousel type to display news
+articles on a webpage. It is a popular way to showcase a selection of posts
+visually appealingly and can be useful for highlighting important or *featured*
+content for your post articles.
+
+[role="mb-4"]
+Post sliders pull content from a specific category/group. All Carousels for
+posts display the post category, the post title, the author information and
+date. All Slick sliders for the J1 Theme can be easily customized in various
+ways, such as changing the number of posts displayed, the slider speed, or
+the navigation options like *Arrows* and *Dots*.
+
+.Asciidoc configuration
+[source, config, role="noclip mb-3"]
+----
+slick::post_slider[]
+----
+
+.Post Silder + Autoplay + Arrows (responsive)
+slick::post_slider[role="mb-4"]
+
+.Configuration settings (YAML)
+[source, yaml, role="noclip mb-4"]
+----
+# ------------------------------------------------------------------------------
+# POST slider
+#
+- slider:
+  enabled:                          true
+
+  id:                               post_slider
+  type:                             post
+  group:                            Life
+
+  # ----------------------------------------------------------------------------
+  # Slider options
+  #
+  options:
+    autoplay:                       true
+    slidesToShow:                   3
+    slidesToScroll:                 1
+    arrows:                         true
+    dots:                           false
+    responsive:                     true
+
+  # ----------------------------------------------------------------------------
+  # Reponsive options
+  #
+  responsive:
+    - breakpoint:
+      settings:
+        breakOn:                    1024
+        slidesToShow:               2
+        slidesToScroll:             2
+    - breakpoint:
+      settings:
+        breakOn:                    600
+        slidesToShow:               1
+        slidesToScroll:             1
+        dots:                       true
+    - breakpoint:
+      settings:
+        breakOn:                    480
+        slidesToShow:               1
+        slidesToScroll:             1
+
+----
+
+[role="mb-4"]
+Posts sliders typically used on the homepage of a website, within blog posts
+or articles, or on dedicated archive or category pages. They can increase
+user engagement and keep visitors on a website for longer by presenting
+content dynamically and visually appealingly.
+
+
+== Example Slider
+
+Responsive sliders are carousels designed to adapt and resize automatically
+to fit different screen sizes and devices, such as desktops, laptops, tablets,
+and smartphones. They are created using responsive design techniques, allowing
+web developers to create a single slider that can be optimized for various
+devices without needing separate versions or code.
+
+[role="mb-4"]
+Responsive Slick sliders can be useful for ensuring that content is displayed
+correctly and consistently across different devices and for providing an
+optimal user experience for all visitors to a website. They use techniques
+such as fluid grid layouts, flexible images, and media queries to adjust the
+slider size and layout based on the screen size and orientation of the device.
+
+.Asciidoc configuration
+[source, config, role="noclip mb-2"]
+----
+slick::example_slider_arrows_dots[role="mb-5"]
+----
+
+.Example Silder using Arrows + Dots (responsive)
+slick::example_slider_arrows_dots[role="mb-5"]
+
+.Configuration settings (YAML)
+[source, yaml, role="noclip mb-4"]
+----
+# ------------------------------------------------------------------------------
+# EXAMPLE slider 1
+#
+- slider:
+  enabled:                          true
+
+  id:                               example_slider_arrows_dots
+  type:                             example
+
+  # ----------------------------------------------------------------------------
+  # Slider options
+  #
+  options:
+    arrows:                         true
+    dots:                           true
+    speed:                          300
+    autoplay:                       false
+    slidesToShow:                   3
+    slidesToScroll:                 1
+    responsive:                     true
+
+  # ----------------------------------------------------------------------------
+  # Reponsive options
+  #
+  responsive:
+    - breakpoint:
+      settings:
+        breakOn:                    1024
+        slidesToShow:               2
+        slidesToScroll:             2
+    - breakpoint:
+      settings:
+        breakOn:                    600
+        slidesToShow:               1
+        slidesToScroll:             1
+    - breakpoint:
+      settings:
+        breakOn:                    480
+        slidesToShow:               1
+        slidesToScroll:             1
+----
+
+
+== Image Sliders
+
+An image slider, also known as a slideshow, is a graphical user interface
+element commonly used in web design and development to showcase a series of
+images or visual content dynamically and interactively.
+
+=== Simple Image Slider
+
+[role="mb-4"]
+An image slider 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 sliders can also include
+animation effects, such as fade-in or slide-in transitions between images, to
+make the presentation more engaging and visually appealing.
+
+.Simple Slider + Arrows + Dots
+slick::image_slider[role="mb-5"]
+
+.Configuration settings (YAML)
+[source, yaml, role="noclip mb-4"]
+----
+# ------------------------------------------------------------------------------
+# IMAGE slider
+#
+- slider:
+  enabled:                          true
+
+  id:                               image_slider
+  type:                             image
+  image_base_path:                  /assets/images/modules/gallery/mega_cities
+  image_styles:                     img-fluid img-object--cover g-height-300
+
+  # ----------------------------------------------------------------------------
+  # Lightbox options
+  #
+  lightbox:
+    enabled:                        false
+
+  # ----------------------------------------------------------------------------
+  # Slider options
+  #
+  options:
+    arrows:                         true
+    dots:                           true
+    speed:                          300
+    autoplay:                       false
+    slidesToShow:                   2
+    slidesToScroll:                 2
+    responsive:                     true
+
+  # ----------------------------------------------------------------------------
+  # Reponsive options
+  #
+  responsive:
+    - breakpoint:
+      settings:
+        breakOn:                    1024
+        slidesToShow:               2
+        slidesToScroll:             2
+    - breakpoint:
+      settings:
+        breakOn:                    800
+        slidesToShow:               1
+        slidesToScroll:             1
+    - breakpoint:
+      settings:
+        breakOn:                    480
+        dots:                       false
+        slidesToShow:               1
+        slidesToScroll:             1
+
+  # ----------------------------------------------------------------------------
+  # Slides
+  #
+  slides:
+
+    - slide:                        # slide 1
+      title:                        Jin Mao Tower Shanghai
+      image:                        denys-nevozhai-1_b.jpg
+
+    - slide:                        # slide 2
+      title:                        Sunset over Taipei City
+      image:                        thomas-tucker_b.jpg
+
+     ...
+----
+
+[role="mb-5"]
+Image sliders are commonly used in website headers, landing pages, galleries,
+and product showcases to draw attention to specific content or to provide an
+overview of a collection of images.
+
+
+=== Image Slider + Lightbox
+
+[role="mb-4"]
+A Lightbox is, in general, a helper which displays enlarged, almost
+screen-filling versions of images (or videos) while dimming the remainder
+of the page. The technique, introduced by Lightbox2, gained widespread
+popularity thanks to its simple style. The term lightbox has been employed
+since then for Javascript libraries to support such functionality.
+
+.Slider + Arrows + Dots + Lightbox (responsive)
+slick::image_slider_lightbox[role="mb-5"]
+
+The Lighbox used for Slick sliders is _Slick-Lighbox_, an addon package
+build-in the J1 Module for Slick. The Lighbox is autoatically configured and
+fired on all images of a slider if enabled:
+
+.Configuration settings (YAML)
+[source, yaml, role="noclip mb-4"]
+----
+# ------------------------------------------------------------------------------
+# IMAGE slider  + Lightbox
+#
+- slider:
+  enabled:                          true
+
+  id:                               image_slider_lightbox
+  type:                             image
+  image_base_path:                  /assets/images/modules/gallery/mega_cities
+  styles:                           img-fluid img-object--cover g-height-300
+
+  # ----------------------------------------------------------------------------
+  # Lightbox options
+  #
+  lightbox:
+    enabled:                        true
+    src:                            src
+    itemSelector:                   .card img
+
+  ...
+----
+
+NOTE: For image sliders, the lightbox properties `src` and `itemSelector` are
+to be configured for every instance the lightbox should be applied.

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

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "utls",
-  "version": "2023.0.16",
+  "version": "2023.1.0",
   "description": "J1 Theme Utility Server",
   "homepage": "https://jekyll.one",
   "author": {
@@ -19,7 +19,7 @@
     "yarn": ">=1.6"
   },
   "utilsrv": {
-    "enabled": "true"
+    "enabled": "false"
   },
   "scripts": {
     "audit": "npm audit",

data/lib/starter_web/utilsrv/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "utls",
-  "version": "2023.0.16",
+  "version": "2023.1.0",
   "description": "J1 Theme Utility Server",
   "homepage": "https://jekyll.one",
   "author": {
@@ -19,7 +19,7 @@
     "yarn": ">=1.6"
   },
   "utilsrv": {
-    "enabled": "true"
+    "enabled": "false"
   },
   "scripts": {
     "audit": "npm audit",