j1-template 2020.0.21 → 2020.0.22

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

@@ -21,22 +21,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

@@ -18,6 +18,8 @@ resources:                              [
                                           justified_gallery, light_gallery
                                         ]
 resource_options:
+  - toccer:
+      collapseDepth:                    3
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -36,30 +38,30 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-//  Load Liquid procedures
+// Set page (local) attributes here
 // -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
-// Load page attributes (all)
+//  Load Liquid procedures
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Set local page attributes
+// Load page attributes
 // -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+{% include {{load_attributes}} scope="local" %}
 
 // Page content
-// =============================================================================
-
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 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.
+you some of them 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 the build-in Gallery 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.
 
 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
@@ -67,7 +69,7 @@ can do. 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,14 +85,14 @@ 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
 
@@ -109,8 +111,8 @@ 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]
@@ -148,35 +150,35 @@ LightGallery can do by the following 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"]
 
 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
@@ -198,46 +200,46 @@ may the better choice.
   </script>
 ++++
 
-Parallax text shows are can be placed as banners on a page. A lot of different
+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 + 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"]
 
-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.
 
@@ -248,21 +250,21 @@ carousel::owl_demo_oneslide[role="mb-5"]
 
 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 +278,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.
 

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

@@ -18,6 +18,8 @@ resources:                              [
                                           vimeo_player, vimeo_player, vimeo_froogaloop
                                         ]
 resource_options:
+  - toccer:
+      collapseDepth:                    3
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -49,22 +51,23 @@ 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" %}
+{% include {{load_attributes}} scope="local" %}
 
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 // Page content
-// =============================================================================
-
-Playing video on a web page seems not that special since you can already
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Playing video on web pages seems not that special since you can already
 watch videos on web pages through plugins like _Flash Player_, _Quicktime_
 or _Silverlight_. A new standard goes to HTML5 Video, a pure HTML way to
 show video on the web; instead of the previous de facto standard of using
@@ -72,9 +75,9 @@ proprietary software.
 
 == Video Galleries
 
-HTML5 Video open the doors to your way presenting video content. Modern
-browsers support the video tag `<video>` for the HTML5 Video standard. Browsers
-have a build-in multimedia framework already for decoding and displaying
+HTML5 Video opens the doors to your way presenting video content. Modern
+browsers support the video tag `<video>` for the HTML5 video standard.
+Browsers have a built-in multimedia framework already for decoding and displaying
 video content. No need to use such proprietary software components anymore!
 
 HTML5 Video support is given by the App gallery combined with the Lightbox
@@ -85,10 +88,10 @@ Two types of video sources are supported:
 . videos from local files (your web space)
 . videos from online sources (on the Internet) like YouTube, Vimeo, etc.
 
-The combination of the App gallery and the lightbox LightGallery is quite
+The combination of the App gallery and the lightbox LightGallery is entirely
 usable for all the video content you want to present on your site. Galleries
 can be placed elsewhere with your content. You can use them for video blogs
-for example by placing them into your blog articles content.
+by putting them into your blog articles content.
 
 WARNING: LightGallery can be used for free for private use but for
 business use, a commercial license is needed. See link:{light-gallery-license}[Light Gallery license]
@@ -96,10 +99,10 @@ how to use LightGallery for commercial webs and projects.
 
 == Local video content
 
-Digital image content, simple pictures or vidoes, are quite easy to make.
-Today, each and every mobile has a camera - not that bad! Presenting a bunch
-of (digital) pictures is very easy by using Justified Gallery for example.
-Videos created by a digi cam or a mobile can played by J1 Template using the
+Digital image content, simple pictures or vidoe, are easy to make. Today, each
+and every mobile has a camera - not that bad! Presenting a bunch
+of (digital) pictures is very easy by using Justified Gallery, for example.
+Videos created by a digicam or a mobile can be played by J1 Template using the
 HTML5 Video support of LightGallery.
 
 Two players are available with LightGallery:
@@ -116,11 +119,11 @@ gallery::jg_video_html5[role="mb-5"]
 
 == Online video content
 
-The Internet is full of interesting content. Video content is very popular,
-the number of channels at e.g. _YouTube_ is enormous. If you want to present
-video content from the Internet, e.g. your channnel, the online video
-support of J1 Template may a good choice. Find some enjoyable videos from
-James Cordon's channel: Carpool Karaoke.
+The Internet is full of inspiring content. Video content is popular,
+the number of channels at _YouTube_ is enormous. If you want to present
+video content from the Internet, e.g. your channel, the online video
+support of J1 Template may be the right choice. Find some enjoyable videos
+from James Cordon's channel: Carpool Karaoke.
 
 .YouTube Video Gallery - Carpool Karaoke
 gallery::jg_video_online_youtube[role="mb-5"]
@@ -131,7 +134,7 @@ gallery::jg_video_online_vimeo[role="mb-5"]
 == Whats next
 
 Images and videos are quite visual - and could be impressive, for sure.
-But the most visual component is text for all pages, for all sites on the
+But the most visual component is the text for all pages, for all sites on the
 Internet. To see how text could be presented great for modern responsive
 websites, check the section Typography next.