j1-template 2021.0.5 → 2021.0.10

data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc

@@ -36,7 +36,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
@@ -90,7 +90,9 @@ and MD style specification.
 
 |1x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer +
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 mdi:account[1x]
@@ -99,7 +101,9 @@ mdi:account[1x]
 
 |3x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer +
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 mdi:account[3x]
@@ -108,7 +112,9 @@ mdi:account[3x]
 
 |5x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 mdi:account[5x]
@@ -117,7 +123,9 @@ mdi:account[5x]
 
 |5x
 |`mdi-rotate-45`
-|Rotate 45 degrees
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Rotate 45 degrees +
 [source, adoc, role="noclip"]
 ----
 mdi:account[5x mdi-rotate-45]
@@ -126,7 +134,9 @@ mdi:account[5x mdi-rotate-45]
 
 |5x
 |`mdi-rotate-315`
-|Rotate 315 degrees
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Rotate 315 degrees +
 [source, adoc, role="noclip"]
 ----
 mdi:account[5x mdi-rotate-315]
@@ -136,7 +146,9 @@ mdi:account[5x mdi-rotate-315]
 |5x
 |`mdi-light` +
 `mdi-flip-v`
-|Colour set to MDI Light (Grey) and flipped vertical
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Colour set to (md) light-grey and flipped vertical +
 [source, adoc, role="noclip"]
 ----
 mdi:alert[5x mdi-light mdi-flip-v]
@@ -145,7 +157,9 @@ mdi:alert[5x mdi-light mdi-flip-v]
 
 |5x
 |`md-indigo`
-|Colour set to MDI Indigo
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Colour set to (md) indigo +
 [source, adoc, role="noclip"]
 ----
 mdi:alert[5x md-indigo]
@@ -154,7 +168,9 @@ mdi:alert[5x md-indigo]
 
 |5x
 |`md-pink`
-|Colour set to MDI Pink
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Colour set to (md) pink +
 [source, adoc, role="noclip"]
 ----
 mdi:alert[5x md-pink]
@@ -163,7 +179,9 @@ mdi:alert[5x md-pink]
 
 |5x
 |`mdi-spin`
-|Added animation of type Rotate (Spin)
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Added animation of type rotate (spin) +
 [source, adoc, role="noclip"]
 ----
 mdi:loading[5x mdi-spin]
@@ -173,7 +191,9 @@ mdi:loading[5x mdi-spin]
 |5x
 |`md-red-900` +
 `mdi-pulsed`
-|Colour  set to MDI Dark Red and added animation of type Pulsed
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Colour  set to (md) color dark-red and added animation of type pulsed +
 [source, adoc, role="noclip"]
 ----
 mdi:heart[5x md-red-900 mdi-pulsed]
@@ -194,37 +214,102 @@ the official set created by _Google_.
 _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.
 
-For MDI a Preview Page is available to explore what can be done base on the
+For MDI a preview is available to explore what can be done base on the
 J1 implementation regarding sizes, colours, animations etc. Go for the
-link:{previewer-mdi}[Preview Page, {browser-window--new}] and check-out what's
+link:{previewer-mdi}[preview, {browser-window--new}] and check-out what's
 possible using MDI font icons!
 
 == FontAwesome Icons
 
-FontAwesome is a font and icon toolkit based on CSS. It was initially created
-by Dave Gandy. The previous version 4 was mainly for the use with Twitter
-Bootstrap V3. The new version V5, released in December 2017, is focussing all
-frameworks used for web development. Today, FA comes with 2300+ icons included.
+_FontAwesome_ is a font and icon toolkit based on CSS. It was initially created
+by _Dave Gandy_. The previous *version 4* was mainly for the use with Twitter
+Bootstrap *V3*. The new version *V5*, released in December 2017, is focussing
+all frameworks used for web development. Today, the *free FA* icon set comes
+with 1400+ icons included.
 
-
-[NOTE]
-====
-Since version 5, the icon set comes in two packages: FontAwesome Free
-and the proprietary FontAwesome Pro version available for a license fee.
+Since version 5, the icon set comes in two packages: FontAwesome *Free*
+and the proprietary, commercial FontAwesome *Pro* version but requires a
+license fee to pay.
 
 The free versions (all releases up to 4 and the free version for 5) are
 available under SIL Open Font License 1.1, Creative Commons Attribution 4.0,
 and the MIT License.
-====
 
