j1-template 2023.8.2 → 2023.9.1

data/lib/starter_web/pages/public/blog/navigator/index.html

@@ -4,7 +4,7 @@ layout:                                 page
 title:                                  Navigator
 tagline:                                Explore Posts
 
-date:                                   2022-01-01
+date:                                   2023-09-20
 #last_modified:                         2023-01-01
 
 description: >
@@ -27,10 +27,11 @@ robots:
   follow:                               true
 
 image:
-  path:                                 /assets/images/modules/attics/matthaeus-1920x1280.jpg
+  path:                                 /assets/images/modules/attics/1920x1280/matthaeus.jpg
   width:                                1920
   height:                               1280
 
+#tts:                                   false
 sort:                                   date
 fab_menu_id:                            default
 scrollDynamicPagesTopOnChange:          false                                   # do NOT scroll the page to top on content changes
@@ -41,13 +42,26 @@ resources:                              [ animate, scroller ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/images/modules/attics/matthaeus-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/1920x1280/matthaeus.jpg
           alt:                          Photo by Matthaeus on Unsplash
           badge:
             type:                       unsplash
             author:                     Matthaeus
             href:                       https://unsplash.com/@matthaeus123
 ---
+{% comment %} Stackoverflow articles
+------------------------------------------------------------------------
+https://stackoverflow.com/questions/22763180/assign-an-array-literal-to-a-variable-in-liquid-template
+{% assign my_array = "one|two|three" | split: "|" %}
+------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Debugging
+------------------------------------------------------------------------
+blog_navigator_options.article_navigator.page_text: {{blog_navigator_options.article_navigator.page_text | debug}}
+------------------------------------------------------------------------
+{% endcomment %}
+
 
 {% comment %} Liquid procedures
 -------------------------------------------------------------------------------- {% endcomment %}
@@ -84,7 +98,6 @@ resource_options:
 
 {% assign previewer                           = blog_navigator_options.previewer %}
 {% assign paginate                            = paginator_options.pagination.enabled %}
-{% assign scroller                            = blog_navigator_options.scroller %}
 {% assign rtext                               = template_config.typography.rtext %}
 {% assign page_rtext                          = page.rtext %}
 {% assign page_rtext_size                     = page.rtext_size %}
@@ -97,49 +110,30 @@ resource_options:
   {% assign rtext_size = 0 %}
 {% endif %}
 
-{% comment %} language detection (disabled)
+{% comment %} Collect Button Text/Description
 -------------------------------------------------------------------------------- {% endcomment %}
-{% if site.language == "en" %}
-  {% assign language = "en" %}
-{% elsif site.language == "de"%}
-  {% assign language = "de" %}
-{% else %}
-  {% assign language = "en" %}
-{% endif %}
+{% assign home_button_text                  = blog_navigator_options.button_text.view_pager.home %}
+{% assign category_view_button_text         = blog_navigator_options.button_text.view_pager.category_view %}
+{% assign date_view_button_text             = blog_navigator_options.button_text.view_pager.date_view %}
+{% assign archive_view_button_text          = blog_navigator_options.button_text.view_pager.archive_view %}
+{% assign tag_view_button_text              = blog_navigator_options.button_text.view_pager.tag_view %}
 
+{% assign description_enabled               = blog_navigator_options.article_navigator.page_description.enabled %}
+{% assign description_text                  = blog_navigator_options.article_navigator.page_description.text %}
+{% assign headline_enabled                  = blog_navigator_options.article_navigator.headline.enabled %}
+{% assign headline_text                     = blog_navigator_options.article_navigator.headline.text %}
 
 
-{% if language == "en" %}
-  {% assign category_view_button_text         = blog_navigator_options.button_text.view_selector.category_view.en %}
-  {% assign date_view_button_text             = blog_navigator_options.button_text.view_selector.date_view.en %}
-  {% assign archive_view_button_text          = blog_navigator_options.button_text.view_selector.archive_view.en %}
-  {% assign tag_view_button_text              = blog_navigator_options.button_text.view_selector.tag_view.en %}
-
-  {% assign previewer_headline                = blog_navigator_options.article_previewer.page_text.en.headline %}
-  {% assign navigator_description_text        = blog_navigator_options.article_navigator.page_text.en.description %}
-  {% assign previewer_description_text        = blog_navigator_options.article_previewer.page_text.en.description %}
-{% endif %}
-
-{% if language == "de" %}
-  {% assign category_view_button_text         = blog_navigator_options.button_text.view_selector.category_view.de %}
-  {% assign date_view_button_text             = blog_navigator_options.button_text.view_selector.date_view.de %}
-  {% assign archive_view_button_text          = blog_navigator_options.button_text.view_selector.archive_view.de %}
-  {% assign tag_view_button_text              = blog_navigator_options.button_text.view_selector.tag_view.de %}
-
-  {% assign previewer_headline                = blog_navigator_options.article_previewer.page_text.de.headline %}
-  {% assign navigator_description_text        = blog_navigator_options.article_navigator.page_text.de.description %}
-  {% assign previewer_description_text        = blog_navigator_options.article_previewer.page_text.de.description %}
-{% endif %}
-
-
-{% comment %} Main container
+{% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
-  <!-- [INFO   ] [j1.layout.content_generator_blog.html  ] [Begin content] -->
-  <div id="main-container" class="container r-text-{{rtext_size}} js-toc-content mb-5">
-    <!-- Content placed by layouts/content_generator_blog_archive.html -->
+  <!-- [INFO   ] [blog.navigator.index.html               ] [Begin content] -->
+  <div id="navigator_content">
+
     <div id="blog_navigator">
       <div id="article_navigator">
 
+        {% comment %} Generate URLs for all Navigator Views
+        ------------------------------------------------------------------------ {% endcomment %}
         {% include {{get_page_path}} mode='absolute' %}
         {% capture navigator_path%}{{page_path}}{% endcapture %}
         {% capture archive_path %}{{navigator_path}}/archive{% endcapture %}
@@ -148,79 +142,41 @@ resource_options:
         {% capture tag_view %}{{archive_path}}/tagview/{% endcapture %}
         {% capture all_view %}{{archive_path}}/allview/{% endcapture %}
 
-        {% comment %}
-        ------------------------------------------------------------------------
-        https://stackoverflow.com/questions/22763180/assign-an-array-literal-to-a-variable-in-liquid-template
-        {% assign my_array = "one|two|three" | split: "|" %}
-        ------------------------------------------------------------------------
-        {% endcomment %}
-
-        {% comment %} Debugging
-        --------------------------------------------------------------------------------
-        blog_navigator_options.article_navigator.page_text: {{blog_navigator_options.article_navigator.page_text | debug}}
-        --------------------------------------------------------------------------------
-        {% endcomment %}
-
+        {% comment %} Generate navigation pager
+        ------------------------------------------------------------------------ {% endcomment %}
         <div class="navigator-headline">
-          <nav class="paginator speak2me-ignore mb-4">
+          <nav class="paginator speak2me-ignore">
             <ul class="pagination raised-z0">
-              <li class="page-item"><a class="page-link" href="/" title="Home">Home</a></li>
-              <li class="page-item"><a class="page-link" href="{{category_view}}" alt="View by Category">{{category_view_button_text}}</a></li>
-              <li class="page-item"><a class="page-link" href="{{date_view}}" alt="View by Date">{{date_view_button_text}}</a></li>
-              <!-- li class="page-item"><a class="page-link" href="{{tag_view}}" alt="{{tag_view_button_text}}">By Tag</a></li -->
-              <li class="page-item"><a class="page-link" href="{{all_view}}" alt="View All">{{archive_view_button_text}}</a></li>
+              <li class="page-item"><a class="page-link" href="/"                 title="Back to {{home_button_text}}">{{home_button_text}}</a></li>
+              <li class="page-item"><a class="page-link" href="{{category_view}}" title="View by {{category_view_button_text}}">{{category_view_button_text}}</a></li>
+              <li class="page-item"><a class="page-link" href="{{date_view}}"     title="View by {{date_view_button_text}}">{{date_view_button_text}}</a></li>
+          <!-- li class="page-item"><a class="page-link" href="{{tag_view}}"      title="View by {{tag_view_button_text}}">{{tag_view_button_text}}</a></li -->
+              <li class="page-item"><a class="page-link" href="{{all_view}}"      title="View {{archive_view_button_text}}">{{archive_view_button_text}}</a></li>
             </ul>
           </nav> <!-- end paginator -->
         </div> <!-- end navigator headline -->
 
-        {% if blog_navigator_options.article_navigator.page_text.enabled %}
-        <div class="view-description">{{navigator_description_text}}</div>
+        {% if description_enabled %}
+        <div class="view-description mt-4 mb-4">{{description_text}}</div>
+        {% endif %}
+
+        {% if headline_enabled %}
+        <div class="post-headline mt-4 mb-5">
+          <h2 id="post_headline" class="notoc">{{headline_text}}</h2>
+        </div>
         {% endif %}
 
       </div> <!-- end article_navigator -->
 
-      <!-- Add article previewer if paginator is enabled -->
+      {% comment %} Generate content section
+      ------------------------------------------------------------------------ {% endcomment %}
+      <!-- Add article previewer -->
       {% if paginate %}
-      <div id="article_previewer">
-
-        <div class="previewer-headline">
-
-          <div class="post-headline">
-            <h2 id="post-headline" class="notoc mt-4">{{previewer_headline}}</h2>
-          </div>
-
-          <!-- Add Jekyll Paginator if enabled: {{scroller}} -->
-          {% if scroller == 'jekyll' %} {% if paginator.total_pages > 1 %}
-          <nav class="paginator mb-4">
-            <ul class="pagination raised-z0">
-              {% if paginator.previous_page %}
-                <li class="page-item">
-                  <a class="page-link" href="{{paginator.previous_page_path}}#article_navigator">{{paginator_button_newer_posts_text}}</a>
-                </li>
-              {% else %}
-                <li class="page-item disabled"><a href="#void" class="page-link">{{paginator_button_first_post_text}}</a></li>
-              {% endif %}
-
-              {% if paginator.next_page %}
-              <li class="page-item">
-                <a class="page-link" href="{{paginator.next_page_path}}#article_navigator">{{paginator_button_older_posts_text}}</a>
-              </li>
-              {% else %}
-                <li class="page-item disabled"><a href="#void" class="page-link">{{paginator_button_last_post_text}}</a></li>
-              {% endif %}
-            </ul>
-          </nav>
-          {% endif %} {% endif %}
-
-          {% if scroller == 'jekyll' %} {% if blog_navigator_options.article_previewer.page_text.enabled %}
-          <div class="view-description mb-3">{{previewer_description_text}}</div>
-          {% endif %} {% endif %}
-
-        </div>
+      <div id="article_previewer" class="mt-5">
 
-        <div id="navigator_article_preview">
+        <div id="article_preview">
           <!-- Previewer selected of type: {{previewer}}-->
-          <div id="preview_content">
+          <div id="previewer_{{previewer}}">
             {% assign posts_collate = paginator.posts %}
             {% case previewer %}
               {% when 'list' %}

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/themes_bootstrap.asciidoc

@@ -1,4 +1,4 @@
-[role="mt-4"]
+[role="mt-5"]
 == The Themes Menu
 
 Styles adjust the website's appearance based on the CSS rules and definitions
@@ -30,6 +30,7 @@ that helps a lot to make designs available for an existing site. This API
 is the base to integrate selectable Bootswatch stylesheets into the J1 Template
 navigation system.
 
+[role="mt-4"]
 === Apply a Style
 
 The base for designing pages using the J1 Template is the style Uno, a modern
@@ -42,10 +43,13 @@ You can find all available stylesheets to be applied on your pages from the
 *Themes* menu. You're invited to check how a page is changing for its design
 if a different stylesheet for web design is used.
 
-WARNING: For changing from one style to the next at *runtime*, the current
+[WARNING]
+====
+For changing from one style to the next at *runtime*, the current
 version of the J1 Template system tries add new styles to J1 specific
 components like fonts, headlines, lists or paragraphs. Changing the style
 will work for the most *common* elements, but *not all* of them for now.
+====
 
 Select a style from the *Themes* menu, and the new BS-based stylesheet is
 automatically applied to all pages of your website.

data/lib/starter_web/pages/public/learn/roundtrip/asciidoc_extensions.adoc

@@ -1,9 +1,9 @@
 ---
 title:                                  Extensions
-title_extention:                        Jekyll One enhancements for the Asciidoc markup language
-tagline:                                Asciidoc Markup Enhancements
+title_extention:                        Enhance Asciidoc Markup Language
+tagline:                                Asciidoc Markup
 
-date:                                   2020-11-07
+date:                                   2023-09-01
 #last_modified:                         2023-01-01
 
 description: >
@@ -24,6 +24,7 @@ image:
   width:                                1920
   height:                               1280
 
+tts:                                    false
 comments:                               false
 regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/asciidoc_extensions/
@@ -62,17 +63,24 @@ resource_options:
 [role="dropcap"]
 J1 Template implements some handy Ruby-based enhancements for the markup
 language Asciidoc. Providing extensions for a Jekyll theme is a unique feature
-of Jekyll One compared to other Jekyll themes and templates. All already
-implemented Asciidoctor extensions you'll find below. Additional valuable
-extensions to the markup language Asciidoc is made especially for documents
-of the Jekyll content type *page*, but can be used for posts or collections
-as well.
+of Jekyll One compared to other Jekyll themes and templates.
 
-TIP: Most extensions are based on well-documented examples from the
+[role="mb-4"]
+All already implemented Asciidoctor extensions you'll find below.
+
+[TIP]
+====
+Most extensions are based on well-documented examples from the
 link:{url-asciidoctor--extensions-lab}[Asciidoctor Extensions Lab, {browser-window--new}].
 To create Asciidoc extensions on your own, it is highly recommended to read the
 link:{url-asciidoctor--extensions-manual}[extensions section, {browser-window--new}] in
 the Asciidoctor user manual.
+====
+
+[role="mt-4"]
+Additional valuable extensions to the markup language Asciidoc is made
+especially for documents of the Jekyll content type *page*, but can be used
+for posts or collections as well.
 
 mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
 *15 Minutes* to read
@@ -87,12 +95,17 @@ J1 Template adds a simple Javascript based functionality for the
 extension adds an interactive toggle button `VIEW` to the output of a listing
 block placed to the top right of the example box.
 
+[role="mb-4"]
 If a result block `[.result]` is placed under a listing block, clicking the
 toggle button *view* `VIEW` displays or hide the content given by the
 result block.
 
-TIP: The *View Result Extension* is quite helpful for sections discussing
+[role="mb-5"]
+[TIP]
+====
+The *View Result Extension* is quite helpful for sections discussing
 code elements.
+====
 
 .This example place a button *VIEW* top right of the example box
 [source, no_template, role="noclip"]
@@ -108,13 +121,14 @@ code elements.
 [role="mt-5"]
 == Asciidoc Admonitions
 
+[role="mb-5]
 Admonition blocks draw the reader to certain statements by labeling
 them as priorities displayed in separate blocks. These types of information
 blocks are called *admonitions*. The AsciiDoc markuplanguage provides five
 block types shown by the following examples.
 
 .Admonition labels
-[cols="3a,9a", subs=+macros, options="header", width="100%", role="rtable mt-3"]
+[cols="3a, 9a", subs=+macros, options="header", width="100%", role="rtable mt-3 mb-4"]
 |===
 |Name |Description
 
@@ -140,9 +154,13 @@ trippings.
 
 |===
 
-NOTE: All colors for all default admonition blocks set to the standard
+[NOTE]
+====
+All colors for all default admonition blocks set to the standard
 color set. Find available block types and their colors below.
+====
 
+[role="mr-4]
 When you want to call attention to a single paragraph, start the first
 line of the paragraph with the label you want to use. The label must be
 uppercase and followed by a colon `:`.
@@ -240,6 +258,7 @@ A *single* paragraph can be turned into a blockquote by:
 -- attribution
 ----
 
+[role="mt-5"]
 "Don't do stupid things twice. The selection is too big for that."
 -- Jean-Paul Sartre
 
@@ -260,7 +279,8 @@ paragraph text (multiline)
 ____
 ----
 
-Example of a quoted *block*:
+[role="mt-4 mb-4"]
+Example of a quoted *block*.
 
 [quote, Monty Python and the Holy Grail]
 ____
@@ -274,18 +294,13 @@ ____
 [role="mt-5"]
 == Lightboxes
 
-A lightbox is, in general, a helper which displays enlarged, almost
-screen-filling versions of images 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.
-
 To make the use of the built-in lightbox easier, the J1 Template offers an
-Asciidoc extension: the lightBox block macro. The lightbox block macro
+Asciidoc extension: the lightBox block *macro*. The lightbox block macro
 `lightbox::` embeds one or more images into the output document and puts
-the default lightbox for J1 automatically on. The images width and additional
-a addtional caption text `caption text` and CSS styles are configurable for
-all images using this macro.
+the default lightbox for J1 automatically on.
+
+The images width and additional a addtional caption text `caption text`
+and CSS styles are configurable for all images using this macro.
 
 .Lightbox block for single images
 [source, no_template, role="noclip"]
@@ -314,7 +329,7 @@ J1 Gallery to rearrange images and make them fit at their best for the
 available space.
 ====
 
-[role="mt-4"]
+[role="mt-5"]
 === Standalone Images
 
 For your convenience and better readability, the image data should be
@@ -339,10 +354,13 @@ to images path `/assets/images`. The base path is automatically added to
 each image. If you want to use the default asset path for images, a relative
 path needs to be given like path-to-image `path/to/image`.
 
-WARNING: If an absolute path `/path/to/image` is configured, the base
+[WARNING]
+====
+If an absolute path `/path/to/image` is configured, the base
 path gets ignored. This is the default behavior of the Asciidoc Markup
 processor. If an absolute path is given, the full path to the images
 used has to be configured.
+====
 
 The group parameter `group` for the lightbox block `lightbox::` is optional.
 If *no* group parameter is given for a block, the related images are treated
@@ -357,13 +375,13 @@ lightbox::<block_id>[ 800, {<data-images-id>} ]
 .Lightbox block for standalone images
 lightbox::images-standalone[ 800, {data-images-standalone} ]
 
-[role="mt-4"]
+[role="mt-5"]
 === Grouped Images
 
-If more than a single image is given for a lightbox block `lightbox::`,
-the images can be grouped to enable a simple sliding functionality through
-this group of related images. Enabling this function, the group option
-`group` needs to be configured for the block.
+If more than a single image is given for a lightbox `lightbox::`, images
+can be *grouped* to enable a simple sliding functionality through
+related images. Enabling this function, the group option `group` needs to
+be configured for the block.
 
 .Lightbox block for grouped images
 [source, no_template, role="noclip"]
@@ -374,6 +392,7 @@ lightbox::<block_id>[ 400, {<data-images-group_id>}, <group_name> ]
 .Lightbox block for grouped images
 lightbox::images-group[ 400, {data-images-group}, group_name ]
 
+
 [role="mt-5"]
 == Galleries
 
@@ -543,11 +562,14 @@ mdi:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
 mdi:apple[2x, md-indigo ml-3 mr-2] Brand icon (colored)
 ====
 
-NOTE: Parameters for icon size `icon_size` and modifiers `modifier` are
+[NOTE]
+====
+Parameters for icon size `icon_size` and modifiers `modifier` are
 optional. If not given, the icons size `size` is set to default `1x`, the
 color to *black* and no settings for *modifiers* `modifier` are applied.
+====
 
-[role="mt-4"]
+[role="mt-5"]
 === Font Awesome Icons
 
 Font Awesome Icons can be used as inline icons by using the macro *fas* `fas:`
@@ -578,12 +600,14 @@ fab:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
 fab:apple[2x, md-indigo ml-3 mr-2] Brand icon (colored)
 ====
 
-NOTE: Parameters for icon size `icon_size` and modifiers `modifier` are
+[NOTE]
+====
+Parameters for icon size `icon_size` and modifiers `modifier` are
 optional. If not given, the icons size is set to default `1x`, the color
 to *black* and no settings for modifiers  `modifier` are applied.
+====
 
-
-[role="mt-4"]
+[role="mt-5"]
 === Iconify Icons
 
 Iconify Icons can be used as inline icons by using the iconify inline

data/lib/starter_web/pages/public/learn/roundtrip/bootstrap_themes.adoc

@@ -67,11 +67,14 @@ CSS front-end framework of version V5. The Bootstrap theme feature enables
 the presentation of different versions of the same site using already prepared
 Bootstrap CSS style sets.
 
-NOTE: link:{url-bs--home}[Bootstrap, {browser-window--new}] is an HTML, CSS and
+[NOTE]
+====
+link:{url-bs--home}[Bootstrap, {browser-window--new}] is an HTML, CSS and
 Javascripts Library that focuses on simplifying the development of modern web
 pages. The primary purpose of applying the framework to J1 is to provide a
 general standard for colors, sizes, fonts, and the overall layout of a
 based site.
+====
 
 Using themes results in a uniform appearance for the content in terms of the
 overall layout, text, tables, and form elements across all modern web browsers
@@ -81,9 +84,6 @@ classes defined in Bootstrap to customize a layout individually.
 mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
 *3 Minutes* to read
 
-mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
-*3 Minutes* to read
-
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 include::{documentdir}/themes_bootstrap.asciidoc[]

data/lib/starter_web/pages/public/learn/roundtrip/highlghter_rouge.adoc

@@ -97,7 +97,7 @@ To preview *all* themes supported by *J1 Template*, make your selection
 from the button *AVAILABLE THEMES* below.
 
 ++++
-<div class="btn-group">
+<div class="btn-group speak2me-ignore">
   <!-- See: https://stackoverflow.com/questions/47242702/force-bootstrap-dropdown-menu-to-always-display-at-the-bottom-and-allow-it-go-of -->
   <!-- NOTE: control the behaviour of popper.js for positioning -->
   <!-- NOTE: set attribute data-flip="false" to open the SELECT list at the BOTTOM of the BUTTON -->

data/lib/starter_web/pages/public/learn/roundtrip/icon_fonts.adoc

@@ -24,6 +24,7 @@ image:
   width:                                1920
   height:                               1280
 
+tts:                                    false
 regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/mdi_icon_font/
 
@@ -75,9 +76,12 @@ MDI and FA icons are very good in design and have a rich set of different
 icons for many categories used for the Web. See below for some details
 for <<Material Design Icons>> and <<FontAwesome Icons>>.
 
-NOTE: Iconify icons are not a locally stored icon-set like MDI or FA.
+[NOTE]
+====
+Iconify icons are not a locally stored icon-set like MDI or FA.
 Icons are loaded over the Internet using the so-called *Unified OpenSource Icon
 Framework*. See section <<Iconify Icons>> for more information.
+====
 
 mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
 *10 Minutes* to read
@@ -241,9 +245,11 @@ Using Material Design Icons is easy as the inline macro `mdi:` is available
 to place icons wherever you want. See more about this in section
 link:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions].
 
-NOTE: _J1 Template_ supports the full set of _MDI_ for the Web. The
+[NOTE]
+====
+_J1 Template_ supports the full set of _MDI_ for the Web. The
 icon set is fully integrated and can be used out-of-the-box.
-
+====
 
 [role="mt-5"]
 == Material Design Light Icons
@@ -389,11 +395,9 @@ included.
 
 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.
-
-NOTE: 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.
+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 V5 meets the Material Design idea of _Google_, and in comparison
 to Version 4, the current version is much more than face-lifting. The new
@@ -401,19 +405,25 @@ version comes with more than 2300+ icons, but many are available only with
 the Pro license. For the Free version, only a subset of 900+ icons is
 available.
 
-NOTE: The CSS styles for FontAwesome V5 have been extended for the J1 Template
+[NOTE]
+====
+The CSS styles for FontAwesome V5 have been extended for the J1 Template
 to the same classes (and their respective names) for other Font Icon sets.
 Already existing styles like `fa-flip-vertical` are available as `fa-flip-v`
 as well.
+====
 
 You can check out what icons available at
 link:{url-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 are to be noticed.
 
-TIP: If you haven't used V5 yet, it is highly recommended to visit the
+[TIP]
+====
+If you haven't used V5 yet, it is highly recommended to visit the
 link:{url-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 into two general
 parts:
@@ -422,10 +432,13 @@ parts:
 * brand icons, including symbols for companies and brands,
   indicated by *FAB*
 
-NOTE: Using FontAwesome with Asciidoc is quite easy to use as two inline
+[NOTE]
+====
+Using FontAwesome with Asciidoc is quite easy to use as two inline
 macros `fab:` and `fas:` are available to place icons where ever you want.
 See more about this in section
 link:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions].
+====
 
 Find below examples of both sets and how to use with J1 Template.
 
@@ -626,10 +639,13 @@ the client is build-in and is loaded if Iconify is requested as a resource.
 To see what icon sets are available with that framework, check the page
 link:{url-iconify--icon-sets}[Iconify Icon Sets, {browser-window--new}].
 
-NOTE: Using Iconify icons with J1 Template is quite easy. An inline macro
+[NOTE]
+====
+Using Iconify icons with J1 Template is quite easy. An inline macro
 `iconify:` is available to place icons where ever you want. See more about
 this in section
 link:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions].
+====
 
 Currently, over 40,000 vector icons are available for many different use cases.
 Find some examples below.