j1-template 2021.0.6 → 2021.0.11

data/lib/starter_web/pages/public/asciidoc_skeletons/book/_includes/documents/000_intro.asciidoc

@@ -0,0 +1,33 @@
+// ~/document_base_folder/000_includes/documents
+// Intro document: 000_intro.asciidoc
+// -----------------------------------------------------------------------------
+
+== Introduction
+
+{url-wikipedia-en--writing}[From Wikipedia, {browser-window--new}]
+
+In an essay, article, or book, an introduction (also known as a prolegomenon)
+is a beginning section which states the purpose and goals of the following
+writing. This is generally followed by the body and conclusion.
+
+The introduction typically describes the scope of the document and gives
+the brief explanation or summary of the document. It may also explain certain
+elements that are important to the essay if explanations are not part of
+the main text. The readers can have an idea about the following text before
+they actually start reading it.
+
+ln technical writing, the introduction typically includes one or more standard
+subsections: abstract or summary, preface, acknowledgments, and foreword.
+Alternatively, the section labeled introduction itself may be a brief
+section found side-by-side with abstract, foreword, etc. (rather than
+containing them). In this case the set of sections that come before the
+body of the book are known as the front matter. When the book is divided
+into numbered chapters, by convention the introduction and any other
+front-matter sections are unnumbered and precede chapter 1.
+
+Keeping the concept of the introduction the same, different documents
+have different styles to introduce the written text. For example,
+the introduction of a Functional Specification consists of information
+that the whole document is yet to explain. If a Userguide is written,
+the introduction is about the product. In a report, the introduction gives
+a summary about the report contents.

data/lib/starter_web/pages/public/asciidoc_skeletons/book/_includes/documents/100_chapter.asciidoc

@@ -0,0 +1,7 @@
+// ~/document_base_folder/_includes/documents
+// Sublevel Entry Document: 100_chapter.asciidoc
+// -----------------------------------------------------------------------------
+
+include::100_chapter/100_chapter_document.asciidoc[]
+
+include::100_chapter/110_chapter_document.asciidoc[]

data/lib/starter_web/pages/public/asciidoc_skeletons/book/_includes/documents/100_chapter/100_chapter_document.asciidoc

@@ -0,0 +1,21 @@
+// ~/document_base_folder/_includes/documents/100_chapter/
+// Chapter document: 100_chapter_document.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.

data/lib/starter_web/pages/public/asciidoc_skeletons/book/_includes/documents/100_chapter/110_chapter_document.asciidoc

@@ -0,0 +1,36 @@
+// ~/document_base_folder/_includes/documents/100_chapter/
+// Chapter document: 110_chapter_document.asciidoc
+// -----------------------------------------------------------------------------
+
+=== 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/book/_includes/documents/200_chapter.asciidoc

@@ -0,0 +1,5 @@
+// ~/document_base_folder/_includes/documents
+// Sublevel Entry Document: 200_chapter.asciidoc
+// -----------------------------------------------------------------------------
+
+include::200_chapter/200_chapter_document.asciidoc[]

data/lib/starter_web/pages/public/asciidoc_skeletons/book/_includes/documents/200_chapter/200_chapter_document.asciidoc

@@ -0,0 +1,53 @@
+// ~/document_base_folder/_includes/documents/200_chapter/
+// Chapter document: 200_chapter_document.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/book/_includes/documents/900_references.asciidoc

@@ -0,0 +1,23 @@
+// ~/document_base_folder/_includes/documents
+// Sublevel Entry Document: 900_sources.asciidoc
+// -----------------------------------------------------------------------------
+
+== References
+
+This section lists all references and sources used in all chapters of this
+document. The sections <<Articles>>, <<HowTos>> or <<Blogs and Platforms>>
+may give additional information for further reading.
+
+Some documents are using symbols. Find an explanation in section <<legend>>.
+
+
+// Include references by chapters
+// -----------------------------------------------------------------------------
+
+include::900_references/000_intro.asciidoc[]
+
+include::900_references/100_chapter_document.asciidoc[]
+
+include::900_references/200_chapter_document.asciidoc[]
+
+include::900_references/900_sources.asciidoc[]

data/lib/starter_web/pages/public/asciidoc_skeletons/book/_includes/documents/900_references/000_intro.asciidoc

@@ -0,0 +1,23 @@
+// ~/document_base_folder/_includes/documents/900_sources/
+// Chapter document: 100_chapter_document.asciidoc
+// -----------------------------------------------------------------------------
+
+// URIs may moved to ~/000_includes/attributes.asciidoc
+// -----------------------------------------------------------------------------
+:url-wikipedia--introduction:           https://en.wikipedia.org/wiki/Introduction_(writing)
+
+=== Introduction
+
+.References - Introduction
+[cols="3,^.>5a,^1,^1,^1,^1", subs=+macros, options="header", role="rtable mt-3 mb-5"]
+|===============================================================================
+|Author |Title |Year |Level |Cite |Source
+
+|Wikipedia
+|{url-wikipedia--introduction}[Introduction (writing), {browser-window--new}]
+|na
+|{level--beginner}
+|{icon-checked}
+|{icon-checked}
+
+|===============================================================================

