j1-template 2021.0.6 → 2021.0.7

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/100_chapter.asciidoc

@@ -0,0 +1,60 @@
+---
+# ~/document_base_folder
+# Top Level Entry Document:             100_chapter.asciidoc
+#
+title:                                  Skeleton book
+tagline:                                chapter 1
+date:                                   2021-01-01 00:00:00
+description: >
+                                        Top Level Entry Document 100_chapter.asciidoc
+
+categories:                             [ Asciidoc, Knowledge ]
+tags:                                   [ Skeleton, Document ]
+
+
+permalink:                              /pages/public/skeleton/book/chapter_1/
+regenerate:                             true
+
+resources:                              []
+resource_options:
+  - toccer:
+      collapseDepth:                    3
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/skeleton/sigmund-1920x1280.jpg
+          alt:                          Photo by Sigmund on Unsplash
+          alignY:                       top
+          badge:
+            type:                       unsplash
+            author:                     Sigmund
+            href:                       https://unsplash.com/@sigmund
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page 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
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+include::{documentdir}/100_chapter.asciidoc[]

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/200_chapter.asciidoc

@@ -0,0 +1,59 @@
+---
+# ~/document_base_folder
+# Top Level Entry Document:             200_chapter.asciidoc
+#
+title:                                  Skeleton book
+tagline:                                chapter 2
+date:                                   2021-01-01 00:00:00
+description: >
+                                        Top Level Entry Document 100_chapter.asciidoc
+
+categories:                             [ Asciidoc, Knowledge ]
+tags:                                   [ Skeleton, Document ]
+
+permalink:                              /pages/public/skeleton/book/chapter_2/
+regenerate:                             true
+
+resources:                              [ lightbox, light_gallery, justified_gallery ]
+resource_options:
+  - toccer:
+      collapseDepth:                    3
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/skeleton/sigmund-1920x1280.jpg
+          alt:                          Photo by Sigmund on Unsplash
+          alignY:                       top
+          badge:
+            type:                       unsplash
+            author:                     Sigmund
+            href:                       https://unsplash.com/@sigmund
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page 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
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+
+include::{documentdir}/200_chapter.asciidoc[]

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

@@ -0,0 +1,63 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+:url-j1--home:                                    https://jekyll.one/
+:url-wikipedia-en--writing:                       https://en.wikipedia.org/wiki/Introduction_(writing)/
+
+:url-fontawesome--home:                           https://fontawesome.com/
+:url-fontawesome--icons:                          https://fontawesome.com/icons?d=gallery/
+:url-fontawesome--get-started:                    https://fontawesome.com/get-started/
+
+:url-mdi--home:                                   https://materialdesignicons.com/
+:url-mdi-icons--cheatsheet:                       https://cdn.materialdesignicons.com/3.3.92/
+
+:url-iconify--home:                               https://iconify.design/
+:url-iconify--icon-sets:                          https://iconify.design/icon-sets/
+:url-iconify--medical-icons:                      https://iconify.design/icon-sets/medical-icon/
+:url-iconify--brand-icons:                        https://iconify.design/icon-sets/logos/
+
+: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/
+end::urls[]
+
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+end::tags[]
+
+
+// Data - Data elements for Asciidoctor extensions
+// -----------------------------------------------------------------------------
+tag::data[]
+:data-images-standalone:                          "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+:data-images-group:                               "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+end::data[]
+
+
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products[]
+:license:                                         e.g. Apache License, Version 2.0
+:revdate:                                         e.g. 2018
+:revnumber:                                       e.g. 1.2.3
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
+// -----------------------------------------------------------------------------
+tag::authors[]
+:uri-author-xxx:                                  https://xxx
+end::authors[]

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/_includes/documents/100_chapter.asciidoc

