j1-template 2020.0.21 → 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
@@ -30,64 +32,64 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
 {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Load page attributes (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
+{% include {{load_attributes}} scope="local" %}
 
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 // Page content
-// =============================================================================
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ++++
 <!-- 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
+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
 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 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, {browser-window--new}] of each and every website.
-Independendly from using Bootstrap or any other CSS framwork.
-
-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 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.
 
-Beside 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 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
 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
+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
@@ -95,18 +97,115 @@ 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.
 
-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
@@ -114,8 +213,8 @@ 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.
+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/{includes → _includes}/attributes.asciidoc

@@ -80,6 +80,12 @@ tag::data[]
 
 end::data[]
 
+
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
 // PRODUCTS, local product information (e.g. release)
 // -----------------------------------------------------------------------------
 tag::products[]

data/lib/starter_web/pages/public/{test_pages/includes → learn/roundtrip/_includes}/documents/100_gistblock.asciidoc

@@ -7,7 +7,7 @@ block macro `gist::` to do so.
 
 The following gist snippet is taken from {asciidoc-extensions-gist-example}[this example, window="_blank"]:
 
-//[source, adoc]
+[source, prometheus, role="noclip"]
 ----
 .Gist title
 gist::git_address[] <1>
@@ -15,6 +15,7 @@ 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[]

data/lib/starter_web/pages/public/learn/roundtrip/{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/{whats_up.adoc → where_to_go.adoc}

@@ -1,13 +1,13 @@
 ---
-title:                                  Whats up
-tagline:                                where to go
-description:                            Where to go
+title:                                  Where to go
+tagline:                                fasten your way
+description:                            Where to go, Too Long; Didn't Read, faster your way
 
 tags:                                   [ Page, Roundtrip ]
-index:                                  [ Start, Template, Whats, Up, Readme, TL;DR ]
+index:                                  [ Start, Template, Where, fast, way, TL;DR ]
 categories:                             [ pages ]
 
-permalink:                              /pages/public/learn/whats_up/
+permalink:                              /pages/public/learn/where_to_go/
 regenerate:                             false
 toc:                                    true
 
@@ -20,7 +20,10 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/runner-1920x1200-bw.jpg
+        - url:                          /assets/images/modules/attics/tldr-1920x800.jpg
+#                                                                               /assets/images/modules/attics/runner-1920x1200-bw.jpg
+
+
           alt:                          Photo by Alexander Redl on Unsplash
           badge:
             type:                       unsplash
@@ -33,23 +36,27 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
 {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Load page attributes (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} %}
+{% include {{load_attributes}} scope="none" %}
 
-// Page content
-// =============================================================================
 
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Welcome to the pages of J1 Template. If your here first time,
-hopefully you get on that page first. For sure, there is no better
-place to step in.
+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 the navigator module of J1 will
-support you to explore this site, find what your are looking for. The site
+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.
 
@@ -59,16 +66,14 @@ use the English language for our international vistors (we are German),
 right (LTR), and from top to down a page. The same to all menus, sections
 and pages.
 
-To read the site it is recommended to go for LTR. Other languages, other
+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.
 
-For that reason, it was a good decision to start from here.
-
 == Whats up
 
-First of all, you've started already! The important first step in to find
-your way to Jekyll is done. Congratiulations.
+First of all, you've started already! 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.
@@ -88,10 +93,10 @@ 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 deeper and make things real - and your hands dirty. We
-recomment to work on the Kickstarter *Web in a Day*. A nice one-day journey
-diving into the world of Jekyll. You'll learn a lot and at the end of that day
-you know what Jekyll, static webs and the template system J1 is all about.
+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!
 

data/lib/starter_web/pages/public/legal/en/eu/cookie.policy.asciidoc

@@ -12,7 +12,7 @@ How do we use cookies?
 
 A number of our pages use cookies to remember:
 
-* your display preferences, such as contrast colour settings or font size
+* your display preferences, such as contrast color settings or font size
 * if you have already replied to a survey pop-up that asks you if the 
   content was helpful or not (so you won't be asked again)
 * if you have agreed (or not) to our use of cookies on this site

data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc

@@ -36,128 +36,127 @@ resource_options:
 [[responsive-design]]
 == Full Responsive
 
-A good user experience browsing a Web is one of the most important features
-a site has to offer as a must. Beside excellent content. Presenting content
-at it's best on all devices, for all window sizes makes an excellent Web
-brilliant. J1 Template support your Web for full responsiveness, for the
-best user experience on all modern devices.
+A good user experience browsing a Web site is one of the most important
+feature a site has to offer as a must. Beside excellent content. Presenting
+content at its best on all devices, for all window sizes makes an excellent
+Web brilliant. J1 Template supports your Web for full responsiveness, for
+the best user experience on all modern devices.
 
 === Bootstrap 4 Integration
 
 To not sidetrack your audience by irritating user interface (UI) components,
 J1 Template is based on Bootstrap. Bootstrap is one of the most popular
 frameworks for web development used today. J1 is based on Bootstrap V4, the
-last current version to support your visitors by common elements for
-navigation, data input, tables and many other components more.
+last current version to support your visitors by common elements for navigation,
+data input, tables, and many other components more.
 
 For your development projects, Bootstrap simplifies HTML programming a lot,
 offers excellent JS support for interactive components like navigation
-elements, cards, forms etc.
+elements, cards, forms, etc.
 
 [[current-technology]]
 == HTML5 · CSS3 · JS
 
-The Internet is a rapid changing world. Like the fashion industries, new trends
-are set every year. J1 Template combines modern technologies for the world
-of static Webs to make a Site uniqe using current standards in terms of web
-development, languages and tools.
+The Internet is a rapidly changing world. Like the fashion industries, new
+trends are set every year. J1 Template combines modern technologies for the
+world of static Webs to make a site unique using current standards in terms
+of web development, languages, and tools.
 
 
 === HTML5 + CSS3
 
 J1 is using HTML5 for structuring content on the World Wide Web. The current
-version of the HTML standard offer a lot of new features including detailed
+version of the HTML standard offers a lot of new features including detailed
 processing models to support more interoperable implementations. It extends
-and improves HTML markups available. HTML5 introduces application
-programming interfaces (APIs) for more complex web applications. For same
-reasons, the new HTMLstandard is also a good choice for modern cross-platform
-mobile applications, because it includes features designed with mobile devices
-in mind.
+and improves HTML markups available. HTML5 introduces application programming
+interfaces (APIs) for more complex web applications. For the same reasons,
+the new HTML standard is also a good choice for modern cross-platform mobile
+applications, because it includes features designed with mobile devices in mind.
 
 Many new features are included with HTML5. To natively support multimedia and
-graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were
-added. Beside this, support for scalable vector graphics (SVG) and an API
-called MathML for mathematical formulas are now available.
+graphical content, the new <video>, <audio> and <canvas> elements were added.
+Besides this, support for scalable vector graphics (SVG) and an API called
+MathML for mathematical formulas are now available.
 
-The new standard allows to use so-called *semantic* markup elements for your
-documents. New structure elements such as `<main>`, `<section>`, `<article>`,
-`<header>` or `<footer>` (and many more) were added. Better structured HTML
-code can help people having disabilities to read the pages presented better.
+The new standard allows to use so-called semantic markup elements for your
+documents. New structure elements such as <main>, <section>, <article>,
+<header> or <footer> (and many more) were added. Better structured HTML code
+can help people having disabilities to read the pages presented better.
 
-CSS is designed to enable the separation of presentation and content.
-Including layout, colors and fonts for example. This separation improves
-content accessibility, provide more flexibility and control in the
-presentation.
+CSS is designed to enable the separation of presentation and content. Including
+layout, colors, and fonts for example. This separation improves content
+accessibility, provide more flexibility and control in the presentation.
 
 Separation of formatting and content also makes it feasible to present the
 same page in different styles. For example, the themes feature of J1 Template
-make use of this.
+makes use of this.
 
-CSS3 is divided into several separate components called *modules*. Each module
+CSS3 is divided into several separate components called modules. Each module
 adds new capabilities or extends features defined in the former CSS2 standard.
-HTML5 in combination with CSS3 allows to create modern and modular code for web
-pages that can be viewed on all current devices like Mobiles, Tablets or the
-classic Desktop PC. The new HTML5 elements plus CSS3 modules can be used as a
-replacement for *proprietary solutions* like Adobe Flash to build modern
-webpages based on *open standards*.
+HTML5 in combination with CSS3 allows creating modern and modular code for
+web pages that can be viewed on all current devices like Mobiles, Tablets,
+or the classic Desktop PC. The new HTML5 elements plus CSS3 modules can be
+used as a replacement for proprietary solutions like Adobe Flash to build
+modern webpages based on open standards.
 
 === Javascript
 
 HTML5 and CSS3 can do a lot. Content placement and basic methods for the
-dynamic of elements can be done using pure HTML5 and CSS3. For more
-complex solutions like modules the support of Javascript is needed.
+dynamic of elements can be done using pure HTML5 and CSS3. For more complex
+solutions like modules, the support of Javascript is needed.
 
-J1 Template has build-in a wide range of JS powered modules to support a
-website for e.g. the navigation, for presenting image data in galeries,
-lightboxes and so on.
+J1 Template has build-in a wide range of JS-powered modules to support a
+website e.g. the navigation, for presenting image data in galleries,
+lightboxes, and so on.
 
 
 [[launch-ready]]
 == Start in No Time
 
-The base idea of J1 Template is to give all people a tool set at their hands
-to create a website with no need to start by web development or web design
-from the beginning. A website based on J1 is using build-in templates and
-engines. As a result, the process to generate HTML code from your content
-is done automatically and allows you to concentrate on what truly matters:
-your content.
+The base idea of the J1 Template is to give all people a toolset at their
+hands to create a website with no need to start by web development or
+web design from the beginning. A website based on J1 is using build-in
+templates and engines. As a result, the process to generate HTML code from
+your content is done automatically and allows you to concentrate on what
+truly matters: your content.
+
+Using J1, you can instantly start a web project by creating your content and
+not by start learning the deep web development technologies.
 
-Using J1, you can instantly start a web project by creating your content
-and not by start learning the the deep of web development technologies.
 
 === Create your Web
 
-J1 is highly customizeable. Based on a pure configuration, a website can be
-created. The template system creates static web pages using Jekyll as
-the base HTML code generator. Static website are fast and secure but simple
+J1 is highly customizable. Based on a pure configuration, a website can be
+created. The template system creates static web pages using Jekyll as the
+base HTML code generator. Static websites are fast and secure but simple
 to manage. No complex database systems and PHP interfaces are needed.
 
 To present a static website, only a web server environment is needed. To
 publish a website on the Internet, many possible platforms can be used like
-Github, Netlify or Heroku for example - for free!
+Github, Netlify, or Heroku for example - for free!
 
-The Internet is not a peaceful place. Every site accessible from the public is
-attacked from the first second if published. Static websites are robust, fast
-and that's import: intrinsicly secure. That means: *not* changeable. No
-offender attacking your website is able to break your site. Because it's
-static or in other words: unchangeable, unbreakable from it's natur.
+The Internet is not a peaceful place. Every site accessible from the public
+is attacked from the first second if published. Static websites are robust,
+fast and that’s import: intrinsically secure. That means: not changeable.
+No offender attacking your website can break your site. Because it’s static
+or in other words: unchangeable, unbreakable from its nature.
 
 This makes a static website for the better.
 
 === Modules and Apps
 
-It's predictable what base components are needed for a modern website. For
-Content Management Systems (CMS) like Wordpress, Joomla or Drupal a huge
+It’s predictable what base components are needed for a modern website. For
+Content Management Systems (CMS) like WordPress, Joomla, or Drupal a huge
 number of modules are available to extend a site by e.g. Apps like image
-galleries, video players, calendars etc.
+galleries, video players, calendars, etc.
 
-This is a bit different for static webs as they don't have a central
-Management System as CMS do to integrate external code. There no ecosystem,
-no marketplace to get apps and modules from.
+This is a bit different for static webs as they don’t have a central Management
+System as CMS does to integrate external code. There no ecosystem, no
+marketplace to get apps and modules from.
 
 Luckily, it is not that hard to integrate external components into the world
 of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
-toolset without the need to install, to integrate components that expected
+toolset without the need to install, to integrate components that are expected
 as a need.
 
 A rich set of modules are already included. The modules support common use