j1-template 2021.1.28 → 2021.2.2

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

@@ -1,220 +0,0 @@
----
-title:                                  MDI Icon Previewer
-tagline:                                search and select mdi icons
-date:                                   2020-11-08 00:00:00 +100
-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.
-
-categories:                             [ Preview ]
-tags:                                   [ MDI, Icons, Fonts ]
-
-scrollbar:                              false
-
-permalink:                              /pages/public/previewer/mdi_font/
-regenerate:                             false
-
-resources:                              [ clipboard, lightbox, rouge, mdi_previewer ]
-resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg
-          alt:                          icon-fonts-1920x1280-bw
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-//:my-asciidoc-attribute:
-
-//  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
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
-== Material Design Icons
-
-_Material Design Icons_ (MDI) is a very helpful design resource for Web Design
-that is based on _Google's_ specification of Material Design. *MDI* is a
-community-driven project to create an increased icon-set based on the official
-Material Design Icon repository provided by _Google_.
-
-*MDI* is a fast growing collection to allow designers and developers targeting
-various platforms to download icons in the format, color and size they needed
-for a project. In the current *MDI* version (v5.9.55), 5900+ icons - plus
-converted icons from the official icon set created by _Google_ - are available.
-
-_J1 Template_ supports the full set of *MDI* icons for the Web (Webfont, WOFF).
-The icon set is fully integrated and can be used out-of-the-box.
-
-== HTML Markup
-
-There is no *official* markup for font icons, but 2 markups are widely used.
-Both markups can be used in block elements like the anchor tag `<a>`. That
-way, it's on you what to use for font icons.
-
-[source, html]
-----
-<span class="mdi mdi-name" role="img" aria-label="name" ></span> <1>
-<i class="mdi mdi-name"></i> <1> <2>
-----
-<1> Both forms are consistent with the HTML5 spec
-<2> It's short and the `<i>` tag may associated for an **i**con
-    (semantic meaning)
-
-NOTE: The `<i>` tag provides more meaning to machines because of the HTML spec,
-it provides more meaning to *humans* because the `i` can easily associated with
-`icon`. And it's only *one letter* long - that win! And if you make sure to
-include equivalent text either inside the `<i>` tag or right next to it
-(as Twitter for Bootstrap does), then screen readers understand where to
-click to reply, the link is usable if CSS doesn't load, and human readers
-with good eyesight and a decent browser see a pretty icon.
-
-== Asciidoc Markup
-
-For pages using Asciidoc for the source (default), a easier solution is to
-use  Markups from Asciidoc.
-
-[source, html]
-----
-pass:[<i class="mdi mdi-<name> mdi-<size> mdi-<modifier>"></i>] <1>
-mdi:<name>[<size>, <modifier>] <2>
-----
-<1> Markup using a pass block
-<2> Markup using the Asciidoc extension (mdi:)
-
-
-== Sizes
-
-For more eye-minded placement, or to place emphasis on, all icons can be
-specified in different sizes by the *optional* parameter `size`.
-
-NOTE: The size of an icon is typically specified relative to the *base* font
-size. Today, the base font size is set to `16px`. That mean for for font
-icons, that the *width* of an icon is set to `32px` if a relative size
-of `2x` is specified.
-
-See with the following what sizes are available.
-
-=== Fixed Size
-
-If needed, the icon size can given in *absolute* sizes from `18px` to `48px`.
-
-include::{tabledir}/mdi_icons/100_absolute_sizes.asciidoc[]
-
-=== BS Grid Size
-
-For a better Bootstrap integration, the icon size can be given like the
-view-port shortcuts `xs`, `sm`, `md`, `lg` and `xl`.
-
-include::{tabledir}/mdi_icons/110_bs_grid_sizes.asciidoc[]
-
-=== Relative Size
-
-All icons can be specifier relativ to the base size of `1em` from `1x` to `10x`.
-See the examples with the table below.
-
-include::{tabledir}/mdi_icons/120_relative_sizes.asciidoc[]
-
-== Rotate
-
-To vary icons in their orientation, the icons can be rotated for 7 different
-angle. This is quite useful, if an icon has an orientation already but does
-*not* fit your need.
-
-NOTE: Using `flip-*` and `rotate-*` at the *same* time is *not* supported
-
-include::{tabledir}/mdi_icons/200_rotate.asciidoc[]
-
-== Flip
-
-Like `rotate`, an icon can be flipped by horizontal and vertical *axes*. It is
-similiar to `rotate` but the *angle* (perspective) remains *unchanged*.
-
-NOTE: Using `mdi-flip-*` and `mdi-rotate-*` at the same time is *not* supported
-
-include::{tabledir}/mdi_icons/300_flip.asciidoc[]
-
-== Spin and Pulsed
-
-For realy *eye-minded* placements of icons, icons can be animated im terms
-of *rotation* and *pulse*. Be careful using animated icons, because this
-may cause disturbing effects and can demand unwanted attention.
-
-include::{tabledir}/mdi_icons/400_spin_pulsed.asciidoc[]
-
-== Color Palette
-
-The implementation of _MDI_ font icons support the full color palette of
-_Google_'s_ Material design specification.
-
-=== BW Colors
-
-The default color set used for _MDI_ are *black-and-white* for the flavours
-`light` and `dark` of default (dark) if *not* specified.
-
-include::{tabledir}/mdi_icons/500_bw_color_palette.asciidoc[]
-
-=== BS Colors
-
-The implementation of _MDI_ font icons support the base color palette of
-Bootstrap range from `primary` to `danger`.
-
-.Bootstrap base color palette
-lightbox::base-color-palette[ 300, {lightbox-image-data--base-color-palette} ]
-
-include::{tabledir}/mdi_icons/510_bs_color_palette.asciidoc[]
-
-=== MD Color Palette
-
-For _J1 Template_, 17 additional color variations are available comply with
-the concepts of _Google Material Design_:
-
-.Material Design color palette
-lightbox::md-color-palette[ 800, {lightbox-image-data--md-color-palette} ]
-
-==== Indigo
-
-The color `Indigo` is used as the `primary` color for J1 Template. You'll find
-this color quite often in various `weights` (ranges from `50` to `900`).
-
-include::{tabledir}/mdi_icons/601_md_color_palette_indigo.asciidoc[]
-
-==== Pink
-
-The color `Pink` is used as the `complementary` color for J1 Template. You'll
-find this color to put an emphasis on some elements. All colors comes in ranges
-from `50` to `900` but for `Pink` mostly the default `weight` of `500` is used.
-
-include::{tabledir}/mdi_icons/602_md_color_palette_pink.asciidoc[]
-
-==  Icon Overview
-
-The Material Design Icon Font support a rich set of 5900+ icons
-(version  v5.9.55)  from a wide varity of topics.
-
-NOTE: Click on the elements below to copy icon data to clipboard
-
-++++
-<!-- div class="my-popper">Popper element</div -->
-<div id="icons" class="icons"></div>
-++++

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

