j1-template 2020.0.11 → 2020.0.16

data/lib/starter_web/_data/template_settings.yml

@@ -137,9 +137,8 @@ cookies:
 #
 #   NOTE: Used for developent mode ONLY
 #   NOTE: See ~/packages/300_template_src/_layouts/default.html
-#
 # ------------------------------------------------------------------------------
-flicker_timeout:                        150
+flicker_timeout:                        250
 
 # ------------------------------------------------------------------------------
 # HTML PrettyPrint
@@ -201,6 +200,99 @@ bootstrap:
     enabled:                            true
     trigger:                            hover
 
+# ------------------------------------------------------------------------------
+# SEO settings (optimization)
+#
+
+# ------------------------------------------------------------------------------
+# PRELOAD settings
+# ------------------------------------------------------------------------------
+# NOTE:
+#   Specify resources that your page will need very soon, which you want
+#   to start loading early in the page lifecycle, before browsers' main
+#   rendering machinery starts. This may improve the performace for the RENDER
+#   phase to improve the FCP (First Contentful Paint). FCP marks the time
+#   at which the first text or image is shown to the user.
+# ------------------------------------------------------------------------------
+# NOTE:
+#   Preloading fonts,the crossorigin attribute is needed to handle
+#   CORS issues.
+# ------------------------------------------------------------------------------
+# NOTE:
+#   Preloading applies ONLY if the requested resource is NOT cached (304).
+#   If a resource is already cached (by the browser OR the web server), some
+#   browser (e.g. Chrome) issue WARNINGS, but can be ignored.
+# ------------------------------------------------------------------------------
+# INFO:
+#   https://stackoverflow.com/questions/1330825/preloading-font-face-fonts
+#   https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
+#   https://github.com/GoogleChromeLabs/critters/issues/18 (crossorigin)
+# ------------------------------------------------------------------------------
+# font:
+#   preload:                              true
+#   cors:                                 crossorigin
+#   fonts:                                [
+#                                           /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Thin.woff,
+#                                           /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Thin.woff2,
+#                                           /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Light.woff,
+#                                           /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Light.woff2,
+#                                           /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Regular.woff,
+#                                           /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Regular.woff2,
+#                                           /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Medium.woff,
+#                                           /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Medium.woff2,
+#                                           /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Bold.woff,
+#                                           /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Bold.woff2,
+#                                           /assets/themes/j1/core/fonts/materialdesign_icons/fonts/materialdesignicons-webfont.woff,
+#                                           /assets/themes/j1/core/fonts/materialdesign_icons/fonts/materialdesignicons-webfont.woff2
+#                                         ]
+
+font:
+  preload:                              true
+  cors:                                 crossorigin
+  fonts:                                [
+                                          /assets/themes/j1/core/fonts/roboto/fonts/Roboto-Regular.woff,
+                                          /assets/themes/j1/core/fonts/materialdesign_icons/fonts/materialdesignicons-webfont.woff
+                                        ]
+css:
+  preload:                              true
+  css:                                  [
+                                          /assets/themes/j1/core/css/uno,
+                                          /assets/themes/j1/core/css/vendor
+                                        ]
+  files:                                []
+
+js:
+  preload:                              true
+  js:                                   [
+                                          /assets/themes/j1/modules/bmd/js/bootstrap-material-design,
+                                          /assets/themes/j1/modules/backstretch/js/backstretch,
+                                          /assets/themes/j1/core/js/template
+                                        ]
+  files:                                [
+                                          /assets/themes/j1/adapter/js/attic.js,
+                                          /assets/themes/j1/adapter/js/logger.js,
+                                          /assets/themes/j1/adapter/js/mdb.js,
+                                          /assets/themes/j1/adapter/js/navigator.js
+                                        ]
+image:
+  preload:                              true
+  files:                                [ /assets/images/modules/icons/j1/j1-512x512.png ]
+
+# ------------------------------------------------------------------------------
+# PRECONNECT settings
+# ------------------------------------------------------------------------------
+# NOTE:
+#   Improve page load speed with preconnect|dns-prefetch for 3rd party
+#   origins. Establishing connections often involves significant time in
+#   slow networks (e.g. mobile 2|3G), particularly when it comes to secure
+#   connections (HTTPS), as it may involve DNS lookups, redirects, and
+#   several round trips to the final server that handles the user's request.
+# ------------------------------------------------------------------------------
+preconnect:
+  enabled:                              true
+  urls:                                 [ "https://bootswatch.com" ]
+
+
 # ------------------------------------------------------------------------------
 # Font AweSome settings
 #
@@ -272,8 +364,8 @@ analytics:
 # Set 'provider' to the analytics provider you want to use
 #
 advertising:
