j1-template 2023.6.0 → 2023.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b6b429bb9a3a2e4a2b0b84df217409c88532a6424f5aeecec783e11ebe1d068
-  data.tar.gz: e671e654d0b8be848348b4f5dc961420eb5bfc7852e33ec14cd5a2cb8bb99f64
+  metadata.gz: 810e4e518abd7ac95e1bce174b297869adb225f95326aef6daf81840ed39142b
+  data.tar.gz: c6c3d33ce81df42d17d1bf57943803f974e63b8297c705ef1af465601d734e48
 SHA512:
-  metadata.gz: fdd87d5e28fbc093adf5a6b638b4f54c8c74824a4936e4600d95b62f7490ff3785b1c0ae5d3742512f17d482e3122d25604c913ac2f3b110124e4686849aa699
-  data.tar.gz: e08098021fe7d906cfed89f16cf76266e7694de0e392e9bb6a672a815a24a21b84487f70750cdfdadf126305e92beb1b16f5d11eb9e6784395c37d361ad77450
+  metadata.gz: c14828f42a573adee0597f52a44441b539493933d061e7002f308fac61fbb095263cbb0c49ec011e3f6fb0c4fdae0d39e6a2253e5ef86695cbd066f4bb3f0fe9
+  data.tar.gz: f7cb26eb70b028be02136f02176a4f2b947ba47f0ce7292b42c96fa2baa8b36b6fa627d64b5a82fbc6fc39677f454a41449aff3750fded7edc3cc10ac3d67bcd

data/_includes/themes/j1/layouts/content_generator_news_panel_posts.html

@@ -223,7 +223,7 @@
                 </div>
 
                 {% if paginator.total_pages > 1 %}
-                <nav class="paginator mb-4">
+                <nav class="paginator speak2me-ignore mb-4">
                   <ul class="pagination raised-z0">
                     {% if paginator.previous_page %}
                       <li class="page-item">
@@ -296,10 +296,10 @@
                       <!-- [INFO   ] [j1.layouts.content_generator_news_panel_posts.html ] [ place post image ] -->
                       {% if post.image %}
                         {% if post.image.path %}
-                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image.path}}" alt="{{post.title}}" style="{{image_filters}};">
+                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image.path}}" alt="{{post.tagline}}" style="{{image_filters}};">
                         {% assign post_width = '80x' %}
                         {% else %}
-                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image}}" alt="{{post.title}}" style="{{image_filters}};">
+                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image}}" alt="{{post.tagline}}" style="{{image_filters}};">
                         {% assign post_width = '80x' %}
                         {% endif %}
                       {% else %}
@@ -307,13 +307,14 @@
                         {% assign post_width = '100x' %}
                       {% endif %}
 
-                      <h3 class="card-header bg-primary notoc notranslate">{{post.title}}</h3>
+                      <!-- h3 id="{{1000000 | rand}}" class="card-header bg-primary notoc notranslate">{{post.title}}</h3 -->
+                      <h3 id="{{1000000 | rand}}" class="card-header bg-primary notranslate">{{post.title}}</h3>
                       <!-- Body|Excerpt -->
                       <div class="card-body r-text-300 mt-0">
                         {{post.excerpt|truncatewords: truncate_words}}
                       </div>
                       <!-- End Body|Excerpt -->
-                      <div class="card-footer r-text-200">
+                      <div class="card-footer speak2me-ignore r-text-200">
 
                         <div class="card-footer-text">
                           {% if language == "en" %}
@@ -368,24 +369,25 @@
                       <!-- [INFO   ] [j1.layouts.content_generator_news_panel_posts.html ] [ place post image ] -->
                       {% if post.image %}
                         {% if post.image.path %}
-                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image.path}}" alt="{{post.title}}" style="{{image_filters}};">
+                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image.path}}" alt="{{post.tagline}}" style="{{image_filters}};">
                         {% assign post_width = '80x' %}
                         {% else %}
-                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image}}" alt="{{post.title}}" style="{{image_filters}};">
+                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image}}" alt="{{post.tagline}}" style="{{image_filters}};">
                         {% assign post_width = '80x' %}
                         {% endif %}
                       {% else %}
                         <img class="mt-2" src="" alt="">
                         {% assign post_width = '100x' %}
                       {% endif %}
