Doc updates

skeletonlabs · Dec 18, 2023 · 5e6d597 · 5e6d597
1 parent 6e36d2c
commit 5e6d597
Showing 1 changed file with 18 additions and 14 deletions.
diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte
@@ -134,24 +134,28 @@
 			<CodeBlock language="html" code={`<div use:tocCrawler={{ scrollTarget: '#page' }}>`} />
 		</section>
 		<hr />
-		<!-- Dynamic attributes -->
+		<!-- Dynamic Headings -->
 		<section class="space-y-4">
-			<h2 class="h2">Dynamic Attributes</h2>
-			<p>Generating links constructed from dynamic attributes may result in unexpected behavior.</p>
-			<h3 class="h3">Example</h3>
+			<h2 class="h2">Dynamic Headings</h2>
+			<p>Generating links constructed using dynamic heading text may result in unexpected behavior.</p>
 			<CodeBlock language="html" code={`<h2 class="h2">Greetings {name}</h2>`} />
-			<p>Svelte will compile this header to:</p>
-			<CodeBlock language="html" code={`<h2 class="h2">"Greetings " "skeleton"</h2>`} />
-			<p>which means the header now has two children: "Greetings " and "skeleton".</p>
-			<p>
-				Since the Table of Contents targets only the first child to avoid including any icons, etc., in the link, we end up with links
-				missing parts of the text.
-			</p>
+			<p>Svelte will compile and treat this as two seperate DOM elements, only the first of which is included in the generated link.</p>
+			<CodeBlock
+				language="html"
+				code={`
+<!-- DOM -->
+<h2 class="h2" id="greetings">
+	"Greetings "
+	"skeleton"
+</h2>`}
+			/>
+			<CodeBlock language="html" code={`<!-- Generated Link -->\n<a href="#greetings">Greetings</a>`} />
 			<h3 class="h3">Solution</h3>
-			<p>Using string interpolation solves the problem, by updating the code to:</p>
+			<p>Use string interpolation to resolve this issue.</p>
 			<CodeBlock language="html" code={`<h2 class="h2">{\`Greetings \${name}\`}</h2>`} />
-			<p>The component will be compiled to:</p>
-			<CodeBlock language="html" code={`<h2 class="h2">"Greetings skeleton"</h2>`} />
+			<p>The component will be compiled as follows.</p>
+			<CodeBlock language="html" code={`<!-- DOM -->\n<h2 class="h2" id="greetings-skeleton">"Greetings Skeleton"</h2>`} />
+			<CodeBlock language="html" code={`<!-- Generated Link -->\n<a href="#greetings-skeleton">Greetings Skeleton</a>`} />
 		</section>
 		<hr />
 		<!-- Styling -->