-  enabled:                              false
-  provider:                             google
+  enabled:                              true
+  provider:                             custom
   google:
     publisher_id:                       ca-pub-6537273267695855
   custom:

data/lib/starter_web/_data/utilities/util_srv.yml

@@ -73,7 +73,7 @@ settings:
       enabled:                          false
 
       built:                              
-        execute:                        false                                   # rebuilt disabled for testing (as Jekyll is running in parallel)
+        execute:                        false                                   # rebuild disabled for testing (as Jekyll is running in parallel)
         response_success:               The built request to your local site finished successfully.
         response_failed:                "The built request to your local fite has failed. Reason: "
 

data/lib/starter_web/_plugins/asciidoctor-extensions/banner.rb

@@ -0,0 +1,43 @@
+# ------------------------------------------------------------------------------
+# ~/_plugins/asciidoctor-extensions/banner.rb
+# Asciidoctor extension for J1 Banner blocks
+#
+# Product/Info:
+# https://jekyll.one
+#
+# Copyright (C) 2020 Juergen Adams
+#
+# J1 Template is licensed under the MIT License.
+# See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+#
+# ------------------------------------------------------------------------------
+require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal'
+include Asciidoctor
+
+# A block macro that embeds a banner block into the output document
+#
+# Usage
+#
+#   banner::banner_id[role="additional classes"]
+#
+# Example:
+#
+#   banner::home_teaser_banner[role="mb-5"]
+#
+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

data/lib/starter_web/_plugins/asciidoctor-extensions/fab-icon-inline.rb

@@ -19,7 +19,7 @@ Asciidoctor::Extensions.register do
     use_dsl
     named :fab
     name_positional_attributes 'size', 'modifier'
-    default_attrs 'size' => '1x', 'modifier' => 'md-grey'
+    default_attrs 'size' => '1x', 'modifier' => ''
 
     def process parent, target, attributes
       doc = parent.document

data/lib/starter_web/_plugins/asciidoctor-extensions/fas-icon-inline.rb

@@ -19,14 +19,14 @@ Asciidoctor::Extensions.register do
     use_dsl
     named :fas
     name_positional_attributes 'size', 'modifier'
