j1-template 2020.0.21 → 2021.0.1

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/300_first_awesome_web.adoc

@@ -1,19 +1,30 @@
- ---
+---
 title:                                  Web in a Day
 tagline:                                a first awesome web
-description:                            Modern static website in a day
+date:                                   2018-05-01 00:00:00
+description: >
+                                        Modern static website in a day
 
-tags:                                   [ Kickstarter, Introduction, Web, Day, Jekyll ]
-index:                                  []
-categories:                             [ pages ]
+tags:                                   [ Kickstarter, Introduction ]
+categories:                             [ Jekyll, Knowledge, Tutorial ]
 
 permalink:                              /pages/public/learn/kickstarter/web_in_a_day/first_awesome_web/
 regenerate:                             false
 
-resources:                              [ lightbox, carousel ]
+resources:                              [ lightbox, carousel, fam ]
 resource_options:
-  - toccer:
-      collapseDepth:                    2
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/kickstarter/web_in_a_day/get-started-1920x1280-bw.jpg
+          alt:                          Photo by JESHOOTS.COM on Unsplash
+          alignY:                       top
+          badge:
+            type:                       unsplash
+            author:                     JESHOOTS.COM
+            href:                       https://unsplash.com/@jeshoots/portfolio
 ---
 
 // Page Initializer
