j1-template 2021.2.2 → 2021.2.6

data/lib/starter_web/pages/public/asciidoc_skeletons/simple-document/simple.adoc

@@ -94,7 +94,7 @@ All J1 Asciidoc Skeletons are fully *relocateable* and can be placed in any
 subfolder of your Jekyll site.
 ====
 
-// Content
+// Include sub-documents
 // -----------------------------------------------------------------------------
 == Synopsis
 

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

@@ -1,10 +1,9 @@
 ---
 layout:                                 page
-title:                                  Creators Blog
-tagline:                                articles by category
+title:                                  Disruptors Blog
+tagline:                                artikel nach kategorie
 date:                                   2023-01-01 01:00:00 +100
-description: >
-                                        articles by category
+description:                            Artikel nach Kategorie
 
 categories:                             [ Blog ]
 tags:                                   [ Navigator, Categories ]
@@ -24,7 +23,7 @@ comments:                               false
 exclude_from_search:                    true
 regenerate:                             true
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -221,22 +220,22 @@ site_category_word_list:    {{site_category_word_list | debug}}
 
                     {% if post.date %}
                       {% if language == "en" %}
-                        <i class="mdi mdi-calendar-blank md-grey-900 mr-1"></i>{{post.date | localize: "%Y %B, %e"}}
+                        <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>{{post.date | localize: "%Y %B, %e"}}
                       {% endif %}
                       {% if language == "de" %}
-                        <i class="mdi mdi-calendar-blank md-grey-900 mr-1"></i>{{post.date | localize: "%-d. %B %Y"}}
+                        <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>{{post.date | localize: "%-d. %B %Y"}}
                       {% endif %}
                     {% endif %}
                     {% if likes_count %}
                     <span class="font-weight-bold"> · </span>
-                    <i class="mdi mdi-heart md-grey-900 mr-1"></i> {{likes_count}}
+                    <i class="mdi mdi-heart mr-1"></i> {{likes_count}}
                     {% endif %}
                     {% if comment_count %}
                     <span class="font-weight-bold"> · </span>
-                    <i class="mdi mdi-comment md-grey-900 mr-1"></i> {{comment_count}}
+                    <i class="mdi mdi-comment mr-1"></i> {{comment_count}}
                     {% endif %}
                   </div>
-                  <a class="card-link md-grey-900 text-lowercase"
+                  <a class="card-link text-muted text-lowercase"
                      href="{{post.url}}#readmore">
                      {{readmore_text}} · {{post.tagline}}
                   </a>
@@ -248,25 +247,3 @@ site_category_word_list:    {{site_category_word_list | debug}}
       {% endfor %}
   {% endfor %}
 </div>
-
-<!-- [INFO   ] [j1.page.{{page.title}}                   ] [Save the current page to cookieUserState cookie: {{browser_page_url}}] -->
-{% comment %} Update cookie for lastpage
--------------------------------------------------------------------------------- {% endcomment %}
-<script>
-  function setLastPage() {
-    var logger = log4javascript.getLogger('j1.BlogNavigator');
-    var cookie_names                = j1.getCookieNames();
-    const user_state_cookie_name    = cookie_names.user_session;
-    var user_state                  = j1.readCookie(user_state_cookie_name);
-    var user_state_last_page        = "{{browser_page_url}}";
-    user_state.last_page            = user_state_last_page;
-
-    j1.writeCookie({
-      name: user_state_cookie_name,
-      data: user_state,
-      samesite: 'Strict'
-    });
-    logger.info('Saved current Post Browser page to cookie: {{browser_page_url}}');
-  }
-  window.onload = setLastPage();
-</script>

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

@@ -237,25 +237,3 @@ site_category_word_list:    {{site_category_word_list | debug}}
   {{closeList}}
 
 </div>
