j1-template 2021.0.16 → 2021.1.4

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

@@ -1,17 +1,20 @@
 ---
 title:                                  Roundtrip
 tagline:                                advanced bootstrap modals
-date:                                   2020-11-08 00:00:00
+date:                                   2020-11-08 00:00:00 +100
 description: >
-                                        Bootstrap modals are used to add dialogues to your web pages for user
-                                        notifications. To highlight important information to your visitor's. Modals
-                                        are positioned over everything else in the document so that messages
-                                        get the users attention.
+                                        Bootstrap modals are used to add dialogs 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.
 
+categories:                             [ Bootstrap, Modals ]
 tags:                                   [ Roundtrip, Introduction ]
-categories:                             [ Bootstrap, Modal, Extension ]
 
 flowtext:                               false
+comments:                               false
+fam_menu_id:                            page_ctrl_simple
 
 permalink:                              /pages/public/learn/roundtrip/modals/
 regenerate:                             false
@@ -56,17 +59,17 @@ link:{mdb-bs-modals-legacy}[Enhanced Bootstrap Modals, {browser-window--new}]. A
 current version is available from here: link:{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 visitor's. Modals
+notifications. To highlight important information to your visitors. Modals
 are positioned over everything else in the document so that messages
-get the users attention.
+get the user's attention.
 
 == BS advanced Modals
 
 To improve your visitor's experience on important information that shouldn't
-missed, modals are a great choice to bring the users attention on. Using 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.
+be missed, modals are a great choice to bring the user's attention. Using the
+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:{bs_doc_components_modal}[Bootstrap Docs, {browser-window--new}].
@@ -83,10 +86,9 @@ needs some enhancement to display tables on low-resolution devices or smaller
 (browser-) window sizes.
 
 The first version for improved responsive tables that scale better is available
-for J1 Template on top of the classic BS CSS styles. Check out what from here
+for J1 Template on top of the classic BS CSS styles. Check out from here
 what the link:{roundtrip-responsive-tables}[BS tables extensions] can do!
 
-
 // Include the modals HTML portion
 // -----------------------------------------------------------------------------
 include::{documentdir}/419_advanced_modals_demo.asciidoc[]

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

@@ -1,16 +1,18 @@
 ---
 title:                                  Roundtrip
 tagline:                                responsive tables
-date:                                   2020-11-09 00:00:00
+date:                                   2020-11-09 00:00:00 +100
 description: >
                                         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.
 
+categories:                             [ Bootstrap, Tables ]
 tags:                                   [ Roundtrip, Introduction ]
-categories:                             [ Bootstrap, Table, Extension ]
 
 flowtext:                               false
+comments:                               false
+fam_menu_id:                            page_ctrl_simple
 
 permalink:                              /pages/public/learn/roundtrip/responsive_tables/
 regenerate:                             false
@@ -58,7 +60,7 @@ simplicity and portability to be viewed best on all devices and browsers.
 
 == Table types
 
-But, for sure, the solution provided is a compromise. To fit the common needs
+But, for sure, the solution provided is a compromise. To fit the everyday needs
 for tables viewed on desktop and mobile devices, three types of responsive
 tables are implemented:
 
@@ -182,7 +184,7 @@ Post's front matter by specifying a new date/time in the format
 
 === Responsive tables
 
-Responsive tables *rebuilds* a table. The header is set to invisible and
+Responsive tables *rebuild* a table. The header is set to invisible, and
 all columns gets vertically *stacked as rows*.
 
 .Example, R Table using responsive text size
@@ -254,7 +256,7 @@ Responsive Bootstrap tables support tables to be scrolled horizontally
 on smaller viewports. Making any table responsive across all viewports,
 the additional class `rtable` is used. For specific (Bootstrap)
 breakpoints, the classes `rtable{-sm|-md|-lg|-xl}` are available
-to have better control over what viewport sizes table are transformed.
+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.
 
@@ -410,9 +412,9 @@ the form `#RRGGBB`
 
 == Whats next
 
-Expectedly you've enjoyed exploring all the possibilities J1 offers sofar.
-An interesting feature may using themes. But much, much more can the J1 do
+Expectedly you've enjoyed exploring all the possibilities J1 offers so far.
+An exciting feature may 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 link:{roundtrip-themes}[BS themes]
-feature!
+Check out what themes can do. Have a look at the
+link:{roundtrip-themes}[BS themes] feature!

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

@@ -1,17 +1,19 @@
 ---
 title:                                  Roundtrip
 tagline:                                themes
-date:                                   2020-11-10 00:00:00
+date:                                   2020-11-10 00:00:00 +100
 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.
 
-tags:                                   [ Bootstrap, Themes ]
-categories:                             [ Introduction, Features ]
+categories:                             [ Bootstrap, Themes ]
+tags:                                   [ Roundtrip, Introduction ]
 
 scrollbar:                              false
+comments:                               false
+fam_menu_id:                            page_ctrl_simple
 
 permalink:                              /pages/public/learn/roundtrip/themes/
 regenerate:                             false
@@ -52,6 +54,7 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+
 // Include sub-documents
 // -----------------------------------------------------------------------------
 
@@ -59,14 +62,14 @@ 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.
 
-Bootstrap is a HTML, CSS & JS Library that focuses on simplifying the
-development of modern web pages. The primary purpose to apply the framework
-to J1 is to provide a general standard colors, sizes, fonts and the overall
-layout of a J1-based site. Bootstrap provides basic style definitions for all
-common used HTML elements.
+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. Bootstrap provides basic style
+definitions for all commonly used HTML elements.
 
 This 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
+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.
 
@@ -77,10 +80,10 @@ versions of Bootstrap's CSS styles for a website.
 == Template themes
 
 Themes step in the framework to further adjust the appearance of a website
-based on the core CSS rules and definitions of Bootstrap. Themes does not
-change the functionality of the framwork, but modifies rule-based e.g. the
+based on the core CSS rules and definitions of Bootstrap. Themes do not
+change the functionality of the framework but modify rule-based, e.g., the
 color scheme, fonts, sizes or the appearance of more complex elements like
-forms or tables. Additionally, a theme may add additonal components but in
+forms,or tables. Additionally, a theme may add additional components but in
 the *sense* of Bootstrap's framework rules and philosophy.
 
 It is expected that many people will change the template for their needs. To
@@ -88,7 +91,7 @@ really 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}]
-is not rocket science. But, to be honest, some knowledge is needed to
+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
 some time first on learning CSS. To learn what is the
 link:{w3schools-css-tutorial}[design base, {browser-window--new}] of each and