@@ -21,22 +32,26 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
 {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Load page attributes (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
+{% include {{load_attributes}} scope="none" %}
+
 
 // Page content
-// =============================================================================
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 // Include sub-documents
 // -----------------------------------------------------------------------------
 include::{documentdir}/300_first_awesome_web.asciidoc[]
 
-
 == Summarize!
 
 include::{includedir}/parts.asciidoc[tag=summarize]

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{includes → _includes}/attributes.asciidoc

@@ -34,8 +34,8 @@ tag::urls[]
 end::urls[]
 
 
-// Tags - AsciiDoc attributes used internally
-// -------------------------------------------------------------------
+// TAGS - local Asciidoctor tags
+// -----------------------------------------------------------------------------
 tag::tags[]
 
 :debug:                                           false
@@ -158,7 +158,6 @@ tag::data[]
 
 end::data[]
 
-
 // DOCUMENTS, local document resources
 // -----------------------------------------------------------------------------
 tag::documents[]
@@ -171,12 +170,6 @@ tag::tables[]
 end::tables[]
 
 
-// PRODUCTS, local product information (e.g. release)
-// -----------------------------------------------------------------------------
-tag::products[]
-end::products[]
-
-
 // AUTHORS, local author information (e.g. article)
 // -----------------------------------------------------------------------------
 tag::authors[]

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/documents/100_meet_and_greet_jekyll.asciidoc

@@ -0,0 +1,31 @@
+
+*Web in a Day* is the first in a series of tutorials to learn how to
+create modern websites using Jekyll. This Kickstarter focuses on the basics
+of Jekyll and the J1 Template, which all people needs to know for a successful
+way to a modern static website using Jekyll and J1 Template.
+
+It is highly recommended to read and work on this tutorial by everyone -
+independently from what level of knowledge they begin. Jekyll is from classic
+Content Management Systems (CMS) like Joomla, WordPress or Drupal.
+No surprise: Jekyll and J1 are different as well.
+
+It sounds much, spending a whole day to get Jekyll to know - yes, it is much.
+You'll find a lot of Blog articles like *Jekyll in 15 minutes*. But what can
+be *learned* in 15 minutes?
+
+To be fair, most of these blogs are intended to help *installing Jekyll* and
+get the very first steps managed out of the box. If you run Jekyll out of the
+box, the resulting website (from the build-in theme scaffold) might somewhat
+frustrating. You'll get an elementary site created based on Jekyll's theme
+*minima*.
+
+To not waste time, get through the tutorial and find out what is the
+*Jekyll Way*. And if this the way you want to go.
+
+Have a good time, a good day learning Jekyll.
+
+
+== Meet and greet Jekyll
+
+lorem:sentences[5] +
+lorem:sentences[3] +

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{includes → _includes}/parts.asciidoc

@@ -61,7 +61,7 @@ Find here is a list of the basic Chocolatey commands used this section.
 And some more related ones. If you'd like to explore the Chocolatey CLI a bit 
 *more*, give it a try before moving on.
 
-[cols="8a,4", options="header", role="table-responsive-stacked-lg, full-width"]
+[cols="8a,4", options="header", role="rtable, full-width"]
 |===============================================================================
 |Command |Description
 

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc

@@ -1,17 +1,23 @@
 ---
 title:                                  Roundtrip
 tagline:                                present images
-description:                            J1 Template Roundtrip - Present image based data
-
-tags:                                   [ Page, Roundtrip ]
-index:                                  [ Template, Roundtrip, Images ]
-categories:                             [ pages ]
-
-toc:                                    true
-scrollbar:                              false
+date:                                   2020-11-03 12:00:00
+description: >
+                                        This page show some of quite useful features of J1 Template to manage your
+                                        image-based content using lightboxes, carousels (slider) and galleries.
+                                        The image module offers complex functionality based on powerful OpenSource
+                                        libraries like Justified Gallery for high-end, masonry styled preview maps.
+                                        A carousel app, using the jQuery plugin Owl Carousel as a base, let you
+                                        present your images as slide shows.
+                                        Lightboxes like LightGallery or Lightbox V2 support your web for full image
+                                        views of your picture or video content. Have a look, a quick tour what J1
+                                        can do for image data.
+
+tags:                                   [ Roundtrip, Introduction ]
+categories:                             [ Images, Module ]
 
 permalink:                              /pages/public/learn/roundtrip/present_images/
-regenerate:                             false
+regenerate:                             true
 
 resources:                              [
                                           clipboard, rouge, carousel, lightbox,
@@ -36,38 +42,37 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) 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 (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
 {% include {{load_attributes}} scope="all" %}
 
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
-
 // Page content
-// =============================================================================
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Welcome to the first preview page focussing the image module. This page show
+some of quite useful features of J1 Template to manage your image-based content
+using lightboxes, carousels (slider) and galleries.
 
-Welcome to the first preview page focussing the image module. This page shows
-you some of the quite useful features of J1 Template to manage your image based
-content using lightboxes, carousels (slider) and galleries.
-
-The image module offer complex functionality based on powerful open source
-libraries like the build-in Gallely gallery for simple _Bootstrap_ grid-based
-image galleries or Justified Gallery for high-end, masonry styled preview
-maps. The build-in carousel app carousel, using the jQuery plugin Owl Carousel
-as a base, let you present your images as slide shows.
+The image module offers complex functionality based on powerful OpenSource
+libraries like Justified Gallery for high-end, masonry styled preview maps.
+A carousel app, using the jQuery plugin Owl Carousel as a base, let you
+present your images as slide shows.
 
 Lightboxes like LightGallery or Lightbox V2 support your web for full image
 views of your picture or video content. Have a look, a quick tour what J1
-can do. Have fun!
+can do for image data. Have fun!
 
 == J1 Lightboxes
 
-A Lightbox in general is a helper which displays enlarged, almost
+A Lightbox, in general, is a helper which displays enlarged, almost
 screen-filling versions of pictures (or videos), while dimming the rest of the
 page. The technique, introduced by Lightbox V2, gained widespread popularity
 due to its simple and elegant style. The term lightbox is used since then for
@@ -83,186 +88,142 @@ written by _Lokesh Dhakar_. The name of that (build-in) is simply: lightbox.
 For more complex use cases, like a thumbnail gallery preview or video support,
 LightGallery can be used alternatively.
 
-NOTE: The name LightGallery implies a sort of a Gallery but the library is a
+NOTE: The name LightGallery implies a sort of a Gallery, but the library is a
 _lightbox_. And, LightGallery provides much more functionality on image-based
 data rather than enlarged displaying of images. See the examples below to check
-for the differences in compare to the more simpler Lightbox V2 lightbox.
+for the differences in comparison to the simpler Lightbox V2 lightbox.
 
 Both lightboxes are fully integrated to be used as standalone modules or to be
-used as helpers _under-the-hood_ by other apps or modules focussing on image
-data like gallery or carousel, the build-in carousel module.
+used as helpers _under-the-hood_ by other apps or modules focussing on
+image-data like gallery or carousel, the build-in carousel module.
 
 == Lightbox Examples
 
 Find below an example of using the lightbox Lightbox standalone. See how
 single (individual) images are linked for the use with Lightbox.
 
-.A Lightbox block for standalone images
+.Lightbox block for standalone images
 lightbox::example-standalone[ 400, {data-images-standalone} ]
 
 For a group of images (image sets), Lightbox support image groups. Click
 on the images below to see how Lightbox manage image groups.
 
-.A Lightbox block for grouped images
+.Lightbox block for grouped images
 lightbox::example-group[ 400, {data-images-group}, group ]
 
 === LightGallery Example
 
 LightGallery provides more complex functions on image data. The lightbox
-supports a gallery-styled thumbnail preview plus image resizing, a dowload
-dialog, sharing provider support and some more helpfull. Check what
+supports a gallery-style thumbnail preview plus image resizing, a dowload
+dialogue, sharing provider support and some more helpful. Check what
 LightGallery can do by the following example.
 
-[subs=attributes]
-++++
-  <div id="caption1" style="display:none">
-    <h4 class="notoc">Image 1</h4><p>Golden Gate Bridge with San Francisco in distance</p>
-  </div>
-  <div id="caption2" style="display:none">
-    <h4 class="notoc">Image 2</h4><p>Forest with mountains behind</p>
-  </div>
-  <div id="caption3" style="display:none">
-    <h4 class="notoc">Image 3</h4><p>Bicyclist looking out over hill at ocean</p>
-  </div>
-
-  <div id="lightgallery-roundtrip-example" class="imageblock mb-4" data-sub-html=".caption">
-    <a href="{images-dir}/lightbox-image-1.jpg" data-sub-html="#caption1">
-      <img src="{images-dir}/lightbox-thumb-1.jpg" alt="Golden Gate Bridge with San Francisco in distance">
-    </a>
-    <a href="{images-dir}/lightbox-image-2.jpg" data-sub-html="#caption2">
-      <img src="{images-dir}/lightbox-thumb-2.jpg" alt="Forest with mountains behind">
-    </a>
-    <a href="{images-dir}/lightbox-image-3.jpg" data-sub-html="#caption3">
-      <img src="{images-dir}/lightbox-thumb-3.jpg" alt="Bicyclist looking out over hill at ocean">
-    </a>
-  </div>
-
-  <script>
-    $(document).ready(function(){
-      $('#lightgallery-roundtrip-example').lightGallery({
-          thumbnail: true
-      });
-    });
-  </script>
-++++
+// .Example of a Justified Gallery
+gallery::jg_example[]
+
 
 == J1 Carousel App
 
-J1 Carousel is based on OWL Carousel V1 in the latest (and unfortuneatly
+J1 Carousel is based on OWL Carousel V1 in the latest (and unfortunately
 last) version of 1.3.3. OWL Carousel is a clean and neat jQuery slider plugin
 for creating fully responsive and touch-enabled carousel sliders.
 
-NOTE: OWL Carousel V1 is not longer available on the Internet; for unknown
+NOTE: OWL Carousel V1 is no longer available on the Internet; for an unknown
 reason. Anyway, J1 Template is using this version of OWL Carousel as a
 build-in carousel module because the software does an excellent job, is based
-on a MIT license with no issues using them for private and business use.
+on an MIT license with no issues using them for private and business use.
 And offers a lot of great features!
 
 === Simple Text Carousel
 
 A slider or carousel typically is used for displaying images but the
 implementation for J1 Template support a lot more sources to be displayed
-as a slide show: simple text for example.
+as a slide show: simple text, for example.
 
-carousel::owl_demo_text_carousel[role="mb-3"]
+.Simple text carousel
+carousel::demo_text_carousel[role="mb-3"]
 
 Important statements or topics can be placed e.g. on top of an article or a
-paragraph to give them a better visibility. In one line, you can present
-a bunch of facts to know animated for the readers attention within as single
+paragraph to give them better visibility. In one line, you can present
+a bunch of facts to know animated for the reader's attention within as single
 line - no much space is needed.
 
 === Parallax Text Carousel
 
-A more eye-minded type of a text show is a parallax text slider. If you
-want to place emphasis on you personal statements focussing the meaning, this
-type of a slide show may be interesting. Image based slide shows may draw off
-the readers attention from the text, therefor a pure text based presentation
+A more eye-minded type of a text-show is a parallax text slider. If you
+want to place emphasis on your personal 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, therefor a pure text-based presentation
 may the better choice.
 
-.Parallax Slider
-// carousel::owl_demo_text_carousel_parallax[role="mb-3"]
-
-++++
-  <div class="parallax-slider__owl_demo_text_carousel_parallax mb-3" style="background-position: 50% 45px">
-    <div id="owl_demo_text_carousel_parallax"></div>
-  </div>
-
- <script>
-    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{background:url(/assets/images/quotes/default.png) 50% 0 repeat fixed}</style>');
-    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{padding:75px 0 75px 25px;position:relative}</style>');
-    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{color:#e5e5e5;font-size:1.5rem;font-weight:400}</style>');
-    $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-align:center}</style -->');
-    $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-transform:uppercase}</style -->');
-    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:url(/assets/images/modules/patterns/gridtile.png) repeat;}</style>');
-    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,0.3)}</style>');
-  </script>
-++++
-
-Parallax text shows are can be placed as banners on a page. A lot of different
+.Parallax text carousel
+carousel::demo_text_carousel_parallax[role="mb-3"]
+
+Parallax text shows can be placed as banners on a page. A lot of different
 animations can be used. Internally, J1 Template is using some of the really
 great CSS styles offered by _animate.css_.
 
 TIP: Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page]
