From a5f207f4ea613316c17c9562365bb640bfe0562e Mon Sep 17 00:00:00 2001
From: Jordan Poles <jpoles1@users.noreply.github.com>
Date: Mon, 30 Oct 2023 09:35:57 -0400
Subject: [PATCH] TableOfContents examples! (#103)

Co-authored-by: Jordan Poles <jpdev.noreply@gmail.com>
---
 .../components/TableOfContents/+page.svelte   | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/routes/docs/components/TableOfContents/+page.svelte b/src/routes/docs/components/TableOfContents/+page.svelte
index cc31b8704..446180cc4 100644
--- a/src/routes/docs/components/TableOfContents/+page.svelte
+++ b/src/routes/docs/components/TableOfContents/+page.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
   import TableOfContents from '$lib/components/TableOfContents.svelte';
   import Preview from '$lib/components/Preview.svelte';
+  import Card from '$lib/components/Card.svelte';
 </script>
+
+<h1>Examples</h1>
+
+Let's build some example TableOfContents for the following masterpiece:
+
+<Card class="p-4 mt-5">
+  <div id="epic-novel">
+    <h1>The Epic Novel</h1>
+    <h2>Chapter 1</h2>
+    <h3>New Beginnings</h3>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu ornare purus. Praesent auctor tellus leo, ac ornare nisi egestas eu. Nam tincidunt finibus pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor urna, congue at convallis vel, accumsan ut ante. 
+    <h4>A Brief Interlude</h4>
+    Proin congue augue ex, eget laoreet nisi tempor ac. Sed a sapien convallis, mollis lectus quis, mollis lorem.
+    <h3>The Journey</h3>
+    Donec nec rhoncus libero, ut euismod augue. Curabitur lacus dolor, pellentesque nec suscipit at, faucibus id odio. Sed ullamcorper quam nibh, eget hendrerit metus viverra vel. Etiam elementum gravida ipsum, eget vestibulum felis vulputate eget. Vivamus at volutpat sapien. Pellentesque lobortis aliquam mauris, ac volutpat magna convallis et. Praesent hendrerit finibus dui in ullamcorper.
+    <h2>Chapter 2</h2>
+    <h2>Chapter 3</h2>
+    Donec eget nulla non eros elementum rutrum eu sed nulla. Nam dignissim, neque in elementum vestibulum, nisl libero fringilla nunc, et pellentesque ex nibh porta sem. In sed vehicula justo. Etiam non sagittis tortor. Pellentesque ut sagittis enim. Nulla eget dictum erat. Mauris eu semper nisl, quis posuere arcu. Nunc ut purus quis felis lobortis vehicula. Aliquam varius luctus lectus, in egestas mauris sollicitudin eget. Etiam suscipit, nunc vitae blandit convallis, lorem est laoreet ante, sit amet gravida arcu ligula vitae ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas mattis ac turpis quis luctus.
+  </div>  
+</Card>
+
+<h2>Basic</h2>
+
+<Preview>
+  <TableOfContents element="#epic-novel" />
+</Preview>
+
+<h2>Limit Max Depth</h2>
+
+<Preview>
+  <TableOfContents element="#epic-novel" maxDepth="{2}" />
+</Preview>
\ No newline at end of file