-                      <h3 class="card-header bg-primary notoc">{{post.title}}</h3>
+
+                      <h3 id="{{1000000 | rand}}" class="card-header bg-primary notoc">{{post.title}}</h3>
                       <!-- Body|Excerpt -->
                       <div class="card-body r-text-300 mt-0">
                         {% comment %} {{post.excerpt|truncatewords: 50|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}} {% endcomment %}
                         {{post.excerpt|truncatewords: truncate_words}}
                       </div>
                       <!-- End Body|Excerpt -->
-                      <div class="card-footer r-text-200">
+                      <div class="card-footer speak2me-ignore r-text-200">
 
                         <div class="card-footer-text">
                           {% if language == "en" %}

data/_includes/themes/j1/layouts/content_generator_post.html

@@ -78,7 +78,7 @@
   ------------------------------------------------------------------------------ {% endcomment %}
   <!-- Blog post CONTENT -->
   <div class="row">
-    <main id="main-content" class="r-text-{{rtext_size}} js-toc-content">
+    <div id="content" class="">
       {% if page.page_navigation %}
         <!-- Include a PAGER (top position) -->
         {% include {{pager}} %}
@@ -89,17 +89,19 @@
       <!-- place blog post HEADLINE -->
       <div class="post-headline mt-4">
         {% if language == "en" %}
-          <h1 class="notoc">{{ page.date | localize: "%Y %B, %e" }}</h1>
+          <!-- h1 class="notoc">{{ page.date | localize: "%Y %B, %e" }}</h1 -->
+          <h1 id="{{1000000 | rand}}">{{ page.date | localize: "%Y %B, %e" }}</h1>
         {% endif %}
         {% if language == "de" %}
-          <h1 class="notoc">{{ page.date | localize: "%-d. %B %Y" }}</h1>
+          <!-- h1 class="notoc">{{ page.date | localize: "%-d. %B %Y" }}</h1 -->
+          <h1 id="{{1000000 | rand}}">{{ page.date | localize: "%-d. %B %Y" }}</h1>
         {% endif %}
       </div>
 
       {% comment %} Place Blog post SERIES Navigation
       -------------------------------------------------------------------------- {% endcomment %}
       {% if page.series %}
-      <header class="bmd-layout-header">
+      <header class="bmd-layout-header" data-speak2me-ignore>
         <!-- jadams, 2021-02-28 added mb-3 to the navbar -->
         <div class="navbar navbar-dark bg-primary raised-z0">
           <button class="bmd-drawer drawer-toggler animated fadeIn" type="button" data-bs-toggle="drawer" data-bs-target="#post_navigator" aria-label="Series button">
@@ -134,9 +136,9 @@
       -------------------------------------------------------------------------- {% endcomment %}
       <!-- Content placed by post_content.html -->
       <!-- Additional div container placed for dropcaps used in series -->
-      <div class="mt-4">
+      <main id="main-content" class="r-text-{{rtext_size}} js-toc-content mt-4">
       {{content}}
-      </div>
+      </main>
 
     {% if page.series %}</nav>{% endif %}
 

data/_includes/themes/j1/procedures/global/create_word_cloud.proc

@@ -61,7 +61,7 @@
 
 <!-- div id="word-cloud" class="row ml-3 mr-3" -->
 <!-- jadams, 2021-11-20: justify word cloud BETTER with paginator buttons -->
-<div id="word-cloud" class="row g-0 ml-3">
+<div id="word-cloud" class="row speak2me-ignore g-0 ml-3">
   <div class="tag__box mt-0 mb-2">
     <div class="tag__cloud">
 

data/_includes/themes/j1/procedures/layouts/module_writer.proc

@@ -166,7 +166,7 @@ NO need to load this again
                 {% if resource_settings.pass_init_data %}
 
                   // [INFO   ] [j1.layout.module_writer.proc          ] [ pass init data for: {{resource_settings.id}} ]
