j1-template 2020.0.17 → 2020.0.22

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

@@ -0,0 +1,195 @@
+---
+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
+
+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::[]

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>
+++++

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

@@ -0,0 +1,209 @@
+---
+title:                                  RTable Tester
+tagline:                                check responsive tables
+description:                            responsive tables
+
+tags:                                   [ Page, Tester ]
+index:                                  [ responsive, table ]
+categories:                             [ pages ]
+
+toc:                                    true
+advertising:                            false
+
+permalink:                              /pages/public/test_pages/responsive_tables/
+regenerate:                             false
+
+resources:                              [ lightbox, rtable ]
+resource_options:
+---
+
+// 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
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+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.
+
+== Table 1 (static)
+
+.Static table, NOT responsive
+[cols="1a,3a,8a", options="header", width="100%", role=mt-3"]
+|===============================================================================
+|Specifier |Example |Description
+
+|Block
+|`url` \| `image` \| `data`
+|Top level specifier. Defines the (global) resource type, e.g. an URL, image
+or a dataset
+
+|Element
+|`url-j1`
+|Specifier to express the dependency upon the block, e.g. a site prefix like
+`https://jekyll.one`
+
+|Modifier
+|`url-j1\--home` \| `url-j1\--learn_present_images`
+|Specifier that adresses a specific source: e.g. web page like
+`https://jekyll.one/` \| `https://jekyll.one/pages/public/learn/roundtrip/present_images`
+
+|===============================================================================
+
+== Table 2 (responsive)
+
+.BEM specifiers for J1 Template __variables__  (responsive)
+[cols="1a,4a,7a", options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Specifier |Example |Description
+
+|Block
+|`url` \| `image` \| `data`
+|Top level specifier. Defines the (global) resource type, e.g. an URL, image
+or a dataset
+
+|Element
+|`url-j1`
+|Specifier to express the dependency upon the block, e.g. a site prefix like
+`https://jekyll.one`
+
+|Modifier
+|`url-j1\--home` \| `url-j1\--learn_present_images`
+|Specifier that adresses a specific source: e.g. web page like
+`https://jekyll.one/` \| `https://jekyll.one/pages/public/learn/roundtrip/present_images`
+
+|===============================================================================
+
+== Table 3  (responsive)
+
+.Examples for attributes  (responsive)
+[cols="1a,4a,7a", options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Tag |BEM |Value\|Example
+
+|url
+|`url-j1--home`
+|{url-j1--home} {char-emdash}
+link:{url-j1--home}[Jekyll One {middot} Home, {browser-window--new}]
+[source, adoc, role="noclip"]
+----
+link:{url-j1--home}[Jekyll One {middot} Home, {browser-window--new}]
+----
+
+|tag
+|`browser-window--new`
+|{browser-window--new}
+[source, adoc, role="noclip"]
+----
+link:{url}[link title, {browser-window--new}]
+----
+
+|tag
+|`icon-battery--quarter`
+|icon:battery-quarter[role="md-blue"]
+[source, adoc, role="noclip"]
+----
+icon:battery-quarter[role="md-blue"]
+----
+
+|tag
+|`figure-caption--text`
+|{figure-caption--text}
+[source, adoc, role="noclip"]
+----
+.{figure-caption--text} image name
+----
+
+|image
+|`image-attic--cookies`
+|{image-attic--cookies}
+[source, adoc, role="noclip"]
+----
+image:{image-attic--cookies}[image title]
+----
+
+|data
+|`data-lightbox--example`
+|{data-lightbox--example}
+[source, adoc, role="noclip"]
+----
+lightbox::lightbox--example[600, {data-lightbox--example}]
+----
+
+|===============================================================================
+
+/////
+== Table 4  (static)
+
+.Examples for attributes  (responsive)
+[cols="1a,4a,7a", options="header", width="100%", role="mt-3"]
+|===============================================================================
+|Tag |BEM |Value\|Example
+
+|url
+|`url-j1--home`
+|{url-j1--home} {char-emdash}
+link:{url-j1--home}[Jekyll One {middot} Home, {browser-window--new}]
+[source, adoc, role="noclip"]
+----
+link:{url-j1--home}[Jekyll One {middot} Home, {browser-window--new}]
+----
+
+|tag
+|`browser-window--new`
+|{browser-window--new}
+[source, adoc, role="noclip"]
+----
+link:{url}[link title, {browser-window--new}]
+----
+
+|tag
+|`icon-battery--quarter`
+|icon:battery-quarter[role="md-blue"]
+[source, adoc, role="noclip"]
+----
+icon:battery-quarter[role="md-blue"]
+----
+
+|tag
+|`figure-caption--text`
+|{figure-caption--text}
+[source, adoc, role="noclip"]
+----
+.{figure-caption--text} image name
+----
+
+|image
+|`image-attic--cookies`
+|{image-attic--cookies}
+[source, adoc, role="noclip"]
+----
+image:{image-attic--cookies}[image title]
+----
+
+|data
+|`data-lightbox--example`
+|{data-lightbox--example}
+[source, adoc, role="noclip"]
+----
+lightbox::lightbox--example[600, {data-lightbox--example}]
+----
+
+|===============================================================================
+
+/////