-to see all the possible dynamic styles you can create based on pure CSS. Some
-of them are implemented for OWL Carousel for animation. See the documetation
+to see all the possible dynamic styles, you can create based on pure CSS. Some
+of them are implemented for OWL Carousel for animation. See the documentation
 for the CAROUSEL Module for more details.
 
 === Simple Image Carousel
 
-Carousels are mostly used for pictures data to animate the images as series.
+Carousels are mostly used for pictures data to animate the images as a series.
 Find with the following some examples how to use a carousel for your image
 data.
 
 A simple image show is useful for example as an animated (or not animated)
-banner presenting interesting things of your site or the products offered.
+banner presenting exciting things of your site or the products offered.
 
 .Simple Image Carousel
-carousel::owl_demo_simple[role="mb-5"]
+carousel::demo_simple[role="mb-5"]
 
 === Carousel + Caption + Lightbox
 
-Carousels can be used for a quite compact form of image galleries. This example
-show some pictures having individual caption text and support a lightbox to
-enlarge images full size. For the example below, a quite simple lightbox
-is used: Lightbox V2; or short: lightbox.
+Carousels can be 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, a almost simple
+lightbox is used: Lightbox V2; or short: lightbox.
 
 .Nice cats
-carousel::owl_demo_cats[role="mb-5"]
+carousel::demo_cats[role="mb-5"]
 
