j1-template 2021.1.21 → 2021.1.25

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/_includes/attributes.asciidoc

@@ -23,10 +23,16 @@ tag::urls[]
 :url-roundtrip--mdi-icons:                        /pages/public/learn/roundtrip/mdi_icon_font/#material-design-icons
 :url-roundtrip--fontawesome-icons:                /pages/public/learn/roundtrip/mdi_icon_font/#fontawesome-icons
 :url-roundtrip--iconify-icons:                    /pages/public/learn/roundtrip/mdi_icon_font/#iconify-icons
-:url-roundtrip--asciidoc-extensions:    /pages/public/learn/roundtrip/asciidoc_extensions/
+:url-roundtrip--asciidoc-extensions:              /pages/public/learn/roundtrip/asciidoc_extensions/
 end::urls[]
 
 
+// FOOTNOTES, global asciidoc attributes (variables)
+// -----------------------------------------------------------------------------
+tag::footnotes[]
+end::footnotes[]
+
+
 // Tags - Asciidoc attributes used internally
 // -----------------------------------------------------------------------------
 tag::tags[]

data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html

@@ -205,20 +205,20 @@ site_category_word_list:    {{site_category_word_list | debug}}
               {% if post.image %}
               <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image is available] -->
               <div class="col-md-6 img-bg--fill px-0"
-                style="background-image: url({{post.image}});">
+                style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{post.image}});">
               </div>
               {% else %}
               <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image missing, using configured default image] -->
               <div class="col-md-6 img-bg--fill px-0"
-                style="background-image: url({{blog_navigator_options.post_image}});">
+                style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{blog_navigator_options.post_image}});">
               </div>
               {% endif %}
 
-              <div class="col-md-6">
-                <div class="card-body r-text-300">{{excerpt}}</div>
+              <div class="col-md-6 p-0">
+                <div class="card-body r-text-300 mt-4">{{excerpt}}</div>
                 <div class="card-footer r-text-200">
                   <div class="card-footer-text">
-                    <hr class="my-3">
+
                     {% if post.date %}
                       {% if language == "en" %}
                         <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>{{post.date | localize: "%Y %B, %e"}}

data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html

@@ -189,20 +189,20 @@ site_category_word_list:    {{site_category_word_list | debug}}
             {% if post.image %}
             <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image is available] -->
             <div class="col-md-6 img-bg--fill px-0"
-              style="background-image: url({{post.image}});">
+              style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{post.image}});">
             </div>
             {% else %}
             <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image missing, using configured default image] -->
             <div class="col-md-6 img-bg--fill px-0"
-              style="background-image: url({{blog_navigator_options.post_image}});">
+              style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{blog_navigator_options.post_image}});">
             </div>
             {% endif %}
 
-            <div class="col-md-6">
-              <div class="card-body r-text-300">{{excerpt}}</div>
+            <div class="col-md-6 p-0">
+              <div class="card-body r-text-300 mt-4">{{excerpt}}</div>
               <div class="card-footer r-text-200">
                 <div class="card-footer-text">
-                  <hr class="my-3">
+
                   {% if post.date %}
                     {% if language == "en" %}
                       <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>{{post.date|localize: "%Y %B, %e"}}

data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html

@@ -238,20 +238,20 @@ site_category_word_list:    {{site_category_word_list | debug}}
           {% if post.image %}
           <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image is available] -->
           <div class="col-md-6 img-bg--fill px-0"
-            style="background-image: url({{post.image}});">
+            style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{post.image}});">
           </div>
           {% else %}
           <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image missing, using configured default image] -->
           <div class="col-md-6 img-bg--fill px-0"
-            style="background-image: url({{blog_navigator_options.post_image}});">
+            style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{blog_navigator_options.post_image}});">
           </div>
           {% endif %}
 
-          <div class="col-md-6">
-            <div class="card-body r-text-300">{{excerpt}}</div>
+          <div class="col-md-6 p-0">
+            <div class="card-body r-text-300 mt-4">{{excerpt}}</div>
             <div class="card-footer r-text-200">
               <div class="card-footer-text">
-                <hr class="my-3">
+
                 {% if post.date %}
                   {% if language == "en" %}
                     <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>{{post.date | localize: "%Y %B, %e"}}

data/lib/starter_web/pages/public/blog/navigator/archive.html

@@ -1,9 +1,8 @@
 ---
 layout:                                 page
-title:                                  Creators Blog
+title:                                  Blog Archive
 tagline:                                all posts
