j1-template 2021.0.10 → 2021.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27b46d9f0f34c392aa791e49d541257879aa7e52ab0d9ab260f98e7e8f582a3c
-  data.tar.gz: 7f3afa6e6405644e78051ccf118a540355f61814ea184a19815cd2e8727e6049
+  metadata.gz: f6acbcf086ed7aaec81c396b5f33d9e9b0dba8609961994d26399a5f337612dc
+  data.tar.gz: 8f933f72a2ea77c7f9281aa29c9b93d69d60ee8eca260f8ce40c781506a169d1
 SHA512:
-  metadata.gz: 26bfc67abb46bfeb2a0169bf836252641289f1707f8af45c1b8285d302511ce065c88fb7c7c08fc3fc633ec61073f87b6abaea5ab4dbdb1ac9d787047d0d17af
-  data.tar.gz: bc4bf04ae1f53d6a3f51df5cac98982480b797e8aa24f6e67f4449a9f49534b07ea38c0b16ce1aa6144b8a278ec6a53e38c822b2f588f5640e74449b2db62f73
+  metadata.gz: 8f73a7470478f7d39715b96e2d1b4bb732351e2ef055e465ac8ad1a3fe0a74050c422f0dcfa6def734b1135fda0df5ac5d007287c54ae52c59bfeb3d93d96ec3
+  data.tar.gz: 571abb6187ac1640cf88230dc188099f1d4591ba1227226b1e04587c4973f61c2634ae2712cc32565c3bd3c5349ac152f504fe6adc4923f8df207e26df4c32c8

data/assets/themes/j1/adapter/js/themer.js