@@ -96,12 +99,12 @@ every website.
 
 Thanks to the people at link:{bootswatch-home}[Bootswatch, {browser-window--new}],
 a great set of already prepared Bootstrap stylesheets in various designs are
-available at their website. No need to start from scratch, to re-define all
+available on their website. No need to start from scratch, to re-define all
 the Bootstrap variables and rebuild the framework files to create a new
 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, a
+Besides the bunch of different stylesheets at Bootswatch, an
 link:{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
@@ -109,7 +112,7 @@ navigation system for easy use.
 
 === Apply a template theme
 
-The base for designing pages using J1 Template is the theme Uno, a modern
+The base for designing pages using the J1 Template is the theme Uno, a modern
 light theme that can be used for many types of websites. And what we mentioned
 already, web design is not: one size fits all. The theme Uno can be seen as
 a good base, a starting point. Combining Uno and a different theme may a fast
@@ -117,12 +120,12 @@ solution for your site!?
 
 You can find all available themes, all stylesheets to be applied to your pages
 from the menu Themes. You're invited to check how a page is changing for
-their design if other stylesheets, other ideas of web design is used.
+its design if other stylesheets, other ideas of web design are used.
 
-NOTE: Changing BS-based styles is one thing, changing from one theme to the
-next at runtime a bit more challenging. For the first version of J1 Template,
-many styles are automatically changed for J1 specific components as well, but
-not all of them for now.
+NOTE: Changing BS-based styles is one thing. Changing from one theme to the
+next at runtime a bit more challenging. For the first version of the J1
+Template, many styles are automatically changed for J1 specific components
+as well, but not all of them for now.
 
 Simply select a theme from this menu, and a new BS-based stylesheet is
 automatically applied to your pages.
@@ -130,9 +133,9 @@ automatically applied to your pages.
 == 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 with
-this section all available themes and examples for several lanuguages how
-highlightning works using _Rouge_.
+100+ different languages and output HTML or ANSI 256-color text. Find with
+this section all available themes and examples for several languages how
+highlighting works using _Rouge_.
 
 For the default theme `Uno` of J1 Template, the following _Rouge_ themes
 are used:
@@ -140,7 +143,7 @@ are used:
 * light: `igorpro`
 * dark: `monokai.sublime`
 
-NOTE: The default themes used for J1 Template can be configured with the
+NOTE: The default themes used for the J1 Template can be configured with the
 global template config file `~/_data/j1_config.yml`.
 
 
@@ -243,8 +246,8 @@ end
 
 Using a theme, the character of a website can change a lot. If you don't want
 to support multiple themes with your site, a theme is a good base to create
-your own theme, anayway.
+your own 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 websites all about at link:{roundtrip-quicksearch}[Quicksearch].
+is searching a J1 website all about at link:{roundtrip-quicksearch}[Quicksearch].

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

@@ -1,20 +1,22 @@
 ---
 title:                                  QuickSearch
 tagline:                                full index search based on lunr
-date:                                   2020-11-08 00:00:00
+date:                                   2020-11-08 00:00:00 +100
 description: >
                                         QuickSearch is based on the search engine Lunr,
-                                        fully integrated with J1 Template. Lunr is designed
-                                        to be lightweight, yet full featured to provide a
+                                        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-sideed search engines, or commercial services
+                                        server-sided search engines or commercial services
                                         on the Internet like Google.
 
-tags:                                   [ Roundtrip, QuickSearch ]
-categories:                             [ Search ]
+categories:                             [ QuickSearch, Lunr ]
+tags:                                   [ Roundtrip, Introduction ]
 
 toc:                                    true
 scrollbar:                              false
+comments:                               false
+fam_menu_id:                            page_ctrl_simple
 
 permalink:                              /pages/public/learn/roundtrip/quicksearch/
 regenerate:                             false
@@ -55,22 +57,21 @@ 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
+engines or commercial services on the Internet like Google.
 
-QuickSearch is based on the search engine Lunr, fully integrated with J1
-Template. Lunr is designed to be lightweight, yet full featured to provide a
-great search experience. No need for complex external, server-sideed search
-engines, or commercial services on the Internet like Google.
-
-Searching a website using QuickSearch is different in compare to search engines
-like Google or Microsoft Bing. Those search platforms using complex algorithm
-to provide a simple interface to the public, but using a lot of artificial
-intelligence (AI) methods in behind to make senseful results out of a handfull
-words given for a search.
+Searching a website using QuickSearch is different in relation to 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
-specific - if wanted. QuickSearch provides a easy to use query language for
-better results - anyway!
+searching at Google but offers additional features to do searches more
+specifically - if wanted. QuickSearch provides an easy-to-use query language
+for better results - anyway!
 
 == Core concepts
 
@@ -80,8 +81,8 @@ relevant search results.
 
 === Indexing documents
 
-QuickSearch, offers searches on *all* documents of website generated by J1
-but only for this site. Advantage, no internet access is done for searches,
+QuickSearch offers searches on *all* documents of the website generated by J1
+but only for this site. Advantage, no internet access is done for searches
 because it's not needed. Searches are based on a pre-build local site
 *full-text* index loaded by the browser on a page request. The index for a
 site is generated by the (Jekyll) plugin `lunr_index.rb` located in the
@@ -115,7 +116,7 @@ site:      J1 QuickSearch: finished, index ready.
 
 === Documents
 
-The searchable data in an index is organized as documents that contains the
+The searchable data in an index is organized as documents that contain the
 text, the words (terms), that you want to be able to search on. A document is
 a data set (JSON object) with a set of fields that are processed to create the
 result list for a search.
@@ -141,8 +142,8 @@ A document data set might look like this:
 }
 ----
 
