j1-template 2023.1.0 → 2023.2.1

data/lib/starter_web/_data/modules/slick.yml

@@ -26,35 +26,139 @@ settings:
   enabled:                              true
 
   # ----------------------------------------------------------------------------
-  # Slider settings
+  # Global Lightbox options
+  #
+  lightbox:
+    enabled:                            false
+    caption:                            caption
+    background:                         false
+
+  # ----------------------------------------------------------------------------
+  # Caption options (Carousel)
+  #
+  captions:
+    enabled:                            true
+
   # ----------------------------------------------------------------------------
-  sliders:
+  # Carousel settings
+  # ----------------------------------------------------------------------------
+  carousels:
 
     # --------------------------------------------------------------------------
-    # POST slider
+    # COLLECTION Carousel (portfolio)
     #
-    - slider:
+    - carousel:
       enabled:                          true
 
-      id:                               post_slider
-      type:                             post
-      group:                            Life                                    # generate slides only for group (specified in article/post)
+      id:                               collection_carousel_portfolio
+      type:                             collection
+      gutters:                          1                                       # [0 .. 5]
+      collection:                       portfolio                               # generate grid elements (articles) for the collection specified
+      translate_links:                  false                                   # default: false
+      link_new_window:                  true                                    # default: false
+      image_styles:                     img-fluid img-object--cover img-object--w500 g-height-500
 
       # ------------------------------------------------------------------------
-      # Lightbox options
+      # Carousel options
       #
-      lightbox:
-        enabled:                        false
+      options:
+        autoplay:                       false
+        arrows:                         true
+        dots:                           false
+        slidesToShow:                   3
+        slidesToScroll:                 3
+        responsive:                     true                                    # enables reponsive options to generate breakpoint properties for slick()
 
       # ------------------------------------------------------------------------
-      # Slider options
+      # 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
+
+    # --------------------------------------------------------------------------
+    # COLLECTION Carousel (biography)
+    #
+    - carousel:
+      enabled:                          true
+
+      id:                               collection_carousel_biography
+      type:                             collection
+      gutters:                          1                                       # [0 .. 5]
+      collection:                       biography                               # generate grid elements (articles) for the collection specified
+      translate_links:                  false                                   # default: false
+      link_new_window:                  true                                    # default: false
+      image_styles:                     img-fluid img-object--cover img-object--w500 g-height-500
+
+      # ------------------------------------------------------------------------
+      # Carousel options
       #
       options:
-        autoplay:                       true
+        autoplay:                       false
+        arrows:                         true
+        dots:                           true
         slidesToShow:                   3
-        slidesToScroll:                 1
+        slidesToScroll:                 3
+        responsive:                     true                                    # enables reponsive options to generate breakpoint properties for slick()
+
+      # ------------------------------------------------------------------------
+      # 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
+
+    # --------------------------------------------------------------------------
+    # COLLECTION Carousel (fantasy)
+    #
+    - carousel:
+      enabled:                          true
+
+      id:                               collection_carousel_fantasy
+      type:                             collection
+      gutters:                          1                                       # 0 .. 5
+      collection:                       fantasy                                 # generate grid elements (articles) for the collection specified
+      translate_links:                  false                                   # default: false
+      link_new_window:                  true                                    # default: false
+      image_styles:                     img-fluid img-object--cover img-object--w500 g-height-500
+
+      # ------------------------------------------------------------------------
+      # Carousel options
+      #
+      options:
+        autoplay:                       false
         arrows:                         true
         dots:                           false
+        slidesToShow:                   3
+        slidesToScroll:                 3
         responsive:                     true                                    # enables reponsive options to generate breakpoint properties for slick()
 
       # ------------------------------------------------------------------------
@@ -79,22 +183,113 @@ settings:
             slidesToScroll:             1
 
     # --------------------------------------------------------------------------
-    # EXAMPLE slider 1
+    # COLLECTION Carousel (romance)
     #
-    - slider:
+    - carousel:
       enabled:                          true
 
-      id:                               example_slider_arrows_dots
-      type:                             example
+      id:                               collection_carousel_romance
+      type:                             collection
+      gutters:                          1                                       # 0 .. 5
+      collection:                       romance                                 # generate grid elements (articles) for the collection specified
+      translate_links:                  false                                   # default: false
+      link_new_window:                  true                                    # default: false
+      image_styles:                     img-fluid img-object--cover img-object--w500 g-height-500
 
       # ------------------------------------------------------------------------
-      # Lightbox options
+      # Carousel options
       #