-description: >
-                                        Browse all articles provided by this website
+description:                            Create index pages for articles this website
 
 categories:                             [ Blog ]
 tags:                                   [ Navigator, Archive ]
@@ -16,7 +15,7 @@ pagination:
   enabled:                              false
   permalink:                            /page:num/
 
-analytics:                              true
+analytics:                              false
 advertising:                            false
 comments:                               false
 
@@ -122,7 +121,6 @@ site_category_word_list:    {{site_category_word_list | debug}}
 --------------------------------------------------------------------------------
 {% endcomment %}
 
-
 {% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
 <!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
@@ -164,20 +162,20 @@ site_category_word_list:    {{site_category_word_list | debug}}
         {% if post.image %}
         <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image is available] -->
         <div class="col-md-6 img-bg--fill px-0"
-          style="background-image: url({{post.image}});">
+          style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{post.image}});">
         </div>
         {% else %}
         <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image missing, using configured default image] -->
         <div class="col-md-6 img-bg--fill px-0"
-          style="background-image: url({{blog_navigator_options.post_image}});">
+          style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{blog_navigator_options.post_image}});">
         </div>
         {% endif %}
 
-        <div class="col-md-6">
-          <div class="card-body r-text-300">{{excerpt}}</div>
+        <div class="col-md-6 p-0">
+          <div class="card-body r-text-300  mt-4">{{excerpt}}</div>
           <div class="card-footer r-text-200">
             <div class="card-footer-text">
-              <hr class="my-3">
+
               {% if post.date %}
                 {% if language == "en" %}
                   <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>{{post.date | localize: "%Y %B, %e"}}

data/lib/starter_web/pages/public/learn/quickstart.adoc

@@ -3,9 +3,10 @@ title:                                  Quickstart
 tagline:                                an amazing site in 15 minutes
 date:                                   2021-03-07 00:00:00
 description: >
-                                        Welcome to the pages of J1 Template. If your here
-                                        first time, a good decision you get on that page first.
-                                        For sure, there is no better place to go.
+                                        The template comes with a Web included, a skeleton for
+                                        a new website created with J1 Template. This Web is called
+                                        the "Starter web", a general-purpose scaffold to be modified
+                                        for your needs.
 
 categories:                             [ Knowledge ]
 tags:                                   [ J1, Template, Quickstart ]
@@ -55,24 +56,14 @@ resource_options:
 // Include sub-documents
 // -----------------------------------------------------------------------------
 
-*All you need for your new amazing site.*
-
-Jekyll meets Bootstrap - and makes a lot of friends. J1 Template combines
-the best of OpenSource software for the Web and the Web site generator
-`Jekyll`. J1 is OpenSource, and so are the packaged modules. No pain for
-private or professional use. Check J1 Template today to learn what's possible
-if you go to the Jekyll Way.
-
-*Create powerful modern Static Webs: Secure, Flexible and Fast.*
-
-The template comes with a Web included, a skeleton for new website created
-with J1 Template. This Web is called the *Starter Web*, a general-purpose
-Website scaffold to be modified for your needs. The built-in Starter Web
-can be visited live at https://publish.jekyll.one/[J1 Publish, {browser-window--new}].
-This site show live pages deployed on the Internet on _Github_, _Netlify_
+The template comes with a Web included, a skeleton for new a website created
+using J1 Template. This Web is called the *Starter web*, a general-purpose
+scaffold to be modified for your needs. The built-in Starter web  is available
+live at https://publish.jekyll.one/[J1 Publish, {browser-window--new}]. This
+site show live pages deployed on the Internet on _Github_, _Netlify_
 and _Heroku_.
 
-*Have fun exploring what a modern static web, a Jekyll site can do*!
+A *Starter web* is created in minutes. This section
 
 == The Software needed
 
@@ -98,9 +89,9 @@ NOTE: More current or older versions may work, but not tested.
 
 === Software upgrades needed for all platforms
 
-If _Ruby_ and _NodeJS_ are in place, some packages are to be upgraded to
+If _Ruby_ and _NodeJS_ are in place, some packages needs to be upgraded to
 more *current* versions. Install all packages system-wide with their
-respective product installation pathes.
+respective product installation paths.
 
 ==== Upgrades needed for Ruby < v2.7
 
@@ -201,7 +192,7 @@ If a *project* (a website) is generated, all development tasks are managed
 by *NPM scripts* (NodeJS). Development *tasks* are defined as *scripts*
 with the project config file `package.json`.
 
