j1-template 2021.0.6 → 2021.0.11

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

@@ -37,7 +37,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
@@ -282,9 +282,6 @@ mdi:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
 mdi:apple[2x, md-indigo ml-3 mr-2] Brand icon (colored)
 ====
 
-Find all MDI Icons on page
-link:{previewer-mdi}[MDI Icon Previewer, {browser-window--new}].
-
 NOTE: Parameters `icon_size` and `modifier` are optional. If not given,
 the icons `size` is set to default  (`1x`), the color to `black` and no
 settings for the `modifier` are applied.
@@ -391,10 +388,6 @@ This is an example of how you can emoji:heart[2x, pulsed mt-1] Asciidoctor
 and Twitter Emoji emoji:smile[].
 ====
 
-Find all Twitter Emoji's build-in with J1 Template on page
-link:{previewer-emoji}[Emoji Icon Previewer, {browser-window--new}].
-
-
 == Blind Text (Lorem)
 
 The Ruby Gem Middleman, a Ruby-gem based static site generator, provides a
@@ -491,19 +484,16 @@ lorem:email[]
 
 // Include documents
 // -----------------------------------------------------------------------------
-
 include::{documentdir}/100_gistblock.asciidoc[]
 
 
 == Whats next
 
 Asciidoc, respectively Asciidoctor, extensions open up the Markup language to
-new use cases; using the full power of programming languages to extend what's
-needed whether it be Ruby, Java, Groovy or JavaScript.
-
-The number of extensions will grow - to get handy and powerful functionality
-that is needed for modern Web pages based on the Asciidoc Markup language
-generated by Jekyll. For sure!
+new use cases. Using the full power of programming languages to extend what's
+needed whether it be Ruby, Java, Groovy or JavaScript. The number of extensions
+will grow - to get handy and powerful functionality that is needed for modern
+web pages based on the Asciidoc Markup language generated by Jekyll. For sure!
 
 The next preview is focussing advanced Bootstrap Modals. The modals feature
 is currently in beta status, but it is a great option to customize your

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

@@ -32,7 +32,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
@@ -71,9 +71,8 @@ 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}].
 
-// Include sub-documents
-// -----------------------------------------------------------------------------
-include::{documentdir}/410_table_3_column.asciidoc[]
+// include::{documentdir}/tables/bs_modal_examples.asciidoc[]
+include::{documentdir}/410_table_bs_modal_examples.asciidoc[]
 
 == Whats next
 
@@ -89,5 +88,5 @@ 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

@@ -35,10 +35,9 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
-:debug:
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 //  Load Liquid procedures
@@ -57,58 +56,6 @@ 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.
 
-ifdef::debug[]
-
-.Source, options NOT set
-[source, md, role="noclip"]
-----
-[cols=",", options="header", ]
-|===============================================================================
-|Bratze |Bru
-
-|Fick
-|dich
-
-|===============================================================================
-----
-
-
-.Options NOT set
-[cols=",", options="header", ]
-|===============================================================================
-|Bratze |Bru
-
-|Fick
-|dich
-
-|===============================================================================
-
-.Source, options SET
-[source, adoc, role="noclip"]
-----
-[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
-|===============================================================================
-|Bratze |Bru
-
-|Fick
-|dich
-
-|===============================================================================
-----
-
-.options set
-[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
-|===============================================================================
-|Bratze |Bru
-
-|Fick
-|dich
-
-|===============================================================================
-endif::[]
-
-
-
 == Table types
 
 But, for sure, the solution provided is a compromise. To fit the common needs

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

@@ -11,6 +11,8 @@ description: >
 tags:                                   [ Bootstrap, Themes ]
 categories:                             [ Introduction, Features ]
 
+scrollbar:                              false
+
 permalink:                              /pages/public/learn/roundtrip/themes/
 regenerate:                             false
 
@@ -34,7 +36,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
@@ -125,7 +127,6 @@ 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.
 
-
 == Code Highlighter Rouge
 
 _Rouge_ is a pure Ruby and themeable syntax highlighter. It can highlight
@@ -133,37 +134,50 @@ _Rouge_ is a pure Ruby and themeable syntax highlighter. It can highlight
 this section all available themes and examples for several lanuguages how
 highlightning 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 J1 Template can be configured with the
+global template config file `~/_data/j1_config.yml`.
+
+
 === Apply a theme
 
-Make a selection of theme below to preview a theme.
+Make a selection of a theme below to preview.
 
 ++++
 <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>
+  <!-- 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-raised btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-toggle="dropdown" data-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
+  Select 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>
+  <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>
 ++++
@@ -227,16 +241,10 @@ end
 
 == Whats next
 
-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 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.
+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.
 
-Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].
+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].

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

@@ -37,7 +37,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 
@@ -415,3 +415,19 @@ To simulate a logical *AND* search of documents that contains the word `jekyll`
 ----
 +jekyll +collection
 ----
+
+
+== Whats next
+
+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 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 on how to build a website. Your site using
+Jekyll and the template system J1. It's really a pleasant journey to learn what
+modern static webs can offer today.
+
+// Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].

data/lib/starter_web/pages/public/learn/roundtrip/_includes/attributes.asciidoc

