j1-template 2022.5.2 → 2022.6.0

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

@@ -0,0 +1,110 @@
+== Code Highlighter Rouge
+
+_Rouge_ is a pure Ruby and themeable syntax highlighter. It can highlight
+100+ different languages and output HTML or ANSI 256-color text. Find all
+available themes and examples for several languages of how
+highlighting works using _Rouge_.
+
+For the default theme `Uno` of J1 Template, the following _Rouge_ themes
+are used:
+
+* light: `igorpro`
+* dark: `monokai.sublime`
+
+NOTE: The default themes used for the J1 Template can be configured with the
+global template config file `~/_data/j1_config.yml`.
+
+
+=== Apply a theme
+
+Make a selection of a theme below to preview.
+
+++++
+<div class="btn-group">
+  <!-- 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 -->
+  <button class="btn btn-primary btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-bs-toggle="dropdown" data-bs-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
+  Select Theme<span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu scrollable-menu" role="menu">
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.dark</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.light</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.dark</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.light</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.dark</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.light</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('colorful')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>colorful</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('github')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>github</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox.light</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('igorpro')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>igorpro</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('molokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>molokai</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai.sublime')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai.sublime</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('pastie')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>pastie</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('thankful_eyes')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>thankful_eyes</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('tulip')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>tulip</a></li>
+  </ul>
+</div>
+<div id="selected" class="mt-1 mb-3"></div>
+++++
+
+=== Highlight Liquid code
+
+{% raw %}
+[source, liquid]
+----
+Hello {{ 'now' | date: "%Y %h" }}
+
+{% comment %} if item.quantity is 4... {% endcomment %}
+{% for i in (1..item.quantity) %}
+  {{ i }}
+{% endfor %}
+----
+{% endraw %}
+
+=== Highlight Javascript code
+
+[source, javascript]
+----
+// helper functions
+//
+function styleSheetLoaded(styleSheet) {
+  var sheets     = document.styleSheets,
+      stylesheet = sheets[(sheets.length - 1)];
+
+  // find CSS file 'styleSheetName' in document
+  for(var i in document.styleSheets) {
+    if(sheets[i].href && sheets[i].href.indexOf(styleSheet) > -1) {
+      return true;;
+    }
+  }
+}
+----
+
+=== Highlight Ruby code
+
+[source, ruby]
+----
+require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal'
+include Asciidoctor <1>
+
+Asciidoctor::Extensions.register do
+  class J1BlockMacro < Extensions::BlockMacroProcessor
+    use_dsl
+    named :banner
+    name_positional_attributes 'role'
+
+    def process parent, target, attrs
+      html = %(<div id="#{target}" class="#{attrs['role']}"></div>)
+      create_pass_block parent, html, attrs, subs: nil
+    end
+  end
+  block_macro J1BlockMacro
+end
+----
+<1> don't miss to load the Asciidoctor ruby

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

@@ -1,6 +1,6 @@
 ---
-title:                                  Roundtrip
-tagline:                                asciidoc extensions
+title:                                  Asciidoc Enhancements
+tagline:                                Asciidoctor Extensions
 date:                                   2020-11-07 00:00:00
 description: >
                                         J1 Template implements some incubating Ruby-based
@@ -9,21 +9,23 @@ description: >
                                         Lab. All implemented Asciidoctor Extensions can be
                                         found in this article.
 
-categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Module, Asciidoc, Extension ]
 
-fab_menu_id:                            page_ctrl
+categories:                             [ Roundtrip, Asciidoc ]
+tags:                                   [ Extension ]
+
+image:
+  path:                                 /assets/images/pages/roundtrip/puzzle-1920x1280-bw.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  puzzle-1920x1280-bw
 
 permalink:                              /pages/public/learn/roundtrip/asciidoc_extensions/
 regenerate:                             false
 
 resources:                              [ animate, clipboard, lightbox, iconify, twemoji, rouge ]
 resource_options:
-
   - attic:
-
       slides:
-
         - url:                          /assets/images/pages/roundtrip/puzzle-1920x1280-bw.jpg
           alt:                          puzzle-1920x1280-bw
 ---
@@ -719,5 +721,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:{url-roundtrip--extended-modals}[BS Modal Extensions]
+Have a look for the link:{url-roundtrip--extended-modals}[Modal Extensions]
 feature of J1 Template.

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