-First, create a projects folder for all website to be generated J1. For the
+First, create a projects folder for all websites to be generated J1. For the
 following examples, a project is generated on _Windows_ using *C:\Temp*
 for the project's folder.
 
@@ -278,7 +269,7 @@ as below:
 The first step, done only once, is to initialize a project. What means to
 download and install all resources for your new website followed by an
 initial creation process for the new site. Initializing a project is managed
-by the (NPM) *task* `setup`. A bunch of sub-tasks get fired, all of them
+by the (NPM) *task* `setup`. A bunch of sub-tasks gets fired, all of them
 managed by NPM.
 
 Let's start ...
@@ -326,12 +317,11 @@ To open the site, run: yarn site
 Done in 88.03s.
 ----
 
-The `setup` process will take a while - typically some minutes for the
-*first* run (depending on the performances of your Internet connection
-and your workstation). A bunch of NPM modules and Ruby Gems are downloaded
-and linked for the components part of the project. See `setup` as an extended
-*install* and *build* process to manage an initial setup for your new
-website.
+The `setup` process will take a while. Typically some minutes for the *first*
+run, depending on your Internet connection bandwidth and the workstation
+performance. Many NPM modules and Ruby Gems are downloaded and linked for
+the components part of the project. See `setup` as an extended *install* and
+*build* process to manage your new website's initial setup.
 
 === Run and develop a starter web
 
@@ -373,10 +363,11 @@ Go, go, go ..
 === Rebuild a site
 
 A project runs Jekyll in *incremental* mode with *auto-regeneration* enabled.
-All changes made to the pages (posts) of your web at runtime are automatically
-detected and the affected are rebuild and (live) reloaded.
+All changes made to your web's pages and posts at runtime are automatically
+detected, and the affected pages are rebuilt  and automatically reloaded with
+your browser.
 
-To rebuild the *site* from the scratch, a web can be completely rebuild by
+For rebuilding a *site* from scratch, a web can be completely rebuilt by
 running the task `rebuild`:
 
 [source, sh]

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

@@ -56,7 +56,7 @@ resource_options:
 
 // Include sub-documents
 // -----------------------------------------------------------------------------
-
+[role="dropcap"]
 Welcome to the first preview page focussing on the image module. This page
 shows some valuable features of the J1 Template to manage your image-based
 content using lightboxes, carousels (slider), and galleries.
@@ -72,19 +72,19 @@ of what J1 can do for image data. Have fun!
 
 == J1 Lightboxes
 
-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
-Javascript libraries to support such functionality.
+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 Lightbox V2, gained widespread
+popularity thanks to its simple style. The term lightbox has been employed
+since then for Javascript libraries to support such functionality.
 
-For the J1 Template, two different lightboxes can be used:
+For the J1 Template, two different lightboxes are available:
 
 * Lightbox V2 (lightbox)
 * LightGallery
 
-The default lightbox used by J1 Template is Lightbox V2, a Javascript library
-written by _Lokesh Dhakar_. The name of that (build-in) is simply: lightbox.
+The default tool employed by J1 Template is Lightbox V2, a Javascript library
+written by _Lokesh Dhakar_. The name of that (build-in) is *lightbox*.
 For more complex use cases, like a thumbnail gallery preview or video support,
 LightGallery can be used alternatively.
 
@@ -115,8 +115,8 @@ lightbox::example-group[ 400, {data-images-group}, group ]
 
 LightGallery provides more complex functions on image data. The module
 supports a gallery-style thumbnail preview plus image resizing, a download
-dialog, sharing provider support, and some more helpful. Check what
-LightGallery can do by the following example.
+dialog, sharing provider support, and more helpful. Check what
+LightGallery can do this by the following example.
 
 gallery::jg_old_times[]
 
@@ -129,7 +129,7 @@ for creating fully responsive and touch-enabled carousel sliders.
 
 NOTE: OWL Carousel V1 is no longer available on the Internet; for an
 unknown reason. Anyway, the J1 Template is using this version of OWL
-Carousel as a build-in carousel module because the software does an excellent
+Carousel is a build-in carousel module because the software does an excellent
 job, is based on an MIT license with no issues using them for private and
 business use. And offers a lot of great features!
 
@@ -143,47 +143,47 @@ displayed as a slide show: simple text, for example.
 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 better visibility. In one line, you can present
