j1-template 2022.1.0 → 2022.1.3

data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html

@@ -1,6 +1,6 @@
 ---
 layout:                                 page
-title:                                  Starter Blog
+title:                                  Creators Blog
 tagline:                                posts by tag
 description: >
                                         Browse articles by tag
@@ -17,10 +17,11 @@ pagination:
   permalink:                            /page:num/
 
 analytics:                              true
+advertising:                            false
 comments:                               false
 
 exclude_from_search:                    true
-regenerate:                             false
+regenerate:                             false                                   # page currently NOT used
 
 resources:                              [ animate ]
 resource_options:
@@ -51,24 +52,24 @@ resource_options:
 
 {% comment %} Set config files
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign template_config               = site.data.j1_config %}
-{% assign blocks                        = site.data.blocks %}
-{% assign modules                       = site.data.modules %}
-{% assign builder                       = site.data.builder %}
-{% assign plugins                       = site.data.plugins %}
+{% assign template_config         = site.data.j1_config %}
+{% assign blocks                  = site.data.blocks %}
+{% assign modules                 = site.data.modules %}
+{% assign plugins                 = site.data.plugins %}
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign blog_navigator_defaults       = builder.defaults.blog_navigator.defaults %}
-{% assign blog_navigator_settings       = builder.blog_navigator.settings %}
+{% assign blog_navigator_defaults = modules.defaults.blog_navigator.defaults %}
+{% assign blog_navigator_settings = modules.blog_navigator.settings %}
 
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign blog_navigator_options        = blog_navigator_defaults | merge: blog_navigator_settings %}
+{% assign blog_navigator_options  = blog_navigator_defaults | merge: blog_navigator_settings %}
 
 {% comment %} Variables
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign truncate_words                 = site.excerpt_truncate_words %}
+{% assign truncate_words          = site.excerpt_truncate_words %}
+{% assign category_blacklist      = template_config.posts.category_blacklist %}
 
 {% if site.permalink == 'none' %}
   {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
@@ -268,6 +269,22 @@ site_category_word_list:    {{site_category_word_list | debug}}
                 <span class="font-weight-bold"> · </span>
                 <i class="mdi mdi-comment mr-1"></i> {{comment_count}}
                 {% endif %}
+
+                <!-- Cleanup categories by given blacklist -->
+                {% assign my_categories = post.categories | difference: category_blacklist %}
+
+                <!-- Build element strings -->
+                {% assign categories    = my_categories |join: " · "  %}
+                {% assign tags          = post.tags | join: " · "  %}
+
+                <p class="result-item-text small text-muted mb-3">
+                  <i class="mdi mdi-tag-text-outline mdi-18px mr-1"></i>
+                  <span class="sr-categories">{{categories}}</span>
+                  <br>
+                  <i class="mdi mdi-tag mdi-18px mr-1"></i>
+                  <span class="sr-tags">{{tags}}</span>
+              </p>
+
               </div>
               <a class="card-link text-muted text-lowercase"
                  href="{{post.url}}#readmore">

data/lib/starter_web/pages/public/blog/navigator/archive.html

@@ -1,6 +1,6 @@
 ---
 layout:                                 page
-title:                                  Starter Blog
+title:                                  Creators Blog
 tagline:                                all posts
 description:                            Create index pages for articles this website
 
@@ -16,10 +16,11 @@ pagination:
   permalink:                            /page:num/
 
 analytics:                              false
+advertising:                            false
 comments:                               false
 
 exclude_from_search:                    true
-regenerate:                             true
+regenerate:                             true                                    # needed to update pages
 
 resources:                              [ animate ]
 resource_options:
@@ -45,24 +46,25 @@ resource_options:
 
 {% comment %} Set config files
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign template_config               = site.data.j1_config %}
-{% assign blocks                        = site.data.blocks %}
-{% assign modules                       = site.data.modules %}
-{% assign builder                       = site.data.builder %}
-{% assign plugins                       = site.data.plugins %}
+{% assign template_config         = site.data.j1_config %}
+{% assign blocks                  = site.data.blocks %}
+{% assign modules                 = site.data.modules %}
+{% assign plugins                 = site.data.plugins %}
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign blog_navigator_defaults       = builder.defaults.blog_navigator.defaults %}
-{% assign blog_navigator_settings       = builder.blog_navigator.settings %}
+{% assign blog_navigator_defaults = modules.defaults.blog_navigator.defaults %}
+{% assign blog_navigator_settings = modules.blog_navigator.settings %}
 
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign blog_navigator_options        = blog_navigator_defaults | merge: blog_navigator_settings %}
+{% assign blog_navigator_options  = blog_navigator_defaults | merge: blog_navigator_settings %}
 
 {% comment %} Variables
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign truncate_words                = site.excerpt_truncate_words %}
+{% assign truncate_words          = site.excerpt_truncate_words %}
+{% assign category_blacklist      = template_config.posts.category_blacklist %}
+
 
 {% if site.permalink == 'none' %}
   {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
@@ -191,6 +193,22 @@ site_category_word_list:    {{site_category_word_list | debug}}
               <span class="font-weight-bold"> · </span>
               <i class="mdi mdi-comment md-grey-900 mr-1"></i> {{comment_count}}
               {% endif %}
+
+              <!-- Cleanup categories by given blacklist -->
+              {% assign my_categories = post.categories | difference: category_blacklist %}
+
+              <!-- Build element strings -->
+              {% assign categories    = my_categories |join: " · "  %}
+              {% assign tags          = post.tags | join: " · "  %}
+
+              <p class="result-item-text small text-muted mb-3">
+                <i class="mdi mdi-tag-text-outline mdi-18px mr-1"></i>
+                <span class="sr-categories">{{categories}}</span>
+                <br>
+                <i class="mdi mdi-tag mdi-18px mr-1"></i>
+                <span class="sr-tags">{{tags}}</span>
+            </p>
+
             </div>
             <a class="card-link md-grey-900 text-lowercase"
                href="{{post.url}}#readmore">

data/lib/starter_web/pages/public/blog/navigator/index.html

@@ -1,6 +1,6 @@
 ---
 layout:                                 blog_archive
-title:                                  Starter Blog
+title:                                  Creators Blog
 tagline:                                explore posts
 description: >
                                         Navigate through all articles tis website
@@ -18,6 +18,7 @@ toc:                                    true
 fab_menu_id:                            default
 
 analytics:                              true
+advertising:                            false
 comments:                               false
 
 regenerate:                             true                                    # needed to update pagination pages

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

@@ -16,9 +16,8 @@ permalink:                              /pages/public/learn/roundtrip/present_im
 regenerate:                             false
 
 resources:                              [
-                                          animate, clipboard,
-                                          carousel, justifiedGallery,
-                                          lightbox, lightGallery,
+                                          animate, clipboard, carousel,
+                                          justifiedGallery, lightbox, lightGallery,
                                           rouge
                                         ]
 resource_options:
@@ -61,12 +60,11 @@ resource_options:
 [role="dropcap"]
 Welcome to the first preview page focussing on the image module. This page
 shows some valuable features of the J1 Template to manage your image-based
-content using lightboxes, carousels (slider), and galleries.
-
-The image module offers complex functionality based on powerful OpenSource
-libraries like JustifiedGallery for high-end, masonry-styled preview maps.
-J1 Template uses the jQuery plugin Owl Carousel as a base for image sliders.
-A carousel app (slider) lets you present your images as shows.
+content using lightboxes, carousels (slider), and galleries. The image module
+offers complex functionality based on powerful OpenSource libraries like
+JustifiedGallery for high-end, masonry-styled preview maps. J1 Template uses
+the jQuery plugin Owl Carousel as a base for image sliders. A carousel
+app (slider) lets you present your images as shows.
 
 Lightboxes like LightGallery or Lightbox V2 support your web for enlarged
 image views of your picture or video content. Have a look, a quick tour
@@ -105,13 +103,13 @@ Find below an example of using the lightbox Lightbox standalone. See how
 single (individual) images are linked for use with Lightbox.
 
 .Lightbox block for standalone images
-lightbox::example-standalone[ 400, {data-images-standalone} ]
+lightbox::example-standalone[ 800, {data-images-standalone}, role="mb-4" ]
 
 Lightbox supports image groups (image sets). Click on the images below to
 see how Lightbox manages a group of images.
 
 .Lightbox block for grouped images
-lightbox::example-group[ 400, {data-images-group}, group ]
+lightbox::example-group[ 395, {data-images-group}, group, role="mb-4 wm-800" ]
 
 === LightGallery Example
 
@@ -120,7 +118,7 @@ supports a gallery-style thumbnail preview plus image resizing, a download
 dialog, sharing provider support, and more helpful. Check what
 LightGallery can do this by the following example.
 
-gallery::jg_old_times[]
+gallery::jg_old_times[ role="mb-4 wm-800" ]
 
 == J1 Carousel App
 
@@ -209,21 +207,18 @@ carousel::demo_oneslide[role="mb-3"]
 
 JustifiedGallery is a great jQuery plugin to create responsive, infinite,
 and high-quality justified image galleries. J1 Template combines the Gallery
-with the lightboxes supported to enlarge the images of a gallery.
-
-See JustifiedGallery in action - and for sure, all that you see is even
-responsive. Change the size of your current browser window, by width or height,
-to see what will happen!
+with the lightboxes supported to enlarge the images of a gallery. See the
+gallery in action; and for sure, all that you see is even responsive. Change
+the size of your current browser window, by width or height to see what will
+happen!
 
 Pictures you've made are typically not even in size. Images may have the
 same size (resolution), but some are orientated landscapes, or others
 may be portraits. For that reason, a more powerful gallery is needed to create
-so-called justified views.
-
-JustifiedGallery uses a so-called masonry grid layout. It works by
-placing elements in an optimal position based on available horizontal and
-vertical space. Sort of like mason fitting stones in a wall. You'll have
-seen it in use all over the Internet!
+so-called justified views. JustifiedGallery uses a so-called masonry grid
+layout. It works by placing elements in an optimal position based on available
+horizontal and vertical space. Sort of like mason fitting stones in a wall.
+You'll have seen it in use all over the Internet!
 
 .Masonry grid layout of JustifiedGallery
 gallery::jg_customizer[]

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

@@ -135,6 +135,7 @@ resource_options:
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
+[role="dropcap"]
 Playing video on web pages seems not that special since you can already
 watch videos on web pages through plugins like _Flash Player_, _Quicktime_,
 or _Silverlight_. A new standard goes to HTML5 Video, a pure HTML way to
@@ -166,39 +167,121 @@ license is needed for business use. See
 link:{url-light-gallery--license}[LightGallery licenses, {browser-window--new}]
 how to use LightGallery for commercial websites and projects.
 
-== Local video content
+== Local Video content
 
-Digital image content, simple pictures or videos, are easy to make. Today, every mobile has a camera - not that bad! Presenting a bunch
-of (digital) pictures is done very easily by using Justified Gallery, for example.
-Videos created by a digicam or a mobile can be played by J1 Template using the
-HTML5 Video support of LightGallery.
+Digital image content, simple pictures or videos, are easy to make. Today,
+every mobile has a camera. Presenting a bunch of (digital) pictures is done
+very easily by using Justified Gallery. Videos created by a digicam or a mobile
+can be played by J1 Template using the HTML5 Video support. Present videos you
+have made at it's best.
 
 Two players are available with LightGallery:
 
 . an internal player used by default
 . {url-videojs--home}[video.js, {browser-window--new}], a excellent
-  Javascript video library
+  Javascript video library including a great player
 
-NOTE: The HTML5 specification does _not_ define which video and audio formats
-browsers _should_ support. J1 LightGallery can play all types of standard
+NOTE: The HTML5 specification does *not* define which video and audio formats
+browsers *should* support. J1 LightGallery can play all types of standard
 HTML5 Video formats on modern browsers today (MP4, WebM, and Ogg).
 
+.MP4 Videos - VideoJS Player
 gallery::jg_video_html5[role="mb-5"]
 
-== Online video content
+== Online Video content
 
-The Internet is full of inspiring content. Video content is popular,
-the number of channels on _YouTube_ is enormous. If you want to present
-video content from the Internet, e.g., your channel, the online video
-support of J1 Template may be the right choice. Find some enjoyable videos
-from James Cordon's channel: Carpool Karaoke.
+The Internet is full of inspiring content. If you want to present video
+content from the Internet, the online video support of J1 Template is the
+right choice.
 
-.YouTube Video Gallery - Carpool Karaoke
+=== YouTube
+
+The community at link:{url-youtube--home}[YouTube, {browser-window--new}] is
+large, with over 1 billion users that watch hundreds of millions of hours of
+content every day. The
+link:{url-alexa-scores--youtube}[Alexa Internet, {browser-window--new}]
+scores are impressive. For good reasons: the number of channels on YouTube
+is enormous. For TV-Stations, it's a must to publish videos of their shows
+on YouTube. Find below a current gallery from *The Voice Kids* (SAT.1)
+Germany and a real classic channel *Carpool Karaoke* from the frontman James
+Corden of *The Late Late Show* at CBS, Los Angeles.
+
+.The Voice Kids, Germany 2021
+gallery::jg_video_online_youtube_2[role="mb-5"]
+
+.James Cordon's Carpool Karaoke
 gallery::jg_video_online_youtube[role="mb-5"]
 
+=== Vimeo
+
+link:{url-vimeo--home}[Vimeo, {browser-window--new}] is a video-sharing
+platform that includes features such as live-streaming and customization.
+Vimeo provides many tools for video creation, editing, and broadcasting.
+The platform provides you with an excellent channel to present high-quality,
+professional videos and reach audiences worldwide.
+
+Vimeo does offer a basic, free membership, but it limits you to 500MB maximum
+storage per week. Alternately, you can book on paid plans: Plus, PRO, Business.
+Each membership has varied storage limits, but the free plan offers sufficient
+space for private projects to present video content without advertising.
+
+NOTE: A great plus using Vimeo is that *no advertising* is used on that
+platform. Find the current
+link:{url-alexa-scores--vimeo}[Alexa Internet, {browser-window--new}]
+ranking from here.
+
 .Vimeo Video Gallery - Fashion
 gallery::jg_video_online_vimeo[role="mb-5"]
 
+=== DailyMotion
+
+link:{url-dailymotion--home}[Dailymotion, {browser-window--new}] is a French
+video-sharing technology platform primarily owned by
+link:{url-vivendi--home}[Vivendi, {browser-window--new}]. The platform is
+available worldwide in 183 languages and 43 localised versions featuring local
+home pages and local content.
+
+The platform is a monetization solution that allows allows to directly connect
+to high-quality advertisers through a proprietary Advertising Solution. Like
+YouTube, videos cav be watched for free, but ads are shown on each and every
+video.
+
+Dailymotion allows users to search videos by *tags*, topic *channels*, or
+user-created *groups*. Users can upload videos of up to 2 gigabytes and a
+length of 60 minutes. If a user is a MotionMaker or MotionPartner, a program
+for particularly creative users or partners, they can upload videos of
+unlimited length. Check the ranking at
+link:{url-alexa-scores--dailymotion}[Alexa Internet, {browser-window--new}].
+
+NOTE: Like YouTube, DailyMotion is a commercial platform using *advertising*
+on all video content. On every video, an ad clip is presented of 15 to
+30 seconds in length.
+
+.DailyMotion Video Gallery - SELF Magazine (Channel)
+gallery::jg_video_online_dailymotion[role="mb-5"]
+
+=== VK
+
+link:{url-vk--home}[VK, {browser-window--new}], former Vkontakte.ru until
+January 2012, is a multilingual social network operated from Russia.
+Registered users can create a profile on VK and exchange information with
+other users.
+
+According to the operator, the platform has over 100 million active users,
+but mainly in Russia, Ukraine, and other Russian spoken countries. According
+to link:{url-alexa-scores--vk}[Alexa Internet, {browser-window--new}]
+VK is among the most popular websites in Russia.
+
+NOTE: VK is accused of insufficient protection of personal data. The platform
+is also openly criticized by neo-Nazi and neo-fascist Groups used without
+there being a handle against them so far. To date, the Russian investigative
+authorities (especially the FSB) have not made any efforts to identify
+right-wing extremists or to suppress racist currents on the platform.
+
+.VK Video Gallery - Wildlife
+gallery::jg_video_online_vk[role="mb-5"]
+
+
 == What next
 
 Images and videos are pretty visual. And it can be impressive, for sure.
@@ -206,4 +289,5 @@ But the most visual component is the text for all pages, for all sites on the
 Internet. To see how text could be presented great for modern responsive
 websites, check the section Typography next.
 
-What? Please find out how it works. Go for: link:{url-roundtrip--typography}[Typography], then.
+What? Please find out how it works.
+Go for: link:{url-roundtrip--typography}[Typography], then.

data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc

@@ -58,8 +58,7 @@ resource_options:
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-== Typography
-
+[role="dropcap"]
 The character font serves as one of the most crucial branding elements for
 any business. Typography matters for any media presenting text. The text will
 take on an important role of acting as plain text but will also serve

data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc

@@ -57,6 +57,12 @@ resource_options:
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
+[role="dropcap"]
+J1 Template supports popular icons font sets out-of-the-box. The icon sets MDI
+and FA are very good in design and have a rich set of different icons for many
+categories used for the Web. Iconify icons are not a locally stored icon-set
+like MDI or FA. All icons are loaded over the Internet using the so-called
+Unified OpenSource Icon Framework.
 
 == Icon Fonts