RubyGems - j1-template - Versions diffs - 2024.3.13 → 2024.3.14 - Mend

j1-template 2024.3.13 → 2024.3.14

Files changed (193) hide show

data/lib/starter_web/pages/public/tools/previewer/_includes/documents/frame.textarea.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>iFrame message passing test 5</title>
+    <meta name="description" content="iFrame message passing test 5">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="robots" content="noindex">
+    <meta name="robots" content="nofollow">
+    <link rel="stylesheet" href="/assets/theme/j1/core/css/themes/unolight/bootstrap.css">
+    <link rel="stylesheet" href="/assets/theme/j1/core/css/icon-fonts/mdib.css">
+    <link rel="stylesheet" href="/assets/theme/j1/core/css/vendor.css">
+    <script src="/assets/theme/j1/adapter/js/j1.js"></script>
+    <script src="/assets/theme/j1/modules/jquery/js/jquery.js"></script>
+    <script src="/assets/theme/j1/modules/popper/js/popper.js"></script>
+  </head>
+  <body>
+    <a href="my.content.html">Back to page</a>
+    <h2>iFrame TextArea Example</h2>
+    <p>
+      Resize the textarea element below.
+    </p>
+    <p id="callback"></p>
+    <textarea id="textArea">Resize me</textarea>
+    <!-- script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script -->
+    <script src="../js/client/iframeResizer.contentWindow.min.js"></script>
+    <script>
+      function store() {
+        this.x = this.offsetWidth
+        this.y = this.offsetHeight
+      }
+      $('textarea')
+        .each(store)
+        .on('mouseover mouseout', function() {
+          if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
+            if ('parentIFrame' in window) parentIFrame.size()
+            store.call(this)
+          }
+        })
+    </script>
+  </body>
+</html>

data/lib/starter_web/pages/public/tools/previewer/_includes/documents/my.content.html ADDED Viewed

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>iFrame message passing test 1</title>
+  <meta name="description" content="iFrame message passing test 1">
+  <meta name="viewport" content="width=device-width">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="robots" content="noindex">
+  <meta name="robots" content="nofollow">
+  <link rel="stylesheet" href="/assets/theme/j1/core/css/themes/unolight/bootstrap.css">
+  <link rel="stylesheet" href="/assets/theme/j1/core/css/vendor.css">
+  <script src="/assets/theme/j1/modules/jquery/js/jquery.js"></script>
+  <script src="/assets/theme/j1/modules/popper/js/popper.js"></script>
+  <script src="/assets/theme/j1/modules/iframeResizer/js/client/iframeResizer.contentWindow.js"></script>
+</head>
+  <body class="r-text-200 js-toc-content">
+    <p id="callback"></p>
+    <b>iFrame options: </b>
+    &nbsp;
+    <a id="nested" href="frame.nested.html">Nested</a>
+    &nbsp;
+    <a href="frame.hover.html">Hover</a>
+    &nbsp;
+    <a href="frame.textarea.html">TextArea</a>
+    <div class="paragraph mt-3">
+      <p>
+        But I must explain to you how all this mistaken idea of denouncing
+        pleasure and praising pain was born and I will give you a complete account
+        of the system, and expound the actual teachings of the great explorer of
+        the truth, the master-builder of human happiness. No one rejects,
+        dislikes, or avoids pleasure itself, because it is pleasure, but because
+        those who do not know how to pursue pleasure rationally encounter
+        consequences that are extremely painful. Nor again is there anyone who
+        loves or pursues or desires to obtain pain of itself, because it is pain,
+        but because occasionally circumstances occur in which toil and pain can
+        procure him some great pleasure. To take a trivial example, which of us
+        ever undertakes laborious physical exercise, except to obtain some
+        advantage from it? But who has any right to find fault with a man who
+        chooses to enjoy a pleasure that has no annoying consequences, or one who
+        avoids a pain that produces no resultant pleasure?
+      </p>
+      <p>
+        On the other hand, we denounce with righteous indignation and dislike men
+        who are so beguiled and demoralized by the charms of pleasure of the
+        moment, so blinded by desire, that they cannot foresee the pain and
+        trouble that are bound to ensue; and equal blame belongs to those who fail
+        in their duty through weakness of will, which is the same as saying
+        through shrinking from toil and pain. These cases are perfectly simple and
+        easy to distinguish. In a free hour, when our power of choice is
+        untrammelled and when nothing prevents our being able to do what we like
+        best, every pleasure is to be welcomed and every pain avoided. But in
+        certain circumstances and owing to the claims of duty or the obligations
+        of business it will frequently occur that pleasures have to be repudiated
+        and annoyances accepted. The wise man therefore always holds in these
+        matters to this principle of selection: he rejects pleasures to secure
+        other greater pleasures, or else he endures pains to avoid worse pains.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+        est laborum.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </p>
+    </div>
+    <script>
+      var iFrameResizer = {
+        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) {
+          $('p#callback').html (
+            '<b>Frame ID:</b> '    + messageData.iframe.id +
+            ' <b>Message:</b> '    + messageData.message
+          );
+        }
+      }
+    </script>
+  </body>
+</html>

