j1-template 2020.0.19 → 2020.0.25

data/lib/starter_web/pages/public/{learn/examples → test_pages}/floating_ad.adoc

@@ -9,6 +9,7 @@ categories:                             [ pages ]
 
 toc:                                    true
 advertising:                            true
+date:                                   2020-11-08 12:00:00
 
 permalink:                              /pages/public/learn/fad/
 regenerate:                             false
@@ -17,40 +18,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/{learn/examples → test_pages}/floating_div.adoc

@@ -9,68 +9,55 @@ categories:                             [ pages ]
 
 permalink:                              /pages/public/learn/fsb/
 regenerate:                             false
+date:                                   2020-11-08 12:00:00
 
 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/lunr_tester.adoc

@@ -0,0 +1,89 @@
+---
+title:                                  LUNR
+tagline:                                search lunr
+description:                            search lunr
+
+tags:                                   [ Page, Roundtrip ]
+index:                                  [ Template, Roundtrip, Images ]
+categories:                             [ pages ]
+
+toc:                                    true
+scrollbar:                              false
+
+permalink:                              /pages/public/tester/lunr/
+regenerate:                             true
+
+resources:                              [ lunr ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+    slides:
+      - url:                            /assets/images/images/modules/attics/banner/lunr-banner-1280x800.jpg
+        alt:                            Lunr
+#         badge:
+#           type:                       unsplash
+#           author:                     Ricardo Gomez Angel
+#           href:                       https://unsplash.com/@ripato/portfolio
+---
+
+// 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="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+//////
+== Search
+
+++++
+<!-- form action="/search" method="get">
+  <input id="search-query" type="text" name="q" placeholder="Search" autocomplete="off">
+</form -->
+
+<div class="input-group">
+  <span class="input-group-addon"><i class="mdi mdi-magnify mdi-2x" style="color:#9E9E9E"></i></span>
+  <input id="search-query" type="text" name="q" placeholder="QuickSearch" autocomplete="off" class="form-control">
+  <span class="form-clear form-clear-searcher d-none"><i class="mdi mdi-format-clear mdi-2x" style="color:#9E9E9E"></i></span>
+  <span class="input-group-addon close-search"><i class="mdi mdi-close mdi-2x" style="color:#9E9E9E"></i></span>
+</div>
+
+<section id="search-results" style="display: none"></section>
+
+<div id="search-results-container">
+{% raw %}
+<script id="search-results-template" type="text/mustache">
+  {{#docs}}
+    <article>
+      <h4 class="result-item"> <a href="{{url}}" target="_blank">{{title}} · {{tagline}}</a> </h4>
+      <p class="result-group-item-text small text-muted mt-2 mb-0">
+        <i class="mdi mdi-calendar-blank mdi-18px mr-1"></i>{{displaydate}}
+      </p>
+      <p class="result-group-item-text">{{description}}</p>
+      <p class="result-group-item-text small text-muted mb-3">
+        <i class="mdi mdi-tag mdi-18px mr-1"></i>{{#tags}} {{.}} {{/tags}}
+        <i class="mdi mdi-tag-text-outline mdi-18px mr-1 ml-2"></i>{{#categories}} {{.}} {{/categories}}
+      </p>
+    </article>
+  {{/docs}}
+</script>
+{% endraw %}
+</div>
+++++
+//////

data/lib/starter_web/pages/public/{000_nav_pagination_tester.adoc → test_pages/nav_pagination_tester.adoc}

@@ -1,5 +1,5 @@
 ---
-title:                                  Navigation
+title:                                  Navigation Tester
 tagline:                                paginator
 description:                            J1 Template Roundtrip - Present image based data
 
@@ -12,6 +12,7 @@ scrollbar:                              false
 
 permalink:                              /pages/public/tester/paginator/
 regenerate:                             false
+date:                                   2020-11-08 12:00:00
 
 resources:                              []
 resource_options:
@@ -28,40 +29,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

@@ -0,0 +1,196 @@
+---
+title:                                  Attribute Tester
+tagline:                                global attributes for pages
+description:
+
+tags:                                   [ Page, Tester ]
+index:                                  [ Template, Tester, Attribute ]
+categories:                             [ pages ]
+
+permalink:                              /pages/public/test_pages/page_attribute_tester/
+regenerate:                             false
+date:                                   2020-11-08 12:00:00
+
+toc:                                    true
+advertising:                            false
+
+resources:                              [ rouge ]
+resource_options:
+# - ssm:
+#     mode:                             menu
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.3
+      slides:
+        - url:                          /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
+          alt:                          Photo by Alice Donovan Rousel on Unsplash
+          preload:                      0
+          transitionDuration:           fast
+          resolutionRefreshRate:        500
+          badge:
+            type:                       unsplash
+            author:                     Alice Donovan Rousel
+            href:                       https://unsplash.com/@alicekat/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// 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
+// -----------------------------------------------------------------------------
+{% 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
+(commonly referred to as *BEM*) to construct resource names like
+
+* Template variables (e.g. from Liquid)
+* Asciidoc attributes
+
+BEM is a popular naming convention for classes in *HTML* and *CSS*.
+It's developed by the team at
+link:{url-wikipedia_de--yandex}[Yandex (Wikipedia), {browser-window--new}].
+It's goal is to help developers to better understand the relationship between
+the HTML and CSS in a given project intuitively without reading any documention.
+
+NOTE: For J1 Template components, classes for *HTML* and *CSS* code, the
+*standard* BEM notation of `block__element\--modifier` (double underscores
+and hyphens) is used. As __Bootstrap__ does *NOT* use BEM, all Bootstrap code
+remains unchanged for *HTML* and *CSS*.
+
+For J1 Template, this idea of writing resource names enables authors to get
+quickly an idea what type a resource is addressed (the block), and which
+element depends on a block. Modifiers finally adresses a specific resource
+out of the hierarchy given by the `block-element\--modifier` notation.
+
+NOTE: To not conflict with naming conventions for Asciidoc or Liquid,
+the BEM notation for variables and attributes is using only *hyphens*.
+An element is prepended by a single hyphen (`-`), modifiers by double
+ones (`--`).
+
+// Include table|s (local source)
+// -----------------------------------------------------------------------------
+include::{tabledir}/000_bem_specifiers.asciidoc[]
+
+NOTE: For more complex resources, modifiers can make use of *underscores*
+to express a hierarchy on a source if appreciated.
+
+J1 Template and Jekyll gives creators of Webs the freedom to use simple
+text editors to construct Web sites and write content. Because of the missing
+database, no GUI support is given. To write *and* read code fluently, a
+notation scheme can help a lot. All developers can consistently name
+components for easier communication between team members. In other words,
+BEM gives everyone on a project a declarative syntax that they can share
+so that they’re on the same page even not witten by their selves.
+
+== Examples
+
+// Include table|s (local source)
+// -----------------------------------------------------------------------------
+include::{tabledir}/000_specifier_examples.asciidoc[]
+
+endif::[]