@@ -0,0 +1,80 @@
+---
+title:                                  Bootstrap Themes
+tagline:                                J1 Template Theming
+date:                                   2020-11-10 00:00:00
+description: >
+                                        The themes feature for J1 is in an experimental
+                                        state for the template system. Anyway, it makes
+                                        sense to present what is possible using different
+                                        versions of Bootstrap's CSS styles for a website.
+
+categories:                             [ Roundtrip, Bootstrap ]
+tags:                                   [ Module, Themes ]
+
+image:
+  path:                                 /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Photo by Clem Onojeghuo on Unsplash
+
+permalink:                              /pages/public/learn/roundtrip/themes/
+regenerate:                             true
+
+resources:                              [ animate, rouge, clipboard, lightbox ]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
+          alt:                          Photo by Clem Onojeghuo on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Clem Onojeghuo
+            href:                       https://unsplash.com/@clemono
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+[role="dropcap"]
+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 V5. Bootstrap is an HTML, CSS & JS 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 J1-based site.
+
+Using Bootstrap styles results in a uniform appearance for the content in
+terms of the overall layout, text, tables, and form elements across all
+modern web browsers available on the market. In addition, developers can take
+advantage of CSS classes defined in Bootstrap to customize content
+individually.
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+include::{documentdir}/themes_bootstrap.asciidoc[]
+
+== What next
+
+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:{url-roundtrip--quicksearch}[Lunr Search].

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

@@ -1,6 +1,6 @@
 ---
-title:                                  Roundtrip
-tagline:                                icon fonts
+title:                                  Icon Fonts
+tagline:                                Popular Icons Sets
 date:                                   2020-11-06 00:00:00
 description: >
                                         J1 Template supports popular icons font sets out-of-the-box.
@@ -10,20 +10,22 @@ description: >
                                         loaded over the Internet using the so-called Unified OpenSource Icon
                                         Framework.
 
-categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Module, Icon, Fonts ]
+categories:                             [ Roundtrip, Icon Fonts ]
+tags:                                   [ Module, Icon ]
 
-fab_menu_id:                            page_ctrl
+image:
+  path:                                 assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Photo by Harpal Singh on Unsplash
 
 permalink:                              /pages/public/learn/roundtrip/mdi_icon_font/
 regenerate:                             false
 
 resources:                              [ animate, iconify ]
 resource_options:
-
   - attic:
       slides:
-
         - url:                          /assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg
           alt:                          Photo by Harpal Singh on Unsplash
           badge:

data/lib/starter_web/pages/public/learn/roundtrip/{quicksearch.adoc → lunr_search.adoc}

@@ -1,6 +1,6 @@
 ---
-title:                                  Roundtrip
-tagline:                                full text search
+title:                                  Lunr Search
+tagline:                                QuickSearch for J1
 date:                                   2020-11-08 00:00:00
 description: >
                                         QuickSearch is based on the search engine Lunr,
@@ -11,26 +11,30 @@ description: >
                                         on the Internet like Google.
 
 categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Module, Lunr, QuickSearch ]
+tags:                                   [ Module, Quicksearch ]
 
-toc:                                    true
-scrollbar:                              false
-fab_menu_id:                            page_ctrl
+image:
+  path:                                 /assets/images/modules/attics/lunr-1280x800.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Lunr Search Engine
 
 permalink:                              /pages/public/learn/roundtrip/quicksearch/
 regenerate:                             false
 
+toc:                                    true
+scrollbar:                              false
+
 resources:                              [ animate, clipboard, lightbox, rouge ]
 resource_options:
-
   - toccer:
       collapseDepth:                    3
-
   - attic:
-
+#      alignY:                           0.1
+#      padding_top:                      500
       slides:
         - url:                          /assets/images/modules/attics/lunr-1280x800.jpg
-          alt:                          Lunr
+          alt:                          Lunr Search Engine
 ---
 
 // Page Initializer
@@ -56,14 +60,15 @@ resource_options:
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 [role="dropcap"]
-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
-engines or commercial services on the Internet like Google. Searching a website
-using QuickSearch is different from search engines like Google or Microsoft
-Bing. Those search platforms using complex algorithms to provide a simple
-interface to the public but using a lot of artificial intelligence (AI) methods
-to make sense of results out of a handful of words given for a search.
+The QuickSearch module for J1 Template is based on the search engine _Lunr_,
+fully integrated with the template system. _Lunr_ is designed to be lightweight
+yet full-featured to provide a great search experience. No need for complex
+external, server-sided search engines or commercial services on the Internet
+like Google. Searching a website using QuickSearch is different from search
+engines like Google or Microsoft Bing. Those search platforms using complex
+algorithms to provide a simple interface to the public but using a lot of
+artificial intelligence (AI) methods to make sense of results out of a
+handful of words given for a search.
 
 Nevertheless, QuickSearch, the J1 implementation of Lunr, is simple like
 searching at Google but offers additional features to do searches more

