feat: enhance documentation examples with improved layout and additional parameters for clarity

core/js/src/countup.js

@@ -5,15 +5,19 @@ if (elements.length) {
 		let options = {};
 		try {
 			const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
-			options = Object.assign({'enableScrollSpy': true}, dataOptions);
+			options = Object.assign({
+				'enableScrollSpy': true
+			}, dataOptions);
 			
 		} catch (error) {}
 
 		const value = parseInt(element.innerHTML, 10);
 
-		const countUp = new window.countUp.CountUp(element, value, options);
-		if (!countUp.error) {
-			countUp.start();
+		if (window.countUp && window.countUp.CountUp) {
+			const countUp = new window.countUp.CountUp(element, value, options);
+			if (!countUp.error) {
+				countUp.start();
+			}
 		}
 	});
 }

docs/content/illustrations/introduction/preview.md

@@ -0,0 +1,17 @@
+---
+title: Preview
+summary: "Tabler Illustrations offers 80 illustrations in two themes: light and dark. You can use them in your projects to enhance the visual appeal and convey messages effectively."
+---
+
+Look at full list of illustrations below and see how they look.
+
+{% assign all-illustrations = illustrations | sort %}
+<div class="row g-2 gy-6">
+{% for illustration in all-illustrations %}
+<div class="col-6 col-md-4 col-lg-3 text-center">
+<img src="/static/illustrations/light/{{ illustration }}.png" alt="{{ illustration }}" class="hide-theme-dark" />
+<img src="/static/illustrations/dark/{{ illustration }}.png" alt="{{ illustration }}" class="hide-theme-light" />
+<code>{{ illustration }}</code>
+</div>
+{% endfor %}
+</div>

docs/content/ui/components/breadcrumb.md

@@ -35,7 +35,7 @@ Look at the example below to see how breadcrumbs work in practice.
   </li>
 </ol>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Different separators
 
@@ -105,7 +105,7 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp
   </li>
 </ol>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Muted breadcrumbs
 

docs/content/ui/components/cards.md

@@ -16,7 +16,7 @@ Use the `.card` and `.card-body` classes to create a card and use it as the basi
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html bg="surface-secondary" %}
+{% include "docs/example.html" html=html bg="surface-secondary" column %}
 
 ## Card padding
 
@@ -38,7 +38,7 @@ Cards with the `.card-sm` class are well suited for small items such as widgets,
   <div class="card-body">This is some text within a card body.</div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html bg="surface-secondary" %}
+{% include "docs/example.html" html=html bg="surface-secondary" column %}
 
 ```html
 <div class="card card-sm">...</div>
@@ -67,7 +67,7 @@ Add a title to your card by including the `.card-title` class within `.card-body
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html bg="surface-secondary" column vertical %}
+{% include "docs/example.html" html=html bg="surface-secondary" column %}
 
 ## Card with title and image
 
@@ -89,7 +89,7 @@ To create a more visually appealing card, add a title and an image. Thanks to th
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html bg="surface-secondary" %}
+{% include "docs/example.html" html=html bg="surface-secondary" column %}
 
 ## Blog post card
 
@@ -230,29 +230,6 @@ Add a status color to your card, either at the top or on the side of the card, t
 {%- endcapture %}
 {% include "docs/example.html" html=html bg="surface-secondary" %}
 
-```html
-<div class="card">
-  <div class="card-status-top bg-danger"></div>
-  <div class="card-body">
-    <h3 class="card-title">Card with top status</h3>
-    <p class="text-secondary">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
-      iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
-    </p>
-  </div>
-</div>
-<div class="card">
-  <div class="card-status-start bg-green"></div>
-  <div class="card-body">
-    <h3 class="card-title">Card with side status</h3>
-    <p class="text-secondary">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
-      iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
-    </p>
-  </div>
-</div>
-```
-
 ## Stacked card
 
 Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
@@ -332,66 +309,3 @@ Organize multiple cards into tabs to be able to display more content in a well-o
 {%- endcapture %}
 {% include "docs/example.html" html=html bg="surface-secondary" column %}
 