data/lib/starter_web/pages/public/tools/previewer/preview_amplitudejs.adoc ADDED Viewed

@@ -0,0 +1,172 @@
+---
+title:                                  Amplitude
+title_extention:                        Custom Audio Player
+tagline:                                Custom Audio Player
+date:                                   2024-04-17
+#last_modified:                         2024-01-01
+description: >
+                                        AmplitudeJS is a JavaScript library to control the design
+                                        of audio media players on web pages. The concept allows
+                                        designers to fully control the look and feel of players
+                                        without deep scripting knowledge.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap, html, html5, audio,
+                                        AmplitudeJS, Amplitude
+categories:                             [ Previewer ]
+tags:                                   [ Amplitude, Audio ]
+image:
+  path:                                 /assets/image/icons/videojs/videojs-poster.png
+  width:                                1920
+  height:                               1280
+regenerate:                             true
+personalization:                        true
+permalink:                              /pages/public/tools/previewer/amplitudejs/
+resources:                              [ amplitudejs ]
+resource_options:
+  - toccer:
+      collapseDepth:                    2
+  - attic:
+      slides:
+        - url:                          /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
+          alt:                          Photo by Alexey Ruban on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Alexey Ruban
+            href:                       //unsplash.com/de/@intelligenciya
+---
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+//  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
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// See: https://521dimensions.com/open-source/amplitudejs/docs
+// See: https://github.com/mediaelement/mediaelement-plugins
+// See: https://github.com/serversideup/amplitudejs/
+[role="dropcap"]
+The Audio tag in HTML5 is a great way to add audio media to web pages.
+However, the browser fully controls the audio playback interface,
+which can limit or even break a page's design if audio media is used.
+AmplitudeJS for the J1 Template offers a straightforward solution for web
+developers. It allows them to easily customize the appearance of their audio
+players without the need for complex scripting. By leveraging J1 Template
+and Amplitude's API, web designers can craft unique interfaces that define
+the visual and functional aspects of a player's audio control elements.
+mdi:clock-time-five-outline[24px, md-gray mr-2]
+*5-10 Minutes* to read
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+// include::{documentdir}/amplitudejs.compact.css.asciidoc[]
+// include::{documentdir}/amplitudejs.large.css.asciidoc[]
+// include::{documentdir}/amplitudejs.mini.css.asciidoc[]
+[role="mt-4"]
+The J1 Template implements custom players based on the (default) theme Uno.
+The color scheme used matches the look and feel of the template to preserve
+the page design.
+Three types of AmplitudeJS players are build-in for the J1 template system:
+* Mini Player
+* Compact Player (default payer)
+* Large Player
+[role="mt-4"]
+[NOTE]
+====
+Amplitude players for the J1 Template are mobile-friendly. Instead of
+clicking on the appropriate elements, touch events are applied to all
+mobile devices.
+====
+[role="mt-5"]
+== Mini Player
+In the context of complex components on a web page, like an audio player,
+a mini player refers to a minimized version of full players. It typically
+offers basic playback controls, such as pause, play, and
+volume adjustment, while taking up less screen space.
+Mini players are beneficial when you want to listen to audio in the
+background without dedicating the entire screen to the player. They
+are commonly found on music streaming services, podcast platforms, and
+websites with embedded audio content.
+.Emancipator · Dusk To Dawn
+amplitude::free_emancipator_mini[role="mt-3 mb-5"]
+.Royalty Free Music · Disco 80th
+amplitude::free_disco_mini[role="mt-3 mb-5"]
+lorem:sentences[5]
+[role="mt-5"]
+== Compact Player
+A complex component like an audio player on a web page, *compact*
+typically refers to a design or layout that minimizes the component's
+space while maintaining its functionality and usability.
+////
+The *compact design* for an audio player is an efficient approach that
+involves condensing the player controls and display elements into a smaller
+area. It uses icons or symbols instead of text labels where possible, and
+possibly hides less frequently used features behind menus or dropdowns to
+reduce clutter, thereby instilling confidence in its effectiveness.
+A *compact* design allows the audio player to fit neatly within the web
+page's layout without overwhelming or dominating the content around it.
+The design aims to balance functionality and space efficiency, ensuring
+users can easily access and control the audio playback without sacrificing
+too much screen space.
+////
+.Emancipator · Dusk To Dawn
+amplitude::free_emancipator_compact[role="mt-3 mb-5"]
+.Royalty Free Music · Disco 80th
+amplitude::free_disco_compact[role="mt-3 mb-5"]
+lorem:sentences[5]
+[role="mt-5"]
+== Large Player
+lorem:sentences[5]
+.Emancipator · Dusk To Dawn
+amplitude::free_emancipator_large[role="mt-3 mb-5"]
+.Royalty Free Music · Disco 80th
+amplitude::free_disco_large[role="mt-3 mb-5"]
+[role="mb-8"]
+lorem:sentences[3]