@@ -0,0 +1,53 @@
+// ~/document_base_folder/_includes/documents
+// Sublevel Entry Document: 100_chapter.asciidoc
+// -----------------------------------------------------------------------------
+
+== Chapter 1
+
+J1 Template support popular icons font sets out-of-the-box:
+
+* link:{url-mdi--home}[Material Design Icons, {browser-window--new}] (MDI)
+* link:{url-fontawesome--home}[FontAwesome Icons V5, {browser-window--new}] (FA)
+* link:{url-iconify--home}[Iconify Icons, {browser-window--new}] (II)
+
+The icon sets MDI and FA are very good in design and have a rich set of
+different icons for many categories used for the Web. See below some details
+for link:{url-roundtrip--mdi-icons}[Material Design Icons, {browser-window--new}]
+and link:{url-roundtrip--fontawesome-icons}[FontAwesome Icons, {browser-window--new}].
+
+Iconify icons is not a locally stored icon-set like MDI or FA. All icons are
+loaded over the Internet using the so-called *Unified OpenSource Icon
+Framework*. See section link:{url-roundtrip--iconify-icons}[Iconify Icons, {browser-window--new}]
+for more information.
+
+=== Section
+
+The primary icon-set for J1 Template is link:{url-mdi--home}[Material Design Icons, {browser-window--new}],
+because it is extremely rich set providing more than 5900+ icons for the
+current version (v5.9.55). From a design perspective, _MDI_ has an excellen
+*Material Design* support an comes with the original icon set created by
+_Google_ build-in.
+
+_Material Design Icons_ (MDI) is a beneficial design resource for Web Design
+that is based on _Google_'s Material Design. _MDI_ is a community-driven
+project to create an increased number of icons based on _Google_'s official repository
+and MD style specification.
+
+==== Subsection
+
+_MDI_ is a growing collection to allow designers and developers targeting
+various platforms to download icons in the format, color and size they need
+for any project. The repo contains today 2100+ icons plus converted icons from
+the official set created by _Google_.
+
+// include::{documentdir}/tables/110_material_design_icons.asciidoc
+// include::{tabledir}/110_material_design_icons.asciidoc
+include::./tables/110_material_design_icons.asciidoc[]
+
+NOTE: Using Material Design Icons with Asciidoc is quite easy as an inline
+macro `mdi:` is available to place icons where ever you want. See more about
+this in section
+link:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions, {browser-window--new}]
+
+_J1 Template_ supports the full set of _MDI_ for the Web (Webfont, WOFF). The
+icon set is fully integrated and can be used out-of-the-box.

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/_includes/documents/200_chapter.asciidoc

@@ -0,0 +1,53 @@
+// ~/document_base_folder/_includes/documents
+// Sublevel Entry Document: 200_chapter.asciidoc
+// -----------------------------------------------------------------------------
+
+== Chapter 2
+
+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.
+
+For J1 Template, two different lightboxes can be used:
+
+* 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.
+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 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.
+
+=== Section
+
+Find below an example of using the lightbox Lightbox standalone. See how
+single (individual) images are linked for the use with Lightbox.
+
+.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.
+
+.Lightbox block for grouped images
+lightbox::example-group[ 400, {data-images-group}, group ]
+
+==== Subsection
+
+LightGallery provides more complex functions on image data. The lightbox
+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.
+
+gallery::jg_example[]

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/_includes/documents/tables/110_material_design_icons.asciidoc