-```html
-<!-- Cards with tabs component -->
-<div class="card-tabs">
-  <!-- Cards navigation -->
-  <ul class="nav nav-tabs">
-    <li class="nav-item">
-      <a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
-    </li>
-    <li class="nav-item">
-      <a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a>
-    </li>
-    <li class="nav-item">
-      <a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a>
-    </li>
-    <li class="nav-item">
-      <a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a>
-    </li>
-  </ul>
-  <div class="tab-content">
-    <!-- Content of card #1 -->
-    <div id="tab-top-1" class="card tab-pane active show">
-      <div class="card-body">
-        <div class="card-title">Content of tab #1</div>
-        <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
-          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-        </p>
-      </div>
-    </div>
-    <!-- Content of card #2 -->
-    <div id="tab-top-2" class="card tab-pane">
-      <div class="card-body">
-        <div class="card-title">Content of tab #2</div>
-        <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
-          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-        </p>
-      </div>
-    </div>
-    <!-- Content of card #3 -->
-    <div id="tab-top-3" class="card tab-pane">
-      <div class="card-body">
-        <div class="card-title">Content of tab #3</div>
-        <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
-          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-        </p>
-      </div>
-    </div>
-    <!-- Content of card #4 -->
-    <div id="tab-top-4" class="card tab-pane">
-      <div class="card-body">
-        <div class="card-title">Content of tab #4</div>
-        <p class="text-secondary">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
-          distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-```
-

docs/content/ui/components/countup.md

@@ -24,7 +24,7 @@ The results can be seen in the example below.
 {% capture html -%}
 <h1 data-countup>30000</h1>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html centered %}
 
 ## Duration
 
@@ -41,7 +41,7 @@ Look at the example below to see how the duration affects the animation.
 <h1 data-countup='{"duration":4}'>30000</h1>
 <h1 data-countup='{"duration":6}'>30000</h1>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Starting value
 
@@ -58,7 +58,7 @@ To see how the starting value affects the animation, look at the example below.
 <h1 data-countup='{"startVal":12345}'>30000</h1>
 <h1 data-countup='{"startVal":47655}'>30000</h1>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Decimal places
 
@@ -76,7 +76,7 @@ Look at the example below to see how the number of decimal places affects the an
 <h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
 <h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Easing
 
@@ -92,7 +92,7 @@ Look at the example below to see how easing affects the animation.
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"useEasing": false}'>30000</h1>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Use grouping
 
@@ -108,7 +108,7 @@ Example below shows how grouping affects the animation.
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"useGrouping": false}'>30000</h1>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Separator
 
@@ -124,7 +124,7 @@ This example shows how the separator affects the animation.
 <h1 data-countup>3000000</h1>
 <h1 data-countup='{"separator":" "}'>3000000</h1>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Decimal separator
 
@@ -140,7 +140,7 @@ Look at the example below to see how the decimal separator affects the animation
 <h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
 <h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Prefix
 
@@ -156,7 +156,7 @@ Look at the example below to see how the prefix affects the animation.
 <h1 data-countup='{"prefix":"$"}'>30000</h1>
 <h1 data-countup='{"prefix":"€"}'>30000</h1>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Suffix
 
@@ -172,4 +172,4 @@ Look at the example below to see how the suffix affects the animation.
 <h1 data-countup='{"suffix":"%"}'>300</h1>
 <h1 data-countup='{"suffix":"‰"}'>300</h1>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html vertical separated %}

docs/content/ui/components/empty.md

@@ -57,7 +57,7 @@ Use the default empty state to engage users in the critical moments of their exp
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html bg="surface-secondary" %}
 
 ## Empty state with illustration
 
@@ -66,7 +66,7 @@ Make your empty state screen more attractive and engaging by adding an illustrat
 {% capture html -%}
 <div class="empty">
   <div class="empty-img">
-    <img src="..." height="128" alt="" />
+    {% include "ui/illustration.html" image="boy-with-key" alt="Empty state illustration" %}
   </div>
   <p class="empty-title">Invoices are managed from here</p>
   <p class="empty-subtitle text-secondary">
@@ -95,7 +95,7 @@ Make your empty state screen more attractive and engaging by adding an illustrat
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html bg="surface-secondary" %}
 
 ## Empty state with header
 
@@ -132,20 +132,5 @@ Instead of adding an icon or illustration you can simply give the text:
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html bg="surface-secondary" %}
 
-```html
-<div class="empty">
-  <div class="empty-header">404</div>
-  <p class="empty-title">Oops… You just found an error page</p>
-  <p class="empty-subtitle text-secondary">
-    Try adjusting your search or filter to find what you're looking for.
-  </p>
-  <div class="empty-action">
-    <a href="#" class="btn btn-primary">
-      {% include "ui/icon.html" icon="arrow-left" %}
-      Take me home
-    </a>
-  </div>
-</div>
-```

shared/data/sri.json