data/lib/starter_web/pages/public/learn/roundtrip/{bs_modals_extentions.adoc → modal_extentions.adoc}

@@ -1,6 +1,6 @@
 ---
-title:                                  Roundtrip
-tagline:                                advanced bootstrap modals
+title:                                  Modal Extensions
+tagline:                                Improve Visitor Experience
 date:                                   2020-11-08 00:00:00
 description: >
                                         Advanced Bootstrap modals are used to add dialogs to your
@@ -9,24 +9,26 @@ description: >
                                         everything else in the document so that messages get the
                                         user's attention.
 
-categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Bootstrap, Modal, Extension ]
+categories:                             [ Roundtrip, Bootstrap ]
+tags:                                   [ Modal, Extension ]
 
-flowtext:                               false
-fab_menu_id:                            page_ctrl
+image:
+  path:                                 /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Bootstrap Framework Logo
 
 permalink:                              /pages/public/learn/roundtrip/modals/
 regenerate:                             false
 
+# flowtext:                               false
+
 resources:                              [ animate ]
 resource_options:
-
   - attic:
-
       slides:
-
         - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
-          alt:                          bootstrap
+          alt:                          Bootstrap Framework Logo
 ---
 
 // Page Initializer
@@ -51,19 +53,16 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+[role="dropcap"]
+Enhanced Bootstrap Modals are used to add dialogues to your web pages for user
+notifications. To highlight important information to your visitors. Modals are
+positioned over everything else in the document so that messages get the
+user's attention.
+
+
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-[role="dropcap"]
-Advanced Bootstrap Modals are based on the free package of
-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:{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
-are positioned over everything else in the document so that messages
-get the user's attention.
+== Modal Examples
 
 To improve your visitor's experience on important information that shouldn't
 be missed. Modals are a great choice to bring the user's attention. Using the
@@ -71,8 +70,8 @@ J1 Template BS enhanced predefined modal styles, some emotional weight is
 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:{url-bs-doc--components-modal}[Bootstrap Docs, {browser-window--new}].
+TIP: For more information on how to use Bootstrap’s JavaScript modal
+plugin, refer to: link:{url-bs-docs--components-modal}[Bootstrap Docs, {browser-window--new}].
 
 // include::{documentdir}/tables/bs_modal_examples.asciidoc[]
 include::{documentdir}/410_table_bs_modal_examples.asciidoc[]
@@ -87,7 +86,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:{url-roundtrip--responsive-tables}[BS Table Extensions] can do!
+link:{url-roundtrip--responsive-tables}[Responsive Tables] can do!
 
 // Include the modals HTML portion
 // -----------------------------------------------------------------------------

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

@@ -1,6 +1,6 @@
 ---
-title:                                  Roundtrip
-tagline:                                present images
+title:                                  Present Images
+tagline:                                Manage Image Contents
 date:                                   2020-11-03 00:00:00
 description: >
                                         Welcome to the preview page focussing on the image module. This page
@@ -8,9 +8,13 @@ description: >
                                         content using lightboxes, carousels (slider), and galleries.
 
 categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Module, Image ]
+tags:                                   [ Module, Carousel, Lightbox, Image, Slider ]
 
-fab_menu_id:                            page_ctrl
+image:
+  path:                                 /assets/images/modules/attics/1920x1280/quino-al-2.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Photo by Quino Al Angel on Unsplash
 
 permalink:                              /pages/public/learn/roundtrip/present_images/
 regenerate:                             false
@@ -21,17 +25,14 @@ resources:                              [
                                           masterslider, rouge
                                         ]
 resource_options:
-
   - attic:
-
       slides:
-
-        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
-          alt:                          Photo by Ricardo Gomez Angel on Unsplash
+        - url:                          /assets/images/modules/attics/1920x1280/quino-al-2.jpg
+          alt:                          Photo by Quino Al Angel on Unsplash
           badge:
             type:                       unsplash
-            author:                     Ricardo Gomez Angel
-            href:                       https://unsplash.com/@ripato/portfolio
+            author:                     Quino Al Angel
+            href:                       https://unsplash.com/@quinoal
 ---
 
 

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

@@ -1,6 +1,6 @@
 ---
-title:                                  Roundtrip
-tagline:                                present video content
+title:                                  Present Videos
+tagline:                                Playing Video On Webpages
 date:                                   2020-11-04 00:00:00 +100
 description: >
                                         Playing video on web pages seems not that special since you can already
@@ -10,13 +10,17 @@ description: >
                                         proprietary software.
 
 categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Module, Video ]
