j1-template 2020.0.21 → 2020.0.22

data/lib/starter_web/pages/public/test_pages/floating_ad.adoc

@@ -17,40 +17,26 @@ resources:                              [ lightbox ]
 resource_options:
 ---
 
+// Page Initializer
+// =============================================================================
 // Enable the Liquid Preprocessor
-// -----------------------------------------------------------------------------
 :page-liquid:
 
-
-// Set other global page attributes here
+// Set page (local) attributes here
 // -----------------------------------------------------------------------------
-//:my-asciidoc-attribute:
+// :page--attr:                         <attr-value>
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
-{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
-
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Initialize entry document environmental attributes
+// Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{set_env_entry_document}} %}
+{% include {{load_attributes}} scope="none" %}
 
-// Load tag, url and data attributes
-// -----------------------------------------------------------------------------
-// include::{includedir}/attributes.asciidoc[tag=tags]
-// include::{includedir}/attributes.asciidoc[tag=urls]
-// include::{includedir}/attributes.asciidoc[tag=data]
-
-// Set local page attributes
-// -----------------------------------------------------------------------------
-// :images-dir:                         {imagesdir}/path/to/page/images
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
 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.

data/lib/starter_web/pages/public/test_pages/floating_div.adoc

@@ -14,63 +14,49 @@ resources:                              [ lightbox ]
 resource_options:
 ---
 
+// Page Initializer
+// =============================================================================
 // Enable the Liquid Preprocessor
-// -----------------------------------------------------------------------------
 :page-liquid:
 
-
-// Set other global page attributes here
+// Set page (local) attributes here
 // -----------------------------------------------------------------------------
-//:my-asciidoc-attribute:
+// :page--attr:                         <attr-value>
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
-{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
-
-
-// Initialize entry document environmental attributes
-// -----------------------------------------------------------------------------
-{% include {{set_env_entry_document}} %}
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Load tag, url and data attributes
+// Load page attributes
 // -----------------------------------------------------------------------------
-// include::{includedir}/attributes.asciidoc[tag=tags]
-// include::{includedir}/attributes.asciidoc[tag=urls]
-// include::{includedir}/attributes.asciidoc[tag=data]
+{% include {{load_attributes}} scope="none" %}
 
-// Set local page attributes
-// -----------------------------------------------------------------------------
-// :images-dir:                         {imagesdir}/path/to/page/images
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
 ++++
-    <div id="adblock" class="row no-gutters adblock">
-      <div class="doc-example mb-3">
-        <button type="button" class="btn btn-secondary btn-raised">Primary</button>
-        <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
-        <button type="button" class="btn btn-success btn-raised">Success</button>
-        <button type="button" class="btn btn-info btn-raised">Info</button>
-        <button type="button" class="btn btn-warning btn-raised">Warning</button>
-        <button type="button" class="btn btn-danger btn-raised">Danger</button>
-        <button type="button" class="btn btn-link btn-raised">Link</button>
-      </div>
+  <div id="adblock" class="row no-gutters adblock">
+    <div class="doc-example mb-3">
+      <button type="button" class="btn btn-secondary btn-raised">Primary</button>
+      <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
+      <button type="button" class="btn btn-success btn-raised">Success</button>
+      <button type="button" class="btn btn-info btn-raised">Info</button>
+      <button type="button" class="btn btn-warning btn-raised">Warning</button>
+      <button type="button" class="btn btn-danger btn-raised">Danger</button>
+      <button type="button" class="btn btn-link btn-raised">Link</button>
     </div>
+  </div>
 ++++
 
 ++++
-<div class="">
-  <div class="floating-div">
-    <p>This "floating div" could be a form, a call to action, an ad,
-      or whatever other content you want to float in sidebar as the user
-      scrolls up and down the page.
-    </p>
+  <div class="">
+    <div class="floating-div">
+      <p>This "floating div" could be a form, a call to action, an ad,
+        or whatever other content you want to float in sidebar as the user
+        scrolls up and down the page.
+      </p>
+    </div>
   </div>
-</div>
 ++++
 
 Welcome to the pages of J1 Template. If your here first time,

data/lib/starter_web/pages/public/test_pages/nav_pagination_tester.adoc

@@ -28,40 +28,26 @@ resource_options:
 #           href:                       https://unsplash.com/@ripato/portfolio
 ---
 
+// Page Initializer
+// =============================================================================
 // Enable the Liquid Preprocessor
-// -----------------------------------------------------------------------------
 :page-liquid:
 
-// Set other global page attributes here
+// Set page (local) attributes here
 // -----------------------------------------------------------------------------
-//:my-asciidoc-attribute:
+// :page--attr:                         <attr-value>
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
-{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
-
-// Initialize entry document environmental attributes
-// -----------------------------------------------------------------------------
-{% include {{set_env_entry_document}} %}
-
-// Load tag, url and data attributes
-// -----------------------------------------------------------------------------
-// include::{includedir}/attributes.asciidoc[tag=tags]
-// include::{includedir}/attributes.asciidoc[tag=urls]
-// include::{includedir}/attributes.asciidoc[tag=data]
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Set local page attributes
+// Load page attributes
 // -----------------------------------------------------------------------------
-// :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+{% include {{load_attributes}} scope="none" %}
 
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
-
 == Paginator
 
 lorem:sentences[3]

data/lib/starter_web/pages/public/test_pages/page_attribute_tester.adoc

@@ -13,7 +13,7 @@ regenerate:                             false
 toc:                                    true
 advertising:                            false
 
-resources:                              []
+resources:                              [ rouge ]
 resource_options:
 # - ssm:
 #     mode:                             menu
@@ -38,17 +38,110 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+:debug:                                 true
+:content:                               false
+
 //  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="global" %}
+
 
 // Page content
 // =============================================================================
+ifeval::[{debug} == true]
+== Notes
+
+The Liquid preprocessor not applied to included AsciiDoc files by the
+*jekyll-asciidoc* plugin.
+
+See::
+* link:{url-asciidoctor-plugin--issue_166}[Plugin {char-middot} jekyll-asciidoc {char-middot} issue #166, {browser-window--new}] +
+* link:{url__asciidoctor-plugin--issue_166}[Plugin {char-middot} jekyll-asciidoc {char-middot} issue #166, {browser-window--new}]
+
+Comments::
+*mojavelinux* commented on 3 Oct 2017
+
+[source, text, role="mb-5"]
+----
+The problem is that the liquid filter is applied to the raw source, before
+the AsciiDoc plugin gets involved. That step doesn't know anything about
+AsciiDoc includes, so it only looks at the flat source. Then Asciidoctor
+comes in and converts the content. Only then is the include file folded in,
+but Asciidoctor doesn't know anything about liquid. That's why the liquid
+tags are not processed in the include file.
+
+There was never a test for this scenario, which is why it got overlooked.
+
+In order to solve this, we'd need to introduce a custom IncludeProcessor
+that applies the liquid filter on the included content. At the moment,
+that has side effects, so it needs to be handled carefully.
+----
+
+== Variables
+
+// Include table|s (global source)
+// -----------------------------------------------------------------------------
+include::{table-template--variables}[]
+
+.Jekyll variables (Liquid)
+[cols="3,3a,6a, options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Name |Value |Description
 
+|`page.path`
+|{{ page.path }}
+|The path to the raw post or page. Example usage: Linking back to the page
+or post's source on GitHub. This can be overridden in the `YAML Front Matter`.
+
+|`site.collections_dir`
+|{{ site.collections_dir }}
+|lorem:sentences[1]
+
+|`page.images.dir`
+|{{ page.images.dir }}
+|Image path set pagewise. See FRONTMATTER defaults in `_config.yml` for the
+images path specified by: `images.dir` for specific page *type*. See the
+example below for a page of type *pages*.
+[source, yaml]
+----
+defaults:
+  - scope:
+      path:          pages
+      type:          pages
+
+    values:
+      images:
+        dir:        /assets/images/pages
+----
+
+|`page-imagesdir`
+|{{ page-imagesdir }}
+| Images path set in the page by `:page-imagesdir:`.
+
+|`template`
+|{{ site.template.name }}
+|Name of the template used for rendering a page. Settings are taken from
+sitewide configuration defined by `_config.yml`.
+
+|`includedir`
+|{{ includedir }}
+|lorem:sentences[1]
+
+|===============================================================================
+
+== MIT license
+
+include::{docs-licenses--mit}[]
+
+endif::[]
+
+ifeval::[{content} == true]
 == BEM Notation
 
 J1 Template is using the **B**lock, **E**lement, **M**odifier methodology
@@ -78,7 +171,7 @@ the BEM notation for variables and attributes is using only *hyphens*.
 An element is prepended by a single hyphen (`-`), modifiers by double
 ones (`--`).
 
-// Include tables
+// Include table|s (local source)
 // -----------------------------------------------------------------------------
 include::{tabledir}/000_bem_specifiers.asciidoc[]
 
@@ -95,9 +188,8 @@ so that they’re on the same page even not witten by their selves.
 
 == Examples
 
-Following attributes are loaded from *global* attributes file
-*~/source/includes/attributes.asciidoc*.
-
-// Include tables
+// Include table|s (local source)
 // -----------------------------------------------------------------------------
 include::{tabledir}/000_specifier_examples.asciidoc[]
+
+endif::[]

data/lib/starter_web/pages/public/test_pages/responsive_images.adoc

@@ -0,0 +1,212 @@
+---
+title:                                  RImages Tester
+tagline:                                check responsive images
+description:                            responsive images
+
+tags:                                   [ Page, Tester ]
+index:                                  [ responsive, table ]
+categories:                             [ pages ]
+
+toc:                                    true
+advertising:                            false
+
+#image:                                  /assets/images/modules/attics/cookies-1920x1200-bw.jpg
+image:                                 /assets/images/collections/blog/featured/what-is-a-baseurl.jpg
+
+permalink:                              /pages/public/test_pages/responsive_images/
+regenerate:                             false
+
+resources:                              [ lightbox ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/banner/jekyll.1200x600-bw.jpg
+          alt:                          jekyll.1200x600-bw.jpg
+---
+
+// Page Initializer
+// =============================================================================
+// 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
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="none" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Creating a design for responsive tables is challenging. The approch used by
+J1 Template is based on pure CSS on top of the classic Bootstrap styles for
+simplicity and portability to be viewed best on all devices and browsers.
+
+See:
+
+* https://jsfiddle.net/huypn/pcwudrmc/25813/[jsfiddle]
+
+== Image
+/////
+[role="img-wrap ratio-4-3 mb-3"]
+image::{{page.image}}[{{page.title}}]
+/////
+
+++++
+<section id="home_news_panel" class="mt-3 mr-5 mb-3 ml-3"><div class="container">
+  <!-- Heading -->
+  <div class="row">
+    <div class="">
+      <h1 class="g-font-weight-500 mb-0">Creators Blog</h1>
+      <p class="tagline mb-0"><b>latest news</b></p>
+      <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
+    </div>
+    <p class="">Explore the blog and find some interesting articles around Jekyll and website creation processes in general. And this blog is an excellent example how J1 and Jekyll can be used for blogging. <br>
+       Have fun!
+    </p>
+  </div>
+  <!-- End Heading -->
+  <!-- Recent posts -->
+  <div class="card-deck">
+    <!-- Post -->
+    <article class="card raised-z5 mb-3">
+      <img class="img-fluid g-height-200" src="/assets/images/modules/attics/katie-moum-1920x1280.jpg" alt="Welcome">
+      <h3 class="card-header bg-primary notoc">Welcome</h3>
+      <!-- Body|Excerpt -->
+      <div class="card-body r-text-300">
+        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 Goldberg machine to manage content.   All ...
+      </div>
+      <!-- End Body|Excerpt -->
+      <div class="card-footer r-text-200">
+        <div class="text-muted r-text-200">
+          <i class="mdi mdi-calendar-blank mr-1"></i>
+          2019 August,  1
+        </div>
+        <a class="card-link md-blue font-weight-bold g-font-size-12 text-uppercase" href="/posts/public/featured/2019/08/01/welcome-to-j1-template/">
+          Read · jekyll for everyone
+        </a>
+      </div>
+    </article>
+    <!-- End Post -->
+    <!-- Calculate 'column setters' to manage BS break points for 'responsive' card deck (rcard-deck) -->
+    <!-- Add 'column setters' for BS break points -->
+    <div class="w-100 d-none d-sm-block d-md-none"> <!-- break on sm --> </div>
+    <!-- Post -->
+    <article class="card raised-z5 mb-3">
+      <img class="img-fluid g-height-200" src="/assets/images/modules/attics/cookies-1920x1200-bw.jpg" alt="Cookies">
+      <h3 class="card-header bg-primary notoc">Cookies</h3>
+      <!-- Body|Excerpt -->
+      <div class="card-body r-text-300">
+        Is it needed for vistors to know what cookies are all about?   Not first place. Cookies are widely used. All users visting web sites are bothered all the time to accept on cookies. Because cookies are used that often. For good reasons - but for ...
+      </div>
+      <!-- End Body|Excerpt -->
+      <div class="card-footer r-text-200">
+        <div class="text-muted r-text-200">
+          <i class="mdi mdi-calendar-blank mr-1"></i>
+          2019 June,  1
+        </div>
+        <a class="card-link md-blue font-weight-bold g-font-size-12 text-uppercase" href="/posts/public/featured/2019/06/01/about-cookies/">
+          Read · good to know
+        </a>
+      </div>
+    </article>
+    <!-- End Post -->
+    <!-- Calculate 'column setters' to manage BS break points for 'responsive' card deck (rcard-deck) -->
+    <!-- Add 'column setters' for BS break points -->
+    <div class="w-100 d-none d-sm-block d-md-none"> <!-- break on sm --> </div>
+    <div class="w-100 d-none d-md-block d-lg-none"> <!-- break on md --> </div>
+    <!-- Post -->
+    <article class="card raised-z5 mb-3">
+      <img class="img-fluid g-height-200" src="/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg" alt="Site generators">
+      <h3 class="card-header bg-primary notoc">Site generators</h3>
+      <!-- Body|Excerpt -->
+      <div class="card-body r-text-300">
+        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 OpenSource projects, in many ...
+      </div>
+      <!-- End Body|Excerpt -->
+      <div class="card-footer r-text-200">
+        <div class="text-muted r-text-200">
+          <i class="mdi mdi-calendar-blank mr-1"></i>
+          2019 May,  1
+        </div>
+        <a class="card-link md-blue font-weight-bold g-font-size-12 text-uppercase" href="/posts/public/featured/2019/05/01/top-open-source-static-site-generators/">
+          Read · OpenSource tools
+        </a>
+      </div>
+    </article>
+    <!-- End Post -->
+    <!-- Calculate 'column setters' to manage BS break points for 'responsive' card deck (rcard-deck) -->
+    <!-- Add 'column setters' for BS break points -->
+    <div class="w-100 d-none d-sm-block d-md-none"> <!-- break on sm --> </div>
+    <div class="w-100 d-none d-lg-block d-xl-none"> <!-- break on lg --> </div>
+    <div class="w-100 d-none d-xl-block">
+      <!-- break on xl --> </div>
+  </div>
+  <!-- End recent posts -->
+</div></section>
+
+<div class="row">
+  <div class="col-md-3">
+    <div class="img-wrap ratio-4-3">
+      <div class="img-content">
+          <img src="https://picsum.photos/200" />
+      </div>
+    </div>
+  </div>
+</div>
+
+<h2>Block-level Elements</h2>
+<p>Or, if you'd like, you can also attach Backstretch to another block level element on the page.</p>
+<div id="demo">
+  <div><p>The background image on this element was set using Backstretch.</p></div>
+</div>
+
+<script>
+  $("#demo").backstretch("{{page.image}}");
+  $(".img-fluid").backstretch();
+</script>
+++++
+
+++++
+<style>
+.img-wrap {
+	 position: relative;
+}
+ .img-wrap .img-content {
+	 position: absolute;
+	 top: 0;
+	 bottom: 0;
+	 left: 0;
+	 right: 0;
+	 display: flex;
+	 align-items: center;
+	 justify-content: center;
+}
+ .img-wrap .img-content > img {
+	 max-width: 100%;
+	 max-height: 100%;
+	 width: 100%;
+}
+ .img-wrap.ratio-4-3 {
+	 padding-top: 75%;
+}
+ .img-wrap.ratio-16-9 {
+	 padding-top: 56.25%;
+}
+ .img-wrap.ratio-3-2 {
+	 padding-top: 66.66%;
+}
+ .img-wrap.ratio-8-5 {
+	 padding-top: 62.5%;
+}
+</style>
+++++