-.FontAwesome Icons
+FontAwesome V5 meets the Material Design idea (of _Google_) and in comparison
+to Version 4, the current version is much more than a face-lifting. Version 5
+comes with more than 2300+ icons, but many of them are available with the Pro
+license only. For the Free version, only a subset of 900+ icons is available.
+
+NOTE: The CSS styles for FontAwesome V5 has been extended for J1 Template to
+the same classes (and their respective names) as for other Font Icon sets.
+Already existing styles like `fa-flip-vertical` are available as `fa-flip-v`
+as well. See all types that can be used with the MDI
+link:{previewer-mdi}[preview, {browser-window--new}].
+
+You can checkout what icons available at link:{fontawesome-icons}[FontAwesome Icons,
+{browser-window--new}]. _FontAwesome_ V5 is fully integrated - no need for
+additional resources to load. But in comparison to Version 4, a lot of
+differences needs to be noticed.
+
+If you haven't used V5 yet, it is highly recommended to visit the
+link:{fontawesome-get-started}[Get started, {browser-window--new}] pages to learn
+the basics and features and styles.
+
+With version V5 of _FontAwesome_, the icon set is split in two general parts:
+
+* standard icons (symbols) indicated by *FAS*
+* brand icons (icons for companies and brands) indicated by *FAB*
+
+NOTE: Using FontAwesome with Asciidoc is quite easy as two inline macros
+`fab:` and `fas:` are available to place icons where ever you want. See more about
+this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
+
+Find below examples of both and the use with J1 Template.
+
+=== Brand icons
+
+.FontAwesome Icons (FAB)
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Size |Modifier |Markup |Render
+
+|2x
+|no modifier set
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+fab:google[2x]
+----
+^|fab:google[2x]
+
+|5x
+|`md-blue`
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Color blue +
+[source, adoc, role="noclip"]
+----
+fab:blogger[5x md-blue]
+----
+|fab:blogger[5x md-blue]
+
+|===============================================================================
+
+
+=== Standard icons
+
+.FontAwesome Icons (FAS)
 [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
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 fas:user[1x]
@@ -233,7 +318,9 @@ fas:user[1x]
 
 |3x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 fas:user[3x]
@@ -242,7 +329,9 @@ fas:user[3x]
 
 |5x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 fas:user[5x]
@@ -251,7 +340,9 @@ fas:user[5x]
 
 |5x
 |`fa-rotate-90`
-|Rotate 90 degrees
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Rotate 90 degrees +
 [source, adoc, role="noclip"]
 ----
 fas:user[5x fa-rotate-90]
@@ -261,7 +352,9 @@ fas:user[5x fa-rotate-90]
 |5x
 |`mdi-light` +
 `fa-flip-v`
-|Colour set to MDI Light (Grey) and flipped vertical
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Colour set to MDI Light (Grey) and flipped vertical +
 [source, adoc, role="noclip"]
 ----
 fas:exclamation-triangle[5x mdi-light fa-flip-v]
@@ -270,7 +363,9 @@ fas:exclamation-triangle[5x mdi-light fa-flip-v]
 
 |5x
 |`md-indigo`
-|Colour set to MDI Indigo
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Colour set to MDI Indigo +
 [source, adoc, role="noclip"]
 ----
 fas:alert[5x md-indigo]
@@ -279,7 +374,9 @@ fas:alert[5x md-indigo]
 
 |5x
 |`md-pink`
-|Colour set to MDI Pink
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Colour set to MDI Pink +
 [source, adoc, role="noclip"]
 ----
 fas:alert[5x md-pink]
@@ -288,7 +385,9 @@ fas:alert[5x md-pink]
 
 |5x
 |`fa-spin`
-|Added animation of type Rotate (Spin)
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Added animation of type Rotate (Spin) +
 [source, adoc, role="noclip"]
 ----
 fas:circle-notch[5x fa-spin]
@@ -298,7 +397,9 @@ fas:circle-notch[5x fa-spin]
 |5x
 |`md-red-900` +
 `md-red-900` `fa-pulsed`
-|Colour set to MDI Dark Red and added animation of type Pulsed
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Colour set to MDI Dark Red and added animation of type Pulsed +
 [source, adoc, role="noclip"]
 ----
 fas:heart[5x md-red-900 fa-pulsed]
@@ -307,46 +408,25 @@ fas:heart[5x md-red-900 fa-pulsed]
 
 |===============================================================================
 
-NOTE: Using FontAwesome with Asciidoc is quite easy as two inline macros
-`fas:` and `fas:` are available to place icons where ever you want. See more about
-this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
-
-FontAwesome V5 meets the Material Design idea (of _Google_) and in comparison
-to Version 4, the current version is much more than a face-lifting. Version 5
-comes with more than 2300+ icons, but many of them are available with the Pro
-license only. For the Free version, only a subset of 900+ icons is available.
-
-NOTE: The CSS styles for FontAwesome V5 has been extended for J1 Template to
-the same classes (and their respective names) as for other Font Icon sets.
-Already existing styles like `fa-flip-vertical` are available as `fa-flip-v`
-as well. See all types that can be used with the MDI
-link:{previewer-mdi}[Preview Page, {browser-window--new}].
-
-You can checkout what icons available at link:{fontawesome-icons}[FontAwesome Icons,
-{browser-window--new}]. _FontAwesome_ V5 is fully integrated - no need for
-additional resources to load. But in comparison to Version 4, a lot of
-differences needs to be noticed.
-
-If you haven't used V5 yet, it is highly recommended to visit the
-link:{fontawesome-get-started}[Get started, {browser-window--new}] pages to learn
-the basics and features and styles.
-
 
 == Iconify Icons
 
-MDI and FA are rich icon-sets but designed for general use. Sometimes
-icons are missing in one of these fonts like specific brand or theme
-icons.
-
-An interesting solution for using font icons from a remote repository is
-link:{iconify-home}[Iconify, {browser-window--new}]. Iconify is a so-called unified
-OpenSource icon framework that makes it possible to use icons from different
-icon sets using one syntax.
+MDI and FA are rich icon sets but designed for general use. Sometimes icons
+are missing in one of these fonts like specific brand or theme icons. An
+interesting solution for using font icons from a remote repository is
+link:{iconify-home}[Iconify, {browser-window--new}]. Iconify is a so-called
+unified OpenSource icon framework that makes it possible to use icons from
+different icon sets using one (unified) syntax.
 
 To access that framework, a Javascript client is needed. For J1 Template, the
-client is available with the JS assets (/assets/themes/j1/extensions/iconify)
-and is loaded per default. To see what icon sets available with that framework,
-check the page link:{iconify-icon-sets}[Iconify Icon Sets, {browser-window--new}].
+client is build-in and is loaded if Iconify is requested as a resource. To see
+what icon sets available with that framework, check the page
+link:{iconify-icon-sets}[Iconify Icon Sets, {browser-window--new}].
+
+NOTE: Using Iconify icons with J1 Template is quite easy. An Asciidoctor
+inline macro `iconify:` (Asciidoctor Extension) is available to place icons
+where ever you want. See more about this in section
+link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
 Currently, over 40,000 vector icons are available for many different use cases.
 Find some examples below.
@@ -358,21 +438,25 @@ Find some examples below.
 
 |3x
 |no modifier set
-|All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}]
+|All icons can be found for preview at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 iconify:logos:opensource[3x]
 ----
 ^|iconify:logos:opensource[3x]
 