data/lib/starter_web/pages/public/tour/_includes/attributes.asciidoc CHANGED Viewed

@@ -39,8 +39,8 @@ tag::urls[]
 :url-tour--image_headers:                         /pages/public/tour/image_header
 :url-tour--readme-first:                          /pages/public/learn/read_me_first/
 :url-tour--present-images:                        /pages/public/tour/present_images/
-:url-tour--playback-audio:                        /pages/public/tour/playback_audio/
-:url-tour--playback-video:                        /pages/public/tour/playback_video/
+:url-tour--present-audio:                         /pages/public/tour/present_audio/
+:url-tour--present-video:                         /pages/public/tour/present_video/
 :url-tour--cards:                                 /pages/public/tour/cards/
 :url-tour--typography:                            /pages/public/tour/typography/
 :url-tour--asciidoc-extensions:                   /pages/public/tour/asciidoc_extensions/

data/lib/starter_web/pages/public/tour/_includes/documents/419_advanced_modals_demo.asciidoc CHANGED Viewed

@@ -16,8 +16,8 @@
           <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
         </div>
         <div class="row px-4">
-          <a type="button" class="btn btn-primary mr-2">Yes, please</a>
-          <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+          <a href="#" type="button" class="btn btn-primary mr-2">Yes, please</a>
+          <a href="#" type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
         </div>
       </div>
     </div>
@@ -54,8 +54,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+        <a href="#" type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a href="#" type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -90,8 +90,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+        <a href="#" type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a href="#" type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -113,8 +113,8 @@
       <!-- Body -->
       <div class="modal-body">
         <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
-          <a type="button" class="btn btn-primary mr-2">Yes, please</a>
-          <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
+          <a href="#" type="button" class="btn btn-primary mr-2">Yes, please</a>
+          <a href="#" type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
         </div>
       </div>
     </div>
@@ -156,8 +156,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+        <a href="#" type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a href="#" type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -200,8 +200,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+        <a href="#" type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a href="#" type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -263,8 +263,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer">
-        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+        <a href="#" type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a href="#" type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -326,8 +326,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer">
-        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+        <a href="#" type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a href="#" type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->

data/lib/starter_web/pages/public/tour/asciidoc_extensions.adoc CHANGED Viewed

