j1-template 2021.0.9 → 2021.0.10

data/lib/starter_web/collections/posts/public/featured/_posts/2021-01-01-welcome-to-j1.adoc

@@ -0,0 +1,167 @@
+---
+title:                                  Welcome
+tagline:                                jekyll for everyone
+date:                                   2021-01-01 00:00:00
+
+tags:                                   [ Example, Post ]
+categories:                             [ Featured ]
+
+series:                                 false
+adsense:                                false
+image:                                  /assets/images/modules/attics/katie-moum-1920x1280.jpg
+toc:                                    true
+
+regenerate:                             false
+
+resources:                              []
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/katie-moum-1920x1280.jpg
+          alt:                          Photo by Katie Moum on Unsplash
+          alignY:                       0.3
+          badge:
+            type:                       unsplash
+            author:                     Katie Moum
+            href:                       https://unsplash.com/@katiemoum
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Place an excerpt at the most top position
+// -----------------------------------------------------------------------------
+All you're doing at the end of the day is writing your content and Jekyll does
+all the tricky things needed for a website: putting out HTML, Javascript and
+CSS. As a result, the site creation process gets out of your way. Sounds fun,
+isn't it?
+
+[role="clearfix mb-3"]
+excerpt__end
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+
+[[readmore]]
+== What is a static site?
+
+A static site serves the content straight to the user as it is stored on
+the server-side. To put it in another way, in opposition to WordPress
+which use a database to load dynamic content, a static site will display
+the same content to every user as it will directly load the HTML files
+on the server.
+
+A static website uses server-side rendering to serve pre-built HTML, CSS,
+and JavaScript files to a web browser, in contrast to traditional dynamic
+sites that work by rendering the webpage at the time of the request.
+Static sites enable you to decouple your content repository and front-end
+interface, giving you greater flexibility in how your content is served.
+Cost-efficiency is another reason companies migrate to a static site because
+static files are lightweight and often faster and cheaper to serve.
+
+In the last few years, static sites have greatly increased in popularity.
+This surge is primarily due to advances in developer tools (languages and
+libraries) and a stronger desire among businesses to optimize website
+performance beyond the limits of a database-driven site.
+
+=== What's different?
+
+To make it simple, a dynamic website uses a database and PHP/MySQL to
+generate the content of a page when a user requests it. For example,
+building a website using WordPress CMS will result in having a dynamic
+Website.
+
+Static sites can be written almost exclusively in HTML and serve a fixed
+set of data that renders the same for every site visitor. Static sites use
+server-side rendering to serve pre-built HTML, CSS, and JavaScript files to
+a web browser. Dynamic sites operate in a completely different way, by
+leveraging HTML and CSS as well as server-side scripting languages like PHP
+to build webpages on the fly and serve different content to each site
+visitor.
+
+=== Why use a static site?
+
+What are the advantages of a static website over a dynamic site?
+You may be wondering *Why should I build a static site when I could do a
+WordPress?*. Well, having a database implies a lot of downsides. Here
+come the main advantages of using a static site over a dynamic
+one.
+
+Performance::
+*The better performance and a crazy fast load time*.
+One of the main advantages of using a static site is the fact that
+it is crazy fast to load. Indeed, when the user requests a page, there is
+no need to request a database and various files to generate the
+page itself as all the content is already placed in a one and only file:
+an HTML one. That’s why by using a static site, you will get a boost in
+your loading time that will provide great user experience for the
+internauts. Moreover, we know that more and more people are surfing the
+web using their smartphones with, sometimes, poor internet connections,
+that’s why having fast loading times will participate in making your
+website mobile-friendly.
+
+Security::
+*Having a static website: say goodbye to hacking and security issues*.
+Tired of getting WordPress notifications about security issues and
+updates every week? No worries, as a static site has no database, there
+are close to no hack possible compared to a WordPress website. Indeed,
+your site will have way fewer footprints and security issues since it
+will only load plain HTML and CSS files. The security gain in having a
+static website is one the main reason why many famous brands switch to
+a static site instead of having their website on Drupal or WordPress.
+
+Hosting::
+*Building a static site and hosting: you will save you money*.
+Using a static site, you will only have most of the time only HTML and
+CSS files to host. This kind of files is super light which also means
+that you will not need a powerhouse hosting to have a static site up and
+running. Moreover, if your traffic suddenly increases, your site will not
+go down contrary to a dynamic site which should request the database
+each time for each user.
+
+Control::
+*You're the master*. Using a CMS means, giving control over your site to others.
+Simple like this.
+
+== Why use a site generator?
+
+Working with pure HTML files is annoying; senseless today. Indeed, if you need
+to make a modification on your *self-managed* pages, you have to manually
+change every file. That's monkey's work from the early days of static websites.
+If your site comes with 10 pages, it can be manageable but imagine if your site
+is providing 100+ pages or the blog planned for hundreds of articles?
+
+Using a static site generator will solve this issue as it separates the
+content and the template. To say it another way, by using a static site
+generator, you will only need to make the modification once, and the
+generator will apply it to all your pages.
+
+=== Why Jekyll?
+
+As the popularity of static sites is growing, there are plenty of static
+site generators available on the market. The more famous is Jekyll,
+Middleman and Hugo. Each one has its own specificities and may suits you
+better depending on the programming languages you already are familiar with.
+Which static site generator should I use?
+
+When I decided to go for a blog based on a static web, I personally
+choose Jekyll as for me. It's a well known static site generator, good support
+in case of trouble and the software gets regularly updated. This website is
+powered by Jekyll. For good reasons.