-      lightbox:
-        enabled:                        false
+      options:
+        autoplay:                       false
+        arrows:                         true
+        dots:                           true
+        slidesToShow:                   3
+        slidesToScroll:                 3
+        responsive:                     true                                    # enables reponsive options to generate breakpoint properties for slick()
 
       # ------------------------------------------------------------------------
-      # Slider options
+      # 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
+
+    # --------------------------------------------------------------------------
+    # POST Carousel (Life)
+    #
+    - carousel:
+      enabled:                          true
+
+      id:                               post_carousel_life
+      type:                             post
+      gutters:                          1                                       # 0 .. 5
+      group:                            Life                                    # generate slides only for group (specified in article/post)
+      image_styles:                     img-fluid img-object--cover
+      image_height:                     300px
+      translate_links:                  false                                   # default: false
+      link_new_window:                  true                                    # default: false
+
+      # ------------------------------------------------------------------------
+      # Carousel options
+      #
+      options:
+        autoplay:                       false
+        arrows:                         true
+        dots:                           true
+        slidesToShow:                   3
+        slidesToScroll:                 1
+        responsive:                     true                                    # enables reponsive options to generate breakpoint properties for slick()
+
+      # ------------------------------------------------------------------------
+      # 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
+
+    # --------------------------------------------------------------------------
+    # EXAMPLE Carousel
+    #
+    - carousel:
+      enabled:                          true
+
+      id:                               example_carousel_arrows_dots
+      type:                             example
+      gutters:                          1
+      style:                            h3
+      height:                           150px
+      slides:                           9
+
+      # ------------------------------------------------------------------------
+      # Carousel options
       #
       options:
         arrows:                         true
@@ -126,21 +321,18 @@ settings:
             slidesToShow:               1
             slidesToScroll:             1
 
-      # ------------------------------------------------------------------------
-      # Slides
-      #
-      slides:                           9
-
     # --------------------------------------------------------------------------
-    # IMAGE slider
+    # IMAGE Carousel
     #
-    - slider:
+    - carousel:
       enabled:                          true
 
-      id:                               image_slider
+      id:                               image_carousel_simple
       type:                             image
+      gutters:                          0                                       # 0 .. 5
       image_base_path:                  /assets/images/modules/gallery/mega_cities
-      image_styles:                     img-fluid img-object--cover g-height-300
+      image_styles:                     img-fluid img-object--cover
+      image_height:                     300px
 
       # ------------------------------------------------------------------------
       # Lightbox options
@@ -149,13 +341,20 @@ settings:
         enabled:                        false
 
       # ------------------------------------------------------------------------
-      # Slider options
+      # Caption options
+      #
+      captions:
+        enabled:                        false
+        position:                       bottom                                  # top|bottom|center
+
+      # ------------------------------------------------------------------------
+      # Carousel options
       #
       options:
-        arrows:                         true
-        dots:                           true
-        speed:                          300
         autoplay:                       false
+        arrows:                         false
+        dots:                           false
+        speed:                          300
         slidesToShow:                   2
         slidesToScroll:                 2
         responsive:                     true
@@ -187,57 +386,64 @@ settings:
       slides:
 
         - slide:                        # slide 1
-          title:                        Jin Mao Tower Shanghai
           image:                        denys-nevozhai-1_b.jpg
+          caption:                      Man posing at the rooftop of Jin Mao Tower Shanghai - China
 
         - slide:                        # slide 2
-          title:                        Sunset over Taipei City
           image:                        thomas-tucker_b.jpg
+          caption:                      Sunset over Taipei City - Taiwan
 
         - slide:                        # slide 3
-          title:                        Chicago
           image:                        emmad-mazhari_b.jpg
+          caption:                      Chicago - United States
 
         - slide:                        # slide 4
-          title:                        The Queen Bee at the Eureka Tower
           image:                        johan-mouchet_b.jpg
+          caption:                      The Queen Bee at the Eureka Tower - Melbourne Southbank Australia
 
         - slide:                        # slide 5
-          title:                        Shanghai
           image:                        federico-rizzarelli_b.jpg
+          caption:                      Shanghai - China
 
         - slide:                        # slide 6
-          title:                        Shangri-La Hotel Jakarta
           image:                        gints-gailis_b.jpg
+          caption:                      Shangri-La Hotel Jakarta - Indonesia
 
 
     # --------------------------------------------------------------------------
-    # IMAGE slider  + Lightbox
+    # IMAGE Carousel + Captions + Lightbox
     #
-    - slider:
+    - carousel:
       enabled:                          true
 