-    default_attrs 'size' => '1x', 'modifier' => 'md-grey'
+    default_attrs 'size' => '1x', 'modifier' => ''
 
     def process parent, target, attributes
       doc = parent.document
       size_class = (size = attributes['size']) ? %(fa-#{size}) : nil
       modifier_class = (modifier = attributes['modifier']) ? %(#{modifier}) : nil
       icon_name = target.tr '_', '-'
-      %(<i class="fas #{size_class} #{modifier} fa-#{icon_name}"></i>)
+      %(<i class="fas fa-#{icon_name} #{size_class} #{modifier}"></i>)
     end
   end
   inline_macro FasIconInlineMacro

data/lib/starter_web/_plugins/asciidoctor-extensions/iconify-icon-inline.rb

@@ -19,7 +19,7 @@ Asciidoctor::Extensions.register do
     use_dsl
     named :iconify
     name_positional_attributes 'size', 'modifier'
-    default_attrs 'size' => '1x', 'modifier' => 'md-grey'
+    default_attrs 'size' => '1x', 'modifier' => ''
 
     def process parent, target, attributes
       doc = parent.document
@@ -30,4 +30,4 @@ Asciidoctor::Extensions.register do
     end
   end
   inline_macro IconifyIconInlineMacro
-end
+end

data/lib/starter_web/_plugins/asciidoctor-extensions/mdi-icon-inline.rb

@@ -19,7 +19,7 @@ Asciidoctor::Extensions.register do
     use_dsl
     named :mdi
     name_positional_attributes 'size', 'modifier'
-    default_attrs 'size' => '1x', 'modifier' => 'md-grey'
+    default_attrs 'size' => '1x', 'modifier' => ''
 
     def process parent, target, attributes
       doc = parent.document
@@ -30,4 +30,4 @@ Asciidoctor::Extensions.register do
     end
   end
   inline_macro MdiIconInlineMacro
-end
+end

data/lib/starter_web/_plugins/asciidoctor-extensions/panel.rb

@@ -0,0 +1,43 @@
+# ------------------------------------------------------------------------------
+# ~/_plugins/asciidoctor-extensions/banner.rb
+# Asciidoctor extension for J1 Banner blocks
+#
+# Product/Info:
+# https://jekyll.one
+#
+# Copyright (C) 2020 Juergen Adams
+#
+# J1 Template is licensed under the MIT License.
+# See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+#
+# ------------------------------------------------------------------------------
+require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal'
+include Asciidoctor
+
+# A block macro that embeds a banner block into the output document
+#
+# Usage
+#
+#   banner::banner_id[role="additional classes"]
+#
+# Example:
+#
+#   banner::home_teaser_banner[role="mb-5"]
+#
+Asciidoctor::Extensions.register do
+
+  class J1BlockMacro < Extensions::BlockMacroProcessor
+    use_dsl
+
+    named :panel
+    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

data/lib/starter_web/_plugins/asciidoctor-extensions/twitter-emoji-inline.rb

@@ -22,7 +22,7 @@ Asciidoctor::Extensions.register do
     use_dsl
     named :emoji
     name_positional_attributes 'size', 'modifier'
-    default_attrs 'size' => '1x', 'modifier' => 'no-modifier'
+    default_attrs 'size' => '1x', 'modifier' => ''
 
     def process parent, target, attributes
       doc = parent.document
@@ -34,4 +34,4 @@ Asciidoctor::Extensions.register do
     end
   end
   inline_macro EmojiInlineMacro
-end
+end

data/lib/starter_web/_plugins/minifyJS.rb

@@ -0,0 +1,54 @@
+# ------------------------------------------------------------------------------
+# ~/_plugins/uglify.rb
+# Liquid filter for J1 Template to uglify JS
+#
+# Product/Info:
+# http://jekyll.one
+#
+# Copyright (C) 2020 Juergen Adams
+#
+# J1 Template is licensed under the MIT License.
+# See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+# ------------------------------------------------------------------------------
+# => Uglifier.compile(File.read(input))
+# ------------------------------------------------------------------------------
+#  NOTE:
+#  CustomFilters cannot be used in SAFE mode (e.g not usable for
+#  rendering pages with Jekyll on GitHub
+#
+#  USAGE:
+#    {% capture cache_name %}
+#
+#      liquid code to generate HTML output goes here
+#
+#    {% endcapture %}
+#    {{ cache_name | uglify }}
+# ------------------------------------------------------------------------------
+# noinspection SpellCheckingInspection
+# rubocop:disable Lint/UnneededDisable
+# rubocop:disable Style/Documentation
+# rubocop:disable Metrics/LineLength
+# rubocop:disable Layout/TrailingWhitespace
+# rubocop:disable Layout/SpaceAroundOperators
+# rubocop:disable Layout/ExtraSpacing
+# rubocop:disable Metrics/AbcSize
+# ------------------------------------------------------------------------------
+require 'uglifier'
+
+module Jekyll
+  module MinifyJS
+    def minifyJS(input)
+      # see: https://github.com/mishoo/UglifyJS/issues/495
+      # quote_style 3 -- always use the original quotes
+      minified = Uglifier.compile(input,
+                    harmony: true,
+                    :output => {
+                        :quote_style => 3
+                    }
+                 )
+      input = minified
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::MinifyJS)

data/lib/starter_web/_plugins/minifyJSON.rb

@@ -0,0 +1,47 @@
+# ------------------------------------------------------------------------------
+# ~/_plugins/uglify.rb
+# Liquid filter for J1 Template to uglify JS
+#
+# Product/Info:
+# http://jekyll.one
+#
+# Copyright (C) 2020 Juergen Adams
+#
+# J1 Template is licensed under the MIT License.
+# See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+# ------------------------------------------------------------------------------
+# => Uglifier.compile(File.read(input))
+# ------------------------------------------------------------------------------
+#  NOTE:
+#  CustomFilters cannot be used in SAFE mode (e.g not usable for
+#  rendering pages with Jekyll on GitHub
+#
+#  USAGE:
+#    {% capture cache_name %}
+#
+#      liquid code to generate HTML output goes here
+#
+#    {% endcapture %}
+#    {{ cache_name | uglify }}
+# ------------------------------------------------------------------------------
+# noinspection SpellCheckingInspection
+# rubocop:disable Lint/UnneededDisable
+# rubocop:disable Style/Documentation
+# rubocop:disable Metrics/LineLength
+# rubocop:disable Layout/TrailingWhitespace
+# rubocop:disable Layout/SpaceAroundOperators
+# rubocop:disable Layout/ExtraSpacing
+# rubocop:disable Metrics/AbcSize
+# ------------------------------------------------------------------------------
+require 'json/minify'
+
+module Jekyll
+  module MinifyJSON
+    def minifyJSON(input)
+      minified = JSON.minify(input)
+      input = minified
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::MinifyJSON)

data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1-template.adoc.erb

@@ -22,7 +22,7 @@ resource_options:
         - url:                          /assets/images/modules/attics/welcome-1920x1280-bw.jpg
           alt:                          Photo by Belinda Fewings on Unsplash
           alignY:                       0.3