-|5x
+|3x
 |no modifier set
-|All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}]
+|All icons can be found for preview at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
-iconify:logos:atom[5x]
+iconify:logos:asciidoctor[3x]
 ----
-^|iconify:logos:atom[5x]
+^|iconify:logos:asciidoctor[3x]
 
 |===============================================================================
 
@@ -383,7 +467,9 @@ iconify:logos:atom[5x]
 
 |3x
 |no modifier set
-|All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}]
+|All icons can be found for preview at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 iconify:medical-icon:i-ear-nose-throat[3x]
@@ -392,7 +478,9 @@ iconify:medical-icon:i-ear-nose-throat[3x]
 
 |5x
 |`md-red-900`
-|All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}]
+|All icons can be found for preview at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}] page online. +
+
+Color (md) red +
 [source, adoc, role="noclip"]
 ----
 iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
@@ -401,19 +489,13 @@ iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
 
 |===============================================================================
 
-NOTE: Using Iconify icons with Asciidoc is quite easy as an inline macro
-`iconify:` is available to place icons where ever you want. See more about
-this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
 == Whats next
 
 Have you've enjoyed the possibilities J1 offers for managing and
 manipulating Font Icons. Do you think these Icons sets can fit your needs?
-
 Using Iconify, for all topics an icon font should be found. And it's simple,
 isn't it?
 
-We hope so.
-
 To check more features of the template, go for the link:{roundtrip-asciidoc-extensions}[
 Asciidoc extensions] made for J1!

data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc

@@ -37,7 +37,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
@@ -491,19 +491,16 @@ lorem:email[]
 
 // Include documents
 // -----------------------------------------------------------------------------
-
 include::{documentdir}/100_gistblock.asciidoc[]
 
 
 == Whats next
 
 Asciidoc, respectively Asciidoctor, extensions open up the Markup language to
-new use cases; using the full power of programming languages to extend what's
-needed whether it be Ruby, Java, Groovy or JavaScript.
-
-The number of extensions will grow - to get handy and powerful functionality
-that is needed for modern Web pages based on the Asciidoc Markup language
-generated by Jekyll. For sure!
+new use cases. Using the full power of programming languages to extend what's
+needed whether it be Ruby, Java, Groovy or JavaScript. The number of extensions
+will grow - to get handy and powerful functionality that is needed for modern
+web pages based on the Asciidoc Markup language generated by Jekyll. For sure!
 
 The next preview is focussing advanced Bootstrap Modals. The modals feature
 is currently in beta status, but it is a great option to customize your