-      id:                               image_slider_lightbox
+      id:                               image_carousel_full
       type:                             image
+      gutters:                          1                                       # 0 .. 5
       image_base_path:                  /assets/images/modules/gallery/mega_cities
-      image_styles:                     img-fluid img-object--cover g-height-300
+      image_styles:                     img-fluid img-object--cover
+      image_height:                     300px
 
       # ------------------------------------------------------------------------
       # Lightbox options
       #
       lightbox:
         enabled:                        true
-        src:                            src
-        itemSelector:                   .card img
 
       # ------------------------------------------------------------------------
-      # Slider options
+      # Caption options
+      #
+      captions:
+        enabled:                        true
+        position:                       bottom                                  # top|bottom|center
+
+      # ------------------------------------------------------------------------
+      # Carousel options
       #
       options:
+        autoplay:                       false
         arrows:                         true
         dots:                           true
         speed:                          300
-        autoplay:                       false
         slidesToShow:                   2
         slidesToScroll:                 2
         responsive:                     true
@@ -268,28 +474,28 @@ settings:
       slides:
 
         - slide:                        # slide 1
-          title:                        Jin Mao Tower Shanghai
           image:                        denys-nevozhai-1_b.jpg
+          caption:                      Man posing at the rooftop of Jin Mao Tower Shanghai - China
 
         - slide:                        # slide 2
-          title:                        Sunset over Taipei City
           image:                        thomas-tucker_b.jpg
+          caption:                      Sunset over Taipei City - Taiwan
 
         - slide:                        # slide 3
-          title:                        Chicago
           image:                        emmad-mazhari_b.jpg
+          caption:                      Chicago - United States
 
         - slide:                        # slide 4
-          title:                        The Queen Bee at the Eureka Tower
           image:                        johan-mouchet_b.jpg
+          caption:                      The Queen Bee at the Eureka Tower - Melbourne Southbank Australia
 
         - slide:                        # slide 5
-          title:                        Shanghai
           image:                        federico-rizzarelli_b.jpg
+          caption:                      Shanghai - China
 
         - slide:                        # slide 6
-          title:                        Shangri-La Hotel Jakarta
           image:                        gints-gailis_b.jpg
+          caption:                      Shangri-La Hotel Jakarta - Indonesia
 
 # ------------------------------------------------------------------------------
 # END config

data/lib/starter_web/_data/puma/config.rb

@@ -1,3 +1,13 @@
 # Puma configuration (file)
+# ------------------------------------------------------------------------------
+
+# start puma
 #
 bind 'tcp://' + ENV["INTERFACE"] + ':' + ENV["PORT"]
+
+# Code to run after puma is booted
+#
+on_booted do
+  # configuration here
+  # puts 'After booting ...'
+end

data/lib/starter_web/_data/resources.yml

@@ -1955,6 +1955,7 @@ resources:
       data:
         css:                            [
                                           modules/slick/lightbox/css/slick-lightbox,
+                                          modules/slick/lightbox/css/theme/uno,
                                           modules/slick/slider/css/slick,
                                           modules/slick/slider/css/theme/uno
                                         ]

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

data/lib/starter_web/_includes/attributes.asciidoc

@@ -442,6 +442,30 @@ tag::urls[]
 :url-nodejs--​windows-download-remommended:        https://nodejs.org/dist/v12.22.0/node-v12.22.0-x64.msi
 :url-j1--​template-starter:                        https://github.com/jekyll-one/j1-template-starter
 
+:placeholder_image_100x100:                       https://placehold.it/100x100/
+:placeholder_image_200x200:                       https://placehold.it/200x200/
+:placeholder_image_300x300:                       https://placehold.it/300x300/
+:placeholder_image_400x400:                       https://placehold.it/400x400/
+:placeholder_image_500x500:                       https://placehold.it/500x500/
+
+:placeholder_image_100x600:                       https://placehold.it/100x600/
+:placeholder_image_200x600:                       https://placehold.it/200x600/
+:placeholder_image_300x600:                       https://placehold.it/300x600/
+:placeholder_image_400x600:                       https://placehold.it/400x600/
+:placeholder_image_500x600:                       https://placehold.it/500x600/
+
+:placeholder_kitten_100x100:                      https://placekitten.com/100/100/
+:placeholder_kitten_200x200:                      https://placekitten.com/200/200/
+:placeholder_kitten_300x300:                      https://placekitten.com/300/300/
+:placeholder_kitten_400x400:                      https://placekitten.com/400/400/
+:placeholder_kitten_500x500:                      https://placekitten.com/500/500/
+
+:placeholder_kitten_100x600:                      https://placekitten.com/100/600/
+:placeholder_kitten_200x600:                      https://placekitten.com/200/600/
+:placeholder_kitten_300x600:                      https://placekitten.com/300/600/
+:placeholder_kitten_400x600:                      https://placekitten.com/400/600/
+:placeholder_kitten_500x600:                      https://placekitten.com/500/600/
+
 end::urls[]
 
 