@@ -48,7 +48,11 @@ resource_options:
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+:time-num--string:                      5-10
+:time-en--string:                       Minutes
+:time-en--description:                  to read
+:time-de--string:                       Minuten
+:time-de--description:                  Lesezeit
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -58,6 +62,7 @@ resource_options:
 // -----------------------------------------------------------------------------
 {% include {{load_attributes}} scope="all" %}
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
@@ -82,8 +87,13 @@ Extensions for the markup language Asciidoc were made especially for documents
 of the Jekyll content type *page*, but can be used for *posts* or *collections*
 as well.
-mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
-*5-10 Minutes* to read
+[subs=attributes]
+++++
+<div class="video-title">
+  <i class="mdib mdib-clock-outline mdib-24px mr-2"></i>
+  {time-num--string} {time-en--string} {time-en--description}
+</div>
+++++
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------

data/lib/starter_web/pages/public/tour/bootstrap_themes.adoc CHANGED Viewed

@@ -48,7 +48,11 @@ resource_options:
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+:time-num--string:                      3
+:time-en--string:                       Minutes
+:time-en--description:                  to read
+:time-de--string:                       Minuten
+:time-de--description:                  Lesezeit
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -72,8 +76,13 @@ overall layout, text, tables, and form elements across all modern web browsers
 available on the market. In addition, developers can take advantage of already
 defined CSS classes in Bootstrap to customize a layout individually.
-mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
-*3 Minutes* to read
+[subs=attributes]
+++++
+<div class="video-title">
+  <i class="mdi mdi-gray mdi-clock-time-five-outline mdi-24px mr-2"></i>
+  {time-num--string} {time-en--string} {time-en--description}
+</div>
+++++
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------

data/lib/starter_web/pages/public/tour/highlghter_rouge.adoc CHANGED Viewed

@@ -47,7 +47,11 @@ resource_options:
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+:time-num--string:                      3
+:time-en--string:                       Minutes
+:time-en--description:                  to read
+:time-de--string:                       Minuten
+:time-de--description:                  Lesezeit
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -57,6 +61,7 @@ resource_options:
 // -----------------------------------------------------------------------------
 {% include {{load_attributes}} scope="all" %}
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
@@ -67,8 +72,13 @@ output using standard ANSI 256-colors displayed by all current browsers.
 Find available themes for selected languages to see how highlighting works
 using Rouge.
-mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
-*3 Minutes* to read
+[subs=attributes]
+++++
+<div class="video-title">
+  <i class="mdib mdib-clock-outline mdib-24px mr-2"></i>
+  {time-num--string} {time-en--string} {time-en--description}
+</div>
+++++
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------

data/lib/starter_web/pages/public/tour/icon_fonts.adoc CHANGED Viewed

@@ -47,7 +47,11 @@ resource_options:
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+:time-num--string:                      5-10
+:time-en--string:                       Minutes
+:time-en--description:                  to read
+:time-de--string:                       Minuten
+:time-de--description:                  Lesezeit
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -85,8 +89,13 @@ the so-called *Unified Open Source Icon Framework* -- see section
 <<Iconify-Framework Icons>> for more information.
 ====
-mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
-*5-10 Minutes* to read
+[subs=attributes]
+++++
+<div class="video-title">
+  <i class="mdib mdib-clock-outline mdib-24px mr-2"></i>
+  {time-num--string} {time-en--string} {time-en--description}
+</div>
+++++
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------

data/lib/starter_web/pages/public/tour/modal_extentions.adoc CHANGED Viewed

@@ -44,7 +44,11 @@ resource_options:
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+:time-num--string:                      5-10
+:time-en--string:                       Minutes
+:time-en--description:                  to read
+:time-de--string:                       Minuten
+:time-de--description:                  Lesezeit
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -65,14 +69,16 @@ important information to your visitors.
 The dialogs are positioned over everything else in the document so that
 messages get the full user's attention.
-mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
-*5-10 Minutes* to read
+[subs=attributes]
+++++
+<div class="video-title">
+  <i class="mdib mdib-clock-outline mdib-24px mr-2"></i>
+  {time-num--string} {time-en--string} {time-en--description}
+</div>
+++++
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-// Include the modals HTML portion (hidden)
-// -----------------------------------------------------------------------------
 include::{documentdir}/419_advanced_modals_demo.asciidoc[]
 [role="mt-5"]