-a bunch of facts to know animated for the reader's attention within a single
+a paragraph, to give them better visibility. In one line, you can present
+many facts to know animated for the reader's attention within a 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 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.
+A more eye-minded type of text-based slide show is a parallax text slider. If
+you want to emphasize your 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, therefore a pure text-based presentation
+maybe the better choice.
 
 .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_.
+Parallax text shows can be placed as banners on a page. For text shows,
+different animations are available. Internally, J1 Template uses some of
+the 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
+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 a series.
-Find with the following some examples how to use a carousel for your image
+Find with the following some examples of 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 exciting things of your site or the products offered.
+A simple image show is useful, for example, as an animated (or not animated)
+banner presenting exciting things about your site or the products offered.
 
 .Simple Image Carousel
 carousel::demo_simple[role="mb-3"]
 
 === Carousel + Caption + Lightbox
 
-Carousels can be used for an exceptionally compact form of image galleries.
+Carousels are 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
+a lightbox to enlarge images full size. For the example below, an almost simple
 lightbox is used: Lightbox V2; or short: lightbox.
 
 .Nice cats
@@ -191,8 +191,8 @@ carousel::demo_cats[role="mb-3"]
 
 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.
+images (of a carousel) as a group. If one picture is opened in the lightbox,
+others are browsed by easy-to-use control buttons.
 
 === One Slide Carousel + Lightbox
 
@@ -204,37 +204,30 @@ many images the show contains.
 .Single Slide Carousel and a Lightbox
 carousel::demo_oneslide[role="mb-3"]
 
-== 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
-built-in gallery app *gallery*.
+== JustifiedGallery
 
 JustifiedGallery is a great jQuery plugin to create responsive, infinite,
-and high quality justified image galleries. J1 Template combines the Gallery
+and high-quality justified image galleries. J1 Template combines the Gallery
 with the lightboxes supported to enlarge the images of a gallery.
 
-See JustifiedGallery in action - and for sure all that you see is even
+See JustifiedGallery 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!
 
-=== JustifiedGallery
-
 Pictures you've made are typically not even in size. Images may have the
-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
+same size (resolution), but some are orientated landscapes, or others
+may be portraits. For that reason, a more powerful gallery is needed to create
 so-called justified views.
 
-JustifiedGallery is using a so-called masonry grid layout. It works by
+JustifiedGallery uses a so-called masonry grid layout. It works by
 placing elements in an optimal position based on available horizontal and
-vertical space. Sort of like mason fitting stones in a wall. You’ll have
+vertical space. Sort of like mason fitting stones in a wall. You'll have
 seen it in use all over the Internet!
 
 .Masonry grid layout of JustifiedGallery
 gallery::jg_customizer[]
 
-== Whats next
+== What next
 
 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

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

@@ -84,18 +84,18 @@ 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
+HTML5 Video support is given by the App gallery combined with the lightbox
 LightGallery.
 
 Two types of video sources are supported:
 
-. videos from local files (your webspace)
-. videos from online sources (on the Internet) like YouTube, Vimeo, etc.
+. Video files from local folders (your webspace)
+. Video files from online sources (on the Internet) like YouTube, Vimeo, etc.
 
 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
-by putting them into your blog article's  content.
+usable for all the video content you want to present on your site. You can
+place Galleries elsewhere with your content. You can use them for video blogs
+by putting them into your blog article's content.
 
 WARNING: LightGallery can be used for free for private use, but a commercial
 license is needed for business use. See link:{light-gallery-license}[Light Gallery license]
@@ -103,16 +103,15 @@ how to use LightGallery for commercial websites and projects.
 
 == Local video content
 
-Digital image content, simple pictures or videos, 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.
+Digital image content, simple pictures or videos, are easy to make. Today, every mobile has a camera - not that bad! Presenting a bunch
+of (digital) pictures is done very easily 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:
 
 . an internal player used by default
-. http://videojs.com/[video.js], a excellent Javascript video library
+. http://videojs.com/[video.js], an excellent Javascript video library
 
 NOTE: The HTML5 specification does _not_ define which video and audio formats
 browsers _should_ support. J1 LightGallery can play all types of standard
@@ -134,11 +133,11 @@ gallery::jg_video_online_youtube[role="mb-5"]
 .Vimeo Video Gallery - Fashion
 gallery::jg_video_online_vimeo[role="mb-5"]
 
-== Whats next
+== What next
 
 Images and videos are pretty visual. And it can be impressive, for sure.
 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.
 
-What? Find out how it works. go for: link:{roundtrip-typography}[Typography].
+What? Please find out how it works. Go for: link:{roundtrip-typography}[Typography], then.