-#         caption:                      
+#         caption:
 #           text:                       Photo by Belinda Fewings on Unsplash
 #           href:                       https://unsplash.com/@bel2000a
           badge:
@@ -44,8 +44,8 @@ resource_options:
 // NOTE: Place an excerpt at the most top position
 // -----------------------------------------------------------------------------
 If you’re not familiar with Jekyll (or other site generators), Jekyll is a
-so-called static site generator. Think of it like a CMS but without all the 
-complexity and headache. No need to build a giant content strangling Rube 
+so-called static site generator. Think of it like a CMS but without all the
+complexity and headache. No need to build a giant content strangling Rube
 Goldberg machine to manage content.
 
 All you’re doing at the end of the day is writing your content and Jekyll does
@@ -157,4 +157,3 @@ choose Jekyll as for me it is the best static site generator so far.
 This blog is powered under Jekyll.
 
 Happy Jekylling!
-

data/lib/starter_web/collections/posts/public/featured/_posts/2018-05-01-confusion-about-base-url.adoc

@@ -22,7 +22,7 @@ resource_options:
       opacity:                          0.5
       slides:
         - url:                          /assets/images/modules/attics/banner/jekyll.1200x600-bw.jpg
-          alt:                          jekyll.1200x600-bw
+          alt:                          jekyll.1200x600-bw.jpg
 ---
 
 // NOTE:  General Asciidoc page attributes settings

data/lib/starter_web/collections/posts/public/featured/_posts/2019-05-01-top-open-source-static-site-generators.adoc

@@ -23,7 +23,7 @@ resource_options:
       slides:
         - url:                          /assets/images/modules/attics/building-blocks-1920x1280-bw.jpg
           alt:                          Photo by Ryan Quintal on Unsplash
-#         caption:                      
+#         caption:
 #           text:                       Photo by Ryan Quintal on Unsplash
 #           href:                       https://unsplash.com/@ryanquintal/portfolio
           badge:
@@ -42,8 +42,8 @@ resource_options:
 
 // Place an excerpt at the most top position
 // -----------------------------------------------------------------------------
-People quite often ask, if static websites make sense for anything beyond a 
-one-page website. Some other see in static websites the stone age of the 
+People quite often ask, if static websites make sense for anything beyond a
+one-page website. Some other see in static websites the stone age of the
 World Wide Web. What's about static websites today? What's achiveable?
 
 This article highlights top open source projects, in many different programming
@@ -61,36 +61,36 @@ excerpt__end
 // image::{{page.image}}[{{page.title}}]
 image::/assets/images/collections/blog/featured/staticgen.jpg[{{page.title}}]
 
-A typical CMS driven website works by building each and every page dynamically. 
-That means fetching the content from a database to pass them over to a template 
-system for adding the required structure information (e.g. CSS styles). 
+A typical CMS driven website works by building each and every page dynamically.
+That means fetching the content from a database to pass them over to a template
+system for adding the required structure information (e.g. CSS styles).
 This means each page is assembled on demand.
 
 For many, many websites dynamic page generation is completely unnecessary and
-adds unwanted risks in terms of complexity, performance losses and security 
-issues. After all, the content of most websites changes only, when the content 
-authors makes changes. 
+adds unwanted risks in terms of complexity, performance losses and security
+issues. After all, the content of most websites changes only, when the content
+authors makes changes.
 
-Why a hell should a web page always assembled on demand if there are no 
+Why a hell should a web page always assembled on demand if there are no
 changes?
 
-NOTE: To be fair, most CMS are providing caching systems for web pages to 
+NOTE: To be fair, most CMS are providing caching systems for web pages to
 prevent unnessesary creation processes. It is not easy to implement such
 a caching system and in the very end, it adds the next level of complexity.
 
 A Static Site Generator takes a different approach and generate all the pages
 of the website upfront. That does not nessesarily mean, that a static website
-is always generated from the scratch. Modern generators support a so-called 
-incremental build; like Jekyll does. When there are changes detected to the 
-content, only selected pages are rebuild. 
+is always generated from the scratch. Modern generators support a so-called
+incremental build; like Jekyll does. When there are changes detected to the
+content, only selected pages are rebuild.
 
-This means overall, statically build web pages having no moving parts in the 
+This means overall, statically build web pages having no moving parts in the
 deployed website. This results in browser-side caching only, the performance
 goes up and static sites are far more secure because they are build already.
 
 To find out what Open Source Static Site Generators are available today and
-their ranking in terms of popularity go for StaticGen You'll will find the 
-most complete list of generators! 
+their ranking in terms of popularity go for StaticGen You'll will find the
+most complete list of generators!
 
 Check https://www.staticgen.com[StaticGen].