-                  {% capture settings %}{"layout": "{{page.layout}}", "title": "{{page.title}}", "tagline": "{{page.tagline}}", "fab_menu_id": "{{page.fab_menu_id}}", "scrollbar": "{{page.scrollbar}}", "toc": "{{page.toc}}", "comments": "{{page.comments}}", "scrollDynamicPagesTopOnChange": "{{page.scrollDynamicPagesTopOnChange}}"}{% endcapture %}
+                  {% capture settings %}{"tts": "{{page.tts}}", "layout": "{{page.layout}}", "title": "{{page.title}}", "tagline": "{{page.tagline}}", "fab_menu_id": "{{page.fab_menu_id}}", "scrollbar": "{{page.scrollbar}}", "toc": "{{page.toc}}", "comments": "{{page.comments}}", "scrollDynamicPagesTopOnChange": "{{page.scrollDynamicPagesTopOnChange}}"}{% endcapture %}
                   var settings = $.extend({}, {{settings}});
 
                   {% comment %} create resource_settings.dependencies (if any)

data/_includes/themes/j1/procedures/posts/collate_timeline.proc

@@ -124,7 +124,7 @@
           ---------------------------------------------------------------------- {% endcomment %}
           <!-- div class="timeline-title" -->
           <div class="card-header bg-primary pt-4 pb-3">
-            <h2 id="{{1000000 | rand}}" class="md-white notranslate">{{post.title}}</h2>
+            <h3 id="{{1000000 | rand}}" class="md-white notranslate">{{post.title}}</h3>
           </div>
 
           <!-- Collect icon data from frontmatter -->
@@ -174,7 +174,7 @@
                 <i class="timeline-icon {{icon_family}} {{icon_family}}-{{icon_name}} {{icon_family}}-{{icon_size}} {{icon_family}}-{{icon_color}}"></i>
                 {{excerpt}}
               </div>
-              <div class="card-footer r-text-200 text-lowercase">
+              <div class="card-footer speak2me-ignore r-text-200 text-lowercase">
 
                 <a href="{{post.url}}"
                    class="btn btn-secondary btn-flex mb-0">
@@ -196,7 +196,7 @@
                 {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...'|strip_html %}
                 {{excerpt}}
               </div>
-              <div class="card-footer r-text-200 text-lowercase">
+              <div class="card-footer speak2me-ignore r-text-200 text-lowercase">
 
                 <a href="{{post.url}}"
                    class="btn btn-secondary btn-flex mb-0">
@@ -226,7 +226,7 @@
               {% assign comment_count = sharing.comment_count %}
             {% endfor %}
 
-            <div class="card-footer r-text-200">
+            <div class="card-footer speak2me-ignore r-text-200">
 
               <div class="card-footer-text">
                 {% if post.date %}

data/_includes/themes/j1/procedures/posts/pager.proc

@@ -75,7 +75,7 @@
 {% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
 
-<div class="paginator">
+<div class="paginator" data-speak2me-ignore>
   <ul class="pagination raised-z0">
 
     {% comment %} Set HOME page BUTTON (always)

data/_layouts/_home.html

@@ -0,0 +1,88 @@
+---
+layout:                                 default                                 # base layout the page inherits GLOBAL content
+debug:                                  false                                   # enable|disable additional debug information written to (static) content source
+---
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/_layouts/home.html
+ #  Liquid layout template for all pages of content-type HOME
+ #  (landing page ~/index.html)
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #
+ #  Copyright (C) 2023 Juergen Adams
+ #
+ #  J1 Theme is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
+ #
+ # -----------------------------------------------------------------------------
+ #  NOTE:
+ #    This is the layout for all content pages of type HOME.
+ #    Layout HOME is based on layout DEFAULT to inherit all
+ #    default (HTML) data used for ALL pages.
+ # -----------------------------------------------------------------------------
+ #  NOTE:
+ #    Do NOT add any CONTENT here.
+ #    For J1 Theme, Liquid procedures are being used intensively. To load
+ #    HTML data for a region (lane), the (Liquid) procedure "content_writer"
+ #    places the components specified in the connected YAML data file
+ #    'home.yml' located in folder: ~/_data/layouts.
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  liquid_var:  {{ liquid_var | debug }}
+ #
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+{% capture default_writer %}themes/{{site.template.name}}/procedures/layouts/default_writer.proc{% endcapture %}
+{% capture content_writer %}themes/{{site.template.name}}/procedures/layouts/content_writer.proc{% endcapture %}
+
+{% comment %} Set global settings
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign environment        = site.environment %}
+
+
+{% comment %} Process YML config data
+================================================================================ {% endcomment %}
+
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign lanes_collate       = site.data.layouts.home.lanes %}
+{% assign rtext               = site.data.j1_config.typography.rtext %}
+
+{% comment %} Set config data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign page_rtext          = page.rtext %}
+{% assign page_rtext_size     = page.rtext_size %}
+
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+  {% if rtext %}
+    {% assign rtext_size = site.data.j1_config.typography.rtext_size %}
+  {% else %}
+    {% assign rtext_size = 0 %}
+  {% endif %}
+  <!-- [INFO   ] [j1.layout.home.html                   ] [ Resposive text (rtext) detected as: {{rtext_size}} ] -->
+
+  <!-- [INFO   ] [j1.layout.home.html                   ] [ start content processing ] -->
+  {% comment %} Collect the BODY-HEADER region
+  ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.layout.home.html                   ] [ call default_writer for region: 'body-header' ] -->
+  <header id="header">
+    {% include  {{default_writer}} region='body-header' items=lanes_collate %}
+  </header>
+  <!-- [INFO   ] [j1.layout.home.html                   ] [ end processing default_writer for region: 'body-header' ] -->
+
+  {% comment %} Collect the BODY-MAIN region
+  ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.layout.home.html                   ] [ call content_writer for region: 'body-main' ] -->
+  <main id="content" class="container-fluid g-0 r-text-{{rtext_size}}">
+      {% include  {{content_writer}} region='body-main' items=lanes_collate %}
+  </main>
+  <!-- [INFO   ] [j1.layout.home.html                   ] [ end processing content_writer for region: 'body-main' ] -->
+  <!-- [INFO   ] [j1.layout.home.html                   ] [ end content processing ] -->

