RubyGems - j1-template - Versions diffs - 2023.2.7 → 2023.3.0 - Mend

j1-template 2023.2.7 → 2023.3.0

Files changed (363) hide show

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

@@ -29,7 +29,7 @@ tag::urls[]
 :url-light-gallery--license:                      http://sachinchoolur.github.io/lightGallery/docs/license.html
-:url-material-design-icons--cheatsheet:           https://jekyll.one/pages/public/previewer/mdi_font/
+:url-font-icons--icon-picker:                     https://jekyll.one/pages/public/previewer/icon-picker/
 :url-asciidoctor-extensions--lab:                 https://github.com/asciidoctor/asciidoctor-extensions-lab
 :url-asciidoctor-extensions--use-extension:       https://github.com/asciidoctor/asciidoctor-extensions-lab#using-an-extension

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/100_gistblock.asciidoc CHANGED Viewed

@@ -5,17 +5,16 @@ An excellent place for code snippets is Gist at Github. To embed an existing
 gist into your documents, the Asciidoc Extention *Gist block* provides the
 block macro `gist::` to do so.
-The following gist snippet is taken from {asciidoc-extensions-gist-example}[this example, window="_blank"]:
+The following gist snippet is taken from link:{url-asciidoc-extensions--gist-example}[this example, window="_blank"]:
 [source, prometheus, role="noclip"]
 ----
 .Gist title
-gist::git_address[] <1>
+gist::git_address[]
 ----
-<1> For `git_address`, {github-gist-home}[, window="_blank"] is prepended automatically
 .Example of a gist block
-[source, prometheus, role="noclip"]
+[source, text, role="noclip"]
 ----
 .Guard setup to live preview AsciiDoc output
 gist::mojavelinux/5546622[]

data/lib/starter_web/pages/public/learn/roundtrip/asciidoc_extensions.adoc CHANGED Viewed

@@ -649,7 +649,7 @@ lorem:sentences[5]
 All macro types available for `lorem:` to be used for blind text can be
 found with the following table below.
-//.Tabelle
+.Macros available
 [cols="5,2,5a", options="header", role="rtable mb-2"]
 |===
 |Macro | Type |Example
@@ -679,7 +679,7 @@ lorem:sentences[5]
 |
 lorem:date[]