@@ -1,133 +0,0 @@
----
-title:                                  Rouge
-tagline:                                preview rouge themes
-date:                                   2020-11-08 00:00:00 +100
-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.
-
-categories:                             [ Previewer ]
-tags:                                   [ Highlighter, Rouge ]
-
-scrollbar:                              false
-toc:                                    true
-
-permalink:                              /pages/public/previewer/rouge/
-regenerate:                             true
-
-resources:                             [ rouge, clipboard ]
-resource_options:
-  - toccer:
-      collapseDepth:                    4
-  - 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
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-// :source-highlighter: rouge
-// https://dzone.com/articles/awesome-asciidoctor-highlight-lines-in-source-code
-//
-:rouge-line-class: line
-:rouge-line-id: X%i
-
-//  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
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
-== Theme selector
-
-For the default theme `Uno` of J1 Template, the following _Rouge_ themes
-are used:
-
-* light: `igorpro`
-* dark: `monokai.sublime`
-
-NOTE: The default themes used for J1 Template can be configured with the
-global template config file `~/_data/j1_config.yml`.
-
-Make a selection of theme below to preview.
-
-++++
-<div class="btn-group">
-  <!-- See: https://stackoverflow.com/questions/47242702/force-bootstrap-dropdown-menu-to-always-display-at-the-bottom-and-allow-it-go-of -->
-  <!-- NOTE: control the behaviour of popper.js for positioning -->
-  <!-- NOTE: set attribute data-flip="false" to open the SELECT list at the BOTTOM of the BUTTON -->
-  <button class="btn btn-primary btn-raised btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-toggle="dropdown" data-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
-  Select a theme<span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu scrollable-menu" role="menu">
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.dark</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.light</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai</a></li>
-    <li><a class="dropdown-item" 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></li>
-    <li><a class="dropdown-item" 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></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized</a></li>
-    <li><a class="dropdown-item" 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></li>
-    <li><a class="dropdown-item" 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></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('colorful')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>colorful</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('github')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>github</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox.light</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('igorpro')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>igorpro</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('molokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>molokai</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai.sublime')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai.sublime</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('pastie')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>pastie</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('thankful_eyes')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>thankful_eyes</a></li>
-    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('tulip')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>tulip</a></li>
-  </ul>
-</div>
-<div id="selected" class="mt-1 mb-3"></div>
-++++
-
-=== Language examples
-
-Find below a selected number languages (code blocks) and their highlightning.
-
-include::{documentdir}/rouge/100_language_examples.asciidoc[]
-
-== Rouge attributes
-
-You can further customize the source block output with additional Rouge
-attributes.
-
-include::{tabledir}/rouge/200_rouge_attributes.asciidoc[]
-
-== Supported languages
-
-Here the list of the (current of Feb, 2021) supported languages and lexers
-(language highlighters).
-
-include::{tabledir}/rouge/300_supported_languages.asciidoc[]

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

