j1-template 2020.0.16 → 2020.0.21

data/lib/starter_web/pages/public/previewer/iframer.adoc

@@ -29,13 +29,8 @@ resource_options:
             href:                       https://unsplash.com/@jruscello
 ---
 
-// Enable the Liquid Preprocessor
-//
-:page-liquid:
-
-// Set other global page attributes here
-// -----------------------------------------------------------------------------
-
+// Page content
+// =============================================================================
 
 == Automagic iFrame
 

data/lib/starter_web/pages/public/previewer/{000_includes → includes}/attributes.asciidoc

@@ -100,17 +100,25 @@ tag::data[]
 
 end::data[]
 
-// Product - Document (e.g release) information
+// DOCUMENTS, local document resources
 // -----------------------------------------------------------------------------
-tag::product_info[]
-:license:                                         MIT License
-:revdate:                                         2018
-:revnumber:                                       1.0.0
-end::product_info[]
+tag::documents[]
+end::documents[]
 
 
-// Author - Author information
+// TABLES, local table resources
+// -----------------------------------------------------------------------------
+tag::tables[]
+end::tables[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products[]
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
 // -----------------------------------------------------------------------------
 tag::authors[]
-:uri-author-juergen-adams                         https://jekyll.one
 end::authors[]

data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc

@@ -12,7 +12,7 @@ regenerate:                             false
 
 scrollbar:                              false
 
-resources:                              []
+resources:                              [ clipboard, rouge, mdi_previewer ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -23,34 +23,21 @@ resource_options:
           alt:                          icon-fonts-1920x1280-bw
 ---
 
+// Page Initializer
+// =============================================================================
 // Enable the Liquid Preprocessor
-// -----------------------------------------------------------------------------
 :page-liquid:
 
-// Set other global page attributes here
-// -----------------------------------------------------------------------------
-
-// Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
-
-// Initialize entry document paths
+//  Load Liquid procedures
 // -----------------------------------------------------------------------------
-{% include {{set_env_entry_document}} init_folders=all %}
-
-// Load tags and urls
-// -----------------------------------------------------------------------------
-include::{includedir}/attributes.asciidoc[tag=tags]
-include::{includedir}/attributes.asciidoc[tag=urls]
-include::{includedir}/attributes.asciidoc[tag=data]
-
-// Additional Asciidoc page attributes goes here
-// -----------------------------------------------------------------------------
-
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Include documents
+// Load page attributes (all)
 // -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
 
+// Page content
+// =============================================================================
 
 == Material Design Icons
 

data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc

@@ -1,18 +1,18 @@
 ---
-title:                                  Twitter Emoji Previewer
-tagline:                                search and select twitter emoji's
-description:                            Twitter Emoji Icons V1 Preview Page for J1 Template
+title:                                  Emoji Previewer
+tagline:                                search and select twitter emojis
+description:                            Twitter Emoji Icons V1 Preview
 
-tags:                                   [ Twitter, Emoji, Icons, Preview ]
-index:                                  []
-categories:                             [ pages, manuals ]
+tags:                                   [ Preview, Emoji ]
+index:                                  [ Twitter, Emoji, Icons, Previewer ]
+categories:                             [ pages, Previewer ]
 
 permalink:                              /pages/public/previewer/twitter_emoji/
-regenerate:                             true
+regenerate:                             false
 
 scrollbar:                              false
 
-resources:                              [ twemoji ]
+resources:                              [ twemoji, twemoji_picker ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -20,41 +20,32 @@ resource_options:
       opacity:                          0.5
       slides:
         - url:                          /assets/images/pages/roundtrip/emojies-1920x1280-bw.jpg
-          alt:                          Photo by Fausto García on Unsplash
+          alt:                          Photo by Fausto Garcia on Unsplash
           badge:
             type:                       unsplash
-            author:                     Fausto García
+            author:                     Fausto Garcia
             href:                       https://unsplash.com/@faustogarmen/portfolio
 ---
 
+// Page Initializer
+// =============================================================================
 // Enable the Liquid Preprocessor
-// -----------------------------------------------------------------------------
 :page-liquid:
 
-// Set other global page attributes here
-// -----------------------------------------------------------------------------
-
-// Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
-
-// Initialize entry document paths
+//  Load Liquid procedures
 // -----------------------------------------------------------------------------
-{% include {{set_env_entry_document}} init_folders=all %}
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Load tags and urls
+// Load page attributes (all)
 // -----------------------------------------------------------------------------
-include::{includedir}/attributes.asciidoc[tag=tags]
-include::{includedir}/attributes.asciidoc[tag=urls]
-include::{includedir}/attributes.asciidoc[tag=data]
+{% include {{load_attributes}} scope="all" %}
 
-// Additional Asciidoc page attributes goes here
+// Additional Asciidoc page attributes
 // -----------------------------------------------------------------------------
 :jollygoodcode-emoji:                   https://github.com/jollygoodcode/twemoji
 
-// Include documents
-// -----------------------------------------------------------------------------
-
+// Page content
+// =============================================================================
 
 == Twitter Emoji's
 
@@ -176,7 +167,9 @@ Simple like that!
 <div id="picker" class="mt-3 mb-5">
   <textarea id="twemoji-picker" class="form-control"></textarea>
 </div>
-
+<div class="paragraph mt-5">
+  <p style="color: transparent;"> dummy-text</p>
+</div>
 <script>
   $('#twemoji-picker').twemojiPicker({
     init: '',

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

@@ -51,7 +51,7 @@ resource_options:
 ++++
     <div id="adblock" class="row no-gutters adblock">
       <div class="doc-example mb-3">
-        <button type="button" class="btn btn-primary btn-raised">Primary</button>
+        <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>

data/lib/starter_web/pages/public/test_pages/includes/attributes.asciidoc

@@ -0,0 +1,47 @@
+// ~/document_base_folder/includes/attributes.asciidoc
+// Local Asciidoc attribute includes
+// -----------------------------------------------------------------------------
+
+// URL, local references to internal|external web links
+// -----------------------------------------------------------------------------
+tag::urls[]
+
+:url-local--source:                               https://example.com/home
+:url-wikipedia_de--yandex:                        https://de.wikipedia.org/wiki/Yandex
+
+end::urls[]
+
+
+// TAGS, local Asciidoc attributes (variables)
+// -----------------------------------------------------------------------------
+tag::tags[]
+:documents-dir:                                   documents
+:tables-dir:                                      tables
+:images-dir--pages:                               images/pages
+end::tags[]
+
+
+// IMAGES, local references to images
+// -----------------------------------------------------------------------------
+tag::images[]
+:image-wikipedia--minneapolis:                    {images-dir--pages}/minneapolis.1200x400.jpg
+end::images[]
+
+
+// DATA, local references to data elements (asciidoc extensions)
+// -----------------------------------------------------------------------------
+tag::data[]
+:data-wikipedia--minneapolis:                     "{images-dir--pages}/minneapolis.1200x400.jpg, local image"
+end::data[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products[]
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
+// -----------------------------------------------------------------------------
+tag::authors[]
+end::authors[]

data/lib/starter_web/pages/public/test_pages/includes/documents/100_gistblock.asciidoc

@@ -0,0 +1,27 @@
+== Github Gist
+
+Code snippets may helpful to support your readers for existing code examples.
+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"]:
+
+//[source, adoc]
+----
+.Gist title
+gist::git_address[] <1>
+----
+<1> For `git_address`, {github-gist-home}[, window="_blank"] is prepended automatically
+
+.Example of a gist block
+----
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+----
+
+[.result]
+====
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+====

data/lib/starter_web/pages/public/test_pages/includes/tables/000_bem_specifiers.asciidoc

@@ -0,0 +1,22 @@
+
+.BEM specifiers for J1 Template __variables__
+[cols="1a,3a,8a", options="header", width="100%", role="table-responsive-stacked-lg 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`
+
+|===============================================================================

data/lib/starter_web/pages/public/test_pages/includes/tables/000_specifier_examples.asciidoc

@@ -0,0 +1,56 @@
+
+.Examples for attributes
+[cols="1a,4a,7a", options="header", width="100%", role="table-responsive-stacked-lg 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}]
+----
+
+|===============================================================================

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

@@ -0,0 +1,297 @@
+---
+title:                                  Navigation Tester
+tagline:                                paginator
+description:                            J1 Template Roundtrip - Present image based data
+
+tags:                                   [ Page, Roundtrip ]
+index:                                  [ Template, Roundtrip, Images ]
+categories:                             [ pages ]
+
+toc:                                    true
+scrollbar:                              false
+
+permalink:                              /pages/public/tester/paginator/
+regenerate:                             false
+
+resources:                              []
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+#     slides:
+#       - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+#         alt:                          Photo by Ricardo Gomez Angel on Unsplash
+#         badge:
+#           type:                       unsplash
+#           author:                     Ricardo Gomez Angel
+#           href:                       https://unsplash.com/@ripato/portfolio
+---
+
+// Enable the Liquid Preprocessor
+// -----------------------------------------------------------------------------
+:page-liquid:
+
+// Set other global page attributes here
+// -----------------------------------------------------------------------------
+//:my-asciidoc-attribute:
+
+//  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]
+
+// Set local page attributes
+// -----------------------------------------------------------------------------
+// :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+
+
+== Paginator
+
+lorem:sentences[3]
+
+++++
+<div class="mb-5">
+  <!-- Pagination #15 -->
+  <nav class="text-left" aria-label="Page Navigation">
+    <ul class="list-inline">
+      <li class="list-inline-item">
+        <a class="u-pagination-v1__item g-brd-around g-brd-2 g-brd-gray-dark-v2 g-color-gray-dark-v2 g-bg-gray-dark-v2--hover g-color-white--hover g-brd-gray-dark-v2--hover g-rounded-3 g-pa-4-13" href="#" aria-label="Previous">
+          <span aria-hidden="true">
+            <i class="fa fa-angle-left g-mr-5"></i>
+            Previous
+          </span>
+          <span class="sr-only">Previous</span>
+        </a>
+      </li>
+      <li class="list-inline-item">
+        <a class="u-pagination-v1__item g-brd-around g-brd-2 g-brd-gray-dark-v2 g-color-gray-dark-v2 g-bg-gray-dark-v2--hover g-color-white--hover g-brd-gray-dark-v2--hover g-rounded-3 g-pa-4-13" href="#" aria-label="Next">
+          <span aria-hidden="true">
+            Next
+            <i class="fa fa-angle-right g-ml-5"></i>
+          </span>
+          <span class="sr-only">Next</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <!-- End Pagination #15 -->
+</div>
+++++
+
+++++
+<div class="mb-5">
+  <!-- Pagination #08 -->
+  <nav class="text-left" aria-label="Page Navigation">
+    <ul class="list-inline">
+      <li class="list-inline-item">
+        <a class="u-pagination-v1__item u-pagination-v1-2 g-pa-7-16" href="#" aria-label="Previous">
+          <span aria-hidden="true">
+            <i class="fa fa-angle-left g-mr-5"></i>
+            Previous
+          </span>
+          <span class="sr-only">Previous</span>
+        </a>
+      </li>
+      <li class="list-inline-item g-hidden-sm-down">
+        <a class="u-pagination-v1__item u-pagination-v1-2 g-pa-7-14" href="#">1</a>
+      </li>
+      <li class="list-inline-item g-hidden-sm-down">
+        <a class="u-pagination-v1__item u-pagination-v1-2 u-pagination-v1-2--active g-pa-7-14" href="#">2</a>
+      </li>
+      <li class="list-inline-item g-hidden-sm-down">
+        <a class="u-pagination-v1__item u-pagination-v1-2 g-pa-7-14" href="#">3</a>
+      </li>
+      <li class="list-inline-item g-hidden-sm-down">
+        <a class="g-pa-7-14">...</a>
+      </li>
+      <li class="list-inline-item g-hidden-sm-down">
+        <a class="u-pagination-v1__item u-pagination-v1-2 g-pa-7-14" href="#">80</a>
+      </li>
+      <li class="list-inline-item">
+        <a class="u-pagination-v1__item u-pagination-v1-2 g-pa-7-16" href="#" aria-label="Next">
+          <span aria-hidden="true">
+            Next
+            <i class="fa fa-angle-right g-ml-5"></i>
+          </span>
+          <span class="sr-only">Next</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <!-- End Pagination #08 -->
+</div>
+++++
+
+++++
+<nav class="text-left mb-5" aria-label="Page Navigation">
+  <ul class="list-inline">
+    <li class="list-inline-item">
+      <a class="u-pagination-v1__item u-pagination-v1-1 u-pagination-v1__item--disabled g-pa-12-21" href="#" aria-label="Previous">
+        <span aria-hidden="true">
+          <i class="fa fa-angle-left g-mr-5"></i>
+          Previous
+        </span>
+        <span class="sr-only">Previous</span>
+      </a>
+    </li>
+    <li class="list-inline-item g-hidden-sm-down">
+      <a class="u-pagination-v1__item u-pagination-v1-1 u-pagination-v1-1--active g-pa-12-19" href="#">1</a>
+    </li>
+    <li class="list-inline-item g-hidden-sm-down">
+      <a class="u-pagination-v1__item u-pagination-v1-1 g-pa-12-19" href="#">2</a>
+    </li>
+    <li class="list-inline-item g-hidden-sm-down">
+      <a class="u-pagination-v1__item u-pagination-v1-1 g-pa-12-19" href="#">3</a>
+    </li>
+    <li class="list-inline-item g-hidden-sm-down">
+      <span class="g-pa-12-19">...</span>
+    </li>
+    <li class="list-inline-item g-hidden-sm-down">
+      <a class="u-pagination-v1__item u-pagination-v1-1 g-pa-12-19" href="#">15</a>
+    </li>
+    <li class="list-inline-item">
+      <a class="u-pagination-v1__item u-pagination-v1-1 g-pa-12-21" href="#" aria-label="Next">
+        <span aria-hidden="true">
+          Next
+          <i class="fa fa-angle-right g-ml-5"></i>
+        </span>
+        <span class="sr-only">Next</span>
+      </a>
+    </li>
+  </ul>
+</nav>
+++++
+
+== Bootstrap Paginations
+
+Pagination links indicate a series of related content exists across
+multiple pages. Typically these are used where a multi-page approach
+to long lists of content improves general performance, such as in
+search results or inboxes.
+
+++++
+<div class="shortcode-html">
+  <!-- Pagination Default -->
+  <nav aria-label="Page navigation">
+    <ul class="pagination">
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Previous">
+          <span aria-hidden="true">«</span>
+          <span class="sr-only">Previous</span>
+        </a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">1</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">2</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">3</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">4</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">5</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next">
+          <span aria-hidden="true">»</span>
+          <span class="sr-only">Next</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <!-- End Pagination Default -->
+</div>
+++++
+
+++++
+<div class="shortcode-html">
+  <!-- Pagination States -->
+  <nav aria-label="...">
+    <ul class="pagination">
+      <li class="page-item disabled">
+        <a class="page-link" href="#" tabindex="-1" aria-label="Previous">
+          <span aria-hidden="true">«</span>
+          <span class="sr-only">Previous</span>
+        </a>
+      </li>
+      <li class="page-item active">
+        <a class="page-link" href="#">1
+          <span class="sr-only">(current)</span>
+        </a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">2</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">3</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">4</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">5</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next">
+          <span aria-hidden="true">»</span>
+          <span class="sr-only">Next</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <!-- End Pagination States -->
+</div>
+++++
+
+++++
+<div class="shortcode-html">
+  <!-- Pagination Large -->
+  <nav aria-label="...">
+    <ul class="pagination pagination-lg">
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Previous">
+          <span aria-hidden="true">«</span>
+          <span class="sr-only">Previous</span>
+        </a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">1</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">2</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#">3</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next">
+          <span aria-hidden="true">»</span>
+          <span class="sr-only">Next</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <!-- End Pagination Large -->
+</div>
+++++