From 7fc1d5c11ce96d4dd7c48bbeb62c91ff7f1163e4 Mon Sep 17 00:00:00 2001
From: BG-Software <73077398+BG-Software-BG@users.noreply.github.com>
Date: Mon, 12 May 2025 22:13:38 +0200
Subject: [PATCH] Fix: Exclude headings in the carousel and modal examples from
 ToC (#2362)

---
 .changeset/stale-cherries-draw.md | 5 +++++
 docs/eleventy.config.mjs          | 2 +-
 shared/includes/docs/example.html | 4 +++-
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/stale-cherries-draw.md

diff --git a/.changeset/stale-cherries-draw.md b/.changeset/stale-cherries-draw.md
new file mode 100644
index 000000000..ddabbc37d
--- /dev/null
+++ b/.changeset/stale-cherries-draw.md
@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix: Exclude headings in the carousel and modal examples from ToC
diff --git a/docs/eleventy.config.mjs b/docs/eleventy.config.mjs
index 89d59c6df..2ea770b32 100644
--- a/docs/eleventy.config.mjs
+++ b/docs/eleventy.config.mjs
@@ -226,7 +226,7 @@ export default function (eleventyConfig) {
 	eleventyConfig.addFilter("toc", function (name) {
 		const toc = [];
 
-		const contentWithoutExamples = name.replace(/<div[^>]*\bclass=["'][^"']*\bexample\b[^"']*".*?>.*?<\/div>/gs, '');
+		const contentWithoutExamples = name.replace(/<!--EXAMPLE-->[\s\S]*?<!--\/EXAMPLE-->/g, '');
 		const headings = contentWithoutExamples.match(/<h([23])>([^<]+)<\/h\1>/g);
 
 		if (headings) {
diff --git a/shared/includes/docs/example.html b/shared/includes/docs/example.html
index 55bda49dd..7e97b01aa 100644
--- a/shared/includes/docs/example.html
+++ b/shared/includes/docs/example.html
@@ -1,3 +1,4 @@
+<!--EXAMPLE-->
 <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.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 -%}
@@ -9,4 +10,5 @@
 ```html
 {{ html }}
 ```
-{% endunless %}
\ No newline at end of file
+{% endunless %}
+<!--/EXAMPLE-->
\ No newline at end of file