@@ -0,0 +1,102 @@
+// ~/document_base_folder/_includes/documents/tables
+// Table document: 110_material_design_icons.asciidoc
+// -----------------------------------------------------------------------------
+
+.Material Design Icons
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Size |Modifier |Markup |Render
+
+|1x
+|no modifier set
+|All `icon_name` can be found on the Preview page for MDI Icon Previewer +
+[source, adoc, role="noclip"]
+----
+mdi:account[1x]
+----
+|mdi:account[1x]
+
+|3x
+|no modifier set
+|All `icon_name` can be found on the Preview page for MDI Icon Previewer +
+[source, adoc, role="noclip"]
+----
+mdi:account[3x]
+----
+|mdi:account[3x]
+
+|5x
+|no modifier set
+|All `icon_name` can be found on the Preview page for MDI Icon Previewer
+[source, adoc, role="noclip"]
+----
+mdi:account[5x]
+----
+|mdi:account[5x]
+
+|5x
+|`mdi-rotate-45`
+|Rotate 45 degrees
+[source, adoc, role="noclip"]
+----
+mdi:account[5x mdi-rotate-45]
+----
+|mdi:account[5x mdi-rotate-45]
+
+|5x
+|`mdi-rotate-315`
+|Rotate 315 degrees
+[source, adoc, role="noclip"]
+----
+mdi:account[5x mdi-rotate-315]
+----
+|mdi:account[5x mdi-rotate-315]
+
+|5x
+|`mdi-light` +
+`mdi-flip-v`
+|Colour set to MDI Light (Grey) and flipped vertical
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x mdi-light mdi-flip-v]
+----
+|mdi:alert[5x mdi-light mdi-flip-v]
+
+|5x
+|`md-indigo`
+|Colour set to MDI Indigo
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x md-indigo]
+----
+|mdi:account[5x md-indigo]
+
+|5x
+|`md-pink`
+|Colour set to MDI Pink
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x md-pink]
+----
+|mdi:account[5x md-pink]
+
+|5x
+|`mdi-spin`
+|Added animation of type Rotate (Spin)
+[source, adoc, role="noclip"]
+----
+mdi:loading[5x mdi-spin]
+----
+|mdi:loading[5x mdi-spin]
+
+|5x
+|`md-red-900` +
+`mdi-pulsed`
+|Colour  set to MDI Dark Red and added animation of type Pulsed
+[source, adoc, role="noclip"]
+----
+mdi:heart[5x md-red-900 mdi-pulsed]
+----
+|mdi:heart[5x md-red-900 mdi-pulsed]
+
+|===============================================================================

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/multi.adoc

@@ -0,0 +1,84 @@
+---
+title:                                  Skeleton
+tagline:                                multi document
+date:                                   2021-01-01 00:00:00
+description: >
+                                        Multi-chapter documents are used for more complex articles of a website. If
+                                        the number of chapters is or exceeds three for an article, it could make sense
+                                        to split a larger documents chapter-wise into separate files. This document
+                                        type is based on  *multiple* Asciidoc documents and make use of (local and
+                                        global) Asciidoc include files and attributes.
+
+categories:                             [ Asciidoc, Skeleton ]
+tags:                                   [ Knowledge, Skeleton, Document ]
+
+permalink:                              /pages/public/skeleton/multi/
+regenerate:                             true
+
+resources:                              [ lightbox, light_gallery, justified_gallery ]
+resource_options:
+  - toccer:
+      collapseDepth:                    4
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/skeleton/annie-spratt-1920x1280.jpg
+          alt:                          Photo by Annie Spratt on Unsplash
+          alignY:                       top
+          badge:
+            type:                       unsplash
+            author:                     Annie Spratt
+            href:                       https://unsplash.com/@anniespratt
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page 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
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The Asciidoc *skeleton multi-document* a helper for setting up a base file and
+folder structure for multi-chapter AsciiDoc projects based on _Jekyll_
+and _J1 Template_. You need *both* to use this skeleton creating AsciiDoc
+documents from it.
+
+Multi-chapter documents are used for more complex articles of a website. If
+the number of chapters is or exceeds three for an article, it could make sense
+to split a larger documents chapter-wise into separate files. This document
+type is based on  *multiple* Asciidoc documents and make use of (local and
+global) Asciidoc include files and attributes.
+
+[NOTE]
+====
+.Moving documents based on the skeleton
+
+All Asciidoc Document Skeletons are fully *relocateable* and can be placed in
+any subfolder of your Jekyll site.
+====
+
+[role="mb-5"]
+*Happy Jekylling!*
+
+
+// Include Sublevel Documents
+// -----------------------------------------------------------------------------
+include::{documentdir}/100_chapter.asciidoc[]
+
+include::{documentdir}/200_chapter.asciidoc[]