@@ -197,32 +197,55 @@ j1.adapter['themer'] = (function (j1, window) {
         if (j1.getState() == 'finished') {
           if (themerOptions.enabled) {
             // enable BS ThemeSwitcher
+            //
             logger.info('themes detected as: enabled');
             logger.info('theme is being initialized: ' + user_state.theme_name);
 
+            // jadams, 2021-02-22: make sure that remote themes are loaded
+            // max retries = max_count
+
+            // load list of remote themes
+            //
             if ( $('#remote_themes').length ) {
-              /* eslint-disable */
-              // initialize Bootswatch Theme Switcher
-              $('#remote_themes').bootstrapThemeSwitcher.defaults = {
-                debug:                    themerOptions.debug,
-                saveToCookie:             themerOptions.saveToCookie,
-                cssThemeLink:             themerOptions.cssThemeLink,
-                cookieThemeName:          themerOptions.cookieThemeName,
-                cookieDefaultThemeName:   themerOptions.cookieDefaultThemeName,
-                cookieThemeCss:           themerOptions.cookieThemeCss,
-                cookieThemeExtensionCss:  themerOptions.cookieThemeExtensionCss,
-                cookieExpiration:         themerOptions.cookieExpiration,
-                cookiePath:               themerOptions.cookiePath,
-                defaultCssFile:           themerOptions.defaultCssFile,
-                bootswatchApiUrl:         themerOptions.bootswatchApiUrl,
-                bootswatchApiVersion:     themerOptions.bootswatchApiVersion,
-                loadFromBootswatch:       themerOptions.loadFromBootswatch,
-                localFeed:                themerOptions.localThemes,
-                excludeBootswatch:        themerOptions.excludeBootswatch,
-                includeBootswatch:        themerOptions.includeBootswatch,
-                skipIncludeBootswatch:    themerOptions.skipIncludeBootswatch
-              }
-              /* eslint-enable */
+              var interval_count = 0;
+              var max_count      = 5;
+
+              var dependencies_met_remote_themes_loaded = setInterval(function() {
+                interval_count += 1;
+                if ( document.getElementById("remote_themes").getElementsByTagName("li").length == 0  ) {
+                  /* eslint-disable */
+                  // initialize Bootswatch Theme Switcher
+                  $('#remote_themes').bootstrapThemeSwitcher.defaults = {
+                    debug:                    themerOptions.debug,
+                    saveToCookie:             themerOptions.saveToCookie,
+                    cssThemeLink:             themerOptions.cssThemeLink,
+                    cookieThemeName:          themerOptions.cookieThemeName,
+                    cookieDefaultThemeName:   themerOptions.cookieDefaultThemeName,
+                    cookieThemeCss:           themerOptions.cookieThemeCss,
+                    cookieThemeExtensionCss:  themerOptions.cookieThemeExtensionCss,
+                    cookieExpiration:         themerOptions.cookieExpiration,
+                    cookiePath:               themerOptions.cookiePath,
+                    defaultCssFile:           themerOptions.defaultCssFile,
+                    bootswatchApiUrl:         themerOptions.bootswatchApiUrl,
+                    bootswatchApiVersion:     themerOptions.bootswatchApiVersion,
+                    loadFromBootswatch:       themerOptions.loadFromBootswatch,
+                    localFeed:                themerOptions.localThemes,
+                    excludeBootswatch:        themerOptions.excludeBootswatch,
+                    includeBootswatch:        themerOptions.includeBootswatch,
+                    skipIncludeBootswatch:    themerOptions.skipIncludeBootswatch
+                  }
+                  /* eslint-enable */
+                } else {
+                  logger.info('remote themes loaded: successfully');
+                  logger.debug('remote themes loaded: successfully after: ' + interval_count * 25 + ' ms');
+                  clearInterval(dependencies_met_remote_themes_loaded);
+                }
+                if (interval_count > max_count) {
+                  logger.warn('remote themes loading: failed');
+                  logger.warn('continue processing');
+                  clearInterval(dependencies_met_remote_themes_loaded);
+                }
+              }, 25);
 
               logger.info('theme loaded: ' + user_state.theme_name);
               logger.info('theme css file: ' + user_state.theme_css);

data/lib/j1/commands/generate.rb

@@ -57,7 +57,7 @@ module J1
         # Internal: Gets the filename of the sample post to be created
         # Returns the filename of the sample post, as a String
         def initialized_post_name
-          "collections/posts/public/featured/_posts/#{Time.now.strftime("%Y-%m-%d")}-welcome-to-j1-template.adoc"
+          "collections/posts/public/featured/_posts/#{Time.now.strftime("%Y-%m-%d")}-welcome-to-j1.adoc"
         end
 
         private

data/lib/j1/version.rb

@@ -1,3 +1,3 @@
 module J1
-  VERSION = '2021.0.10'
+  VERSION = '2021.0.11'
 end

data/lib/starter_web/Gemfile

@@ -54,7 +54,7 @@ gem 'jekyll', '~> 4.2'
 
 # Theme Rubies, default: J1 Template
 #
-gem 'j1-template', '~> 2021.0.10'
+gem 'j1-template', '~> 2021.0.11'
 
 # ------------------------------------------------------------------------------
 # PRODUCTION: Gem needed for the Jekyll and J1 prod environment

data/lib/starter_web/_config.yml

@@ -53,7 +53,7 @@ environment:                            production
 # ------------------------------------------------------------------------------
 #   Sets the build version of J1 Template Gem
 #
-version:                                2021.0.10
+version:                                2021.0.11
 
 # version
 # ------------------------------------------------------------------------------
@@ -448,8 +448,8 @@ plugins:
 # - jekyll-gist
 # - jekyll-sitemap
 # - jekyll-redirect-from
+# - jekyll-sass-converter
   - j1-paginator
-  - jekyll-sass-converter
 
 # ------------------------------------------------------------------------------
 # JEKYLL FEED

data/lib/starter_web/_data/blocks/banner.yml

@@ -159,24 +159,36 @@ settings:
                 - name:                 Roundtrip button
                   button:
                     text:               Roundtrip
-                    class:              btn btn-raised btn-flex btn-md btn-primary mr-2 mb-2
-                    style:              "min-width: 17rem"
+                    class:              btn btn-raised btn-flex btn-md btn-primary mr-2 mb-3
+                    style:              "min-width: 12rem"
                     icon:               eye
                     icon_color:         md_white
                     icon_size:          24px
-                    href:               /pages/public/learn/where_to_go/
+                    href:               /pages/public/learn/roundtrip/present_images/
                     target:
 
                 - name:                 Kickstarter button
                   button:
                     text:               Kickstart
-                    class:              btn btn-raised btn-flex btn-md btn-primary mr-2 mb-2
-                    style:              "min-width: 17rem"
+                    class:              btn btn-raised btn-flex btn-md btn-primary mr-2 mb-3
+                    style:              "min-width: 12rem"
                     icon:               rocket
                     icon_color:         md_white
                     icon_size:          24px
                     href:               "https://jekyll.one/pages/public/learn/kickstarter/web_in_a_day/meet_and_greet/"
-                    target:             blank
+                    target:             _blank
+
+
+                - name:                 Download button
+                  button:
+                    text:               Download
+                    class:              btn btn-raised btn-flex btn-md btn-primary mr-2 mb-3
+                    style:              "min-width: 12rem"
+                    icon:               download
+                    icon_color:         md_white
+                    icon_size:          24px
+                    href:               "https://rubygems.org/gems/j1-template/versions/2021.0.11"
+                    target:             _blank
 
                 # - name:                 Patreon button
                 #   button:

data/lib/starter_web/_data/modules/fam.yml

@@ -88,6 +88,14 @@ settings:
       #
       items:
 
+        - item:                         To Top
+          enabled:                      true
+          id:                           fam_scroll_to_top
+          color:                        md-green
+          event_handler:                scroll_to_top
+          icon:                         step-backward-2
+          icon_properties:              rotate-90
+
         - item:                         Previous Section
           enabled:                      true
           id:                           fam_previous_section

data/lib/starter_web/_includes/attributes.asciidoc

@@ -148,6 +148,8 @@ tag::urls[]
 :url-iframe-resizer--gh-repo:                     https://github.com/davidjbradshaw/iframe-resizer
 
 :url-j1--home:                                    https://jekyll.one/
+:url-j1--download:                                https://rubygems.org/gems/j1-template/versions/2021.0.11
+:url-j1-rubydoc--home:                            https://www.rubydoc.info/gems/j1-template/2021.0.11
 :url-j1--preview:                                 https://preview.jekyll.one/
 
 :url-j1-web-in-a-day--meet-and-greet:             https://jekyll.one/pages/public/learn/kickstarter/web_in_a_day/meet_and_greet/
@@ -356,6 +358,12 @@ tag::tags[]
 :icon-battery--three-quarter:                     icon:battery-three-quarters[role="md-blue"]
 :icon-battery--full:                              icon:battery-full[role="md-blue"]
 
+:badge-j1--license:                               image:https://img.shields.io/github/license/jekyll-one-org/j1-template[GitHub, link="https://github.com/jekyll-one-org/j1-template/blob/master/LICENSE.md", window="_blank"]
+:badge-j1--version-latest:                        image:https://badge.fury.io/rb/j1-template.svg[Gem Version, link="https://badge.fury.io/rb/j1-template", window="_blank"]
+:badge-j1--downloads:                             image:https://img.shields.io/gem/dt/j1-template[Gem]
+:badge-j1-gh--last-commit:                        image:https://img.shields.io/github/last-commit/jekyll-one-org/j1-template[GitHub last commit]
+:badge-j1-gh--stars:                              image:https://img.shields.io/github/stars/jekyll-one-org/j1-template?style=social[GitHub Repo stars]
+
 :char-emdash:                                     —
 :char-middot:                                     ·
 :char-dot:                                        .
@@ -392,7 +400,7 @@ end::tables[]
 // -----------------------------------------------------------------------------
 tag::products[]
 :j1-license:                                      MIT License
-:j1-version:                                      2021.0.10
+:j1-version:                                      2021.0.11
 end::products[]
 
 

data/lib/starter_web/_plugins/lunr_index.rb

@@ -341,6 +341,6 @@ end
 
 module Jekyll
   module J1LunrSearch
-    VERSION = '2021.0.10'
+    VERSION = '2021.0.11'
   end
 end

data/lib/starter_web/assets/images/modules/icons/d1/scalable/d1.svg

@@ -14,7 +14,7 @@
    version="1.1"
    inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
    sodipodi:docname="d1.svg"
-   inkscape:export-filename="C:\Temp\d10n-2021.0.10\assets\images\modules\icons\d1\d1-256x256.png"
+   inkscape:export-filename="C:\Temp\d10n-2021.0.11\assets\images\modules\icons\d1\d1-256x256.png"
    inkscape:export-xdpi="49.152"
    inkscape:export-ydpi="49.152">
   <title

data/lib/starter_web/collections/posts/public/featured/_posts/2020-06-01-about-cookies.adoc

@@ -135,6 +135,8 @@ 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::
@@ -145,6 +147,8 @@ 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::
@@ -159,7 +163,6 @@ This can happen when the webpage references a files 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
@@ -176,7 +179,7 @@ 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.org]. You can delete
+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.
 

data/lib/starter_web/dot.gitignore

@@ -16,6 +16,8 @@ Passengerfile.json
 
 tmp/
 
+\.bundle/
+
 \.idea/
 
 \.vscode/
@@ -50,6 +52,3 @@ _site/
 .jekyll-cache/
 
 .sass-cache/
-
-
-

data/lib/starter_web/package.json

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

data/lib/starter_web/pages/public/about/about_site.adoc

@@ -22,13 +22,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/aditya-joshi-1920x1280.jpg
-          alt:                          Photo by Aditya Joshi
-          alignY:                       0.5
-          badge:
-            type:                       unsplash
-            author:                     Aditya Joshi
-            href:                       https://unsplash.com/@adijoshi11
+        - url:                          /assets/images/modules/attics/runner-1920x1200.jpg
 ---
 
 // Page Initializer
@@ -39,6 +33,7 @@ resource_options:
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
+:badges-enabled:                        false
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -52,6 +47,10 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+ifeval::[{badges-enabled} == true]
+{badge-j1--license} {badge-j1--version-latest} {badge-j1-gh--last-commit} {badge-j1--downloads}
+endif::[]
+
 // Include sub-documents
 // -----------------------------------------------------------------------------
 

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

@@ -72,7 +72,8 @@ Framework*. See section <<Iconify Icons>> for more information.
 
 == Material Design Icons
 
-The primary icon-set for J1 Template is link:{mdi-home}[Material Design Icons, {browser-window--new}],
+The primary icon-set for J1 Template is
+link:{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
@@ -80,8 +81,8 @@ _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.
+project to create an increased number of icons based on _Google_'s official
+repository and MD style specification.
 
 .Material Design Icons
 [cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
@@ -90,7 +91,9 @@ and MD style specification.
 
 |1x
 |no modifier set
-|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+|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"]
@@ -101,7 +104,9 @@ mdi:account[1x]
 
 |3x
 |no modifier set
-|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+|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"]
@@ -112,7 +117,9 @@ mdi:account[3x]
 
 |5x
 |no modifier set
-|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+|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"]
@@ -123,7 +130,9 @@ mdi:account[5x]
 
 |5x
 |`mdi-rotate-45`
-|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+|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"]
@@ -134,7 +143,9 @@ mdi:account[5x mdi-rotate-45]
 
 |5x
 |`mdi-rotate-315`
-|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+|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"]
@@ -146,7 +157,9 @@ mdi:account[5x mdi-rotate-315]
 |5x
 |`mdi-light` +
 `mdi-flip-v`
-|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+|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"]
@@ -157,7 +170,9 @@ mdi:alert[5x mdi-light mdi-flip-v]
 
 |5x
 |`md-indigo`
-|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+|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"]
@@ -168,7 +183,9 @@ mdi:alert[5x md-indigo]
 
 |5x
 |`md-pink`
-|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+|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"]
@@ -179,7 +196,9 @@ mdi:alert[5x md-pink]
 
 |5x
 |`mdi-spin`
-|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+|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"]
@@ -191,7 +210,9 @@ mdi:loading[5x mdi-spin]
 |5x
 |`md-red-900` +
 `mdi-pulsed`
-|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+|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"]
@@ -202,9 +223,10 @@ mdi:heart[5x md-red-900 mdi-pulsed]
 
 |===============================================================================
 
-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:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
+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:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
 _MDI_ is a growing collection to allow designers and developers targeting
 various platforms to download icons in the format, color and size they need
@@ -214,11 +236,6 @@ 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 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, {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
@@ -243,17 +260,17 @@ 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}].
+as well.
 
-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.
+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.
+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:
 
@@ -261,8 +278,9 @@ With version V5 of _FontAwesome_, the icon set is split in two general parts:
 * 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]
+`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.
 
@@ -275,7 +293,8 @@ Find below examples of both and the use with J1 Template.
 
 |2x
 |no modifier set
-|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+|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"]
@@ -286,7 +305,8 @@ 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. +
+|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"]
@@ -307,7 +327,8 @@ fab:blogger[5x md-blue]
 
 |1x
 |no modifier set
-|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+|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"]
@@ -318,7 +339,8 @@ fas:user[1x]
 
 |3x
 |no modifier set
-|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+|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"]
@@ -329,7 +351,8 @@ fas:user[3x]
 
 |5x
 |no modifier set
-|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+|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"]
@@ -340,7 +363,8 @@ fas:user[5x]
 
 |5x
 |`fa-rotate-90`
-|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+|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"]
@@ -352,7 +376,8 @@ fas:user[5x fa-rotate-90]
 |5x
 |`mdi-light` +
 `fa-flip-v`
-|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+|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"]
@@ -363,7 +388,8 @@ fas:exclamation-triangle[5x mdi-light fa-flip-v]
 
 |5x
 |`md-indigo`
-|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+|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"]
@@ -374,7 +400,8 @@ fas:alert[5x md-indigo]
 
 |5x
 |`md-pink`
-|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+|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"]
@@ -385,7 +412,8 @@ fas:alert[5x md-pink]
 
 |5x
 |`fa-spin`
-|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+|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"]
@@ -397,7 +425,8 @@ fas:circle-notch[5x fa-spin]
 |5x
 |`md-red-900` +
 `md-red-900` `fa-pulsed`
-|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+|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"]
@@ -438,7 +467,8 @@ Find some examples below.
 
 |3x
 |no modifier set
-|All icons can be found for preview at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}] page online. +
+|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"]
@@ -449,7 +479,8 @@ iconify:logos:opensource[3x]
 
 |3x
 |no modifier set
-|All icons can be found for preview at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}] page online. +
+|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"]
@@ -467,7 +498,8 @@ iconify:logos:asciidoctor[3x]
 
 |3x
 |no modifier set
-|All icons can be found for preview at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}] page online. +
+|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"]
@@ -478,7 +510,8 @@ iconify:medical-icon:i-ear-nose-throat[3x]
 
 |5x
 |`md-red-900`
-|All icons can be found for preview at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}] page online. +
+|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"]