data/_layouts/home.html

@@ -81,7 +81,7 @@ debug:                                  false
   {% comment %} Collect the BODY-MAIN region
   ------------------------------------------------------------------------------ {% endcomment %}
   <!-- [INFO   ] [j1.layout.home.html                   ] [ call content_writer for region: 'body-main' ] -->
-  <main id="content" class="container-fluid g-0 r-text-{{rtext_size}}">
+  <main id="content" class="js-toc-content container-fluid g-0 r-text-{{rtext_size}}">
       {% include  {{content_writer}} region='body-main' items=lanes_collate %}
   </main>
   <!-- [INFO   ] [j1.layout.home.html                   ] [ end processing content_writer for region: 'body-main' ] -->

data/assets/data/banner.html

@@ -231,7 +231,7 @@ exclude_from_search:                    true
             {% if card_type == 'text' and card_enabled %}
 
             {% if badges %}
-            <div class="mb-3">
+            <div class="mb-3 speak2me-ignore">
               <p>
                 <span>
                   <a class="image" href="https://badge.fury.io/rb/j1-template" target="_blank" rel="noopener noreferrer">
@@ -252,7 +252,7 @@ exclude_from_search:                    true
                 {% comment %} TODO:
                 -----------------------------------------------------------------
                 <!-- Sticker -->
-                <div class="sticker" style="margin-top: -20px; right: 470px; display: block;">
+                <div class="sticker speak2me-ignore" style="margin-top: -20px; right: 470px; display: block;">
                   <a
                 		  id="banner-sticker-new-version"
                 		  class="link-no-decoration sticker-wrapper"
@@ -272,7 +272,7 @@ exclude_from_search:                    true
 
                 {% if heading_position == 'left' %}
                 <div>
-                  <h2 class="g-font-weight-500 mb-0 {{card_translate_description}}">{{card_title}}</h2>
+                  <h2 id="{{card_title}}" class="g-font-weight-500 mb-0 {{card_translate_description}}">{{card_title}}</h2>
                   <p class="tagline mb-0 {{card_translate_description}}">{{card_tagline}}</p>
                   <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
                 </div>
@@ -280,7 +280,7 @@ exclude_from_search:                    true
 
                 {% if heading_position == 'center' %}
                 <div class="text-center mb-2">
