j1_template_mde 2018.4.10

data/lib/starter_web/pages/start/roundtrip/400_icon_fonts.adoc

@@ -0,0 +1,182 @@
+---
+title:                                  Roundtrip
+tagline:                                Icon Fonts
+description:                            J1 Template Roundtrip - Icon Fonts
+
+tags:                                   [ Roundtrip, Material, Design, MDI, FontAwesome, Icon, Fonts ]
+resources:                              []
+regenerate:                             false
+permalink:                              /pages/start/roundtrip/mdi_icon_font/
+
+resource_options:
+
+  - masthead:
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/icon-fonts-1920.jpg
+          alt:                          Photo by Harpal Singh on Unsplash
+          caption:                      Photo by Harpal Singh on Unsplash
+          caption_href:                 https://unsplash.com/aquatium/portfolio
+          caption_color:                rgba_lighten_800
+---
+
+// Enable the Liquid Preprocessor
+//
+:page-liquid:
+
+// Set other global page attributes here
+// -------------------------------------------------------------------
+
+
+{% comment %} Liquid procedures
+--------------------------------------------------------------- {% endcomment %}
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+
+// NOTE: Initialize entry document paths
+//
+{% include {{set_env_entry_document}} init_folders=all %}
+
+// Load tags and urls
+//
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+
+// Additional Asciidoc page attributes goes here
+//
+
+== Icon Fonts
+
+J1 template supports 2 very popular icons font sets out-of-the-box:
+
+* Material Design Icons
+* FontAwesome Icons V5
+
+Both icon sets are very good in design and have a rich set of different Icons
+for many categories used for the Web. See below some details for _MDI_ and
+_FontAweSome_.
+
+=== Material Design Icons
+
+The primary icon set for J1 Template are _Material Design Icons_, because it
+is an rich set providing more tha 2100+ icons. From a design prospective,
+_MDI_ has an excellent Material Design support an comes with the original icon
+set created by _Google_ build-in.
+
+_Material Design Icons_ (MDI) is a very helpful design resource for Web Design
+that is based on *_Google_'s Material Design*. _MDI_ is a community-driven
+project to create an increased icon-set based on _Google_'s official repository
+and MD style specification.
+
+.MDI Icon examples
+----
+Size of 1x: <i class="mdi mdi-1x mdi-account"></i>
+Size of 3x: <i class="mdi mdi-3x mdi-account"></i>
+Size of 5x: <i class="mdi mdi-5x mdi-account"></i>
+Rotate 45 degrees: <i class="mdi mdi-5x mdi-account mdi-rotate-45">
+Rotate 315 degrees: <i class="mdi mdi-5x mdi-account mdi-rotate-315">
+MD colors|Indigo: <i class="mdi mdi-5x mdi-alert mdi-md-indigo"></i>
+MD colors|Pink: <i class="mdi mdi-5x mdi-alert mdi-md-pink"></i>
+Flip|Vertical, Light: <i class="mdi mdi-5x mdi-alert mdi-light mdi-flip-v"></i>
+Animated|Spin: <i class="mdi mdi-5x mdi-loading mdi-spin">
+Animated|Pulsed: <i class="mdi mdi-5x mdi-heart mdi-md-red-900 mdi-pulsed">
+----
+
+++++
+<div class="mt-3 mb-4">
+  <i class="mdi mdi-1x mdi-account"></i>
+  <i class="mdi mdi-3x mdi-account"></i>
+  <i class="mdi mdi-5x mdi-account"></i>
+  <i class="mdi mdi-5x mdi-account mdi-rotate-45"></i>
+  <i class="mdi mdi-5x mdi-account mdi-rotate-315"></i>
+  <i class="mdi mdi-5x mdi-alert mdi-md-indigo"></i>
+  <i class="mdi mdi-5x mdi-alert mdi-md-pink"></i>
+  <i class="mdi mdi-5x mdi-alert mdi-light mdi-flip-v"></i>
+  <i class="mdi mdi-5x mdi-loading mdi-spin"></i>
+  <i class="mdi mdi-5x mdi-heart mdi-md-red-900 mdi-pulsed"></i>
+</div>
+++++
+
+_MDI_ is a growing collection to allow designers and developers targeting
+various platforms to download icons in the format, color and size they need
+for any project. The repo contains today 2100+ icons plus converted icons from
+the official set created by _Google_.
+
+_J1 Template_ supports the full set of _MDI_ for the Web (Webfont, WOFF). The
+icon set is fully integrated and can be used out-of-the-box.
+
+For MDI a *Preview Page* is available to explore what can be done base on the
+J1 implemetation regarding sizes, colors, animations etc. Go for the
+link:{previewer-mdi}[Preview Page, window="_blank"] and check-out what's
+possible using _MDI_ !
+
+=== FontAwesome
+
+Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by
+Dave Gandy. For version 4 mainly for use with Twitter Bootstrap V3. The new
+version, Font Awesome V5 was officially released on December 7, 2017 today
+with 2300+ icons included. Version 5 comes in two packages: Font Awesome *Free*
+and the *proprietary* Font Awesome *Pro* (available for a license fee).
+
+.FontAwesome V5 Icon examples
+----
+Size of 1x: <i class="fas fa-1x fa-user"></i>
+Size of 3x: <i class="fas fa-3x fa-user"></i>
+Size of 5x: <i class="fas fa-5x fa-user"></i>
+Rotate 45 degrees: <i class="fas fa-3x fa-user fa-rotate-45">
+Rotate 315 degrees: <i class="fas fa-3x fa-user fa-rotate-315">
+MD colors|Indigo: <i class="fas fa-3x fa-exclamation-triangle mdi-md-indigo"></i>
+MD colors|Pink: <i class="fas fa-3x fa-exclamation-triangle mdi-md-pink"></i>
+Flip|Vertical, Light: <i class="fas fa-3x fa-exclamation-triangle mdi-light fa-flip-v"></i>
+Animated|Spin: <i class="fas fa-3x fa-circle-notch fa-spin">
+Animated|Pulsed: <i class="fas fa-3x fa-heart fa-md-red-900 fa-pulsed">
+----
+
+++++
+<div class="mt-3 mb-4">
+  <i class="fas fa-1x fa-user mr-2"></i>
+  <i class="fas fa-3x fa-user mr-2"></i>
+  <i class="fas fa-5x fa-user mr-2"></i>
+  <i class="fas fa-3x fa-user fa-rotate-45 mr-2"></i>
+  <i class="fas fa-3x fa-user fa-rotate-315 mr-2"></i>
+  <i class="fas fa-3x fa-exclamation-triangle mdi-md-indigo mr-2"></i>
+  <i class="fas fa-3x fa-exclamation-triangle mdi-md-pink mr-2"></i>
+  <i class="fas fa-3x fa-exclamation-triangle mdi-light fa-flip-v mr-2"></i>
+  <i class="fas fa-3x fa-circle-notch fa-spin mr-2"></i>
+  <i class="fas fa-3x fa-heart mdi-md-red-900 fa-pulsed"></i>
+</div>
+++++
+
+The free versions (all releases up to 4 and the free version for 5) are
+available under SIL Open Font License 1.1, Creative Commons Attribution 4.0,
+and MIT License.
+
+FontAwesome V5 meets the Material Design idea (of _Google_) and in compare to
+Version 4, the current version is much more than a face-lifting. The Version 5
+comes with more than 2300+ icons but many of them are available with the *Pro*
+license only. For the *Free* version, a subset of 900+ icons is available.
+
+NOTE: The CSS styles for FontAwesome V5 has been extended for J1 Template to
+the *same* styles (and their respective *names*) as for other Font Icon sets.
+Already existing styles like `fa-flip-vertical` is available as `fa-flip-v`
+as well. See all styles that can be used with teh MDI link:{previewer-mdi}[Preview Page, window="_blank"].
+
+You can checkout what icons available at link:{fontawesome-icons}[FontAweSome Icons,
+window="_blank"]. _FontAwesome_ V5 is fully integrated - no need for additional
+resources to load. But in compare to Version 4 a lot of differences needs to be
+noticed.
+
+If you haven't used V5 yet, it is highly recommended to visit the
+link:{fontawesome-get-started}[Get started, window="_blank"] pages to learn
+the basics and features and styles.
+
+
+== What's next?
+
+Hopefully you've enjoyed the possibilities J1 offers for managing and
+manipulating *Font Icons*. Do you think these Icons sets fit your needs?
+
+We hope so.
+
+To check more features, go for the link:{roundtrip-asciidoc-extensions}[
+Asciidoc Extensions] made for J1!

