j1-template 2022.0.10 → 2022.0.11

data/lib/starter_web/_includes/attributes.asciidoc

@@ -437,7 +437,7 @@ end::tables[]
 // -----------------------------------------------------------------------------
 tag::products[]
 :j1--license:                                     MIT License
-:j1--version:                                     2022.0.10
+:j1--version:                                     2022.0.11
 :j1--site-name:                                   Jekyll One
 end::products[]
 

data/lib/starter_web/_plugins/lunr_index.rb

@@ -364,6 +364,6 @@ end
 
 module Jekyll
   module J1LunrSearch
-    VERSION = '2022.0.10'
+    VERSION = '2022.0.11'
   end
 end

data/lib/starter_web/collections/posts/public/featured/_posts/2021-01-01-about-cookies.ads.asciidoc

@@ -0,0 +1,196 @@
+---
+title:                                  Cookies
+tagline:                                good to know
+
+categories:                             [ Knowledge ]
+tags:                                   [ Cookies ]
+
+image:                                  /assets/images/modules/attics/cookies-1920x1200.jpg
+
+regenerate:                             false
+
+resources:                              [ advertising ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/cookies-1920x1200.jpg
+          alt:                          Photo by Miroslava on Unsplash
+#         caption:
+#           text:                       Photo by Miroslava on Unsplash
+#           href:                       https://unsplash.com/@miroslava
+          badge:
+            type:                       unsplash
+            author:                     Miroslava
+            href:                       https://unsplash.com/@miroslava
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+// Additional Asciidoc page attributes goes here
+// -----------------------------------------------------------------------------
+// :page-imagesdir: {{page.images.dir}}
+
+// Place an excerpt at the most top position
+// -----------------------------------------------------------------------------
+[role="dropcap"]
+Is it needed for visitors to know what cookies are about? No doubts, you're
+requested to inform - in Europe for legal reasons. All users visiting websites
+are bothered all the time to accept cookies. For good reasons.
+
+excerpt__end
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+++++
+<!-- insert gad container -->
+<div id="xxx..xx" class="mb-5">
+  <!-- display-ad-horizontal-1 -->
+  <ins class="adsbygoogle"
+       style="display:block"
+       data-ad-client="ca-pub-xxxx..xxx"
+       data-ad-slot="xxxx..xx"
+       data-ad-format="auto"
+       data-full-width-responsive="true">
+  </ins>
+</div>
+++++
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+== What are cookies technically
+
+In short: a  cookie is a small piece of data that a website asks your
+browser to store on your computer or mobile device. The cookie allows the
+website to "remember" your actions or preferences over time. All modern
+browsers support cookies, but users can set their browsers to decline them
+and can delete them whenever they like. Good to know.
+
+Websites mainly use cookies for:
+
+Identification::
+Identify users
+
+General information storage::
+Remember users' custom preferences
+
+Support::
+Help users complete tasks without re-entering information when browsing from
+one page to another or when visiting the site later.
+
+Track behavioral::
+Cookies can also be used for online behavioral target advertising and to
+show adverts relevant to something that the user searched for in the past.
+The webserver supplying the webpage can store a cookie on the user's
+computer or mobile device.
+
+All these cookies are called HTTP header cookies. Another way of storing
+cookies is through JavaScript code contained or referenced on that page.
+Each time the user requests a new page, the webserver can receive the
+values of the cookies it previously set and return the page with content
+relating to these values. Similarly, JavaScript code can read a
+cookie belonging to its domain and act accordingly.
+
+.How are they used
+[NOTE]
+====
+The web server supplying the webpage can store a cookie on the user's
+computer or mobile device. An external web server that manages files
+included or referenced in the web page can store cookies. All these
+cookies are called HTTP header cookies. Another way of storing cookies
+is through JavaScript code contained or referenced on that page.
+
+Each time the user requests a new page, the web server can receive the
+values of the cookies it previously set and return the page with content
+relating to these values. Similarly, JavaScript code can read a
+cookie belonging to its domain and act accordingly.
+====
+
+== Types of cookies
+
+HTTP cookies are essential to the modern Internet but potentially a
+vulnerability to your privacy. As a necessary part of web browsing, cookies
+help web developers give you more personal, convenient website visits.
+Cookies let websites remember you, your website logins, shopping carts, and
+more. But they can also be a treasure trove of private info for criminals
+to spy on.
+
+Since the data in cookies doesn't change, cookies themselves aren't harmful.
+They *can't infect* computers with viruses or other malware. However, some
+cyberattacks can hijack cookies and enable access to your browsing sessions.
+The danger lies in their ability to track individuals' browsing histories.
+Cookies generally can be classified by its *lifespan* and the *domain* to
+which it belongs.
+
+=== By Lifespan
+
+Cookies classified by *lifespan* are either a:
+
+Session cookie::
+Session cookies gets automatically deleted when the user closes the web browser
+and all open window tabs.
+
+Persistent cookie::
+A persistent cookie *remains* on the user's computer/device for a pre-defined
+period of time.
+
+=== By Domain
+
+Cookies classified by the *domain* to which it belongs, are either of:
+
+First-party cookie::
+First-party cookie cookies are set by the webserver of the visited page
+and share the *same domain* you're visiting. These are generally safer, as
+long as users are browsing reputable websites or ones that have not been
+compromised.
+
+Third-party cookies::
+Third-party cookies are stored by a *different* domain to the visited page.
+This can happen when the webpage references a file located outside its domain.
+Third-party cookies let advertisers or analytics companies track the user's
+browsing history across the web on *any* sites that contain their ads.
+
+
+== Security aspects on using cookies
+
+Without cookies, the web would not work as it does today. However, since the
+mid 90ies when cookies were invented, the web changed quite a lot, and so did
+the attack methods on web applications; as mentioned, the Internet is not a
+friendly place.
+
+A well-known attack method is known as Cross-Site Request Forgery or short
+*CSRF*. CSRF is an attack, a criminal act, that forces an end user to execute
+unwanted actions. A cookie may play a *role* in such scenarios, but they are
+not generally *unsafe* if you want, you can read more about that on the
+CRSF Page on {url-owasp-attacks--csrf}[OWASP, {browser-window--new}].
+
+== How to control cookies
+
+Users can take control, used or *not* used, or delete cookies. For more
+details, see {url-about-cookies--home}[AboutCookies]. You can delete
+all cookies that are already on your computer, and you can set most
+browsers to prevent them from being placed.
+
+If you do this, however, you may have to manually adjust some preferences
+every time you visit a site, and some services and functionalities may not
+work.

data/lib/starter_web/collections/posts/public/featured/_posts/2021-01-01-about-cookies.comments.asciidoc

@@ -0,0 +1,182 @@
+---
+title:                                  Cookies
+tagline:                                good to know
+
+categories:                             [ Knowledge ]
+tags:                                   [ Cookies ]
+
+image:                                  /assets/images/modules/attics/cookies-1920x1200.jpg
+
+regenerate:                             false
+
+resources:                              [ comments ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/cookies-1920x1200.jpg
+          alt:                          Photo by Miroslava on Unsplash
+#         caption:
+#           text:                       Photo by Miroslava on Unsplash
+#           href:                       https://unsplash.com/@miroslava
+          badge:
+            type:                       unsplash
+            author:                     Miroslava
+            href:                       https://unsplash.com/@miroslava
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+// Additional Asciidoc page attributes goes here
+// -----------------------------------------------------------------------------
+// :page-imagesdir: {{page.images.dir}}
+
+// Place an excerpt at the most top position
+// -----------------------------------------------------------------------------
+[role="dropcap"]
+Is it needed for visitors to know what cookies are about? No doubts, you're
+requested to inform - in Europe for legal reasons. All users visiting websites
+are bothered all the time to accept cookies. For good reasons.
+
+excerpt__end
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+== What are cookies technically
+
+In short: a  cookie is a small piece of data that a website asks your
+browser to store on your computer or mobile device. The cookie allows the
+website to "remember" your actions or preferences over time. All modern
+browsers support cookies, but users can set their browsers to decline them
+and can delete them whenever they like. Good to know.
+
+Websites mainly use cookies for:
+
+Identification::
+Identify users
+
+General information storage::
+Remember users' custom preferences
+
+Support::
+Help users complete tasks without re-entering information when browsing from
+one page to another or when visiting the site later.
+
+Track behavioral::
+Cookies can also be used for online behavioral target advertising and to
+show adverts relevant to something that the user searched for in the past.
+The webserver supplying the webpage can store a cookie on the user's
+computer or mobile device.
+
+All these cookies are called HTTP header cookies. Another way of storing
+cookies is through JavaScript code contained or referenced on that page.
+Each time the user requests a new page, the webserver can receive the
+values of the cookies it previously set and return the page with content
+relating to these values. Similarly, JavaScript code can read a
+cookie belonging to its domain and act accordingly.
+
+.How are they used
+[NOTE]
+====
+The web server supplying the webpage can store a cookie on the user's
+computer or mobile device. An external web server that manages files
+included or referenced in the web page can store cookies. All these
+cookies are called HTTP header cookies. Another way of storing cookies
+is through JavaScript code contained or referenced on that page.
+
+Each time the user requests a new page, the web server can receive the
+values of the cookies it previously set and return the page with content
+relating to these values. Similarly, JavaScript code can read a
+cookie belonging to its domain and act accordingly.
+====
+
+== Types of cookies
+
+HTTP cookies are essential to the modern Internet but potentially a
+vulnerability to your privacy. As a necessary part of web browsing, cookies
+help web developers give you more personal, convenient website visits.
+Cookies let websites remember you, your website logins, shopping carts, and
+more. But they can also be a treasure trove of private info for criminals
+to spy on.
+
+Since the data in cookies doesn't change, cookies themselves aren't harmful.
+They *can't infect* computers with viruses or other malware. However, some
+cyberattacks can hijack cookies and enable access to your browsing sessions.
+The danger lies in their ability to track individuals' browsing histories.
+Cookies generally can be classified by its *lifespan* and the *domain* to
+which it belongs.
+
+=== By Lifespan
+
+Cookies classified by *lifespan* are either a:
+
+Session cookie::
+Session cookies gets automatically deleted when the user closes the web browser
+and all open window tabs.
+
+Persistent cookie::
+A persistent cookie *remains* on the user's computer/device for a pre-defined
+period of time.
+
+=== By Domain
+
+Cookies classified by the *domain* to which it belongs, are either of:
+
+First-party cookie::
+First-party cookie cookies are set by the webserver of the visited page
+and share the *same domain* you're visiting. These are generally safer, as
+long as users are browsing reputable websites or ones that have not been
+compromised.
+
+Third-party cookies::
+Third-party cookies are stored by a *different* domain to the visited page.
+This can happen when the webpage references a file located outside its domain.
+Third-party cookies let advertisers or analytics companies track the user's
+browsing history across the web on *any* sites that contain their ads.
+
+
+== Security aspects on using cookies
+
+Without cookies, the web would not work as it does today. However, since the
+mid 90ies when cookies were invented, the web changed quite a lot, and so did
+the attack methods on web applications; as mentioned, the Internet is not a
+friendly place.
+
+A well-known attack method is known as Cross-Site Request Forgery or short
+*CSRF*. CSRF is an attack, a criminal act, that forces an end user to execute
+unwanted actions. A cookie may play a *role* in such scenarios, but they are
+not generally *unsafe* if you want, you can read more about that on the
+CRSF Page on {url-owasp-attacks--csrf}[OWASP, {browser-window--new}].
+
+== How to control cookies
+
+Users can take control, used or *not* used, or delete cookies. For more
+details, see {url-about-cookies--home}[AboutCookies]. You can delete
+all cookies that are already on your computer, and you can set most
+browsers to prevent them from being placed.
+
+If you do this, however, you may have to manually adjust some preferences
+every time you visit a site, and some services and functionalities may not
+work.

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1_starter",
-  "version": "2022.0.10",
+  "version": "2022.0.11",
   "description": "J1 Template Starter Web",
   "homepage": "https://your.site",
   "author": {

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.comments.asciidoc

@@ -0,0 +1,237 @@
+---
+title:                                  Roundtrip
+tagline:                                present images
+date:                                   2020-11-03 00:00:00 +100
+description: >
+                                        Welcome to the 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.
+
+categories:                             [ Roundtrip ]
+tags:                                   [ Introduction, Module, Image ]
+
+fab_menu_id:                            page_ctrl_simple
+
+permalink:                              /pages/public/learn/roundtrip/present_images/
+regenerate:                             false
+
+resources:                              [
+                                          animate, comments, clipboard,
+                                          carousel, justifiedGallery,
+                                          lightbox, lightGallery,
+                                          rouge
+                                        ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+          alt:                          Photo by Ricardo Gomez Angel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Ricardo Gomez Angel
+            href:                       https://unsplash.com/@ripato/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[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.
+
+The image module offers complex functionality based on powerful OpenSource
+libraries like JustifiedGallery for high-end, masonry-styled preview maps.
+J1 Template uses the jQuery plugin Owl Carousel as a base for image sliders.
+A carousel app (slider) lets you present your images as shows.
+
+Lightboxes like LightGallery or Lightbox V2 support your web for enlarged
+image views of your picture or video content. Have a look, a quick tour
+of what J1 can do for image data. Have fun!
+
+== J1 Lightboxes
+
+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 are available:
+
+* Lightbox V2 (lightbox)
+* LightGallery
+
+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.
+
+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 comparison to the simpler Lightbox V2 lightbox.
+
+Both lightboxes are fully integrated to be used as standalone modules or
+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 use with Lightbox.
+
+.Lightbox block for standalone images
+lightbox::example-standalone[ 400, {data-images-standalone} ]
+
+Lightbox supports image groups (image sets). Click on the images below to
+see how Lightbox manages a group of 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 module
+supports a gallery-style thumbnail preview plus image resizing, a download
+dialog, sharing provider support, and more helpful. Check what
+LightGallery can do this by the following example.
+
+gallery::jg_old_times[]
+
+== J1 Carousel App
+
+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 no longer available on the Internet; for an
+unknown reason. Anyway, the J1 Template is using this version of OWL
+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!
+
+=== Simple Text Carousel
+
+A slider or carousel is typically used for displaying images. Still, the
+implementation for the J1 Template supports a lot more sources to be
+displayed as a slide show: simple text, for example.
+
+.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 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 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. 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
+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 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 about your site or the products offered.
+
+.Simple Image Carousel
+carousel::demo_simple[role="mb-3"]
+
+=== Carousel + Caption + Lightbox
+
+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, an almost simple
+lightbox is used: Lightbox V2; or short: lightbox.
+
+.Nice cats
+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,
+others are browsed by easy-to-use control buttons.
+
+=== One Slide Carousel + Lightbox
+
+The build-in Carousel carousel supports multiple and single image shows.
+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::demo_oneslide[role="mb-3"]
+
+== JustifiedGallery
+
+JustifiedGallery 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 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!
+
+Pictures you've made are typically not even in size. Images may have the
+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 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
+seen it in use all over the Internet!
+
+.Masonry grid layout of JustifiedGallery
+gallery::jg_customizer[]
+
+== 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
+your web.
+
+Incredible? See the next example page link:{url-roundtrip--present-videos}[Present videos].

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

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "utls",
-  "version": "2022.0.10",
+  "version": "2022.0.11",
   "description": "J1 Template Utility Server",
   "homepage": "https://jekyll.one",
   "author": {

data/lib/starter_web/utilsrv/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "utls",
-  "version": "2022.0.10",
+  "version": "2022.0.11",
   "description": "J1 Template Utility Server",
   "homepage": "https://jekyll.one",
   "author": {