-                	<h2 class="mb-0 {{card_translate_description}}">{{card_title}}</h2>
+                	<h2 id="{{card_title}}" class="mb-0 {{card_translate_description}}">{{card_title}}</h2>
                 	<p class="h4 mb-0 text-muted {{card_translate_description}}"><i>{{card_tagline}}</i></p>
                 	<div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
                 </div>
@@ -295,7 +295,7 @@ exclude_from_search:                    true
               <div class="{{card_properties}}">{{card_description}}</div>
               {% if card_buttons %}
               <!-- Footer|Button row -->
-              <div class="mt-5">
+              <div class="speak2me-ignore mt-5">
                 {% for button_hash in card_buttons %}
                   {% include {{create_bs_button}} button_data=button_hash button_type="link" %}
                   {{bs_button_html}}
@@ -479,11 +479,11 @@ exclude_from_search:                    true
               <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
                 <div class="box">
                   <div class="content content-danger">
-                    <h2 class="notoc">
+                    <h2 id="exception" class="notoc">
                       <i class="mdib mdib-alarm-light mdib-3x md-red mr-1"></i>
                       Banner of type <big>{{banner_settings.type}}</big> not found
                     </h2>
-                    <h4 class="notoc box-title">Check your configuration at {{banner_config_file_name}}</h4>
+                    <h3 class="notoc box-title">Check your configuration at {{banner_config_file_name}}</h3>
                     <div class="box-description">
                       Don't worry about this. Maybe you've a typo in the banner configuration.
                       Check the banner config file for the unknown type. <br />

data/assets/data/panel.html

@@ -235,7 +235,7 @@ exclude_from_search:                    true
             <!-- Heading -->
             {% if heading_position == 'left' %}
             <div class="{{panel_settings.animate}} mb-2">
-              <h2 id="intro" class="g-font-weight-500 mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
+              <h2 id="{{panel_settings.title | downcase | replace:' ', '-'}}" class="g-font-weight-500 mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
               <p class="tagline mb-0 {{heading_translate}}"><b>{{panel_settings.tagline}}</b></p>
               <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
             </div>
@@ -243,7 +243,7 @@ exclude_from_search:                    true
 
             {% if heading_position == 'center' %}
             <div class="text-center mb-2">
-              <h2 class="mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
+              <h2 id="{{panel_settings.title | downcase | replace:' ', '-'}}" class="mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
               <p class="h4 mb-0 text-muted {{heading_translate}}"><i>{{panel_settings.tagline}}</i></p>
               <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
             </div>
@@ -343,12 +343,12 @@ exclude_from_search:                    true
                             </span>
                           {% endif %}
                         </div>
-                        <h3 class="m-0 {{card_title_translate}}">{{card_title}}</h3>
+                        <h3 id="{{1000000 | rand}}" class="m-0 speak2me-ignore {{card_title_translate}}">{{card_title}}</h3>
                       </div>
                     </div>
 
                     <div class="card-body g-min-height-200 r-text-300 mt-0">{{card_text}}</div>
-                    <div class="card-footer r-text-200 md-grey-900 text-lowercase">
+                    <div class="card-footer speak2me-ignore r-text-200 md-grey-900 text-lowercase">
                     {% for data in card_buttons %} {% for item in data %} {% for button in item[1] %}
                       {% assign key   = button[0] %}
                       {% assign value = button[1] %}
@@ -465,7 +465,7 @@ exclude_from_search:                    true
 
               {% if heading_position == 'left' %}
               <div class="{{panel_settings.animate}} mb-2">
-                <h2 class="g-font-weight-500 mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
+                <h2 id="{{panel_settings.title | downcase | replace:' ', '-'}}" class="g-font-weight-500 mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
                 <p class="tagline mb-0 {{heading_translate}}"><b>{{panel_settings.tagline}}</b></p>
                 <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
               </div>
@@ -473,7 +473,7 @@ exclude_from_search:                    true
 
               {% if heading_position == 'center' %}
               <div class="text-center mb-2">
-                <h2 class="mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
+                <h2 id="{{panel_settings.title | downcase | replace:' ', '-'}}" class="mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
                 <p class="h4 mb-0 text-muted {{heading_translate}}"><i>{{panel_settings.tagline}}</i></p>
                 <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
               </div>