-In this document there are several fields, like `title`, `tagline`, or
-`description` that could be used for *full-text* searches. But additional
+In this document, there are several fields, like `title`, `tagline`, or
+`description`, that could be used for *full-text* searches. But additional
 fields are available, like `tags` or `categories` that can be used for
 more specific searches based on `identifiers`.
 
@@ -152,26 +153,26 @@ field is removed from a document. The `body` field not available as an
 *explicit* field for searches, but the *content* is fully searchable.
 
 To do a simple full-text search as well as more specific searches, the
-QuickSearch core engine Lunr offers a query language, a DSL (domain specific
-language). Find more about *QuickSearch|Lunr DSL* queries with section
+QuickSearch core engine Lunr offers a query language, a DSL (domain-specific
+language). Find more about *QuickSearch|Lunr DSL* queries with the section
 <<Searching>>.
 
 === Scoring
 
 The relevance (the `score`) of a document is calculated based on an algorithm
 called *BM25*, along with other factors. You don’t need to worry too much about
-the details of how this technically works. To summarize: the more a search term
+the details of how this technique works. To summarize: the more a search term
 occurs in a single document, the more that term will increase that document’s
 score, but the more a search term occurs in the *overall* collection of
 documents, the less that term will increase a document’s score. In other words,
-seldom words counts, and increase the score.
+seldom words count and increase the score.
 
-Scoring information, generated by the BM25 algorithm, is added to the (local)
+Scoring information generated by the BM25 algorithm is added to the (local)
 search index. This allows a very fast calculation of the relevance of documents
 for queries.
 
 Imagine you’re website contains documents about Jekyll. The term `Jekyll` may
-occur very frequently throughout the entire website; used quite often for the
+occur very frequently throughout the entire website. Used quite often for the
 content. So finding a document that mentions the term Jekyll isn’t very
 significant for a search.
 
