j1-template 2022.1.0 → 2022.1.1

data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html

@@ -1,6 +1,6 @@
 ---
 layout:                                 page
-title:                                  Starter Blog
+title:                                  Creators Blog
 tagline:                                posts by tag
 description: >
                                         Browse articles by tag
@@ -17,10 +17,11 @@ pagination:
   permalink:                            /page:num/
 
 analytics:                              true
+advertising:                            false
 comments:                               false
 
 exclude_from_search:                    true
-regenerate:                             false
+regenerate:                             false                                   # page currently NOT used
 
 resources:                              [ animate ]
 resource_options:
@@ -51,24 +52,24 @@ resource_options:
 
 {% comment %} Set config files
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign template_config               = site.data.j1_config %}
-{% assign blocks                        = site.data.blocks %}
-{% assign modules                       = site.data.modules %}
-{% assign builder                       = site.data.builder %}
-{% assign plugins                       = site.data.plugins %}
+{% assign template_config         = site.data.j1_config %}
+{% assign blocks                  = site.data.blocks %}
+{% assign modules                 = site.data.modules %}
+{% assign plugins                 = site.data.plugins %}
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign blog_navigator_defaults       = builder.defaults.blog_navigator.defaults %}
-{% assign blog_navigator_settings       = builder.blog_navigator.settings %}
+{% assign blog_navigator_defaults = modules.defaults.blog_navigator.defaults %}
+{% assign blog_navigator_settings = modules.blog_navigator.settings %}
 
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign blog_navigator_options        = blog_navigator_defaults | merge: blog_navigator_settings %}
+{% assign blog_navigator_options  = blog_navigator_defaults | merge: blog_navigator_settings %}
 
 {% comment %} Variables
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign truncate_words                 = site.excerpt_truncate_words %}
+{% assign truncate_words          = site.excerpt_truncate_words %}
+{% assign category_blacklist      = template_config.posts.category_blacklist %}
 
 {% if site.permalink == 'none' %}
   {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
@@ -268,6 +269,22 @@ site_category_word_list:    {{site_category_word_list | debug}}
                 <span class="font-weight-bold"> · </span>
                 <i class="mdi mdi-comment mr-1"></i> {{comment_count}}
                 {% endif %}
+
+                <!-- Cleanup categories by given blacklist -->
+                {% assign my_categories = post.categories | difference: category_blacklist %}
+
+                <!-- Build element strings -->
+                {% assign categories    = my_categories |join: " · "  %}
+                {% assign tags          = post.tags | join: " · "  %}
+
+                <p class="result-item-text small text-muted mb-3">
+                  <i class="mdi mdi-tag-text-outline mdi-18px mr-1"></i>
+                  <span class="sr-categories">{{categories}}</span>
+                  <br>
+                  <i class="mdi mdi-tag mdi-18px mr-1"></i>
+                  <span class="sr-tags">{{tags}}</span>
+              </p>
+
               </div>
               <a class="card-link text-muted text-lowercase"
                  href="{{post.url}}#readmore">

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

@@ -1,6 +1,6 @@
 ---
 layout:                                 page
-title:                                  Starter Blog
+title:                                  Creators Blog
 tagline:                                all posts
 description:                            Create index pages for articles this website
 
@@ -16,10 +16,11 @@ pagination:
   permalink:                            /page:num/
 
 analytics:                              false
+advertising:                            false
 comments:                               false
 
 exclude_from_search:                    true
-regenerate:                             true
+regenerate:                             true                                    # needed to update pages
 
 resources:                              [ animate ]
 resource_options:
@@ -45,24 +46,25 @@ resource_options:
 
 {% comment %} Set config files
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign template_config               = site.data.j1_config %}
-{% assign blocks                        = site.data.blocks %}
-{% assign modules                       = site.data.modules %}
-{% assign builder                       = site.data.builder %}
-{% assign plugins                       = site.data.plugins %}
+{% assign template_config         = site.data.j1_config %}
+{% assign blocks                  = site.data.blocks %}
+{% assign modules                 = site.data.modules %}
+{% assign plugins                 = site.data.plugins %}
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign blog_navigator_defaults       = builder.defaults.blog_navigator.defaults %}
-{% assign blog_navigator_settings       = builder.blog_navigator.settings %}
+{% assign blog_navigator_defaults = modules.defaults.blog_navigator.defaults %}
+{% assign blog_navigator_settings = modules.blog_navigator.settings %}
 
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign blog_navigator_options        = blog_navigator_defaults | merge: blog_navigator_settings %}
+{% assign blog_navigator_options  = blog_navigator_defaults | merge: blog_navigator_settings %}
 
 {% comment %} Variables
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign truncate_words                = site.excerpt_truncate_words %}
+{% assign truncate_words          = site.excerpt_truncate_words %}
+{% assign category_blacklist      = template_config.posts.category_blacklist %}
+
 
 {% if site.permalink == 'none' %}
   {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
@@ -191,6 +193,22 @@ site_category_word_list:    {{site_category_word_list | debug}}
               <span class="font-weight-bold"> · </span>
               <i class="mdi mdi-comment md-grey-900 mr-1"></i> {{comment_count}}
               {% endif %}
+
+              <!-- Cleanup categories by given blacklist -->
+              {% assign my_categories = post.categories | difference: category_blacklist %}
+
+              <!-- Build element strings -->
+              {% assign categories    = my_categories |join: " · "  %}
+              {% assign tags          = post.tags | join: " · "  %}
+
+              <p class="result-item-text small text-muted mb-3">
+                <i class="mdi mdi-tag-text-outline mdi-18px mr-1"></i>
+                <span class="sr-categories">{{categories}}</span>
+                <br>
+                <i class="mdi mdi-tag mdi-18px mr-1"></i>
+                <span class="sr-tags">{{tags}}</span>
+            </p>
+
             </div>
             <a class="card-link md-grey-900 text-lowercase"
                href="{{post.url}}#readmore">

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

@@ -1,6 +1,6 @@
 ---
 layout:                                 blog_archive
-title:                                  Starter Blog
+title:                                  Creators Blog
 tagline:                                explore posts
 description: >
                                         Navigate through all articles tis website
@@ -18,6 +18,7 @@ toc:                                    true
 fab_menu_id:                            default
 
 analytics:                              true
+advertising:                            false
 comments:                               false
 
 regenerate:                             true                                    # needed to update pagination pages

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc

@@ -16,9 +16,8 @@ permalink:                              /pages/public/learn/roundtrip/present_im
 regenerate:                             false
 
 resources:                              [
-                                          animate, clipboard,
-                                          carousel, justifiedGallery,
-                                          lightbox, lightGallery,
+                                          animate, clipboard, carousel,
+                                          justifiedGallery, lightbox, lightGallery,
                                           rouge
                                         ]
 resource_options:
@@ -105,13 +104,13 @@ Find below an example of using the lightbox Lightbox standalone. See how
 single (individual) images are linked for use with Lightbox.
 
 .Lightbox block for standalone images
-lightbox::example-standalone[ 400, {data-images-standalone} ]
+lightbox::example-standalone[ 800, {data-images-standalone}, role="mb-4" ]
 
 Lightbox supports image groups (image sets). Click on the images below to
 see how Lightbox manages a group of images.
 
 .Lightbox block for grouped images
-lightbox::example-group[ 400, {data-images-group}, group ]
+lightbox::example-group[ 395, {data-images-group}, group, role="mb-4 wm-800" ]
 
 === LightGallery Example
 
@@ -120,7 +119,7 @@ supports a gallery-style thumbnail preview plus image resizing, a download
 dialog, sharing provider support, and more helpful. Check what
 LightGallery can do this by the following example.
 
-gallery::jg_old_times[]
+gallery::jg_old_times[ role="mb-4 wm-800" ]
 
 == J1 Carousel App
 
@@ -209,21 +208,18 @@ carousel::demo_oneslide[role="mb-3"]
 
 JustifiedGallery is a great jQuery plugin to create responsive, infinite,
 and high-quality justified image galleries. J1 Template combines the Gallery
-with the lightboxes supported to enlarge the images of a gallery.
-
-See JustifiedGallery in action - and for sure, all that you see is even
-responsive. Change the size of your current browser window, by width or height,
-to see what will happen!
+with the lightboxes supported to enlarge the images of a gallery. See the
+gallery in action; and for sure, all that you see is even responsive. Change
+the size of your current browser window, by width or height to see what will
+happen!
 
 Pictures you've made are typically not even in size. Images may have the
 same size (resolution), but some are orientated landscapes, or others
 may be portraits. For that reason, a more powerful gallery is needed to create
-so-called justified views.
-
-JustifiedGallery uses a so-called masonry grid layout. It works by
-placing elements in an optimal position based on available horizontal and
-vertical space. Sort of like mason fitting stones in a wall. You'll have
-seen it in use all over the Internet!
+so-called justified views. JustifiedGallery uses a so-called masonry grid
+layout. It works by placing elements in an optimal position based on available
+horizontal and vertical space. Sort of like mason fitting stones in a wall.
+You'll have seen it in use all over the Internet!
 
 .Masonry grid layout of JustifiedGallery
 gallery::jg_customizer[]

data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc

@@ -166,39 +166,121 @@ license is needed for business use. See
 link:{url-light-gallery--license}[LightGallery licenses, {browser-window--new}]
 how to use LightGallery for commercial websites and projects.
 
-== Local video content
+== Local Video content
 
-Digital image content, simple pictures or videos, are easy to make. Today, every mobile has a camera - not that bad! Presenting a bunch
-of (digital) pictures is done very easily by using Justified Gallery, for example.
-Videos created by a digicam or a mobile can be played by J1 Template using the
-HTML5 Video support of LightGallery.
+Digital image content, simple pictures or videos, are easy to make. Today,
+every mobile has a camera. Presenting a bunch of (digital) pictures is done
+very easily by using Justified Gallery. Videos created by a digicam or a mobile
+can be played by J1 Template using the HTML5 Video support. Present videos you
+have made at it's best.
 
 Two players are available with LightGallery:
 
 . an internal player used by default
 . {url-videojs--home}[video.js, {browser-window--new}], a excellent
-  Javascript video library
+  Javascript video library including a great player
 
-NOTE: The HTML5 specification does _not_ define which video and audio formats
-browsers _should_ support. J1 LightGallery can play all types of standard
+NOTE: The HTML5 specification does *not* define which video and audio formats
+browsers *should* support. J1 LightGallery can play all types of standard
 HTML5 Video formats on modern browsers today (MP4, WebM, and Ogg).
 
+.MP4 Videos - VideoJS Player
 gallery::jg_video_html5[role="mb-5"]
 
-== Online video content
+== Online Video content
 
-The Internet is full of inspiring content. Video content is popular,
-the number of channels on _YouTube_ is enormous. If you want to present
-video content from the Internet, e.g., your channel, the online video
-support of J1 Template may be the right choice. Find some enjoyable videos
-from James Cordon's channel: Carpool Karaoke.
+The Internet is full of inspiring content. If you want to present video
+content from the Internet, the online video support of J1 Template is the
+right choice.
 
-.YouTube Video Gallery - Carpool Karaoke
+=== YouTube
+
+The community at link:{url-youtube--home}[YouTube, {browser-window--new}] is
+large, with over 1 billion users that watch hundreds of millions of hours of
+content every day. The
+link:{url-alexa-scores--youtube}[Alexa Internet, {browser-window--new}]
+scores are impressive. For good reasons: the number of channels on YouTube
+is enormous. For TV-Stations, it's a must to publish videos of their shows
+on YouTube. Find below a current gallery from *The Voice Kids* (SAT.1)
+Germany and a real classic channel *Carpool Karaoke* from the frontman James
+Corden of *The Late Late Show* at CBS, Los Angeles.
+
+.The Voice Kids, Germany 2021
+gallery::jg_video_online_youtube_2[role="mb-5"]
+
+.James Cordon's Carpool Karaoke
 gallery::jg_video_online_youtube[role="mb-5"]
 
+=== Vimeo
+
+link:{url-vimeo--home}[Vimeo, {browser-window--new}] is a video-sharing
+platform that includes features such as live-streaming and customization.
+Vimeo provides many tools for video creation, editing, and broadcasting.
+The platform provides you with an excellent channel to present high-quality,
+professional videos and reach audiences worldwide.
+
+Vimeo does offer a basic, free membership, but it limits you to 500MB maximum
+storage per week. Alternately, you can book on paid plans: Plus, PRO, Business.
+Each membership has varied storage limits, but the free plan offers sufficient
+space for private projects to present video content without advertising.
+
+NOTE: A great plus using Vimeo is that *no advertising* is used on that
+platform. Find the current
+link:{url-alexa-scores--vimeo}[Alexa Internet, {browser-window--new}]
+ranking from here.
+
 .Vimeo Video Gallery - Fashion
 gallery::jg_video_online_vimeo[role="mb-5"]
 
+=== DailyMotion
+
+link:{url-dailymotion--home}[Dailymotion, {browser-window--new}] is a French
+video-sharing technology platform primarily owned by
+link:{url-vivendi--home}[Vivendi, {browser-window--new}]. The platform is
+available worldwide in 183 languages and 43 localised versions featuring local
+home pages and local content.
+
+The platform is a monetization solution that allows allows to directly connect
+to high-quality advertisers through a proprietary Advertising Solution. Like
+YouTube, videos cav be watched for free, but ads are shown on each and every
+video.
+
+Dailymotion allows users to search videos by *tags*, topic *channels*, or
+user-created *groups*. Users can upload videos of up to 2 gigabytes and a
+length of 60 minutes. If a user is a MotionMaker or MotionPartner, a program
+for particularly creative users or partners, they can upload videos of
+unlimited length. Check the ranking at
+link:{url-alexa-scores--dailymotion}[Alexa Internet, {browser-window--new}].
+
+NOTE: Like YouTube, DailyMotion is a commercial platform using *advertising*
+on all video content. On every video, an ad clip is presented of 15 to
+30 seconds in length.
+
+.DailyMotion Video Gallery - SELF Magazine (Channel)
+gallery::jg_video_online_dailymotion[role="mb-5"]
+
+=== VK
+
+link:{url-vk--home}[VK, {browser-window--new}], former Vkontakte.ru until
+January 2012, is a multilingual social network operated from Russia.
+Registered users can create a profile on VK and exchange information with
+other users.
+
+According to the operator, the platform has over 100 million active users,
+but mainly in Russia, Ukraine, and other Russian spoken countries. According
+to link:{url-alexa-scores--vk}[Alexa Internet, {browser-window--new}]
+VK is among the most popular websites in Russia.
+
+NOTE: VK is accused of insufficient protection of personal data. The platform
+is also openly criticized by neo-Nazi and neo-fascist Groups used without
+there being a handle against them so far. To date, the Russian investigative
+authorities (especially the FSB) have not made any efforts to identify
+right-wing extremists or to suppress racist currents on the platform.
+
+.VK Video Gallery - Wildlife
+gallery::jg_video_online_vk[role="mb-5"]
+
+
 == What next
 
 Images and videos are pretty visual. And it can be impressive, for sure.
@@ -206,4 +288,5 @@ But the most visual component is the text for all pages, for all sites on the
 Internet. To see how text could be presented great for modern responsive
 websites, check the section Typography next.
 
-What? Please find out how it works. Go for: link:{url-roundtrip--typography}[Typography], then.
+What? Please find out how it works.
+Go for: link:{url-roundtrip--typography}[Typography], then.

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

@@ -85,7 +85,7 @@ The `View Result Extension` is quite helpful for sections discussing
 Asciidoc code and how the resulting (HTML) code would look alike.
 
 .This example place a button `VIEW` top right of the example box
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 * displayed always
 ----
@@ -115,76 +115,46 @@ WARNING: Icon background-color: yellow
 .CAUTION block
 CAUTION: Icon background-color: red
 
-/////
-== Q&A Blocks
-
-Q&A sections are used quite often to answer popular questions. To make
-such a Q&A section more eye-minded. The additional Admonition Blocks
-`[QUESTION]` and `[ANSWER]` are available through the J1 Template Asciidoctor
-extensions.
+== Lightboxes
 
-=== Question block
+A Lightbox is, in general, a helper which displays enlarged, almost
+screen-filling versions of images (or videos) 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.
 
-The admonition Question block is an extension to the Asciidoc admonition
-block types that introduce an admonition of type question.
+To make the use of the built-in lightbox easier, the J1 Template offers an
+Asciidoc extension: the lightBox block macro. The block macro `lightbox::`
+embeds one or more images into the output document and puts the default
+lightbox for J1 automatically on. The images `size` (width) and additional
+`caption text` and additional CSS styles are configurable for all images
+using this macro.
 
-.Example of a question block
-[source, prometheus, role="noclip"]
+.Lightbox block for single images
+[source, no_template, role="noclip"]
 ----
-[QUESTION]
-What's the main tool for selecting colors?
+.block_title
+lightbox::<block_id>[ <images_width>, <images_data_id>, <role="<additional CSS styles>"> ]
 ----
 
-[.result]
-====
-.QUESTION
-[QUESTION]
-What's the main tool for selecting colors used for J1 Template?
-====
-
-===  Answer block
-
-The Admonition Answer block is an extension to the Asciidoc admonition
-block types that introduce an admonition type of answer in conjunction
-with the type question's admonition.
-
-.Example of a answer block
-[source, prometheus, role="noclip"]
+.Lightbox block for image groups
+[source, no_template, role="noclip"]
 ----
-[ANSWER]
-For J1 Template, go for for the Core documentation section. You'll
-find the full color scheme for Material Design.
+.block_title
+lightbox::<block_id>[ <images_width>, <images_data_id>, <group_name>, <role="<additional CSS styles>"> ]
 ----
 
-[.result]
-====
-.ANSWER
-[ANSWER]
-For J1 Template, go for the {jekyll-one-core-doc-color-scheme}[Core documentation, window="blank"] section.
-You'll find the full color scheme for Material Design.
+[NOTE]
 ====
-/////
-
-== Lightboxes
+The `role` parameter to specify additional CSS styles is for all `lightbox::`
+macros *optional* and can be omitted.
 
-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
-embeds one or more images into the output document and puts the default
-lightbox for J1 automatically on. The images `size` (width) and additional
-`caption text` are configurable for all images using this macro.
-
-.Lightbox Block
-[source, prometheus, role="noclip"]
-----
-.block_title
-lightbox::block_id[ images_width, images_data [, group_name] ]
-----
-
-NOTE: For a `lightbox::` block, images are placed in the output document
+For a `lightbox::` block, images are placed in the output document
 without any other scaling than in width - they are placed using simple
 HTML `img` tags. This technique is fine for images that are even in size.
 For images in different sizes, a gallery should be used as a J1 Gallery Apps
 to rearrange images and make them fit at their best for the available space.
+====
 
 === Standalone Images
 
@@ -193,13 +163,13 @@ defined as Asciidoc attributes. The image data is given as a string
 of data pairs:
 
 .Paired attributes
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 "path/to/image-1, image-caption-1, ..."
 ----
 
 .Example of an data attribute for a lightbox block
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 :data-images: "pages/image-1.jpg, Description 1, "pages/image-2.jpg, Description 2"
 ----
@@ -220,9 +190,9 @@ The parameter `group` for the `lightbox::` block is an option. If no
 standalone.
 
 .Lightbox block for standalone images
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
-lightbox::images-standalone[ 400, {data-images-standalone} ]
+lightbox::<block_id>[ 400, {<data-images-id>} ]
 ----
 
 .Lightbox block for standalone images
@@ -236,14 +206,44 @@ of related images. Enabling this function, the option `group` needs to be
 configured for the block.
 
 .Lightbox block for grouped images
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
-lightbox::images-group[ 400, {data-images-group}, group_name ]
+lightbox::<block_id>[ 400, {<data-images-group_id>}, <group_name> ]
 ----
 
 .Lightbox block for grouped images
 lightbox::images-group[ 400, {data-images-group}, group_name ]
 
+== Galleries
+
+JustifiedGallery, the default gallery for J1, is a great jQuery plugin to
+create responsive, infinite, and high-quality justified image galleries.
+J1 Template combines the Gallery with the lightboxes supported to enlarge
+the images of a gallery.
+
+Pictures you’ve made are typically not even in size. Images may have the same
+size (resolution), but some are orientated landscapes, or others may be
+portrait. For that reason, a more powerful gallery is needed to create
+a so-called masonry grid layout. It works by placing elements in an optimal
+position based on available horizontal and vertical space. Sort of like mason
+fitting stones in a wall.
+
+.Gallerie macro for images and videos
+[source, no_template]
+----
+.block_title
+gallery::<gallery_id>[role="<additional CSS styles>"]
+----
+
+=== Image galleries
+
+lorem:sentences[5]
+
+=== Video galleries
+
+lorem:sentences[5]
+
+
 == Country flags
 
 Country flags are often used in the context of language-specific selections
@@ -256,7 +256,7 @@ documents included.
 
 Country flags can be used as inline icons by using the `flag:` inline macro:
 
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 flag:country[style, size, modifier] <1> <2> <3> <4>
 ----
@@ -269,7 +269,7 @@ flag:country[style, size, modifier] <1> <2> <3> <4>
     BS styles for margin setting and other
 
 .Click on button `VIEW` to see how it's looks alike
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 flag:de[rectangle, 2x, ml-3 mr-2 mb-2] Germany (rectangle) +
 flag:de[squared, 2x, ml-3 mr-3 mb-2] Germany (square)
@@ -357,7 +357,7 @@ All icon fonts are supported:
 Material Designs Icons can be used as inline icons by using
 the `mdi:` inline macro:
 
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 mdi:icon_name[icon_size, modifier] <1> <2> <3>
 ----
@@ -368,7 +368,7 @@ mdi:icon_name[icon_size, modifier] <1> <2> <3>
     animation (fa-pulsed) or the orientation (fa-rotate-45)
 
 .Click on button `VIEW` to see how it's looks alike
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 mdi:home[2x, mdi-pulsed ml-3 mr-2 mb-2] Symbol icon (pulsed) +
 mdi:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
@@ -391,7 +391,7 @@ settings for the `modifier` are applied.
 Font Awesome Icons can be used as inline icons by using
 the `fas:` (solid icons) or `fab` (brand icons) inline macro:
 
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 fas:icon_name[icon_size, modifier] <1> <2> <3>
 ----
@@ -402,7 +402,7 @@ fas:icon_name[icon_size, modifier] <1> <2> <3>
     animation (fa-pulsed) or the orientation (fa-rotate-45) of an icon
 
 .Click on button `VIEW` to see how it's looks alike
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 fas:home[2x, fa-pulsed ml-2 mr-2 mb-2] Solid icon (pulsed) +
 fab:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
@@ -426,7 +426,7 @@ settings for the `modifier` are applied.
 Iconify Icons can be used as inline icons by using the `iconify:`
 inline macro:
 
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 iconify:icon_name[icon_size, modifier] <1> <2> <3>
 ----
@@ -437,7 +437,7 @@ iconify:icon_name[icon_size, modifier] <1> <2> <3>
 positioning classes for margings and padding
 
 .Click on button `VIEW` to see how it's looks alike
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 iconify:logos:opensource[2x, ml-4 mr-2 mb-2] Brand icon OpenSource  +
 iconify:logos:netlify[2x, ml-4 mr-2 mb-2] Brand icon Netlify +
@@ -470,7 +470,7 @@ applied, the color settings will have no effect.
 Twitter Emoji's can be used as inline icons by using the `emoji:`
 inline macro:
 
-[source, prometheus]
+[source, no_template]
 ----
 emoji:icon_name[icon_size] <1> <2>
 ----
@@ -479,7 +479,7 @@ emoji:icon_name[icon_size] <1> <2>
 <2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `5x`
 
 .Click on button `VIEW` to see how it's look alike
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 This is an example of how you can emoji:heart[2x, pulsed mt-1] Asciidoctor
 and Twitter Emoji emoji:smile[].
@@ -506,14 +506,14 @@ finished yet.
 Placeholders for blind text comes in several flavors given by `macro`. The
 syntax for the `lorem:` inline macro is simple like this:
 
-[source, prometheus]
+[source, no_template]
 ----
 lorem:macro[]
 lorem:macro[size]
 ----
 
 .Example of a lorem sentences macro
-[source, prometheus, role="noclip"]
+[source, no_template, role="noclip"]
 ----
 lorem:sentences[5]
 ----