-
-<!-- [INFO   ] [j1.page.{{page.title}}                   ] [Save the current page to cookieUserState cookie: {{browser_page_url}}] -->
-{% comment %} Update cookie for lastpage
--------------------------------------------------------------------------------- {% endcomment %}
-<script type="text/javascript">
-  function setLastPage() {
-    var logger = log4javascript.getLogger('j1.BlogNavigator');
-    var cookie_names                = j1.getCookieNames();
-    const user_state_cookie_name    = cookie_names.user_session;
-    var user_state                  = j1.readCookie(user_state_cookie_name);
-    var user_state_last_page        = "{{browser_page_url}}";
-    user_state.last_page            = user_state_last_page;
-
-    j1.writeCookie({
-      name: user_state_cookie_name,
-      data: user_state,
-      samesite: 'Strict'
-    });
-    logger.info('Saved current Post Browser page to cookie: {{browser_page_url}}');
-  }
-  window.onload = setLastPage();
-</script>

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

@@ -281,23 +281,3 @@ site_category_word_list:    {{site_category_word_list | debug}}
     {% endif %}{% endfor %}
   {% endunless %}{% endfor %}
 </div>
-
-<!-- [INFO   ] [j1.page.{{page.title}}                   ] [Save the current page to cookieUserState cookie: {{browser_page_url}}] -->
-<script type="text/javascript">
-  function setLastPage() {
-    var logger = log4javascript.getLogger('j1.BlogNavigator');
-    var cookie_names                = j1.getCookieNames();
-    const user_state_cookie_name    = cookie_names.user_session;
-    var user_state                  = j1.readCookie(user_state_cookie_name);
-    var user_state_last_page        = "{{browser_page_url}}";
-    user_state.last_page            = user_state_last_page;
-
-    j1.writeCookie({
-      name: user_state_cookie_name,
-      data: user_state,
-      samesite: 'Strict'
-    });
-    logger.info('Saved current Post Browser page to cookie: {{browser_page_url}}');
-  }
-  window.onload = setLastPage();
-</script>

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

@@ -203,25 +203,3 @@ site_category_word_list:    {{site_category_word_list | debug}}
     </article>
   {% endfor %}
 </div>
-
-<!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [{{page.title}} - Save the current page to cookieUserState cookie: {{browser_page_url}}] -->
-{% comment %} Update cookie for lastpage
--------------------------------------------------------------------------------- {% endcomment %}
-<script type="text/javascript">
-  function setLastPage() {
-    var logger = log4javascript.getLogger('j1.BlogNavigator');
-    var cookie_names                = j1.getCookieNames();
-    const user_state_cookie_name    = cookie_names.user_session;
-    var user_state                  = j1.readCookie(user_state_cookie_name);
-    var user_state_last_page        = "{{browser_page_url}}";
-    user_state.last_page            = user_state_last_page;
-
-    j1.writeCookie({
-      name: user_state_cookie_name,
-      data: user_state,
-      samesite: 'Strict'
-    });
-    logger.info('Saved current Post Browser page to cookie: {{browser_page_url}}');
-  }
-  window.onload = setLastPage();
-</script>

data/lib/starter_web/pages/public/learn/quickstart.adoc

@@ -55,7 +55,6 @@ resource_options:
 
 // Include sub-documents
 // -----------------------------------------------------------------------------
-
 The template comes with a Web included, a skeleton for new a website created
 using J1 Template. This Web is called the *Starter web*, a general-purpose
 scaffold to be modified for your needs. The built-in Starter web  is available

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

@@ -233,4 +233,4 @@ Hopefully, you've enjoyed exploring the possibilities J1 offers for managing
 and displaying digital image content. But much, much more can the J1 do for
 your web.
 
-Incredible? See the next example page link:{roundtrip-present-videos}[Present videos].
+Incredible? See the next example page link:{url-roundtrip--present-videos}[Present videos].

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

@@ -71,6 +71,8 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+// Include sub-documents
+// -----------------------------------------------------------------------------
 Playing video on web pages seems not that special since you can already
 watch videos on web pages through plugins like _Flash Player_, _Quicktime_,
 or _Silverlight_. A new standard goes to HTML5 Video, a pure HTML way to
