RubyGems - j1-template - Versions diffs - 2021.2.3 → 2021.2.7 - Mend

j1-template 2021.2.3 → 2021.2.7

Files changed (651) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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
 // -----------------------------------------------------------------------------

data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc CHANGED Viewed

@@ -53,6 +53,8 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// Include sub-documents
+// -----------------------------------------------------------------------------
 Creating a design for responsive tables is challenging. The approach used by
 J1 Template is based on pure CSS on top of the classic Bootstrap styles for
 simplicity and portability to be viewed best on all devices and browsers.
@@ -71,7 +73,7 @@ tables are implemented:
 |J Table (default)
 |`r-text-xxx`
 |J Tables are used by J1 Template for default. Those tables are using the
-*responsive text* feature (see link:{roundtrip-typography}[Typography])
+*responsive text* feature (see link:{url-roundtrip--typography}[Typography])
 with no additional CSS classes to be applied. For smaller viewports, the text
 scales down and should fit the cells automatically. The default text size for
 J1 is `r-text-300`.
@@ -416,4 +418,4 @@ An exciting feature may be the use of themes. But much, much more can the J1
 do for your Web Site.
 Check out what themes can do. Have a look at the
-link:{roundtrip-themes}[BS themes] feature!
+link:{url-roundtrip--themes}[BS themes] feature!

data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc CHANGED Viewed

@@ -53,10 +53,8 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // Include sub-documents
 // -----------------------------------------------------------------------------
 Themes for the template system J1 are based on the free and open-source CSS
 front-end framework {url-bs--home}[Bootstrap, {browser-window--new}] of
 version V4.
@@ -90,17 +88,17 @@ It is expected that many people will change the template for their needs. To
 create unique websites. Fundamental to do this is are CSS styles
 defined by Bootstrap.
-Modifying the CSS styles of link:{bootstrap-home}[Bootstrap, {browser-window--new}]
+Modifying the CSS styles of link:{url-bootstrap--home}[Bootstrap, {browser-window--new}]
 is not rocket science. But, to be honest, some knowledge is needed for
-link:{w3org-css-spec}[the CSS technology] to do so. We encourage you to spend
+link:{url-w3org--css-spec}[the CSS technology] to do so. We encourage you to spend
 some time first on learning CSS. To learn what is the
-link:{w3schools-css-tutorial}[design base, {browser-window--new}] of each and
+link:{url-w3schools--css-tutorial}[design base, {browser-window--new}] of each and
 every website.
 .Themes menu (Bootswatch)
 lightbox::images--themes-menu[ 1024, {data-images--themes-menu} ]
-Thanks to the people at link:{bootswatch-home}[Bootswatch, {browser-window--new}],
+Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
 a great set of already prepared Bootstrap stylesheets in various designs are
 available on their website. There is no need to start from scratch, re-define all
 the Bootstrap variables, and rebuild the framework files to create a new
@@ -108,7 +106,7 @@ theme. Many different styles are available. What is already available at
 Bootswatch is at least a good base for your modifications; your unique design.
 Besides the bunch of different stylesheets at Bootswatch, an
-link:{bootswatch-api}[Integration API, {browser-window--new}] is available
+link:{url-bootswatch--api}[Integration API, {browser-window--new}] is available
 that helps a lot to integrate available designs into an existing site. This API
 is the base to integrate selectable Bootswatch stylesheets into the J1 Template
 navigation system for easy use.
@@ -254,4 +252,4 @@ your theme, anyway.
 An important feature for larger webs is searching. The visitors should be able
 to search your site to find pages and posts they are interested in. Check what
-is searching a J1 website all about at link:{roundtrip-quicksearch}[Quicksearch].
+is searching a J1 website all about at link:{url-roundtrip--quicksearch}[Quicksearch].

data/lib/starter_web/pages/public/learn/roundtrip/600_quicksearch.adoc CHANGED Viewed

@@ -55,7 +55,6 @@ resource_options:
 // Include sub-documents
 // -----------------------------------------------------------------------------
 QuickSearch is based on the search engine Lunr, fully integrated with the J1
 Template. Lunr is designed to be lightweight yet full-featured to provide a
 great search experience. No need for complex external, server-sided search
@@ -423,7 +422,7 @@ You've explored some of the possibilities J1 offers for websites. But much,
 much more can J1 do for your project. This was the last page to go for the
 roundtrip. More details of the most common elements of Bootstrap can be found
 on the previewer for a theme. Have a look at the
-link:{previewer-theme}[Theme previewer].
+link:{url-previewer--theme}[Theme previewer].
 To make things real for your new site, go for *Web in a day*. This tutorial
 guides you through all the steps on how to build a website. Your site using