feat: enhance documentation layout and improve interaction examples for better usability

docs/.build/rollup.config.mjs

@@ -21,6 +21,9 @@ const plugins = [
 plugins.push(
 	replace({
 		'process.env.NODE_ENV': '"production"',
+		'process.env.DOCSEARCH_APP_ID': process.env.DOCSEARCH_APP_ID,
+		'process.env.DOCSEARCH_INDEX_NAME': process.env.DOCSEARCH_INDEX_NAME,
+		'process.env.DOCSEARCH_API_KEY': process.env.DOCSEARCH_API_KEY,
 		preventAssignment: true
 	}),
 	nodeResolve()

docs/content/ui/utilities/interactions.md

@@ -20,9 +20,9 @@ Change the way in which the content is selected when the user interacts with it.
 Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
 
 {% capture html -%}
-<p>
+<div>
   <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.
-</p>
-<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
+</div>
+<div><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</div>
 {%- endcapture %}
 {% include "docs/example.html" html=html %}

shared/includes/docs/docs-card.html

@@ -8,7 +8,7 @@
 				</div>
 				{%- endif -%}
 				<div class="col">
-					<h3>{{ include.title }}</h3>
+					<div class="h3">{{ include.title }}</div>
 					<p class="text-secondary m-0 fs-4 lh-base">{{ include.description }}</p>
 				</div>
 			</div>

shared/layouts/docs/default.html

@@ -80,16 +80,30 @@
 											{% if next-prev.prev %}
 											<li class="page-item page-prev">
 												<a class="page-link" href="{{ next-prev.prev.url }}">
-													<div class="page-item-subtitle">previous</div>
-													<div class="page-item-title">{{ next-prev.prev.data.title }}</div>
+													<div class="row">
+														<div class="col-auto">
+															{% include "ui/icon.html" icon="chevron-left" %}
+														</div>
+														<div class="col">
+															<div class="page-item-subtitle">previous</div>
+															<div class="page-item-title">{{ next-prev.prev.data.title }}</div>
+														</div>
+													</div>
 												</a>
 											</li>
 											{% endif %}
 											{% if next-prev.next %}
 											<li class="page-item page-next">
 												<a class="page-link" href="{{ next-prev.next.url }}">
-													<div class="page-item-subtitle">next</div>
-													<div class="page-item-title">{{ next-prev.next.data.title }}</div>
+													<div class="row">
+														<div class="col">
+															<div class="page-item-subtitle">next</div>
+															<div class="page-item-title">{{ next-prev.next.data.title }}</div>
+														</div>
+														<div class="col-auto">
+															{% include "ui/icon.html" icon="chevron-right" %}
+														</div>
+													</div>
 												</a>
 											</li>
 											{% endif %}