data/lib/starter_web/pages/start/roundtrip/500_asciidoc_extensions.adoc

@@ -0,0 +1,462 @@
+---
+title:                                  Roundtrip
+tagline:                                Asciidoctor Extensions
+description:                            Asciidoctor Extensions
+
+tags:                                   []
+resources:                              [ lightbox ]
+regenerate:                             false
+permalink:                              /pages/start/roundtrip/asciidoc_extensions/
+---
+
+// Enable the Liquid Preprocessor
+//
+:page-liquid:
+
+// Set other global page attributes here
+// -------------------------------------------------------------------
+
+
+//  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}} init_folders=all %}
+
+// 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
+// -----------------------------------------------------------------------------
+
+
+// MAIN
+// =============================================================================
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+== Asciidoc Extensions
+
+J1 Template implements some incubating Ruby-based extensions for Asciidoctor.
+Most extensions are based on the examples given with the
+{asciidoctor-extensions-lab}[Asciidoctor Extensions Lab, window="_blank"].
+If you simply want to use the extensions from this repository, go ahead to
+{asciidoctor-extensions-use-extension}[Using an extension, window="_blank"].
+
+To create extensions on your own, it is highly recommended to read first the
+{asciidoctor-user-manual-extensions}[extensions section, window="_blank"] in
+the *Asciidoctor* user manual.
+
+All *already implemented* Asciidoctor Extensions can be found below. A set of
+additional useful extensions to the Markup language *Asciidoc* are made
+especially for documents of the Jekyll content type *pages* (but can be used
+for post or collections as well).
+
+=== View Result Extension
+
+J1 Template adds a simple *Javascript* based on the `View Result Extension` to
+any `listingblock`. The extension adds an interactive *toggle button* `VIEW`
+to the output of a *listingblock box* placed to the top right of the example
+box. If a result block `[.result]` is placed under a `listingblock`, clicking
+the toggle button `VIEW` displays (or hide) the content given by the
+`result block`.
+
+The `View Result Extension` is quite useful for example sections discussing
+(Asciidoc code) and how the resulting (HTML) code would look alike.
+
+[source, adoc, numbered]
+----
+  .This will have a button `VIEW` placed to the right top of the example box
+  ----
+  * displayed always
+  * displayed always 2
+  ----
+
+  [.result]
+  ====
+  * displayed till clicked
+  * displayed till clicked 2
+  ====
+----
+
+.This example will have a button `VIEW` placed to the top right of the example box
+----
+* displayed always
+----
+
+[.result]
+====
+* displayed till clicked, but closed automatically after *5 seconds*
+====
+
+NOTE: The result block closes automatically after the result was shown
+for *5 seconds*. If the button `VIEW` is clicked, the result box toggles
+between open and close (the result gets hidden). That way, you can *open and
+close* the result box *at any time*.
+
+=== Additional Admonition Blocks
+
+Q&A sections are used quite often to answer popular questions. To make such a
+Q&A section more eye-minded, the additional Admonition Blocks `[QUESTION]`
+and `[ANSWER]` are available for J1 Template as Asciidoctor extentions.
+
+==== Question block
+
+The Admonition *Question block* is an extention to the Asciidoc admonition
+block types that introduce an admonition type of *question*.
+
+.Example of a question block
+----
+[QUESTION]
+What's the main tool for selecting colors?
+----
+
+[.result]
+====
+[QUESTION]
+What's the main tool for selecting colors used for J1 Template?
+====
+
+====  Answer block
+
+The Admonition *Answer block* is an extention to the Asciidoc admonition
+block types that introduce an admonition type of *answer* in conjunction
+to the admonition type of *question*.
+
+.Example of a answer block
+----
+[ANSWER]
+For J1 Template, go for for the Core documentation section. You'll
+find the full color scheme for Material Design.
+----
+
+[.result]
+====
+[ANSWER]
+For J1 Template, go for the {jekyll-one-core-doc-color-scheme}[Core documentation, window="blank"] section.
+You'll find the full color scheme for *Material Design*.
+====
+
+
+//////////
+=== Shout Block
+
+An extension that transforms the contents of a paragraph
+to uppercase.
+
+.Example of a Shout Block
+----
+[shout, 5]
+Time to get a move on.
+----
+
+[.result]
+====
+[shout, 5]
+Time to get a move on.
+====
+//////////
+
+
+=== Lightbox Block
+
+To make the use of the built-in Lightbox easier, J1 Template offers an Asciidoc
+extension: the LightBox block macro. The `lightbox::` block macro embeds one or
+more images into the output document and puts *automatically* the default
+Lightbox (lightbox) for J1 on. For all images, the `size` (width) and individual
+`caption text` can be configured.
+
+[source, adoc, role="noclip"]
+----
+.block_title
+lightbox::block_id[ images_width, images_data, group ]
+----
+
+NOTE: For a `lightbox::` block, images are placed in the output document
+*without* any other scaling than in *width* - they are placed using simple
+HTML `img` tags. This is fine for images *even in size*. For images in different
+sizes, a *gallery* should be used as gallery (apps) rearrange images to make
+them fit at its best for the available space.
+
+==== Standalone images
+
+For your convenience, and better readability, the *image data* should be
+defined as Asciidoc *attributes*. The *image data* is given as a *string*
+of *data pairs*:
+
+  "path/to/image-1, image-caption-1, ..."
+
+.Example of an *data attribute* for a lightbox block
+[source, adoc]
+----
+:data-images: "pages/image-1.jpg, Description 1, "pages/image-2.jpg, Description 2"
+----
+
+The *base path* for all image related data is a side-wide (Asciidoc)
+configuration (see `_config.yml`) and points per default to `/assets/images`.
+The base path is *automatically* added to each image. If you want to use the
+*default* asset path for images, a *relativ* path needs to be given for
+`path/to/image`.
+
+WARNING: If an *absolute* path is configured, like `/path/to/image`, the base
+path gets *ignored* - this is the *default* behaviour of the *Asciidoc* Markup
+processor. If an *absolute* path is given, the *full* path to the images
+used has to be configured.
+
+The parameter `group` for the `lightbox::` block is an *option*. If *no*
+`group` parameter is given for a block, the related images are treated as
+*standalone*.
+
+[source, adoc]
+----
+.A Lightbox block for standalone images
+lightbox::images-standalone[ 250, {data-images-standalone} ]
+----
+
+.A Lightbox block for standalone images
+lightbox::images-standalone[ 250, {data-images-standalone} ]
+
+
+==== Grouped images
+
+If more than a single image is given for a `lightbox::` block, the images can be
+grouped together to enable a simple sliding functionality through this group
+of *related* images. To *enable* grouping, the option `group` needs to be
+configured for the block.
+
+[source, adoc]
+----
+.A Lightbox block for grouped images
+lightbox::images-group[ 250, {data-images-group}, group ]
+----
+
+.A Lightbox block for grouped images
+lightbox::images-group[ 250, {data-images-group}, group ]
+
+
+=== Emoji Inline Macro
+
+J1 Template comes with *Twitter Emoji* V1 support for Asciidoc documents
+included. Twitter Emoji's can be used as *inline* icons by using the `emoji:`
+inline macro like this:
+
+[source, adoc]
+----
+Your text emoji:icon_name[icon_size] <1> <2>
+----
+<1> All `icon_name` can be found on the Preview page for *Twitter Emoji's*
+<2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `5x`
+
+.Click on `view result` to see what Twitter Emoji support can do for your documents
+----
+Faster than a emoji:turtle[3x]!
+
+This is an example of how you can emoji:heart[lg] Asciidoctor and Twitter Emoji emoji:smile[sm].
+----
+
+[.result]
+====
+Faster than a emoji:turtle[3x]!
+
+This is an example of how you can emoji:heart[lg] Asciidoctor and Twitter Emoji emoji:smile[sm].
+====
+
+Find all Twitter Emoji's of the build-in V1 library with the
+link:{previewer-emoji}[Emoji Icon Previewer, window="_blank"] page.
+
+=== Lorem Inline Macro
+
+The Ruby *gem* Middleman, a Ruby-gem based static site generator, provides a
+set of powerful helpers for generating *random text* content. The *Lorem*
+inline macro `lorem:` adapted this functionality from Middleman for the use
+of Asciidoc-based documents processed by Jekyll.
+
+If you start writing larger documents having several chapters, not all of the
+content is available at the beginning. It is quite useful to place *blind text*
+first to get an better impression how a a page will look alike that is not
+finished yet.
+
+Placeholders for *blind text* comes in several flavours given by `macro`. The
+syntax for the `lorem:` inline macro is simple like this:
+
+[source, adoc]
+----
+lorem:macro[]
+lorem:macro[size]
+----
+
+.Example of a lorem *sentences* macro
+----
+lorem:sentences[5]
+----
+
+[.result]
+====
+lorem:sentences[5]
+====
+
+==== Available Macros
+
+All *macro* types available for `lorem:` to be used for blind *text* can be
+found with the following table below.
+
+.All types available for `lorem:` macro
+[cols="5,2,5a", options="header", role="table-responsive mb-2"]
+|===============================================================================
+|Macro | Type |Example
+
+|`word[]`
+|text
+|
+lorem:word[]
+
+|`words[5]`
+|text
+|
+lorem:words[5]
+
+|`sentence[]`
+|text
+|
+lorem:sentence[]
+
+|`sentences[5]`
+|text
+|
+lorem:sentences[5]
+
+|`date[]`
+|date
+|
+lorem:date[]
+
+|`date[strftime]` e.g. `date[%Y-%m-%d]``
+|date
+|
+lorem:date[%Y-%m-%d]
+
+|`name[]`
+|text
+|
+lorem:name[]
+
+|`first_name[]`
+|text
+|
+lorem:first_name[]
+
+|`last_name[]`
+|text
+|
+lorem:last_name[]
+
+|`email[]`
+|email
+|
+lorem:email[]
+
+|===============================================================================
+
+NOTE: The Lorem extention is currently available as *inline* macros only. With
+the upcoming versions of J1 Template, the functionality will be extended.
+
+
+//////////
+==== Image Blocks
+
+image:: lorem:image['300x400']
+
+image::http://asciidoctor.org/images/octocat.jpg[GitHub mascot]
+
+
+Like *blind text*, placeholder *images* might be useful for unfinished documents.
+If images are used for the content but not available, blind images can help to
+organize a page without the final image data.
+
+.All block *types* available to be used for blind *images*
+[cols="5,2,5a", options="header", role="table-responsive mb-3"]
+|===============================================================================
+|Block | Type |Example
+
+|`image['300x400']`
+|image
+|
+lorem:image['300x400']
+
+|`image['300x400', :background_color => '333', :color => 'fff']`
+|image
+|
+lorem:image['300x400', :background_color => '333', :color => 'fff']
+
+|`image['300x400', :random_color => true]`
+|image
+|
+lorem:image['300x400', :random_color => true]
+
+|`image['300x400', :text => 'new text']`
+|image
+|
+lorem:image['300x400', :text => 'new text']
+
+|===============================================================================
+
+NOTE: Not all formats are available for the *image* macro. With the upcoming
+versions of J1 Template, the functionality will be extended.
+
+.Example of an Lorem image block
+----
+lorem:image['300x400']
+----
+
+[.result]
+====
+lorem:image['300x400']
+====
+//////////
+
+
+// Include documents
+// -----------------------------------------------------------------------------
+
+include::{documentsdir}/100_gistblock.asciidoc[]
+
+//////////
+== Chrome Inline Macro Extension
+
+lorem:sentences[5]
+
+=== Unnamed link to Chrome Extensions
+
+lorem:sentences[3]
+
+chrome://extensions/[]
+
+=== Named link to Chrome Extensions
+
+lorem:sentences[3]
+
+chrome://extensions/[Extensions]
+//////////
+
+
+== What's next?
+
+Asciidoc, respectively Asciidoctor, *extensions* open up the Markup language to
+new use cases; using the full power of programming languages to extend what's
+needed whether it be Ruby, Java, Groovy or JavaScript.
+
+The number of extensions will grow - to get handy and powerful functionality
+that is needed for modern Web pages based on the Asciidoc Markup language
+generated by Jekyll. For sure!
+
+The last preview is focussing *Themes*. The theming feature is currently in
+*beta* status, but it is a great option to customize the J1 Template right
+now!
+
+Have a look for the link:{roundtrip-themes}[Theme feature of J1 Template].