j1_template 2019.4.8 → 2019.4.10

data/lib/starter_web/pages/public/start/_unused/_roundtrip/300_icon_fonts.adoc

@@ -0,0 +1,328 @@
+---
+title:                                  Roundtrip
+tagline:                                icon fonts
+description:                            J1 Template Roundtrip - Icon Fonts
+
+tags:                                   [ Template, Roundtrip, Material, Design, MDI, Font Awesome, Icon, Fonts ]
+index:                                  []
+categories:                             [ pages ]
+
+permalink:                              /pages/public/start/roundtrip/mdi_icon_font/
+regenerate:                             false
+
+resources:                              []
+resource_options:
+  - attic:
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg
+          alt:                          Photo by Harpal Singh on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Harpal Singh
+            href:                       https://unsplash.com/@aquatium
+---
+
+// 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]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// Additional Asciidoc page attributes goes here
+// -----------------------------------------------------------------------------
+
+== Icon Fonts
+
+J1 template supports 2 very popular icons font sets out-of-the-box:
+
+* Material Design Icons
+* Font Awesome 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
+_Font Awesome_.
+
+=== Material Design Icons
+
+The primary icon set for J1 Template are _Material Design Icons_, because it
+is an rich set providing more than 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.
+
+.Material Design Icons
+[cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
+|===============================================================================
+|Size |Modifier |Markup |Render
+
+|1x
+|no modifier set
+|All `icon_name` can be found on the Preview page for *MDI Icon Previewer*
+[source, adoc, role="noclip"]
+----
+mdi:account[1x]
+----
+^|mdi:account[1x]
+
+|3x
+|no modifier set
+|All `icon_name` can be found on the Preview page for *MDI Icon Previewer*
+[source, adoc, role="noclip"]
+----
+mdi:account[3x]
+----
+^|mdi:account[3x]
+
+|5x
+|no modifier set
+|All `icon_name` can be found on the Preview page for *MDI Icon Previewer*
+[source, adoc, role="noclip"]
+----
+mdi:account[5x]
+----
+^|mdi:account[5x]
+
+|5x
+|`mdi-rotate-45`
+|Rotate 45 degrees
+[source, adoc, role="noclip"]
+----
+mdi:account[5x mdi-rotate-45]
+----
+^|mdi:account[5x mdi-rotate-45]
+
+|5x
+|`mdi-rotate-315`
+|Rotate 315 degrees
+[source, adoc, role="noclip"]
+----
+mdi:account[5x mdi-rotate-315]
+----
+^|mdi:account[5x mdi-rotate-315]
+
+|5x
+|`mdi-light` +
+`mdi-flip-v`
+|Color set to MDI Light (Grey) and flipped vertical
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x mdi-light mdi-flip-v]
+----
+^|mdi:alert[5x mdi-light mdi-flip-v]
+
+|5x
+|`md-indigo`
+|Color set to MDI Indigo
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x md-indigo]
+----
+^|mdi:account[5x md-indigo]
+
+|5x
+|`md-pink`
+|Color set to MDI Pink
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x md-pink]
+----
+^|mdi:account[5x md-pink]
+
+|5x
+|`mdi-spin`
+|Added animation of type Rotate (Spin)
+[source, adoc, role="noclip"]
+----
+mdi:loading[5x mdi-spin]
+----
+^|mdi:loading[5x mdi-spin]
+
+|5x
+|`md-red-900` +
+`mdi-pulsed`
+|Color set to MDI Dark Red and added animation of type Pulsed
+[source, adoc, role="noclip"]
+----
+mdi:heart[5x md-red-900 mdi-pulsed]
+----
+^|mdi:heart[5x md-red-900 mdi-pulsed]
+
+|===============================================================================
+
+_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 font icons!
+
+
+=== Font Awesome Icons
+
+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).
+
+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.
+
+.Font Awesome Icons
+[cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
+|===============================================================================
+|Size |Modifier |Markup |Render
+
+|1x
+|no modifier set
+|All `icon_name` can be found on the Preview page for *MDI Icon Previewer*
+[source, adoc, role="noclip"]
+----
+fas:user[1x]
+----
+^|fas:user[1x mt-4]
+
+|3x
+|no modifier set
+|All `icon_name` can be found on the Preview page for *MDI Icon Previewer*
+[source, adoc, role="noclip"]
+----
+fas:user[3x]
+----
+^|fas:user[3x mt-4]
+
+|5x
+|no modifier set
+|All `icon_name` can be found on the Preview page for *MDI Icon Previewer*
+[source, adoc, role="noclip"]
+----
+fas:user[5x]
+----
+^|fas:user[5x mt-4]
+
+|5x
+|`fa-rotate-45`
+|Rotate 45 degrees
+[source, adoc, role="noclip"]
+----
+fas:user[5x fa-rotate-45]
+----
+^|fas:user[5x fa-rotate-45 mt-4]
+
+|5x
+|`fa-rotate-315`
+|Rotate 315 degrees
+[source, adoc, role="noclip"]
+----
+fas:user[5x fa-rotate-315]
+----
+^|fas:user[5x fa-rotate-315 mt-4]
+
+|5x
+|`mdi-light` +
+`fa-flip-v`
+|Color set to MDI Light (Grey) and flipped vertical
+[source, adoc, role="noclip"]
+----
+fas:exclamation-triangle[5x mdi-light fa-flip-v]
+----
+^|fas:exclamation-triangle[5x mdi-light fa-flip-v mt-4]
+
+|5x
+|`md-indigo`
+|Color set to MDI Indigo
+[source, adoc, role="noclip"]
+----
+fas:alert[5x md-indigo]
+----
+^|fas:user[5x md-indigo mt-4]
+
+|5x
+|`md-pink`
+|Color set to MDI Pink
+[source, adoc, role="noclip"]
+----
+fas:alert[5x md-pink]
+----
+^|fas:user[5x md-pink mt-4]
+
+|5x
+|`fa-spin`
+|Added animation of type Rotate (Spin)
+[source, adoc, role="noclip"]
+----
+fas:circle-notch[5x fa-spin]
+----
+^|fas:circle-notch[5x fa-spin mt-4]
+
+|5x
+|`md-red-900` +
+`fa-pulsed`
+|Color set to MDI Dark Red and added animation of type Pulsed
+[source, adoc, role="noclip"]
+----
+fas:heart[5x md-red-900 fa-pulsed]
+----
+^|fas:heart[5x md-red-900 fa-pulsed mt-4]
+
+|===============================================================================
+
+Font Awesome 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 Font Awesome 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 the MDI 
+link:{previewer-mdi}[Preview Page, window="_blank"].
+
+You can checkout what icons available at link:{fontawesome-icons}[Font Awesome Icons,
+window="_blank"]. _Font Awesome_ 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/public/start/_unused/_roundtrip/400_asciidoc_extensions.adoc

@@ -0,0 +1,577 @@
+---
+title:                                  Roundtrip
+tagline:                                asciidoc extensions
+description:                            Asciidoc Extensions (asciidoctor)
+
+tags:                                   [ Template, Roundtrip, Asciidoc, Asciidoctor, Extensions ]
+index:                                  []
+categories:                             [ pages ]
+
+permalink:                              /pages/public/start/roundtrip/asciidoc_extensions/
+regenerate:                             false
+
+resources:                              [ lightbox ]
+resource_options:
+  - attic:
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/puzzle-1920x1280-bw.jpg
+          alt:                          puzzle-1920x1280-bw
+#         badge:
+#           type:                       unsplash
+#           author:                     Harpal Singh
+#           href:                       https://unsplash.com/@aquatium
+---
+
+// 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
+// =============================================================================
+
+
+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).
+
+== Asciidoc Extensions
+
+lorem:sentences[3]
+
+lorem:sentences[2]
+
+=== Asciidoc Code
+
+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 an Asciidoc *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]
+----
+  .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*.
+
+=== Asciidoc Admonitions
+
+All colors for all *default* admonition blocks set to the standard MD color
+set. Find available block types an their colors below.
+
+.NOTE block
+NOTE: Icon background-color: indigo
+
+.TIP block
+TIP: Icon background-color: green
+
+.IMPORTANT block
+IMPORTANT: Icon background-color: orange
+
+.WARNING block
+WARNING: Icon background-color: yellow
+
+.CAUTION block
+CAUTION: Icon background-color: red
+
+lorem:sentences[3]
+
+=== Q&A 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 of type *question*.
+
+.Example of a question block
+[source, adoc, role="noclip"]
+----
+[QUESTION]
+What's the main tool for selecting colors?
+----
+
+[.result]
+====
+.QUESTION
+[QUESTION]
+What's the main tool for selecting colors used for J1 Template?
+====
+
+lorem:sentences[3]
+
+====  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 of type *question*.
+
+.Example of a answer block
+[source, adoc, role="noclip"]
+----
+[ANSWER]
+For J1 Template, go for for the Core documentation section. You'll
+find the full color scheme for Material Design.
+----
+
+[.result]
+====
+.ANSWER
+[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*.
+====
+
+lorem:sentences[3]
+
+== Lightboxes
+
+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.
+
+.Lightbox Block
+[source, adoc, role="noclip"]
+----
+.block_title
+lightbox::block_id[ images_width, images_data [, group_name] ]
+----
+
+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*:
+
+.Paired attributes
+----
+  "path/to/image-1, image-caption-1, ..."
+----
+
+.Example of an data *attribute* for a lightbox block
+----
+: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*.
+
+.Lightbox block for standalone images
+[source, adoc, role="noclip"]
+----
+lightbox::images-standalone[ 400, {data-images-standalone} ]
+----
+
+.Lightbox block for standalone images
+lightbox::images-standalone[ 400, {data-images-standalone} ]
+
+lorem:sentences[5]
+
+=== 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.
+
+.Lightbox block for grouped images
+[source, adoc, role="noclip"]
+----
+lightbox::images-group[ 400, {data-images-group}, group_name ]
+----
+
+.Lightbox block for grouped images
+lightbox::images-group[ 400, {data-images-group}, group_name ]
+
+lorem:sentences[5]
+
+
+== Icon Fonts
+
+lorem:sentences[5]
+
+=== Material Designs Icons
+
+J1 Template comes with *MDI* icon support for Asciidoc documents
+included. *Material Designs Icons* can be used as *inline* icons by using 
+the `mdi:` inline macro like so:
+
+[source, adoc, role="noclip"]
+----
+Your text mdi:icon_name[icon_size, modifier] <1> <2> <3>
+----
+<1> All `icon_name` can be found on the Preview page for *MDI Icon Previewer*
+<2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `10x`
+<3> The `modifier` can be used to set the e.g the color (md_blue), an 
+    animation (fa-pulsed) or the orientation (fa-rotate-45)
+
+.Click on _view result_ to see how it's looks alike
+----
+Macro mdi:  mdi:account[2x, md-blue mdi-pulsed  ml-3]
+Macro mdi:  mdi:font-awesome[2x, md-indigo ml-3]
+Macro mdi:  mdi:font-awesome[3x, md-indigo ml-3]
+----
+
+[.result]
+====
+Macro mdi:  mdi:account[2x, md-blue mdi-pulsed ml-3]
+
+Macro mdi:  mdi:font-awesome[2x, md-indigo ml-3]
+
+Macro mdi:  mdi:font-awesome[3x, md-indigo ml-3]
+====
+
+Find all MDI Icons on page 
+link:{previewer-mdi}[MDI Icon Previewer, window="_blank"].
+
+NOTE: Parameters `icon_size` and `modifier` are optional. If *not* given,
+the icons `size` is set to default  (`1x`), the color to `black` and *no*
+settings for the `modifier` are applied.
+
+=== Font Awesome Icons
+
+J1 Template comes with *FA* icon support for Asciidoc documents
+included. *Font Awesome Icons* can be used as *inline* icons by using 
+the `fas:` (solid icons) or `fab` (brand icons) inline macro like so:
+
+[source, adoc, role="noclip"]
+----
+Your text fas:icon_name[icon_size, modifier] <1> <2> <3>
+----
+<1> All `icon_name` can be found on the Preview page for *FA Icon Previewer*
+<2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `10x`
+<3> The `modifier` can be used to set the e.g the color (md_blue), an 
+    animation (fa-pulsed) or the orientation (fa-rotate-45)
+
+.Click on _view result_ to see how it's looks alike
+----
+Solid icon:  fas:account[2x, md-blue fa-pulsed ml-3]
+
+Brand icon:  fab:font-awesome[2x, md-indigo ml-3]
+
+Brand icon:  fab:font-awesome[3x, md-indigo ml-3]
+----
+
+[.result]
+====
+Solid icon:  fas:user[2x, md-blue fa-pulsed ml-3]
+
+Brand icon:  fab:font-awesome[2x, md-indigo ml-3]
+
+Brand icon:  fab:font-awesome[3x, md-indigo ml-3]
+====
+
+NOTE: Parameters `icon_size` and `modifier` are optional. If *not* given,
+the icons `size` is set to default  (`1x`), the color to `black` and *no*
+settings for the `modifier` are applied.
+
+=== Twitter Emoji Icons
+
+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 how it's look alike
+----
+Faster than a emoji:turtle[3x]!
+
+This is an example of how you can emoji:heart[2x, pulsed] Asciidoctor 
+and Twitter Emoji emoji:smile[].
+----
+
+[.result]
+====
+Faster than a emoji:turtle[3x]!
+
+This is an example of how you can emoji:heart[2x, pulsed] Asciidoctor 
+and Twitter Emoji emoji:smile[].
+====
+
+Find all Twitter Emoji's build-in with J1 Template on page
+link:{previewer-emoji}[Emoji Icon Previewer, window="_blank"].
+
+
+== Blind Text (Lorem)
+
+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]
+====
+
+=== Lorem Types
+
+All *macro* types available for `lorem:` to be used for blind *text* can be
+found with the following table below.
+
+//.Tabelle
+[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 next preview is focussing extended Bootstrap *Modals*. The modals feature
+is currently in *beta* status, but it is a great option to customize your 
+user dialogs using them!
+
+Have a look for the link:{roundtrip-extended-modals}[BS modal extensions]
+feature of J1 Template.