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

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>