j1-template 2020.0.17 → 2020.0.22

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

@@ -10,8 +10,10 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/themes/
 regenerate:                             false
 
-resources:                              []
+resources:                              [ rouge, clipboard ]
 resource_options:
+  - toccer:
+      collapseDepth:                    3
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -25,112 +27,194 @@ resource_options:
             href:                       https://unsplash.com/@clemono
 ---
 
+// Page Initializer
+// =============================================================================
 // Enable the Liquid Preprocessor
-// -----------------------------------------------------------------------------
 :page-liquid:
 
-// Set other global page attributes here
+// Set page (local) attributes here
 // -----------------------------------------------------------------------------
-//:my-asciidoc-attribute:
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
-{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
-
-
-// Initialize entry document environmental attributes
-// -----------------------------------------------------------------------------
-{% include {{set_env_entry_document}} %}
-
-// Load tag, url and data attributes
-// -----------------------------------------------------------------------------
-include::{includedir}/attributes.asciidoc[tag=tags]
-include::{includedir}/attributes.asciidoc[tag=urls]
-include::{includedir}/attributes.asciidoc[tag=data]
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Set local page attributes
+// Load page attributes
 // -----------------------------------------------------------------------------
-// :images-dir:                         {imagesdir}/path/to/page/images
+{% include {{load_attributes}} scope="local" %}
 
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
 ++++
 <!-- page_path:            {{page_path | debug}} -->
 <!-- site.source:          {{site.source | debug}} -->
 <!-- site.source.size:     {{site.source.size | debug}} -->
 ++++
 
-The themes feature for J1 Template is in a *alpha status* of the template
-system. Anyway, it makes sense to present what is possible using *different*
+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.
 
-== Themes
+== Template themes
 
 It is expected that many people will change the template for their needs. To
-really create *unique* websites. Fundamental to do this is are CSS styles
+really create unique websites. Fundamental to do this is are CSS styles
 defined by Bootstrap.
 
-Modifying the CSS styles of link:{bootstrap-home}[Bootstrap, {window}] is not
-rocket science. But, to be honest, some knowledge is needed of
+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
 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, {window}] of each and every website.
-Independendly from using Bootstrap or any other CSS framwork.
-
-Thanks to the people at link:{bootswatch-home}[Bootswatch, {window}], a great
-set of already prepared Bootstrap stylesheets in various designs are available
-at their website. No need to start from the 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 is at least a good
-base for your modifications: your unique design.
+link:{w3schools-css-tutorial}[design base, {browser-window--new}] of each and every website.
 
-Beside the bunch of different stylesheets at Bootswatch, an
-link:{bootswatch-api}[integration API, {window}] is available that helps a lot
-to integrate available designs into a existing site. This API is the base to
-integrate Bootswatch stylesheets into J1 Template for easy use.
+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
+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.
 
-Thanks again the people at Bootswatch for this great work.
+Besides the bunch of different stylesheets at Bootswatch, a
+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
+navigation system for easy use.
 
 
-== Apply a theme
+=== Apply a template theme
 
-The base for designing pages using J1 Template is the theme *Uno*, a modern
+The base for designing pages using 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
-good base, a starting point. Combining Uno and a different theme may a fast
+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
 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
+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.
 
 NOTE: Changing BS-based styles is one thing, changing from one theme to the
-next at runtime a bit more challanging. For the alpha version of J1 Template,
+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.
+not all of them for now.
 
-Simply select a theme from this menu and a new BS-based stylesheet is
+Simply select a theme from this menu, and a new BS-based stylesheet is
 automatically applied to your pages.
 
-Have fun!
+
+== Code Highlighter Rouge
+
+lorem:sentences[5]
+
+lorem:sentences[3]
+
+=== Apply a theme
+
+Make a selection of theme below to preview a theme.
+
+++++
+<div class="btn-group">
+  <button class="btn btn-primary btn-raised btn-flex btn-lg dropdown-toggle" type="button" data-toggle="dropdown" data-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
+  Select a theme<span class="caret"></span>
+  </button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" active="true" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.dark</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.light</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai</a>
+    <a class="dropdown-item" href="javascript:void(0)" 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>
+    <a class="dropdown-item" href="javascript:void(0)" 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>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized</a>
+    <a class="dropdown-item" href="javascript:void(0)" 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>
+    <a class="dropdown-item" href="javascript:void(0)" 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>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('colorful')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>colorful</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('github')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>github</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('gruvbox')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('gruvbox.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox.light</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('igorpro')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>igorpro</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('molokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>molokai</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('monokai.sublime')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai.sublime</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('pastie')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>pastie</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('thankful_eyes')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>thankful_eyes</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('tulip')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>tulip</a>
+  </div>
+</div>
+<div id="selected" class="mt-1 mb-3"></div>
+++++
+
+=== Liquid
+
+{% raw %}
+[source, liquid]
+----
+Hello {{ 'now' | date: "%Y %h" }}
+
+{% comment %} if item.quantity is 4... {% endcomment %}
+{% for i in (1..item.quantity) %}
+  {{ i }}
+{% endfor %}
+----
+{% endraw %}
+
+=== Javascript
+
+[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;;
+    }
+  }
+}
+----
+
+=== Ruby
+
+[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
+
 
 == Whats next
 
-Hopefully you've enjoyed exploring some of the possibilities J1 offers for
+You've explored some of the possibilities J1 offers for
 managing themes. But much, much more can the J1 do for your website.
 
 This was the last place 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].
 