@@ -98,7 +100,8 @@ place Galleries elsewhere with your content. You can use them for video blogs
 by putting them into your blog article's content.
 
 WARNING: LightGallery can be used for free for private use, but a commercial
-license is needed for business use. See link:{light-gallery-license}[Light Gallery license]
+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
@@ -111,7 +114,8 @@ HTML5 Video support of LightGallery.
 Two players are available with LightGallery:
 
 . an internal player used by default
-. http://videojs.com/[video.js], an excellent Javascript video library
+. {url-videojs--home}[video.js, {browser-window--new}], a excellent 
+  Javascript video library
 
 NOTE: The HTML5 specification does _not_ define which video and audio formats
 browsers _should_ support. J1 LightGallery can play all types of standard
@@ -140,4 +144,4 @@ 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:{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/200_typography.adoc

@@ -56,6 +56,8 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+// Include sub-documents
+// -----------------------------------------------------------------------------
 == Typography
 
 The character font serves as one of the most crucial branding elements for
@@ -251,4 +253,4 @@ J1 Template supports popular icons font sets like:
 * Iconify
 
 Would you like to learn more about icons? The next example page focus on what's
-possible using link:{roundtrip-icon-fonts}[icon fonts, {browser-window--new}].
+possible using link:{url-roundtrip--icon-fonts}[icon fonts, {browser-window--new}].

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

@@ -55,13 +55,15 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+// Include sub-documents
+// -----------------------------------------------------------------------------
 == Icon Fonts
 
 J1 Template supports popular icons font sets out-of-the-box:
 
-* link:{mdi-home}[Material Design Icons, {browser-window--new}] (MDI)
-* link:{fontawesome-home}[FontAwesome Icons V5, {browser-window--new}] (FA)
-* link:{iconify-home}[Iconify Icons, {browser-window--new}] (II)
+* link:{url-mdi--home}[Material Design Icons, {browser-window--new}] (MDI)
+* link:{url-fontawesome--home}[FontAwesome Icons V5, {browser-window--new}] (FA)
+* link:{url-iconify--home}[Iconify Icons, {browser-window--new}] (II)
 
 The icon sets MDI and FA are very good in design and have a rich set of
 different icons for many categories used for the Web. See below for some
@@ -75,7 +77,7 @@ Framework*. See section <<Iconify Icons>> for more information.
 == Material Design Icons
 
 The primary icon-set for the J1 Template is
-link:{mdi-home}[Material Design Icons, {browser-window--new}],
+link:{url-mdi--home}[Material Design Icons, {browser-window--new}],
 because it is a rich set providing more than 5900+ icons for the current
 version (v5.9.55). MDI has excellent *Material Design* support from a design
 perspective and comes with the original icon set created by _Google_ build-in.
@@ -227,7 +229,7 @@ mdi:heart[5x md-red-900 mdi-pulsed]
 NOTE: Using Material Design Icons with Asciidoc is easy as an inline
 macro `mdi:` is available to place icons wherever you want. See more about
 this in section
-link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions].
+link:{url-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
@@ -264,13 +266,13 @@ Already existing styles like `fa-flip-vertical` are available as `fa-flip-v`
 as well.
 
 You can check out what icons available at
-link:{fontawesome-icons}[FontAwesome Icons, {browser-window--new}].
+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 need 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
+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
@@ -282,7 +284,7 @@ parts:
 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:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions].
+link:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions].
 
 Find below examples of both and the use with J1 Template.
 
@@ -296,7 +298,7 @@ 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. +
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
 
 No modifiers +
 [source, adoc, role="noclip"]
@@ -308,7 +310,7 @@ 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. +
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
 
 Color blue +
 [source, adoc, role="noclip"]
@@ -330,7 +332,7 @@ 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. +
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
 
 No modifiers +
 [source, adoc, role="noclip"]