data/lib/starter_web/pages/public/asciidoc_skeletons/book/_includes/documents/900_references/100_chapter_document.asciidoc

@@ -0,0 +1,33 @@
+// ~/document_base_folder/_includes/documents/900_sources/
+// Chapter document: 100_chapter_document.asciidoc
+// -----------------------------------------------------------------------------
+
+=== Chapter 1
+
+.References - Chapter 1
+[cols="3,^.>5a,^1,^1,^1,^1", subs=+macros, options="header", role="rtable mt-3 mb-5"]
+|===============================================================================
+|Author |Title |Year |Level |Cite |Source
+
+|Austin Andrews
+|{url-mdi--home}[Material Design Icons, {browser-window--new}]
+|2021
+|{level--advanced}
+|{icon-checked}
+|{icon-times}
+
+|Fonticons, Inc.
+|{url-fontawesome--home}[FontAwesome Icons V5, {browser-window--new}]
+|2021
+|{level--advanced}
+|{icon-checked}
+|{icon-times}
+
+|Iconify OÜ
+|{url-iconify--home}[Iconify Icons, {browser-window--new}]
+|2021
+|{level--advanced}
+|{icon-checked}
+|{icon-times}
+
+|===============================================================================

data/lib/starter_web/pages/public/asciidoc_skeletons/book/_includes/documents/900_references/200_chapter_document.asciidoc

@@ -0,0 +1,26 @@
+// ~/document_base_folder/_includes/documents/900_sources/
+// Chapter document: 200_chapter_document.asciidoc
+// -----------------------------------------------------------------------------
+
+=== Chapter 2
+
+.References - Chapter 2
+[cols="3,^.>5a,^1,^1,^1,^1", subs=+macros, options="header", role="rtable mt-3 mb-5"]
+|===============================================================================
+|Author |Title |Year |Level |Cite |Source
+
+|Sachin N
+|{url-lightbox-v2--home}[LightGallery, {browser-window--new}]
+|2021
+|{level--advanced}
+|{icon-checked}
+|{icon-times}
+
+|Lokesh Dhakar
+|{url-light-gallery--home}[Lightbox V2, {browser-window--new}]
+|2021
+|{level--advanced}
+|{icon-checked}
+|{icon-times}
+
+|===============================================================================

data/lib/starter_web/pages/public/asciidoc_skeletons/book/_includes/documents/900_references/900_sources.asciidoc

@@ -0,0 +1,81 @@
+// ~/document_base_folder/_includes/documents/900_sources/
+// Chapter document: 900_sources.asciidoc
+// -----------------------------------------------------------------------------
+
+=== Legend
+
+Find with the following the explanation on all symbols used.
+
+==== Levels
+
+Level of experience required to read and understand what is presented.
+
+* {level--beginner} beginner
+* {level--intermediate} intermediate
+* {level--advanced} advanced
+* {level--expert} expert
+
+==== Usage
+
+The following symbols indicate, if sth. was used or *not* used.
+
+* {icon-checked} used
+* {icon-times} unused
+
+=== Sources of Information
+
+Find with this section all references and sources used. Sections <<Articles>>,
+<<HowTos>> or <<Blogs and Platforms>> may give additional information for
+further reading.
+
+
+==== Articles
+
+.Sources - Articles
+[cols="3,^.>5a,^1,^1,^1,^1", options="header", width="100%", role="rtable"]
+|===============================================================================
+|Author |Title |Year |Level |Cite |Source
+
+|Wikipedia
+|{url-wikipedia-en--asciidoc}[Asciidoc, {browser-window--new}]
+|na
+|{level--beginner}
+|{icon-times}
+|{icon-times}
+
+|===============================================================================
+
+
+==== HowTos
+
+.Sources - HowTos
+[cols="3,^.>5a,^1,^1,^1,^1", options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Author |Title |Year |Level |Cite |Source
+
+|asciidoctor.org
+|{url-asciidoctor--asciidoc-writers-guide}[AsciiDoc Writer’s Guide, {browser-window--new}]
+|na
+|{level--intermediate}
+|{icon-times}
+|{icon-times}
+
+
+|===============================================================================
+
+
+==== Blogs and Platforms
+
+.Sources - Blogs and Platforms
+[cols="3,^.>5a,^1,^1,^1,^1", options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Author |Title |Year |Level |Cite |Source
+
+|asciidoctor.org
+|{url-asciidoctor--asciidoc-manual}[AsciiDoc Manual, {browser-window--new}]
+|2021
+|{level--advanced}
+|{icon-checked}
+|{icon-times}
+
+|===============================================================================

data/lib/starter_web/pages/public/asciidoc_skeletons/book/_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]
+
+|===============================================================================