j1-template 2020.0.19 → 2020.0.25

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

@@ -1,17 +1,22 @@
 ---
 title:                                  Framer
 tagline:                                automagic iframes
-description:                            Test page for J1 module framer
+date:                                   2020-11-08 12:00:00
+description: >
+                                        Test page for J1 module framer. Framer enables the automatic
+                                        resizing of the height and width of both same and cross domain
+                                        iFrames to fit their contained content. It provides a range of
+                                        features to address the most common issues with using HTML iFrames.
 
-tags:                                   [ App, Previewer ]
-index:                                  [ Start, Template, Web, Day, Jekyll ]
-categories:                             [ pages ]
+tags:                                   [ HTML, iframe ]
+categories:                             [ App, Previewer ]
+
+toc:                                    false
 
 permalink:                              /pages/public/iframer/
 regenerate:                             false
-toc:                                    false
 
-resources:                             [ iframe_resizer ]
+resources:                              [ framer, fam ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -29,13 +34,8 @@ resource_options:
             href:                       https://unsplash.com/@jruscello
 ---
 
-// Enable the Liquid Preprocessor
-//
-:page-liquid:
-
-// Set other global page attributes here
-// -----------------------------------------------------------------------------
-
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 == Automagic iFrame
 
@@ -48,38 +48,45 @@ Resize window or click one of the links in the iFrame to watch it resize.
   src="/assets/themes/j1/modules/iframeResizer/examples/frame.content.html"
   width="100%"
   style="border-width:0;"
-  scrolling="no">
+  scrolling="no"
+  title="Test Content">
 </iframe>
 
 <script>
-	iFrameResize({
-		log:                    true,
-    minHeight:              250,
-		onResized: function(messageData){
-
-			$('p#callback').html(
-				'<b>Frame ID:</b> '    + messageData.iframe.id +
-				' <b>Height:</b> '     + messageData.height +
-				' <b>Width:</b> '      + messageData.width +
-				' <b>Event type:</b> ' + messageData.type
-			);
-		},
-		onMessage: function(messageData){
+  $(document).ready(function() {
+    var dependencies_met_page_finished = setInterval (function () {
+      if (j1.adapter.framer.getState() === 'finished') {
+        iFrameResize({
+          log:       true,
+          minHeight: 250,
+          onResized: function(messageData){
 
-			$('p#callback').html(
-				'<b>Frame ID:</b> '    + messageData.iframe.id +
-				' <b>Message:</b> '    + messageData.message
-			);
-			alert(messageData.message);
-			document.getElementsByTagName('iframe')[0].iFrameResizer.sendMessage('Hello back from parent page');
-		},
-		onClosed: function(id){
+            $('p#callback').html(
+              '<b>Frame ID:</b> '    + messageData.iframe.id +
+              ' <b>Height:</b> '     + messageData.height +
+              ' <b>Width:</b> '      + messageData.width +
+              ' <b>Event type:</b> ' + messageData.type
+            );
+          },
+          onMessage: function(messageData){
 
-			$('p#callback').html(
-				'<b>IFrame (</b>'    + id +
-				'<b>) removed from page.</b>'
-			);
-		}
-	});
+            $('p#callback').html(
+              '<b>Frame ID:</b> '    + messageData.iframe.id +
+              ' <b>Message:</b> '    + messageData.message
+            );
+            alert(messageData.message);
+            document.getElementsByTagName('iframe')[0].iFrameResizer.sendMessage('Hello back from parent page');
+          },
+          onClosed: function(id){
+            $('p#callback').html(
+              '<b>IFrame (</b>'    + id +
+              '<b>) removed from page.</b>'
+            );
+          }
+        });
+        clearInterval(dependencies_met_page_finished);
+      }
+    }, 25);
+  });
 </script>
 ++++

data/lib/starter_web/pages/public/previewer/justified_gallery.html

@@ -3,17 +3,25 @@ layout:                                 raw
 
 title:                                  Gallery Previewer
 tagline:                                manage galleries your way
-description:                            Justified Gallery Previewer
+date:                                   2020-11-08 12:00:00
+description: >
+                                        To create modern image and video galleries, J1 Template implements
+                                        the jQuery plugin JustifiedGallery. The module is a great tool to
+                                        create responsive, infinite, and high quality justified image galleries.
+                                        See Justified Gallery in action - and for sure all that you see is even
+                                        responsive. Change the e.g. the size of your current browser window,
+                                        by width or height. From the config menu, some basic features of Justified
+                                        Gallery can be changed online.
+                                        See what will happen!
 
-tags:                                   [ App, Gallery ]
-index:                                  [ Customizer, Previewer, Justified, Gallery ]
-categories:                             [ app ]
+tags:                                   [ App, Images, Videos ]
+categories:                             [ Galleries, Previewer ]
+
+toc:                                    false
 
 permalink:                              /pages/public/previewer/justified_gallery/
 regenerate:                             false
 
-toc:                                    false
-
 resources:                              [ gallery_customizer, justified_gallery, light_gallery ]
 resource_options:
   - attic:
@@ -30,4 +38,4 @@ resource_options:
 ---
 
 <!-- [INFO   ] [j1.gallery_customizer              ] [Placement of the content] -->
-<div id="customizer" class="row r-text-300 g-mb-100"></div>
+<div id="customizer" class="mb-5"></div>

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

@@ -1,18 +1,22 @@
 ---
 title:                                  MDI Icon Previewer
 tagline:                                search and select mdi icons
-description:                            Material Design Icons Preview for J1 Template
+date:                                   2020-11-08 12:00:00
+description: >
+                                        Previewer for Material Design Icons (MDI) for J1 Template.
+                                        Material Design Icons is a growing icon collection allows
+                                        designers and developers targeting various platforms to download
+                                        icons in the format, color and size they need for any project.
 
-tags:                                   [ Preview, Material, Design, MDI, FontAwesome, Icon, Fonts ]
-index:                                  []
-categories:                             [ pages, manuals ]
+tags:                                   [ Design, MDI, Icon, Fonts ]
+categories:                             [ App, Preview ]
+
+scrollbar:                              false
 
 permalink:                              /pages/public/previewer/mdi_font/
 regenerate:                             false
 
-scrollbar:                              false
-
-resources:                              [ clipboard, rouge, mdi_previewer ]
+resources:                              [ clipboard, rouge, mdi_previewer, fam ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -23,35 +27,26 @@ 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
+// Set page (local) attributes here
 // -----------------------------------------------------------------------------
-{% include {{set_env_entry_document}} init_folders=all %}
+//:my-asciidoc-attribute:
 
-// Load tags and urls
+//  Load Liquid procedures
 // -----------------------------------------------------------------------------
-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
 // -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="local" %}
 
 
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 == Material Design Icons
 
 _Material Design Icons_ (MDI) is a very helpful design resource for Web Design

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

@@ -0,0 +1,205 @@
+---
+title:                                  Rouge
+tagline:                                preview rouge themes
+date:                                   2020-11-08 12:00:00
+description: >
+                                        Previewer page for J1 module Rouge. Rouge is a pure Ruby
+                                        syntax highlighter. It can highlight over 100 different
+                                        languages fully integrated with J1 Template.
+
+tags:                                   [ Rouge, Highlighter ]
+categories:                             [ App, Previewer ]
+
+toc:                                    true
+
+permalink:                              /pages/public/previewer/rouge/
+regenerate:                             false
+
+resources:                             [ rouge, clipboard, fam ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/jessica-ruscello-1920x1280.jpg
+          alt:                          Photo by Jessica Ruscello Unsplash
+#         caption:
+#           text:                       Photo by Jessica Ruscello on Unsplash
+#           href:                       https://unsplash.com/@jasonrosewell
+          badge:
+            type:                       unsplash
+            author:                     Jessica Ruscello
+            href:                       https://unsplash.com/@jruscello
+---
+
+// :source-highlighter: rouge
+// https://dzone.com/articles/awesome-asciidoctor-highlight-lines-in-source-code
+
+:rouge-line-class: line
+:rouge-line-id: X%i
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+== Theme selector
+
+Make a selection of theme below to preview a theme.
+
+++++
+<div class="btn-group">
+  <button class="btn btn-primary btn-raised btn-flex btn-lg dropdown-toggle" type="button" data-toggle="dropdown" data-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
+  Select Theme<span class="caret"></span>
+  </button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" active="true" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.dark</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.light</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.dark</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.light</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.dark</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.light</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('colorful')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>colorful</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('github')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>github</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('gruvbox')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('gruvbox.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox.light</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('igorpro')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>igorpro</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('molokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>molokai</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('monokai.sublime')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai.sublime</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('pastie')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>pastie</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('thankful_eyes')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>thankful_eyes</a>
+    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('tulip')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>tulip</a>
+  </div>
+</div>
+<div id="selected" class="mt-1 mb-3"></div>
+++++
+
+=== Liquid
+
+// [source, liquid, linenums, highlight='3-7']
+// [source, liquid, role="linenums"]
+[source, liquid]
+----
+Hello {{ 'now' | date: "%Y %h" }}
+
+{% comment %} if item.quantity is 4... {% endcomment %}
+
+{% for i in (1..item.quantity) %}
+  {{ i }}
+{% endfor %}
+
+{% comment %} results in 1,2,3,4 {% endcomment %}
+----
+
+=== Javascript
+
+[source, javascript, linenums, highlight='3-7']
+----
+// ---------------------------------------------------------------
+// helper functions
+// ---------------------------------------------------------------
+function styleSheetLoaded(styleSheet) {
+  var sheets     = document.styleSheets,
+      stylesheet = sheets[(sheets.length - 1)];
+
+  // find CSS file 'styleSheetName' in document
+  for(var i in document.styleSheets) {
+    if(sheets[i].href && sheets[i].href.indexOf(styleSheet) > -1) {
+      return true;;
+    }
+  }
+}
+----
+
+=== Ruby
+
+// :source-highlighter: rouge
+// :source-highlighter: pygments
+// :pygments-style: emacs
+// :icons: font
+
+[source, ruby, linenums]
+----
+require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal'
+include Asciidoctor <1>
+
+Asciidoctor::Extensions.register do
+  class J1BlockMacro < Extensions::BlockMacroProcessor
+    use_dsl
+    named :banner
+    name_positional_attributes 'role'
+
+    def process parent, target, attrs
+      html = %(<div id="#{target}" class="#{attrs['role']}"></div>)
+      create_pass_block parent, html, attrs, subs: nil
+    end
+  end
+  block_macro J1BlockMacro
+end
+----
+<1> don't miss to load the Asciidoctor ruby
+
+=== Asciidoc
+
+// [source, text]
+// [source, apex]
+// [source, erlang]
+// [source, batchfile]
+// [source, turtle]
+[source, prometheus, linenums]
+----
+== Lightbox Examples
+
+Find below an example of using the lightbox Lightbox standalone.
+See how single (individual) images are linked for the use with
+Lightbox.
+
+.A Lightbox block for standalone images
+lightbox::example-standalone[ 400, {data-images-standalone} ]
+
+NOTE: The name LightGallery implies a sort of a Gallery but
+the library is a _lightbox_.
+----
+
+=== Attributes
+
+You can further customize the source block output with additional Rouge attributes:
+
+rouge-css::
+  Controls what method is used for applying CSS to the tokens.
+  Can be `class` (CSS classes), `style` (inline styles) or `external` (external styles).
+  When `class` is used, Rouge styles for the specified theme are included in an HTML header.
+  When `external` is specified, CSS classes are used but no styles will be added except
+  when `rouge-theme` is not empty in which case its value is interpreted as a URL to a
+  style sheet and a link to that style sheet will be added to the HTML header.
+  Default is `class`.
+
+rouge-theme::
+  Sets the name of the Rouge color theme to use.
+  Look into https://github.com/jneen/rouge/tree/master/lib/rouge/themes[lib/rouge/themes]
+  in the Rouge repository for a list of available themes.
+  Default is `github`.
+
+rouge-style::
+  Alternative name for the `rouge-theme` for compatibility with _asciidoctor-pdf_
+  (see https://github.com/{gh-name}/issues/3[#3]).
+
+rouge-highlighted-class::
+  CSS class to use on a line wrapper element for highlighted lines.
+  Default is `highlighted`.
+
+rouge-line-class::
+  CSS class to set on a line wrapper element
+  Default is `line`.
+
+rouge-line-id::
+  Format string for specifying an HTML `id` for each line (e.g. with
+  `rouge-line-id="L%i"` each line of the listing will get an id of the
+  form `id="L1"`, `id="L2"`, etc.). This really only makes sense if the
+  format string is distinct for each source listing, otherwise it will
+  lead to duplicate IDs which makes the generated HTML invalid.
+  Default is no line ids.

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

@@ -1,18 +1,21 @@
 ---
 title:                                  Emoji Previewer
 tagline:                                search and select twitter emojis
-description:                            Twitter Emoji Icons V1 Preview
+date:                                   2020-11-08 12:00:00
+description: >
+                                        Twitter Emoji Icons V1 Previewer.Twitter Emoji is a colored
+                                        icon font developed by Twitter. The full icon set  is fully
+                                        supported by J1 Template.
 
-tags:                                   [ Preview, Emoji ]
-index:                                  [ Twitter, Emoji, Icons, Previewer ]
-categories:                             [ pages, Previewer ]
-
-permalink:                              /pages/public/previewer/twitter_emoji/
-regenerate:                             true
+tags:                                   [ Twitter, Emoji, Icons ]
+categories:                             [ App, Previewer ]
 
 scrollbar:                              false
 
-resources:                              [ twemoji, twemoji_picker ]
+permalink:                              /pages/public/previewer/twitter_emoji/
+regenerate:                             false
+
+resources:                              [ twemoji, twemoji_picker, fam ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -27,35 +30,26 @@ resource_options:
             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
-// -----------------------------------------------------------------------------
-{% include {{set_env_entry_document}} init_folders=all %}
-
-// Load tags and urls
+// Set page (local) attributes here
 // -----------------------------------------------------------------------------
-include::{includedir}/attributes.asciidoc[tag=tags]
-include::{includedir}/attributes.asciidoc[tag=urls]
-include::{includedir}/attributes.asciidoc[tag=data]
+:jollygoodcode--emoji:                  https://github.com/jollygoodcode/twemoji
 
-// Additional Asciidoc page attributes goes here
+//  Load Liquid procedures
 // -----------------------------------------------------------------------------
-:jollygoodcode-emoji:                   https://github.com/jollygoodcode/twemoji
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Include documents
+// Load page attributes
 // -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="local" %}
 
 
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 == Twitter Emoji's
 
 J1 Template comes with the Twitter Emoji library (Twemoji) V1 included and