@@ -53,7 +53,7 @@ tag::urls[]
 :roundtrip-icon-fonts:                            /pages/public/learn/roundtrip/mdi_icon_font/
 :roundtrip-responsive-tables:                     /pages/public/learn/roundtrip/responsive_tables/
 :roundtrip-themes:                                /pages/public/learn/roundtrip/themes/
-:roundtrip-search-engine:                         /pages/public/learn/roundtrip/search_engine/
+:roundtrip-quicksearch:                           /pages/public/learn/roundtrip/quicksearch/
 
 :github-gist-home:                                https://gist.github.com/
 :asciidoc-extensions-gist-example:                https://gist.github.com/mojavelinux/5546622

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

@@ -0,0 +1,47 @@
+
+.Selected extended BS modal examples
+[cols="6a,3a,3a", options="header", width="100%", role="rtable"]
+|===============================================================================
+|Postion |Class | Example
+
+|`top`
+|`info`
+|
+include::../410_top_info.asciidoc[]
+
+|`top-right`
+|`success`
+|
+include::../410_top_right_success.asciidoc[]
+
+|`top-left`
+|`info`
+|
+include::../410_top_left_info.asciidoc[]
+
+|`bottom`
+|`info`
+|
+include::../410_bottom_info.asciidoc[]
+
+|`bottom-right`
+|`danger`
+|
+include::../410_bottom_right_danger.asciidoc[]
+
+|`bottom-left`
+|`warning`
+|
+include::../410_bottom_left_warning.asciidoc[]
+
+|`full-height right`
+|`success`
+|
+include::../410_full_height_right_success.asciidoc[]
+
+|`full-height left`
+|`info`
+|
+include::../410_full_height_left_info.asciidoc[]
+
+|===============================================================================

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

@@ -3,8 +3,9 @@ title:                                  Where to go
 tagline:                                fasten your way
 date:                                   2020-11-03 00:00:00
 description: >
-                                        Where to go, Too Long; Didn't Read to fasten
-                                        your way through the preview pages of J1 Template.
+                                        Welcome to the pages of J1 Template. If your here
+                                        first time, a good decision you get on that page first.
+                                        For sure, there is no better place to go.
 
 tags:                                   [ Roundtrip, Introduction ]
 categories:                             [ Info ]
@@ -35,7 +36,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 
@@ -45,59 +46,33 @@ resource_options:
 
 // Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="none" %}
+{% include {{load_attributes}} scope="global" %}
 
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-Welcome to the pages of J1 Template. If your here first time,
-a good decision you get on that page first. For sure, there is no better
-place to go.
-
-Having a menu system is great. We hope the Navigator module of J1 will
-support you to explore this site, find what you are looking for. The site
-of J1 has grown over the last month a lot. Many documents were seeking for
-a home. And we have really a bunch of them.
-
-To get better orientated, the site is organized for *natural reading*. As we
-use the English language for our international vistors (we are German),
-*natural reading* means for a western language, reading from the left to the
-right (LTR), and from top to down a page. The same to all menus, sections
-and pages.
-
-To read the webpages, it is recommended to go for LTR. Other languages, other
-countries and cultures go for RTL, but currently we've *no* support for RTL
-implemented.
-
-== Whats up
-
-First of all, you've started already! The crucial first step in to find
-your way to Jekyll is done. Congratulations.
 
+Welcome to the pages of J1 Template. If your here first time, a good decision
+you get on that page first. For sure, there is no better place to go.
+The crucial first step in to find your way to Jekyll is done. Congratulations.
 The *Learn* section contains all you need to learn what Jekyll and J1 can do
 for your website. For your new static web - if you like.
 
-With this section you'll find a:
-
-. *Roundtrip* to show some of the main features of the template system
-  *J1*.
-
-. *Kickstarter* are Tutorials. The most important one to start is *Web in a Day*.
-  This tutorial guides you through all the steps to build a website using
-  the template system Jekyll One - your site using Jekyll and the template J1.
-
-== Where to go
-
-You should go for the *Roundtrip* first. See what you will get. As an overview
-of some of the main features of *J1*. The roundtrip is a *visual* tour. No
-technical stuff, nothing academic.
-
-Let's go more in-depth and make things real - and your hands dirty. You dive
-into the world of Jekyll. You'll have learned a lot at the end of that
-day about what Jekyll is, static webs and the template system J1 is all
-about.
-
-You're welcome!
-
-If you like, continue by walking through the roundtrip examples
+Roundtrip::
+With this section you'll find a *tour* to show some of the main features of
+the template system *J1*. The tour covers how image data can be managed using
+J1, some background of the typography the template is using, discuss important
+extensions and some more what J1 can do. The roundtrip is a *visual* tour.
+No technical stuff, nothing academic. See what you will get. As an
+overview of some of the main features of *J1*.  If you like, continue by
+walking through the roundtrip examples
 link:/pages/public/learn/roundtrip/present_images/[by starting the tour here].
+
+Web in a Day::
+To go deeper, your're invited to *Web in a Day*. This tutorial guides you
+through all the steps to build a website using Jekyll and the template system
+J1. The guide let you go more in-depth and make things real. You dive into
+the world of Jekyll. You'll have learned a lot at the end of that day about
+what Jekyll is, static webs and the template system J1 is all about. To go
+deeper, your're invited, try out the journey having some hours of fun at
+{url-j1-web-in-a-day--meet-and-greet}[Web in a Day, {browser-window--new}].