-The J1 module lightbox is a simple Lightbox but offers a bunch of interesting
-features for displaying images. For example, lightbox can display all images
-(of a carousel) as a group. If one picture is opened in the lightbox, all
-the other can browsed as well.
+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, all
+the other can be browsed as well.
 
 === One Slide Carousel + Lightbox
 
 The build-in Carousel carousel supports multiple and single image shows.
-Here you find an example of an single image slide show with controls enabled
+Here you find an example of a single image slide show with controls enabled
 to browse all images back and forth. An indicator below the slider shows how
 many images the show contains.
 
 .Single Slide Carousel and a Lightbox
-carousel::owl_demo_oneslide[role="mb-5"]
+carousel::demo_oneslide[role="mb-5"]
 
 == J1 Gallery App
 
 To create image and video galleries, J1 Template implements the jQuery
 plugin JustifiedGallery as the main gallery module. Beside Justified
-Gallery, a gallery based on pure _Bootstrap_ code is available with the build-in
-gallery app gallery.
+Gallery, a gallery based on pure _Bootstrap_ code is available with the
+built-in gallery app *gallery*.
 
-Justified Gallery is a great jQuery plugin to create responsive, infinite
-and high quality justified image galleries. J1 Template combines the gallery
-with the lightboxes supported to enlage the images of a gallery.
+Justified Gallery is a great jQuery plugin to create responsive, infinite,
+and high quality justified image galleries. J1 Template combines the Gallery
+with the lightboxes supported to enlarge the images of a gallery.
 
-See Justified Gallery in action - and for sure all what you see is even
+See Justified Gallery in action - and for sure all that you see is even
 responsive. Change the size of your current browser window, by width or height,
 to see what will happen!
 
 === Justified Gallery
 
 Pictures you've made are typically not even in size. Images may have the
-same size (resolution), but some of the are orientated landscape or other
+same size (resolution), but some of them are orientated landscape or other
 may portrait. For that reason, a more powerful gallery is needed to create
 so-called justified views.
 
@@ -276,7 +237,7 @@ gallery::jg_customizer[]
 
 == Whats next
 
-Hopefully you've enjoyed exploring the possibilities J1 offers for managing
+Hopefully, you've enjoyed exploring the possibilities J1 offers for managing
 and displaying digital image content. But much, much more can the J1 do for
 your web.