+tags:                                   [ Module, Video ]
+
+image:
+  path:                                 /assets/videos/headers/present_videos/still/underground-broadway.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Broadway Underground
 
 permalink:                              /pages/public/learn/roundtrip/present_videos/
 regenerate:                             false
-
 personalization:                        true
-fab_menu_id:                            page_ctrl
 
 resources:                              [
                                           animate, lightGallery, justifiedGallery, video_js,
@@ -30,15 +34,15 @@ resource_options:
         # Broadway Underground - still image (animate default)
         - url:                          /assets/videos/headers/present_videos/still/underground-broadway.jpg
           alt:                          Broadway Underground
-          title:                        Roundtrip
-          tagline:                      present video content
+          title:                        Present Videos
+          tagline:                      Playing Video On Webpages
           alignY:                       top
           animateFirst:                 false
 
         # Broadway Underground - FAYETTE ST, moved file to Github/LFS
         - url:                          /assets/videos/headers/present_videos/underground-broadway.mp4
           alt:                          Broadway Underground Video
-          title:                        Roundtrip
+          title:                        Present Videos
           tagline:                      Broadway Underground
           alignY:                       0
           isVideo:                      true
@@ -48,8 +52,8 @@ resource_options:
         # Broadway Underground - still image (animate random)
         - url:                          /assets/videos/headers/present_videos/still/underground-broadway.jpg
           alt:                          Broadway Underground
-          title:                        Roundtrip
-          tagline:                      manage video content for your site
+          title:                        Present Videos
+          tagline:                      Manage Video Content For Your Site
           alignY:                       top
           transition:                   push_left|push_right|cover_up|cover_down|fade|fadeInOut
 ---

data/lib/starter_web/pages/public/learn/roundtrip/{responsive_tables_extensions.adoc → responsive_tables.adoc}

@@ -1,14 +1,20 @@
 ---
-title:                                  Roundtrip
-tagline:                                responsive tables
+title:                                  Responsive Tables
+tagline:                                Tables Viewed Best On All Devices
 date:                                   2020-11-09 00:00:00
 description: >
                                         Creating a design for responsive tables is challenging. The approach used by
                                         J1 Template is based on pure CSS styles on top of the classic Bootstrap tags for
                                         simplicity and portability to be viewed best on all devices and browsers.
 
-categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Bootstrap, Table, Extension ]
+categories:                             [ Roundtrip, Bootstrap ]
+tags:                                   [ Tables, Extension ]
+
+image:
+  path:                                 /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Photo by Markus Spiske on Unsplash
 
 flowtext:                               false
 fab_menu_id:                            page_ctrl
@@ -19,12 +25,9 @@ regenerate:                             true
 
 resources:                              [ animate, clipboard, lightbox, rouge ]
 resource_options:
-
   - attic:
       opacity:                          0.7
-
       slides:
-
         - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
           alt:                          Photo by Markus Spiske on Unsplash
           badge:
@@ -96,13 +99,13 @@ To see the transformation on a table in action, resize for desktop devices the
 browser window or use a device the viewport is smaller than 768px (mobiles or
 tablets).
 
-== Tables 2-column
+== Table 2-column
 
 Tables are widely used for documentation pages. Below, simple 2-column tables
 are used to explain some of the Jekyll variables for templating your content
 pages.
 
-=== Bootstrap tables
+=== Bootstrap table
 
 Bootstrap tables support tables to be scrolled horizontally on smaller
 viewports. From a specified breakpoint and up, the table will behave
@@ -186,7 +189,7 @@ Post's front matter by specifying a new date/time in the format
 |===
 
 
-=== Responsive tables
+=== Responsive table
 
 Responsive tables *rebuild* a table. The header is set to invisible, and
 all columns get vertically *stacked as rows*.
@@ -276,7 +279,7 @@ available to better control over what viewport sizes table are transformed.
 From a specified breakpoint and up, the table will behave normally
 and do not scroll horizontally.
 
-=== Bootstrap tables
+=== Bootstrap table
 
 Bootstrap responsive tables make use of the CSS `overflow-x: auto`, which
 clips off any content that goes beyond the bottom or top edges of the table.
@@ -353,7 +356,7 @@ the form `#RRGGBB`
 
 |===
 
-=== Responsive tables
+=== Responsive table
 
 .R Table using fixed text size `no-rtext`
 [source, asciidoc, role="noclip"]
@@ -433,4 +436,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:{url-roundtrip--themes}[BS Themes] feature!
+link:{url-roundtrip--themes}[Bootstrap Themes] feature!