@@ -511,7 +511,7 @@ exclude_from_search:                    true
             {% endif %}
             -------------------------------------------------------------------- {% endcomment %}
 
-            <div class="container-fluid" role="main">
+            <div class="container-fluid speak2me-ignore" role="main">
               <div id="plans-container" class="container mt-5">
                 <div class="row g-0">
 
@@ -661,7 +661,7 @@ exclude_from_search:                    true
 
               {% if heading_position == 'left' %}
               <div class="{{panel_settings.animate}} mb-2">
-                <h2 class="g-font-weight-500 mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
+                <h2 id="{{panel_settings.title | downcase | replace:' ', '-'}}" class="g-font-weight-500 mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
                 <p class="tagline mb-0 {{heading_translate}}"><b>{{panel_settings.tagline}}</b></p>
                 <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
               </div>
@@ -669,7 +669,7 @@ exclude_from_search:                    true
 
               {% if heading_position == 'center' %}
               <div class="text-center mb-2">
-                <h2 class="mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
+                <h2 id="{{panel_settings.title | downcase | replace:' ', '-'}}" class="mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
                 <p class="h4 mb-0 text-muted {{heading_translate}}"><i>{{panel_settings.tagline}}</i></p>
                 <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
               </div>
@@ -736,7 +736,7 @@ exclude_from_search:                    true
                   <article class="card raised-z0 card-same-height mb-3">
                     <div class="card-profile mb-0">
 
-                      <div class="card-icon mt-4">
+                      <div class="card-icon speak2me-ignore mt-4">
                         <a href="{{card_href}}" class="link-no-decoration" aria-label="Read more on features">
                           <i class="card-icon-circle raised-z0 {{icon_family}} {{icon_family}}-{{card_icon}} {{icon_size}} {{icon_color}} card-icon-background-color-primary"></i>
                         </a>
@@ -749,19 +749,23 @@ exclude_from_search:                    true
                           <h6 class="notoc category {{card_header_translate}} mt-2 mr-2">{{card_title}}</h6>
                           <h4 class="notoc card-title {{card_header_translate}}">{{card_tagline}}</h4>
                           -->
-                          <div class="notoc category {{card_header_translate}} mt-2 mr-2">{{card_title}}</div>
-                          <div class="notoc card-title {{card_header_translate}}">{{card_tagline}}</div>
+                          <div class="category {{card_header_translate}} speak2me-ignore mt-2 mr-2">
+                            {{card_title}}
+                          </div>
+                          <div class="card-title text-card {{card_header_translate}}">
+                            <h3 id="{{card_tagline | downcase | replace:' ', '-'}}">{{card_tagline}}</h3>
+                          </div>
 
                         </div>
                         <div class="card-body g-min-height-350 r-text-300 mt-0">{{card_text}}</div>
 
-                        <div class="card-footer">
+                        <div class="card-footer speak2me-ignore">
                           <div class="row {{panel_settings.id}}">
                           	<div id="{{card_id}}" class="accordion">
                               {% for list in services %}
                           	  <div class="card">
-                            		<div class="card-header" id="headingOne">
-                            		  <h2 class="clearfix mb-0">
+                            		<div class="card-header">
+                            		  <h2 class="notoc mb-0">
                               			<a class="btn btn-link card-profile collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#{{list.service.id}}" aria-expanded="false" aria-controls="{{list.service.id}}">
                                       <!-- i class="fa fa-chevron-circle-right"></i -->
                                       <i class="mdib mdib-chevron-right-circle"></i>
@@ -858,7 +862,7 @@ exclude_from_search:                    true
 
               {% if heading_position == 'left' %}
               <div class="{{panel_settings.animate}} mb-2">
-                <h2 class="g-font-weight-500 mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
+                <h2 id="{{panel_settings.title | downcase | replace:' ', '-'}}" class="g-font-weight-500 mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
                 <p class="tagline mb-0 {{heading_translate}}"><b>{{panel_settings.tagline}}</b></p>
                 <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
               </div>
@@ -866,7 +870,7 @@ exclude_from_search:                    true
 
               {% if heading_position == 'center' %}
               <div class="text-center mb-2">