data/lib/starter_web/index.html

@@ -2,7 +2,7 @@
 layout:                                 home
 
 title:                                  J1
-tagline:                                create your web
+tagline:                                starter
 description: >
                                         Jekyll One Template. Gem-based template made for Jekyll.
                                         J1 meets Jekyll and Bootstrap. And makes a lot of friends.
@@ -24,7 +24,7 @@ toc:                                    false
 indexed:                                false
 exclude_from_search:                    true
 
-regenerate:                             true
+regenerate:                             false
 
 robots:
   index:                                true
@@ -37,12 +37,12 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/alex-holyoake-1920x1280.jpg
-          alt:                          Photo by Alex Holyoake on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Alex Holyoake
-            href:                       https://unsplash.com/@stairhopper
+        - url:                          /assets/images/modules/attics/runner-1920x1200.jpg
+#         alt:                          Photo by Alex Holyoake on Unsplash
+#         badge:
+#           type:                       unsplash
+#           author:                     Alex Holyoake
+#           href:                       https://unsplash.com/@stairhopper
 ---
 
 <pre>

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1_starter",
-  "version": "2021.0.9",
+  "version": "2021.0.10",
   "description": "J1 Template Starter Web",
   "homepage": "https://your.site",
   "author": {

data/lib/starter_web/pages/public/asciidoc_skeletons/book/000_intro.adoc

@@ -15,7 +15,7 @@ tags:                                   [ Introduction, Tutorial ]
 categories:                             [ Asciidoc, Knowledge, Skeleton ]
 
 permalink:                              /pages/public/skeleton/book/intro/
-regenerate:                             true
+regenerate:                             false
 
 resources:                              []
 resource_options:

data/lib/starter_web/pages/public/asciidoc_skeletons/book/100_chapter.adoc

@@ -12,7 +12,7 @@ tags:                                   [ Skeleton, Book ]
 
 
 permalink:                              /pages/public/skeleton/book/chapter_1/
-regenerate:                             true
+regenerate:                             false
 
 resources:                              []
 resource_options:

data/lib/starter_web/pages/public/asciidoc_skeletons/book/200_chapter.adoc

@@ -12,7 +12,7 @@ categories:                             [ Asciidoc, Knowledge ]
 tags:                                   [ Skeleton, Book ]
 
 permalink:                              /pages/public/skeleton/book/chapter_2/
-regenerate:                             true
+regenerate:                             false
 
 resources:                              [ lightbox, light_gallery, justified_gallery ]
 resource_options:

data/lib/starter_web/pages/public/asciidoc_skeletons/book/900_references.adoc

@@ -9,7 +9,7 @@ categories:                             [ Asciidoc, Knowledge ]
 tags:                                   [ Skeleton, Book ]
 
 permalink:                              /pages/public/skeleton/book/references/
-regenerate:                             true
+regenerate:                             false
 
 resources:                              []
 resource_options:

data/lib/starter_web/pages/public/asciidoc_skeletons/book/book.adoc

@@ -14,7 +14,7 @@ categories:                             [ Asciidoc, Skeleton ]
 tags:                                   [ Knowledge, Skeleton, Book ]
 
 permalink:                              /pages/public/skeleton/book/
-regenerate:                             true
+regenerate:                             false
 
 resources:                              [ lightbox, light_gallery, justified_gallery ]
 resource_options:

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/100_chapter.asciidoc

@@ -13,7 +13,7 @@ tags:                                   [ Skeleton, Document ]
 
 
 permalink:                              /pages/public/skeleton/book/chapter_1/
-regenerate:                             true
+regenerate:                             false
 
 resources:                              []
 resource_options:

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/200_chapter.asciidoc

@@ -12,7 +12,7 @@ categories:                             [ Asciidoc, Knowledge ]
 tags:                                   [ Skeleton, Document ]
 
 permalink:                              /pages/public/skeleton/book/chapter_2/
-regenerate:                             true
+regenerate:                             false
 
 resources:                              [ lightbox, light_gallery, justified_gallery ]
 resource_options:

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/multi.adoc

@@ -13,7 +13,7 @@ categories:                             [ Asciidoc, Skeleton ]
 tags:                                   [ Knowledge, Skeleton, Document ]
 
 permalink:                              /pages/public/skeleton/multi/
-regenerate:                             true
+regenerate:                             false
 
 resources:                              [ lightbox, light_gallery, justified_gallery ]
 resource_options:

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc

@@ -122,8 +122,7 @@ supports a gallery-style thumbnail preview plus image resizing, a dowload
 dialogue, sharing provider support and some more helpful. Check what
 LightGallery can do by the following example.
 
-.Example of a LightGallery Gallery
-gallery::jg_example[]
+gallery::jg_old_times[]
 
 
 == J1 Carousel App
@@ -182,7 +181,7 @@ A simple image show is useful for example as an animated (or not animated)
 banner presenting exciting things of your site or the products offered.
 
 .Simple Image Carousel
-carousel::demo_simple[role="mb-5"]
+carousel::demo_simple[role="mb-3"]
 
 === Carousel + Caption + Lightbox
 
@@ -192,7 +191,7 @@ a lightbox to enlarge images full size. For the example below, a almost simple
 lightbox is used: Lightbox V2; or short: lightbox.
 
 .Nice cats
-carousel::demo_cats[role="mb-5"]
+carousel::demo_cats[role="mb-3"]
 
 The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
 features for displaying images. For example, the lightbox can display all
@@ -207,7 +206,7 @@ to browse all images back and forth. An indicator below the slider shows how
 many images the show contains.
 
 .Single Slide Carousel and a Lightbox
-carousel::demo_oneslide[role="mb-5"]
+carousel::demo_oneslide[role="mb-3"]
 
 == J1 Gallery App
 

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

@@ -157,60 +157,29 @@ Make a selection of a theme below to preview.
   Select Theme<span class="caret"></span>
   </button>
   <ul class="dropdown-menu scrollable-menu" role="menu">
-    <li><a class="dropdown-item" 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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
-    <li><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></li>
+    <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>
-
-<style>
-/* jadams, 2021-02-16: unclear why global styles defined in CSS file */
-/* (bootsttrap.css) not applied. For that reason, given locally for now */
-/* firefox: scrollbar-color, scrollbar-width */
-.scrollable-menu {
-    height: auto;
-    max-height: 300px;
-    overflow-x: hidden;
-    scrollbar-color: #424242 #f5f5f5;
-  	scrollbar-width: thin;
-}
-
-.scrollable-menu::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width: 12px;
-    background-color: #f5f5f5;
-}
-
-.scrollable-menu::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
-  background-color: #424242;
-}
-
-.scrollable-menu::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 0px;
-  background-color: #f5f5f5;
-}
-</style>
 ++++
 
 === Highlight Liquid code

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 ]
@@ -45,59 +46,43 @@ 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.
+
+Asciidoc Skeletons::
+AsciiDoc is a human-readable document format using plain-text mark-up
+conventions. AsciiDoc documents can be created using any text editor and
+read *as-is*. J1 template renders Asciidoc code to HTML, your future awesome
+web pages. J1 is using *Asciidoc* for writing content. Documents in a web may
+simple in structure, but may also grow complex for e.g multi-chapter pages.
+The skeletons are discussed in the tutorial *Web in a Day* as a base for
+your content.
+
+You should go for *first* the *Roundtrip*. 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].
+
+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.
+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}].