@@ -1,6 +1,6 @@
 {
-  "css": "sha384-KSBcNt/Mulg3JQzroX3d1zEP/Tc56uS+xE5k+uXt33zVlRwz1j7BQp4eRUH5P+X4",
-  "css-rtl": "sha384-5hIjOeu7y3tXjZQO/1xmN9svs+x+3LGjFOW6YH54qRh38/c/uiYqRU0orgjXAGDp",
+  "css": "sha384-IBrVf7Odj7RWoMpL3vakQPUmgqjDCU7WUZLi2kJY/VHMq1vwt3EYKnKiWJ4H28Oc",
+  "css-rtl": "sha384-XEafVtpnCab8PIASAoWtYQC/yLMJCj3NMPhvefuQbwWBhJHFUfoPKa0jIZw8ZbYb",
   "css-flags": "sha384-fStl5MKxnUStSlpPiHGSFmUTTzr2KEY7jtgmvTswVDaQJ+sLbmEF+26m57M2sbCm",
   "css-flags-rtl": "sha384-i8KVpZYtpnZDkTYzaYlaeiF91VNnmyORipMLZh6hKGh5Jj80QN6962xlHQPkx/xr",
   "css-marketing": "sha384-IILX0Nea/+/hbVhEsrQ/djsqtSJmb4CM9hPzWd7Yh8hzbyYp4N/4hWMQL5kIPEuZ",
@@ -15,7 +15,7 @@
   "css-themes-rtl": "sha384-er5SohDm2dJxg5UhUf1RI96jOlVA7RwgVm5++ribGoWmjds4MntkV6Mxg66xCQQg",
   "css-vendors-rtl": "sha384-irFOyZsTL/op6ReHkogsg+DkyAcog2eS/KdjjclmEPqJ6EuT2/okOK49HogVr0vC",
   "css-vendors": "sha384-CW4ecnQUl53vx8YMR5fr7mJTTQqoFz5pBEM2GoWprNI+H/t+WG6bosZLrQMdnbCh",
-  "js": "sha384-PRkENR4f5wQma0mCHb6RLYzjdNtqhICPI0A0k27raTkeKg17hM+tNMvCx1ZiwAQ7",
+  "js": "sha384-bOI13MQRvtBDkXKOx4PXrPh6/LDliTRkHou3x8+2cQZUG28UdQrgtPmoCkYR2SGT",
   "js-theme": "sha384-3Z3TIkq5YSKOncCfiURX/S03AUHfI0nVzd39uRc9KLhtLi7M228qgWBjnRXwt2j0",
   "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
   "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"

shared/includes/docs/example.html

@@ -1,6 +1,6 @@
 <div
 	class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
-	{%- unless include.raw -%}<div class="p-6 w-full{% if include.centered %} d-flex justify-content-center flex-fill flex-wrap{% if include.vertical %} flex-column{% endif %} gap-2{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
+	{%- unless include.raw -%}<div class="p-6 w-full{% if include.column %} d-flex gap-3 flex-column{% elsif include.centered %} justify-content-center flex-fill flex-wrap gap-2{% if include.vertical %} flex-column{% endif %}{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
 		{{ html | remove-href }}
 	{%- unless include.raw -%}</div>{%- endunless -%}
 </div>

shared/includes/ui/illustration.html

@@ -1,6 +1,6 @@
+{% removeemptylines %}
 {% assign image = include.image | replace: '.svg', '' %}
 {% assign height = include.height | default: 128 %}
-{% assign src = "/free-illustrations/autodark/" | append: image %}
 
 {% assign illustration = free-illustrations.autodark[image] %}
 
@@ -12,4 +12,5 @@
 {% assign replace-to-height = 'height="' | append: height | append: '"' %}
 {% assign illustration = illustration | replace: 'width="800" height="600"', replace-to-height %}
 
-{{ illustration }}
+{{ illustration }}
+{% endremoveemptylines %}

shared/layouts/docs/default.html

@@ -135,19 +135,19 @@
 		</div>
 	</div>
 
-	<script src="/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js"></script>
-	<script src="/js/docs{% if environment != 'development' %}.min{% endif %}.js" defer></script>
-
 	{% if docs-libs -%}
 	{% for lib in libs.js -%}
 	{% if docs-libs contains lib[0] or libs.global-libs contains lib[0] -%}
 	{% for file in lib[1] -%}
 	<script
 		src="{% if file contains 'http://' or file contains 'https://' %}{{ file | replace: 'GOOGLE_MAPS_KEY', google-maps-key }}{% else %}/libs/{% if environment != 'development' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}{% endif %}"
-		defer></script>
+	></script>
 	{% endfor -%}
 	{% endif -%}
 	{% endfor -%}
 	{% endif -%}
+
+	<script src="/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js"></script>
+	<script src="/js/docs{% if environment != 'development' %}.min{% endif %}.js" defer></script>
 </body>
 </html>