-                <h2 class="mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
+                <h2 id="{{panel_settings.title | downcase | replace:' ', '-'}}" class="mb-0 {{heading_translate}}">{{panel_settings.title}}</h2>
                 <p class="h4 mb-0 text-muted {{heading_translate}}"><i>{{panel_settings.tagline}}</i></p>
                 <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
               </div>
@@ -905,6 +909,12 @@ exclude_from_search:                    true
                 {% assign card_block = "card-deck" %}
               {% endif %}
 
+              <div class="previewer-headline">
+                <div class="post-headline">
+              	<h2 id="post-headline" class="notoc mt-4">Preview</h2>
+                </div>
+              </div>
+
               <!-- [INFO   ] [~/assets/data/panel.html              ] [ blocktype detected as: {{card_block}} ] -->
               {% if card_block == 'card-list' %}
               <div class="preview_content">
@@ -919,24 +929,25 @@ exclude_from_search:                    true
                         <article class="card card-same-height raised-z0 mb-5">
                           {% if post.image %}
                             {% if post.image.path %}
-                              <img class="img-fluid img-object--cover g-height-300" src="{{post.image.path}}" alt="{{post.title}}" style="{{image_filters}};">
+                              <img class="img-fluid img-object--cover g-height-300" src="{{post.image.path}}" alt="{{post.tagline}}" style="{{image_filters}};">
                             {% assign post_width = '80x' %}
                             {% else %}
-                              <img class="img-fluid img-object--cover g-height-300" src="{{post.image}}" alt="{{post.title}}" style="{{image_filters}};">
+                              <img class="img-fluid img-object--cover g-height-300" src="{{post.image}}" alt="{{post.tagline}}" style="{{image_filters}};">
                             {% assign post_width = '80x' %}
                             {% endif %}
                           {% else %}
                             <img class="mt-2" src="" alt="">
                             {% assign post_width = '100x' %}
                           {% endif %}
-                          <h3 class="card-header bg-primary notoc notranslate">{{post.title}}</h3>
+                          <!-- h3 id="{{1000000 | rand}}" class="card-header bg-primary notoc notranslate">{{post.title}}</h3 -->
+                          <h3 id="{{1000000 | rand}}" class="card-header bg-primary notranslate">{{post.title}}</h3>
                           <!-- Body|Excerpt -->
                           <div class="card-body r-text-300 mt-0">
                             {% comment %} {{post.excerpt|truncatewords: 50|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}} {% endcomment %}
                             {{post.excerpt|truncatewords: truncate_words}}
                           </div>
                           <!-- End Body|Excerpt -->
-                          <div class="card-footer r-text-200">
+                          <div class="card-footer speak2me-ignore r-text-200">
 
                             <div class="card-footer-text">
                               {% if language == "en" %}
@@ -988,24 +999,25 @@ exclude_from_search:                    true
                     <article class="card raised-z0 mb-3">
                       {% if post.image %}
                         {% if post.image.path %}
-                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image.path}}" alt="{{post.title}}" style="{{image_filters}};">
+                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image.path}}" alt="{{post.tagline}}" style="{{image_filters}};">
                         {% assign post_width = '80x' %}
                         {% else %}
-                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image}}" alt="{{post.title}}" style="{{image_filters}};">
+                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image}}" alt="{{post.tagline}}" style="{{image_filters}};">
                         {% assign post_width = '80x' %}
                         {% endif %}
                       {% else %}
                         <img class="mt-2" src="" alt="">
                         {% assign post_width = '100x' %}
                       {% endif %}
-                      <h3 class="card-header bg-primary notoc">{{post.title}}</h3>
+                      <!-- h3 class="card-header bg-primary speak2me-ignore notoc">{{post.title}}</h3 -->
+                      <h3 id="{{1000000 | rand}}" class="card-header bg-primary notoc">{{post.title}}</h3>
                       <!-- Body|Excerpt -->
                       <div class="card-body r-text-300 mt-0">
                         {% comment %} {{post.excerpt|truncatewords: 50|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}} {% endcomment %}
                         {{post.excerpt|truncatewords: truncate_words}}
                       </div>
                       <!-- End Body|Excerpt -->
-                      <div class="card-footer r-text-200">
+                      <div class="card-footer speak2me-ignore r-text-200">
 
                         <div class="card-footer-text">
                           {% if language == "en" %}