-|`date[strftime]` e.g. `date[%Y-%m-%d]``
+|`date[strftime]` e.g. `date[%Y-%m-%d]`
 |date
 |
 lorem:date[%Y-%m-%d]

data/lib/starter_web/pages/public/learn/roundtrip/icon_fonts.adoc CHANGED Viewed

@@ -103,7 +103,7 @@ repository and MD style specification.
 |1x
 |no modifier set
 |All icons can be found for preview at the
-link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+link:{url-font-icons--icon-picker}[Font Icon Picker, {browser-window--new}]
 page online. +
 No modifiers +
@@ -116,7 +116,7 @@ mdi:account[1x]
 |3x
 |no modifier set
 |All icons can be found for preview at the
-link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+link:{url-font-icons--icon-picker}[Font Icon Picker, {browser-window--new}]
 page online. +
 No modifiers +
@@ -129,7 +129,7 @@ mdi:account[3x]
 |5x
 |no modifier set
 |All icons can be found for preview at the
-link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+link:{url-font-icons--icon-picker}[Font Icon Picker, {browser-window--new}]
 page online. +
 No modifiers +
@@ -142,7 +142,7 @@ mdi:account[5x]
 |5x
 |`mdi-rotate-45`
 |All icons can be found for preview at the
-link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+link:{url-font-icons--icon-picker}[Font Icon Picker, {browser-window--new}]
 page online. +
 Rotate 45 degrees +
@@ -155,7 +155,7 @@ mdi:account[5x mdi-rotate-45]
 |5x
 |`mdi-rotate-315`
 |All icons can be found for preview at the
-link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+link:{url-font-icons--icon-picker}[Font Icon Picker, {browser-window--new}]
 page online. +
 Rotate 315 degrees +
@@ -169,7 +169,7 @@ mdi:account[5x mdi-rotate-315]
 |`mdi-light` +
 `mdi-flip-v`
 |All icons can be found for preview at the
-link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+link:{url-font-icons--icon-picker}[Font Icon Picker, {browser-window--new}]
 page online. +
 Color set to (md) light-grey and flipped vertical +
@@ -182,7 +182,7 @@ mdi:alert[5x mdi-light mdi-flip-v]
 |5x
 |`md-indigo`
 |All icons can be found for preview at the
-link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+link:{url-font-icons--icon-picker}[Font Icon Picker, {browser-window--new}]
 page online. +
 Color set to (md) indigo +
@@ -195,7 +195,7 @@ mdi:alert[5x md-indigo]
 |5x
 |`md-pink`
 |All icons can be found for preview at the
-link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+link:{url-font-icons--icon-picker}[Font Icon Picker, {browser-window--new}]
 page online. +
 Color set to (md) pink +
@@ -208,7 +208,7 @@ mdi:alert[5x md-pink]
 |5x
 |`mdi-spin`
 |All icons can be found for preview at the
-link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+link:{url-font-icons--icon-picker}[Font Icon Picker, {browser-window--new}]
 page online. +
 Added animation of type rotate (spin) +
@@ -222,7 +222,7 @@ mdi:loading[5x mdi-spin]
 |`md-red-900` +
 `mdi-pulsed`
 |All icons can be found for preview at the
-link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+link:{url-font-icons--icon-picker}[Font Icon Picker, {browser-window--new}]
 page online. +
 Color  set to (md) color dark-red and added animation of type pulsed +

data/lib/starter_web/pages/public/learn/roundtrip/present_images.adoc CHANGED Viewed

@@ -278,7 +278,7 @@ slick::collection_carousel_biography[role="mb-5"]
 If you're interested to learn more about _Slick_, go previewer page
 link:{url-j1-slick-previewer}[Slick Previewer, {browser-window--new}],
+[#masterSlider]
 == J1 Master Slider
 The Javascript tool _Master Slider_ is a 3rd party plugin fully integrated
@@ -293,6 +293,7 @@ all features: the functionality of  *filters*, *layouts* are limited and no
 // platforms, like mobiles or tablets, initializing an MS Slider will take
 // a while to be finished.
+[#carouselSlider]
 === Carousels versus Sliders
 Sliders and Carousels are focussing quite the same thing: presenting image data
@@ -311,6 +312,7 @@ TIP: For more details of the dimplementation of Master Slider of J1 Theme, see
 find  documentation at
 link:{url-j1-docs--masterslider-module}[Master Slider module, {browser-window--new}].
+[#controlsFiltersLightbox]
 === MS Slider using Controls + Filters + Lightbox
 The following slider uses the (CSS) filter feature of Master Slider.
@@ -328,6 +330,7 @@ slides to see the *colored* images configured for the slider.
 .Slider using Controls
 masterslider::ms_00001[role="mb-5"]
+[#textElements]
 === MS Slider using Text Elements (MSInfo)
 One of the major features of sliders is to present additional (animated)
@@ -338,6 +341,7 @@ elements: the MSInfo element.
 .Slider using Text Elements
 masterslider::ms_00003[role="mb-5"]
+[#thumbImages]
 === MS Slider using ThumbImages
 To give the users better control over a slideshow, sliders provide complex UI
@@ -348,6 +352,7 @@ the bottom of a slideshow. Find two examples to control a slideshow by
 .Slider using ThumbImages
 masterslider::ms_00004[role="mb-5"]
+[#thumbInfo]
 === MS Slider using ThumbInfo
 To give the users better control over a slideshow, MS Slider provides
@@ -357,6 +362,7 @@ top, or at the bottom of a slideshow.
 .Slider using ThumbInfo
 masterslider::ms_00007[role="mb-5"]
+[#partialview]
 === MS Slider using Layout partialview
 The following slider presents a slideshow that combines an MSInfo element
@@ -367,6 +373,7 @@ slide by their neighbors on the left and the right.
 .Slider using Layout partialview
 masterslider::ms_00009[role="mb-5"]
+[#aboutMasterSlider]
 === More about Master Slider
 If you're interested to learn more about MS Slider, go for the following

data/lib/starter_web/pages/public/learn/roundtrip/responsive_tables.adoc CHANGED Viewed

@@ -76,18 +76,18 @@ needs for tables viewed on desktop and mobile devices, two types of
 .Types of responsive tables
 [cols="3a,3a,6a", options="header", width="100%", role="rtable mt-4"]
 |===
-|Type |Style |Description
+|Style |Type |Description
-|R Table (J1)
 |`rtable`
+|*R Table (J1)*
 |J Table are used by J1 Theme for default. Those tables are using the
 *responsive text* feature (see link:{url-roundtrip--typography}[Typography])
 with no additional CSS classes to be applied. For smaller viewports, the text
 scales down and should fit the cells automatically. The default text size for
 J1 is `r-text-300`.
-|B Table (Bootstrap)
 |`table-responsive`
+|*B Table (Bootstrap)*
 |If adding the class `table-responsive`, it creates a responsive table based
 on Bootstrap CSS styles. The table will then scroll horizontally on small
 devices. Making any table responsive across all viewports, the additional

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

@@ -24,7 +24,7 @@ fab_menu_id:                            default
 regenerate:                             false
 permalink:                              /pages/public/learn/where_to_go/
-resources:                              [ animate, comments ]
+resources:                              [ animate ]
 resource_options:
   - attic:
       slides:
@@ -44,7 +44,11 @@ resource_options:
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
-:url-j1-jupyter-notebooks--where-to-go: /pages/public/jupyter/where-to-go/
+:url-j1--cheatsheet-template:           /pages/public/learn/cheatsheet/j1/
+:url-j1--jekyll-collections:            /pages/public/learn/bookshelf/jekyll_collections/
+:url-j1--tutorial-j1-in-a-day:          https://jekyll.one/pages/public/learn/kickstart/web_in_a_day/meet_and_greet/
+:url-j1--tutorial-learning-seo:         https://jekyll.one/pages/public/learn/kickstart/learning_seo/what_seo_is
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -57,15 +61,17 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
-Welcome to the info pages of J1 Theme. A good decision to get on that page
-first. Certainly, there is no better place to learn what J1 Theme can do
-and what pages are available to experience more.
+Welcome to the learning pages of the J1 Theme. A good decision to get on that
+page first. Certainly, there is no better place to start learning what J1 Theme
+can do and what pages are available to experience more.
 // Include sub-documents (if any) (if any)
 // -----------------------------------------------------------------------------
 The crucial first step in finding 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.
+The *Learn* section contains all you need to expirience what Jekyll and J1
+can do for your new website, for your new static web. You are welcome to spend
+some time diving into the techniques of creating modern static webs.
 Roundtrip::
 In this section, you’ll find a tour to show some of the main features of
@@ -79,41 +85,29 @@ If you're interested what J1 Theme can do, continue by walking through the
 roundtrip examples by starting an inspiring tour
 link:{url-j1-roundtrip--present-images}[from here].
-Rocketstart::
-J1 Theme is fully JAM-Stack ready. If you're interested in creating and
-deploying an amazing J1 based site on the Internet in minutes without
-installing any software locally on your PC, go for Netlify's One-Click-Deploy.
-Rocketstart took about fifteen minutes and guides you through this easy
-3-step-process. Fire your rocket now at
-link:{url-j1--rocketstart}[Rocketstart, {browser-window--new}].
-Site Development::
-The tutorial link:{url-j1--devstart}[Site Development, {browser-window--new}]
-accompanies you to learn how to set up a development environment for Jekyll
-and J1 Theme to manage and create your first website locally on your PC in
-minutes. J1 Theme comes with a built-in Web, a skeleton for a new website created
-using Jekyll. This website is called the `Starter Web`, a general-purpose
-scaffold for modifying a new site for your needs.
-J1 in a Day::
-The workshop `J1 in a Day` is a tutorial learning to create modern websites
-using _Jekyll_ and the J1 Theme. This Tutorial focuses on the basics of
-_Jekyll_ and J1, which all people need to know for a successful way to a
-modern static website. Jekyll (and JekyllOne) is quite different from classic
-Content Management Systems (CMS).
-If you would like to learn more about the use of Jekyll and J1 Theme, the
-tutorials present what you need to know:
-* The basics of modern static webs
-* Creating an awesome Site
-* Development System
-* Project Management
-* Create Content
-It sounds much, spending a whole day to get Jekyll and J1 to know. Yes, it is
-much. But it makes sense to get a full overview of what can be achieved by
-modern static websites.
-To experience what's possible today using modern websites static webs, go for
-link:{url-j1-web-in-a-day--meet-and-greet}[J1 in a Day, {browser-window--new}].
+Cheatsheet::
+Cheat sheets are concise reference guides or summaries that provide quick
+and handy information about a topic or subject. They help you to remember
+key concepts, formulas, commands, or other essential details without
+consulting extensive documentation or resources. Find convenient quick
+references for _YAML_, _Git_ and more. For example using the `j1` command
+to manage a project for J1 Template, go for the cheatsheet
+link:{url-j1--cheatsheet-template}[J1 Template, {browser-window--new}].
+Collections::
+Collections are Jekyll’s most powerful and simultaneously least understood
+feature of the generator. Collections add another possibility, or use-case,
+outside of Jekyll’s post- and page-publishing functionality. Learn more
+about collections for more powerful static websites. To learn more what
+collections are, check
+link:{url-j1--jekyll-collections}[Jekyll Collections, {browser-window--new}].
+Tutorials::
+To become more familiar with using J1, go to the tutorial section. Have
+fun experiencing what Jekyll and J1 can do. A good starting point for using
+J1 Template is
+link:{url-j1--tutorial-j1-in-a-day}[Jekll in a Day, {browser-window--new}].
+Optimizing a website for search engines (SEO) is important for success.
+Read more about SEO and how to implement working strategies for a Jekyll-based
+websites at link:{url-j1--tutorial-learning-seo}[Learning SEO, {browser-window--new}].

data/lib/starter_web/pages/public/legal/en/100_copyright.adoc CHANGED Viewed

@@ -12,8 +12,8 @@ categories:                             [ Site ]
 tags:                                   [ Copyright ]
 robots:
-  index:                                false
-  follow:                               false
+  index:                                true
+  follow:                               true
 image:
   path:                                 /assets/images/modules/attics/1920x1280/j1-starter-mockup-1.jpg

data/lib/starter_web/pages/public/legal/en/300_privacy.adoc CHANGED Viewed

@@ -11,8 +11,8 @@ categories:                             [ Site ]
 tags:                                   [ Privacy, Policy ]
 robots:
-  index:                                false
-  follow:                               false
+  index:                                true
+  follow:                               true
 image:
   path:                                 /assets/images/modules/attics/1920x1280/j1-starter-mockup-1.jpg

data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc CHANGED Viewed

@@ -11,8 +11,8 @@ categories:                             [ Site ]
 tags:                                   [ Comments, Policy ]
 robots:
-  index:                                false
-  follow:                               false
+  index:                                true
+  follow:                               true
 image:
   path:                                 /assets/images/modules/attics/1920x1280/j1-starter-mockup-1.jpg

data/lib/starter_web/pages/public/previewer/preview_bootstrap_theme.adoc CHANGED Viewed

@@ -236,7 +236,6 @@ colors. Then, customize with `.bg-*` utilities.
     </div>
   </nav>
   <nav class="navbar navbar-expand-lg navbar-light md-light">
     <div class="container-fluid">
       <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
@@ -287,8 +286,8 @@ colors. Then, customize with `.bg-*` utilities.
 [source, html]
 ----
-  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-    <div class="container-fluid">
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
+  <div class="container-fluid">
     <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
       data-bs-target="#navbarColor01" aria-controls="navbarColor01"
@@ -330,7 +329,97 @@ colors. Then, customize with `.bg-*` utilities.
       </form>
     </div>
   </div>
-  </nav>
+</nav>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
+  <div class="container-fluid">
+    <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+      data-bs-target="#navbarColor02" aria-controls="navbarColor02"
+      aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse ml-2" id="navbarColor02">
+      <ul class="navbar-nav me-auto">
+        <li class="nav-item">
+          <a class="link-no-decoration nav-link active" href="javascript:void(0)">Home
+            <span class="visually-hidden">(current)</span>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="link-no-decoration nav-link" href="javascript:void(0)">Features</a>
+        </li>
+        <li class="nav-item">
+          <a class="link-no-decoration nav-link" href="javascript:void(0)">Pricing</a>
+        </li>
+        <li class="nav-item">
+          <a class="link-no-decoration nav-link" href="javascript:void(0)">About</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="link-no-decoration nav-link dropdown-toggle" data-bs-toggle="dropdown"
+            href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <div class="dropdown-menu">
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Action</a>
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Another action</a>
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Something else here</a>
+            <div class="dropdown-divider"></div>
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Separated link</a>
+          </div>
+        </li>
+      </ul>
+      <form class="d-flex">
+        <input class="form-control mt-1" type="text" placeholder="Search">
+        <button class="btn btn-secondary btn-sm ml-3" type="submit">Search</button>
+      </form>
+    </div>
+  </div>
+</nav>
+<nav class="navbar navbar-expand-lg navbar-light md-light">
+  <div class="container-fluid">
+    <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+      data-bs-target="#navbarColor03" aria-controls="navbarColor03"
+      aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse ml-2" id="navbarColor03">
+      <ul class="navbar-nav me-auto">
+        <li class="nav-item">
+          <a class="link-no-decoration nav-link active" href="javascript:void(0)">Home
+            <span class="visually-hidden">(current)</span>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="link-no-decoration nav-link" href="javascript:void(0)">Features</a>
+        </li>
+        <li class="nav-item">
+          <a class="link-no-decoration nav-link" href="javascript:void(0)">Pricing</a>
+        </li>
+        <li class="nav-item">
+          <a class="link-no-decoration nav-link" href="javascript:void(0)">About</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="link-no-decoration nav-link dropdown-toggle" data-bs-toggle="dropdown"
+            href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <div class="dropdown-menu">
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Action</a>
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Another action</a>
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Something else here</a>
+            <div class="dropdown-divider"></div>
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Separated link</a>
+          </div>
+        </li>
+      </ul>
+      <form class="d-flex">
+        <input class="form-control mt-1" type="text" placeholder="Search">
+        <button class="btn btn-secondary btn-sm ml-3" type="submit">Search</button>
+      </form>
+    </div>
+  </div>
+</nav>
 ----
 endif::[]

data/lib/starter_web/utilsrv/_defaults/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "utls",
-  "version": "2023.2.7",
+  "version": "2023.3.0",
   "description": "J1 Theme Utility Server",
   "homepage": "https://jekyll.one",
   "author": {

data/lib/starter_web/utilsrv/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "utls",
-  "version": "2023.2.7",
+  "version": "2023.3.0",
   "description": "J1 Theme Utility Server",
   "homepage": "https://jekyll.one",
   "author": {