@@ -180,10 +181,10 @@ the website have the word `Generator` in them, and that will bring the score
 (relevance) for documents having both words in them at a higher level,
 bring them higher up in the search results.
 
-Matching and scoring is used by all search engines; the same to J1 QuickSearch.
-You'll see for QuickSearch a similiar behavior in *sorting* search results as
-you already know from commercial internet search engines like Google: the top
-results are the more relevant ones.
+Matching and scoring are used by all search engines - the same as for J1
+QuickSearch. You'll see for QuickSearch a similar behavior in *sorting*
+search results as you already know from commercial internet search engines
+like Google: the top results are the more relevant ones.
 
 == Searching
 
@@ -194,12 +195,12 @@ area in the menu bar at the top-right of every page.
 lightbox::quicksearch-icon[ 800, {data-quicksearch-icon} ]
 
 A mouse-click on the magnifier button opens the search input and disables
-all other navigation to focus on what you're itended to do: searching.
+all other navigation to focus on what you're intended to do: searching.
 
 .Input bar for a QuickSearch
 lightbox::quicksearch-input[ 800, {data-quicksearch-input} ]
 
-Search queries looks like simple text. But the search `engine` under the
+Search queries look like a simple text. But the search `engine` under the
 hood of QuickSearch transforms the given search string (text) always into a
 search query. This supports a special syntax, the DSL, for defining more
 complex queries for better (scored) results.
@@ -228,7 +229,7 @@ jekyll tutorial
 
 The above example will match documents that contain either `jekyll` *OR*
 `tutorial`. Documents that contain _both_ will increase the score, and those
-documents be returned first.
+documents are returned first.
 
 NOTE: In difference to a Google search (terms are combined at Google by a
 logical `AND`) a Quicksearch combines the terms by an `OR`.
@@ -255,8 +256,8 @@ jek*
 ----
 
 NOTE: Language grammar rules are not relevant for searches. To simplify an
-index, all words (terms) are transformed to lower case. As result, a word
-`Jekyll` is the same as `jekyll` from a search-engines prospective. Language
+index, all words (terms) are transformed to lower case. As a result, the word
+`Jekyll` is the same as `jekyll` from a search-engines perspective. Language
 variations of words like `Jekyll's` or plurals like `Generators` are reduced
 to their base form. For searches, don't take care of grammar rules but the
 spelling. If you're unsure about the spelling of a word, use wildcards.
@@ -275,7 +276,7 @@ title:jekyll
 
 The search term is prefixed with the name of the field, followed by a
 colon (`:`). The field _must_ be one of the fields defined when building
-the index. Unrecognised fields will lead to an error.
+the index. Unrecognized fields will lead to an error.
 
 Field-based searches can be combined with all other term modifiers and
 wildcards, as well as other terms. For example, to search for words
@@ -289,7 +290,7 @@ the following query can be used:
 
 ==== Available fields
 
-Beside the document *body*, an intrinsic field to create the full-text index
+Besides the document *body*, an intrinsic field to create the full-text index
 out of the document *content*, some more specific fields are available for
 searches.
 
@@ -386,18 +387,18 @@ at the end.
 
 By default, Lunr combines multiple terms together in a search with a
 logical OR. That is, a search for `jekyll collections` will match documents
-that contain `jekyll` or contain `collections` or contain both. This behaviour
-is controllable at the term level, i.e. the presence of each term in
+that contain `jekyll` or contain `collections` or contain both. This behavior
+is controllable at the term level, i.e., the presence of each term in
 matching documents can be specified.
 
-By default each term is optional in a matching document, though a document
+By default, each term is optional in a matching document, though a document
 must have at least one matching term. It is possible to specify that a term
-must be present in matching documents, or that it must be absent in matching
+must be present in matching documents or that it must be absent in matching
 documents.
 
-To indicate that a term must be *present* in matching documents the term
-could be prefixed with a plus sign (`+`) (required) and to indicate that a
-term  must be *absent* (not wanted) the term should be prefixed with a minus
+To indicate that a term must be *present* in matching documents, the term
+could be prefixed with a plus sign (`+`) (required), and to indicate that a
+term  must be *absent* (not wanted), the term should be prefixed with a minus
 (`-`).
 
 The below example searches for documents that *must* contain `jekyll`, and
@@ -408,7 +409,7 @@ must *not* contain the word `collection`:
 +jekyll -collection
 ----
 
-To simulate a logical *AND* search of documents that contains the word `jekyll`
+To simulate a logical *AND* search of documents that contain the word `jekyll`
 *AND* the word `collection`, mark both terms as required:
 
 [source, text]