@@ -342,7 +344,7 @@ 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. +
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
 
 No modifiers +
 [source, adoc, role="noclip"]
@@ -354,7 +356,7 @@ 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. +
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
 
 No modifiers +
 [source, adoc, role="noclip"]
@@ -366,7 +368,7 @@ 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. +
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
 
 Rotate 90 degrees +
 [source, adoc, role="noclip"]
@@ -379,7 +381,7 @@ fas:user[5x fa-rotate-90]
 |`mdi-light` +
 `fa-flip-v`
 |All icons can be found for preview at the
-link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
 
 Colour set to MDI Light (Grey) and flipped vertical +
 [source, adoc, role="noclip"]
@@ -391,7 +393,7 @@ 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. +
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
 
 Colour set to MDI Indigo +
 [source, adoc, role="noclip"]
@@ -403,7 +405,7 @@ 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. +
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
 
 Colour set to MDI Pink +
 [source, adoc, role="noclip"]
@@ -415,7 +417,7 @@ 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. +
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
 
 Added animation of type Rotate (Spin) +
 [source, adoc, role="noclip"]
@@ -428,7 +430,7 @@ fas:circle-notch[5x fa-spin]
 |`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. +
+link:{url-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"]
@@ -445,19 +447,19 @@ fas:heart[5x md-red-900 fa-pulsed]
 MDI and FA are rich icon sets but designed for general use. Sometimes icons
 are missing in one of these fonts, like a specific brand or theme icon. An
 interesting solution for using font icons from a remote repository is
-link:{iconify-home}[Iconify, {browser-window--new}]. Iconify is a so-called
+link:{url-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 the J1 Template,
 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:{iconify-icon-sets}[Iconify Icon Sets, {browser-window--new}].
+link:{url-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].
+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.
@@ -470,7 +472,7 @@ 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. +
+link:{url-iconify--brand-icons}[SVG Logos, {browser-window--new}] page online. +
 
 No modifiers +
 [source, adoc, role="noclip"]
@@ -482,7 +484,7 @@ 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. +
+link:{url-iconify--brand-icons}[SVG Logos, {browser-window--new}] page online. +
 
 No modifiers +
 [source, adoc, role="noclip"]
@@ -501,7 +503,7 @@ 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. +
+link:{url-iconify--medical-icons}[Medical Icons, {browser-window--new}] page online. +
 
 No modifiers +
 [source, adoc, role="noclip"]
@@ -513,7 +515,7 @@ 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. +
+link:{url-iconify--medical-icons}[Medical Icons, {browser-window--new}] page online. +
 
 Color (md) red +
 [source, adoc, role="noclip"]
@@ -531,5 +533,5 @@ Have you've enjoyed the possibilities J1 offers for managing and
 manipulating font icons. Do you think these icon sets can fit your needs?
 Using Iconify, for all topics, you will find a suitable icon. And it's simple.
 
-To check more features of the template, go for the link:{roundtrip-asciidoc-extensions}[
-Asciidoc extensions] made for J1!
+To check more features of the template, go for the
+link:{url-roundtrip--asciidoc-extensions}[Asciidoc extensions] made for J1!

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

@@ -50,18 +50,19 @@ resource_options:
 // -----------------------------------------------------------------------------
 {% include {{load_attributes}} scope="all" %}
 
-
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+// Include sub-documents
+// -----------------------------------------------------------------------------
 J1 Template implements some incubating Ruby-based extensions for Asciidoctor.
 Most extensions are based on the examples given with the
-{asciidoctor-extensions-lab}[Asciidoctor Extensions Lab, {browser-window--new}].
+link:{url-asciidoctor--extensions-lab}[Asciidoctor Extensions Lab, {browser-window--new}].
 If you simply want to use the extensions from this repository, go ahead to
-{asciidoctor-extensions-use-extension}[Using an extension, {browser-window--new}].
+link:{url-asciidoctor--extensions-use}[Using an extension, {browser-window--new}].
 
 To create Asciidoc extensions on your own, it is highly recommended to read the
-{asciidoctor-user-manual-extensions}[extensions section, {browser-window--new}] in
+link:{url-asciidoctor--extensions-manual}[extensions section, {browser-window--new}] in
 the Asciidoctor user manual.
 
 == Asciidoc Extensions
@@ -243,6 +244,103 @@ lightbox::images-group[ 400, {data-images-group}, group_name ]
 .Lightbox block for grouped images
 lightbox::images-group[ 400, {data-images-group}, group_name ]
 
+== Country flags
+
+Country flags are often used in the context of language-specific selections
+or for content related to a specific country. The use of country flags can
+make language selections or country indicators more visual to support your
+visitors by making a more meaningful presentation.
+
+The J1 Template comes with full support of country flags for Asciidoc
+documents included.
+
+Country flags can be used as inline icons by using the `flag:` inline macro:
+
+[source, prometheus, role="noclip"]
+----
+flag:country[style, size, modifier] <1> <2> <3> <4>
+----
+<1> All `country` flags can be found on the preview page for
+    link:{url-previewer--county-flags}[country flags]
+<2> The `style` attribute can be one of: `rectangle` or `squared`
+<3> The `size` attribute can be one of: `xs`, `sm`, `md`, `lg`, `xl` (responsive)
+    and `1x` to `10x` (proportional)
+<4> The `modifier` can be used to add individual CSS classes e.g. for
+    BS styles for margin setting and other
+
+.Click on _view result_ to see how it's looks alike
+[source, prometheus, 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)
+----
+
+[.result]
+====
+flag:de[rectangle, 2x, ml-3 mr-2 mb-2] Germany (rectangle) +
+flag:de[squared, 2x, ml-3 mr-3 mb-2] Germany (square)
+====
+
+Flag Icons is a collection of all country flags in the SVG vector format.
+All icons can be automatically resized with no loss in display quality.
+
+.Example flag sizes (responsive)
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
+|===
+|Size |Style |Markup |Render
+
+|`xs`
+|rectangle
+|
+.Germany
+[source, adoc, role="noclip"]
+----
+flag:de[rectangle, xs]
+----
+^|flag:de[rectangle, xs]
+
+|`sm`
+|rectangle
+|
+.Germany
+[source, adoc, role="noclip"]
+----
+flag:de[rectangle, sm]
+----
+^|flag:de[rectangle, sm]
+
+|`md`
+|rectangle
+|
+.Belgium
+[source, adoc, role="noclip"]
+----
+flag:be[rectangle, md]
+----
+^|flag:be[rectangle, md]
+
+|`lg`
+|rectangle
+|
+.Denmark
+[source, adoc, role="noclip"]
+----
+flag:dk[rectangle, lg]
+----
+^|flag:dk[rectangle, lg]
+
+|`xl`
+|rectangle
+|
+.Spain
+[source, adoc, role="noclip"]
+----
+flag:es[rectangle, xl]
+----
+^|flag:es[rectangle, xl]
+
+|===
+
 
 == Icon Fonts
 
@@ -263,7 +361,8 @@ the `mdi:` inline macro:
 ----
 mdi:icon_name[icon_size, modifier] <1> <2> <3>
 ----
-<1> All `icon_name` can be found on the Preview page for MDI Icon Previewer
+<1> All `icon_name` can be found on the preview page for
+    link:{url-previewer--mdi-icons}[MDI Icon Previewer]
 <2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `10x`
 <3> The `modifier` can be used to set the e.g the color (md-blue), an
     animation (fa-pulsed) or the orientation (fa-rotate-45)
@@ -296,7 +395,8 @@ the `fas:` (solid icons) or `fab` (brand icons) inline macro:
 ----
 fas:icon_name[icon_size, modifier] <1> <2> <3>
 ----
-<1> All `icon_name` can be found on the Preview page for FA Icon Previewer
+<1> All `icon_name` can be found on the preview page at
+    link:{url-fa-icons--previewer}[FA Icons, {browser-window--new}]
 <2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `10x`
 <3> The `modifier` can be used to set e.g the color (md-blue), an
     animation (fa-pulsed) or the orientation (fa-rotate-45) of an icon
@@ -330,7 +430,8 @@ inline macro:
 ----
 iconify:icon_name[icon_size, modifier] <1> <2> <3>
 ----
-<1> All `icon_name` can be found on the Preview page for FA Icon Previewer
+<1> All `icon_name` can be found on the preview page at
+    link:{url-iconify-icons--previewer}[Iconify Icons, {browser-window--new}]
 <2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `10x`
 <3> The `modifier` can be used to set e.g the color (md-blue) or additional
 positioning classes for margings and padding
@@ -351,7 +452,7 @@ iconify:simple-icons:netlify[2x, md-red ml-4] Brand icon Netlify, colored
 ====
 
 Find all Iconify Icons available on page
-link:{iconify-icon-sets}[Iconify Icon Sets, {browser-window--new}].
+link:{url-iconify--icon-sets}[Iconify Icon Sets, {browser-window--new}].
 
 [NOTE]
 ====
@@ -373,7 +474,8 @@ inline macro:
 ----
 emoji:icon_name[icon_size] <1> <2>
 ----
-<1> All `icon_name` can be found on the Preview page for Twitter Emoji's
+<1> All `icon_name` can be found on the preview page for
+    link:{url-previewer--emoji}[Twitter Emoji's]
 <2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `5x`
 
 .Click on _view result_ to see how it's look alike
@@ -500,5 +602,5 @@ The next preview is focussing on advanced Bootstrap Modals. The modals feature
 is currently in beta status, but it is a great option to customize your
 user dialogues using them!
 
-Have a look for the link:{roundtrip-extended-modals}[BS modal extensions]
+Have a look for the link:{url-roundtrip--extended-modals}[BS modal extensions]
 feature of J1 Template.

data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc

@@ -51,11 +51,14 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+// Include sub-documents
+// -----------------------------------------------------------------------------
 Advanced Bootstrap Modals are based on the free package of
-link:{mdb-home}[Material Design for Bootstrap, {browser-window--new}] on version
+link:{url-mdb--home}[Material Design for Bootstrap, {browser-window--new}] on version
 *4.3.2*. This version can be found following this link:
-link:{mdb-bs-modals-legacy}[Enhanced Bootstrap Modals, {browser-window--new}]. A more
-current version is available from here: link:{mdb-bs-modals}[Modal examples & templates, {browser-window--new}].
+link:{url-mdb--bs-modals-legacy}[Enhanced Bootstrap Modals, {browser-window--new}]. A more
+current version is available from here:
+link:{url-mdb--bs-modals}[Modal examples & templates, {browser-window--new}].
 
 Bootstrap modals are used to add dialogues to your web pages for user
 notifications. To highlight important information to your visitors. Modals
@@ -71,7 +74,7 @@ added to the information displayed - ranging from an info level, a simple
 warning to critical messages.
 
 NOTE: For more information on how to use Bootstrap’s JavaScript modal
-plugin, refer to: link:{bs_doc_components_modal}[Bootstrap Docs, {browser-window--new}].
+plugin, refer to: link:{url-bs-doc--components-modal}[Bootstrap Docs, {browser-window--new}].
 
 // include::{documentdir}/tables/bs_modal_examples.asciidoc[]
 include::{documentdir}/410_table_bs_modal_examples.asciidoc[]
@@ -86,7 +89,7 @@ needs some enhancement to display tables on low-resolution devices or smaller
 
 The first version for improved responsive tables that scale better is available
 for the J1 Template. Check out from here what the
-link:{roundtrip-responsive-tables}[BS tables extensions] can do!
+link:{url-roundtrip--responsive-tables}[BS tables extensions] can do!
 
 // Include the modals HTML portion
 // -----------------------------------------------------------------------------