-To make things real for your new site, go for *Web in a day*. This tutorial
-guides you through all the steps how to build a website - your site using
-Jekyll  nd the template system J1. It's really a nice journey to *explore*
-and  *learn* creating a static web.
+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
+Jekyll and the template system J1. It's really a pleasant journey to learn to
+create today's static webs.
 
 Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/attributes.asciidoc

@@ -2,7 +2,6 @@
 //  Asciidoc attribute includes:                 attributes.asciidoc
 // -----------------------------------------------------------------------------
 
-
 // URLs - Internal references and/or sources on the Internet
 // -----------------------------------------------------------------------------
 tag::urls[]
@@ -25,7 +24,7 @@ tag::urls[]
 :fontawesome-get-started:                         https://fontawesome.com/get-started
 
 :mdi-home:                                        https://materialdesignicons.com/
-:mdi-icons-sheatsheet:                            https://cdn.materialdesignicons.com/3.3.92/
+:mdi-icons-cheatsheet:                            https://cdn.materialdesignicons.com/3.3.92/
 
 :iconify-home:                                    https://iconify.design/
 :iconify-icon-sets:                               https://iconify.design/icon-sets/
@@ -70,25 +69,6 @@ end::urls[]
 // Tags - Asciidoc attributes used internally
 // -----------------------------------------------------------------------------
 tag::tags[]
-
-:window:                                          window="blank"
-:no-clipboard:                                    noclip
-:figure-caption:                                  Figure
-:images-dir:                                      pages/roundtrip
-:y:                                               icon:check[role="green"]
-:n:                                               icon:times[role="red"]
-:c:                                               icon:file-alt[role="blue"]
-:beginner:                                        icon:battery-quarter[role="md-blue"]
-:inter:                                           icon:battery-half[role="md-blue"]
-:advanced:                                        icon:battery-full[role="md-blue"]
-:emdash:                                          —
-:bullet:                                          •
-:bigbullet:                                       ●
-:bigbigbullet:                                    ⬤
-:dot:                                             .
-:dotdot:                                          ..
-:middot:                                          ·
-
 end::tags[]
 
 // Data - Data elements for Asciidoctor extensions
@@ -101,17 +81,18 @@ tag::data[]
 end::data[]
 
 
-// Product - Document (e.g release) information
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
+// PRODUCTS, local product information (e.g. release)
 // -----------------------------------------------------------------------------
-tag::product_info[]
-:license:                                         MIT License
-:revdate:                                         2018
-:revnumber:                                       1.0.0
-end::product_info[]
+tag::products[]
+end::products[]
 
 
-// Author - Author information
+// AUTHORS, local author information (e.g. article)
 // -----------------------------------------------------------------------------
 tag::authors[]
-:uri-author-juergen-adams                         https://jekyll.one
 end::authors[]

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

@@ -0,0 +1,28 @@
+== Github Gist
+
+Code snippets may helpful to support your readers for existing code examples.
+An excellent place for code snippets is Gist at Github. To embed an existing
+gist into your documents, the Asciidoc extention *Gist block* provides the
+block macro `gist::` to do so.
+
+The following gist snippet is taken from {asciidoc-extensions-gist-example}[this example, window="_blank"]:
+
+[source, prometheus, role="noclip"]
+----
+.Gist title
+gist::git_address[] <1>
+----
+<1> For `git_address`, {github-gist-home}[, window="_blank"] is prepended automatically
+
+.Example of a gist block
+[source, prometheus, role="noclip"]
+----
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+----
+
+[.result]
+====
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+====

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_bottom_info.asciidoc

@@ -2,10 +2,10 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-secondary btn-raised"
+    class="btn btn-primary btn-raised"
     data-toggle="modal"
     data-target="#frameModalBottomSuccessDemo">
     Launch Example

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_bottom_left_warning.asciidoc

@@ -2,9 +2,9 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
+  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_bottom_right_danger.asciidoc

@@ -2,9 +2,9 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
+  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_central_success.asciidoc

@@ -2,9 +2,9 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
+  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_full_height_left_info.asciidoc

@@ -2,9 +2,9 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
+  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_full_height_right_success.asciidoc

@@ -2,9 +2,9 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
+  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_table_3_column.asciidoc

@@ -1,6 +1,6 @@
 
 .Selected extended BS modal examples
-[cols="6a,3a,3a", options="header", width="100%", role="table-responsive-stacked-lg"]
+[cols="6a,3a,3a", options="header", width="100%", role="rtable"]
 |===============================================================================
 |Postion |Class | Example
 

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_top_info.asciidoc

@@ -2,9 +2,9 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
+  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
     Launch Example
   </button>
 </div>