data/lib/starter_web/_includes/custom/static/readme

@@ -1 +1 @@
-Place already rendered HTML data files in this folder.
+Place custom static, already rendered HTML data files in this folder.

data/lib/starter_web/_includes/custom/templates/collection_panel.html

@@ -0,0 +1,131 @@
+<!--
+ # -----------------------------------------------------------------------------
+ #  ~/assets/custom/content/templates/collection_panel.html
+ #
+ #  Product/Info:
+ #  http://jekyll.one
+ #
+ #  Copyright (C) 2023 Juergen Adams
+ #
+ #  J1 Theme is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
+ #
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #    liquid_var:  {{liquid_var | debug}}
+ # -----------------------------------------------------------------------------
+-->
+
+{% comment %} Process YML config data
+================================================================================ {% endcomment %}
+
+{% comment %} Set collection data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign collection_name             = "portfolio" %}
+
+{% comment %} Set grid data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign grid_title                  = collection_name | capitalize %}
+{% assign grid_tagline                = "what i do" %}
+{% assign card_translate_description  = "notranslate" %}
+
+{% comment %} Collect collection documents
+-------------------------------------------------------------------------------- {% endcomment %}
+{% for collection in site.collections %}
+  {% if collection.label contains collection_name %}
+    {% assign articles = collection.docs %}
+    {% break %}
+  {% endif %}
+{% endfor %}
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+<!-- Article Grid-->
+<section id="{{collection_name}}" class="mt-5">
+  <div class="container">
+
+    <!-- Grid Header -->
+    <div class="mb-5">
+      <h2 class="g-font-weight-500 mb-0 {{card_translate_description}}">{{grid_title}}</h2>
+      <p class="tagline mb-0 {{card_translate_description}}"><b>{{grid_tagline}}</b></p>
+      <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
+    </div>
+    <!-- /Grid Header -->
+
+    <div class="row mb-5">
+      {% for article in articles %}
+      <div class="col-lg-4 col-sm-6 mb-4">
+        <!-- Article item -->
+        <div class="article-item article-item--w400">
+          <a class="article-link" data-bs-toggle="modal" href="#articleModal{{forloop.index}}">
+            <div class="article-hover">
+              <div class="article-hover-content">
+                <i class="mdi mdi-plus mdi-10x"></i>
+              </div>
+            </div>
+            <img class="img-fluid img-object--w400" src="{{article.image.path}}" alt="{{article.title}}" />
+          </a>
+          <div class="article-caption">
+            <div class="article-caption-heading">
+              <a class="card-link" href="{{article.url}}">{{article.title}}</a>
+            </div>
+            <div class="article-caption-subheading text-muted">{{article.tags[0]}}</div>
+          </div>
+        </div>
+        <!-- /Article item -->
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+<!-- /Article Grid-->
+
+<!-- Article Modals-->
+{% for article in articles %}
+<div class="article-modal modal fade" id="articleModal{{forloop.index}}" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="close-modal" data-bs-dismiss="modal">
+        <img src="{{'/assets/images/icons/controls/close-icon.svg' | relative_url}}" alt="Close modal" />
+      </div>
+
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-lg-8">
+            <div class="modal-body">
+              <!-- Project details-->
+              <h2 class="text-uppercase">{{article.title}}</h2>
+              <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
+              <img class="img-fluid d-block mx-auto" src="{{article.image.path | relative_url}}" alt="{{article.title}}" />
+              <p>
+                Use this area to describe your project. Lorem ipsum dolor sit amet,
+                consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt
+                minus dignissimos deserunt repellat aperiam quasi sunt officia
+                expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis
+                facere nemo!
+              </p>
+              <ul class="list-inline">
+                <li>
+                  <strong>Client:</strong>
+                  Threads
+                </li>
+                <li>
+                  <strong>Category:</strong>
+                  Illustration
+                </li>
+              </ul>
+              <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
+                <i class="mdi mdi-close mdi-24px mx-2"></i>
+                Close Article Overview
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+{% endfor %}
+<!-- /Article Modals-->