@@ -1,191 +0,0 @@
----
-title:                                  Emoji Previewer
-tagline:                                search and select twitter emojis
-date:                                   2020-11-08 00:00:00 +100
-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.
-
-categories:                             [ Previewer ]
-tags:                                   [ Emoji, Icons, Fonts, Twitter ]
-
-scrollbar:                              false
-
-permalink:                              /pages/public/previewer/twitter_emoji/
-regenerate:                             false
-
-resources:                              [ twemoji, twemoji_picker, fam ]
-resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/pages/roundtrip/emojies-1920x1280-bw.jpg
-          alt:                          Photo by Fausto Garcia on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Fausto Garcia
-            href:                       https://unsplash.com/@faustogarmen/portfolio
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-:jollygoodcode--emoji:                  https://github.com/jollygoodcode/twemoji
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// 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
-offers more than 800+ icons. A lot of icons - hard to remember all the names,
-isn't it?
-
-To use all the Emoji's with your documents you don't need to remember any name.
-Simply pick the icon you want - use the <<Emoji Picker>>.
-
-To find the icon you need, to fasten your search the Emoji Library is sorted
-by five categories:
-
-* people, classic Emoji's like emoji:smile[] (`smile`) and emoji:laughing[] (`laughing`) or faces like emoji:girl[] (`girl`)
-* nature, like emoji:mouse[] (`mouse`), emoji:rose[] (`rose`) or emoji:sunny[] (`sunny`)
-* objects, like emoji:bell[] (`bell`), emoji:hammer[] (`hammer`) or emoji:notes[] (`notes`)
-* places, like emoji:office[] (`office`), emoji:car[] (`car`) or flags like emoji:de[] (`de`)
-* symbols, like emoji:ok[] (`ok`), emoji:clock12[] (`clock12`) or emoji:scorpius[] (`scorpius`)
-
-=== Asciidoc Markup
-
-Using Twitter Emoji's for your Asciidoc documents is quite simple - use the
-`emoji:` inline macro like this:
-
-[source, adoc, role="noclip"]
-----
-Your text emoji:icon_name[] ...
-Your text emoji:icon_name[size, modifier] ...
-----
-
-For all Emoji's (`icon_name`), two parameters *can* be given for the `size` and
-a `modifier` to put additional features on the icon. See the following chapters
-for all *sizes* and *modifiers* (`rotate`, `spin`, `flip` and `pulsed`)
-available.
-
-If *none* if the additional parameters are specified, the `size` is set to `1x`
-and *no* `modifier` is used for an Emoji.
-
-.Click on `view result` to see the nice turtle ...
-----
-You're faster than a emoji:turtle[2x] - for sure emoji:heart[pulsed]!
-----
-
-[.result]
-====
-You're faster than a emoji:turtle[2x] - for sure emoji:heart[pulsed]!
-====
-
-Writing complex Asciidoc Macros for documents are not fun. For the `emoji:`
-inline macro the name of the Emoji is need. Go for the <<Emoji Picker>> and
-you're done in seconds.
-
-=== Sizes
-
-For more eye-minded placement, or to place emphasis on, all Emoji's can be
-specified in different sizes by the *optional* parameter `size`. See with the
-following what sizes are available.
-
-==== BS grid Size
-
-For a better Bootstrap integration, the icon size can be given like the
-view-port shortcuts `xs`, `sm`, `md`, `lg` and `xl`.
-
-include::{tabledir}/twitter_emoji/100_bs_sizes.asciidoc[]
-
-==== Relative Size
-
-All icons can be specifier relativ to the base size of `1em` from `1x` to `5x`.
-See the examples with the table below.
-
-include::{tabledir}/twitter_emoji/100_relative_sizes.asciidoc[]
-
-
-=== Rotate
-
-To vary Emoji's in their orientation, the icons can be rotated for 7 different
-angle. This is quite useful, if an Emoji has an orientation already but does
-*not* fit your need.
-
-NOTE: Using `flip-*` and `rotate-*` at the *same* time is *not* supported
-
-include::{tabledir}/twitter_emoji/200_rotate.asciidoc[]
-
-=== Flip
-
-Like `rotate`, an icon can be flipped by horizontal and vertical *axes*. It is
-similiar to `rotate` but the *angle* (perspective) remains *unchanged*.
-
-include::{tabledir}/twitter_emoji/300_flip.asciidoc[]
-
-=== Spin and Pulsed
-
-For realy *eye-minded* placements of Emoji's, icons can be animated im terms
-of *rotation* and *pulse*. Be careful using animated Emoji's, because this
-may cause disturbing effects and can demand unwanted attention.
-
-include::{tabledir}/twitter_emoji/400_spin_pulsed.asciidoc[]
-
-[NOTE, role="mb-5"]
-====
-Animations gets stopped if the mouse (pointer) is moved over an animated
-Emoji.
-====
-
-== Emoji Picker
-
-The Picker for `Emoji's` is easy to use. Open the *category view* by a click on
-the button `Picker` and click on an *emoji* you want to use. Automatically, the
-Asciidoc code is copied to the *clipboard*. You can paste the code directly from the
-clipboard to the document your're currently work on.
-
-For your reference, all Emoji's selected are copied into to *text-field* of the
-picker (and the Asciidoc code as well emoji:stuck-out-tongue-winking-eye[]).
-If gets too much, a click on the `Clear` button cleans up the text-field.
-
-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: '',
-    language: "{{site.language}}",
-    size: '3.5rem',
-    iconSize: '2rem',
-    height: '100px',
-    width: '100%',
-    category: ['smile', 'mouse', 'wrench', 'house', 'large-blue-diamond'],
-    categorySize: '2.5rem',
-    pickerPosition: 'bottom',
-    pickerHeight: '1300px',
-    pickerWidth: '100%'
-  });
-</script>
-++++