📝 Add some pages for the documentation

Add a TOC component

src/lib/documentation/TOC.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	export let directoryTree: Record<string, unknown>;
+	export let finalPath: any = true;
+
+	export let currentPath = '/';
+</script>
+
+<ul class="list-none">
+	{#each Object.keys(directoryTree) as key}
+		<li class="capitalize">
+			<a href="/documentation{currentPath}{key}">
+				{key.replaceAll('-', ' ')}
+			</a>
+			{#if directoryTree[key] !== finalPath}
+				<div class="pl-6">
+					<svelte:self
+						directoryTree={directoryTree[key]}
+						{finalPath}
+						currentPath={currentPath + key + '/'}
+					/>
+				</div>
+			{/if}
+		</li>
+	{/each}
+</ul>

src/routes/documentation/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Toc from '$lib/documentation/TOC.svelte';
 	import { mergeObjects } from '$lib/utils/mergeObjects';
 	import { setNestedProperty } from '$lib/utils/setMultipleKeys';
 
@@ -10,10 +11,17 @@
 	const directoryTree = mergeObjects(directoryPaths);
 </script>
 
-<div>
-	<slot />
-</div>
+<div class="grid grid-cols-[1fr,4fr] w-full gap-2">
+	<div class="flex gap-2 justify-between">
+		<aside>
+			<h3>Table of contents</h3>
+			<Toc {directoryTree} />
+		</aside>
+
+		<div class="bg-gray-400 rounded-full w-0.5" />
+	</div>
 
-<aside>
-	{JSON.stringify(directoryTree, null, 3)}
-</aside>
+	<div>
+		<slot />
+	</div>
+</div>

src/routes/documentation/+page.md

@@ -4,3 +4,5 @@ This is the start of the documentation for Dlool. It is a work in progress. Help
 
 The documentation is written in [Markdown](https://www.markdownguide.org/cheat-sheet/).
 It aims to cover everything, from the very technical parts to easy to understand examples of how to use Dlool.
+
+For the beginning it is only available in English, but we hope to add more languages in the future.

src/routes/documentation/api/+page.md

@@ -1 +1,4 @@
-# API
+## API
+
+Dlool has a REST API. It is completely open and can be used by anyone. The API is documented using [ApiDoc](https://apidocjs.com/). You can find the documentation [here](https://dlurak.github.io/dloolBackend/). I plan to migrate the documentation to this site in the future.
+But from now until it is done, there will be a painfull transition period where the documentation is split between two sites.

src/routes/documentation/getting-started/+page.md

@@ -1 +1,7 @@
 ## Getting Started
+
+To get started with Dlool, we recommend you read the [What is Dlool?](/documentation/getting-started/what-is-dlool) page. It will give you a quick overview of what Dlool is and what it can do for you.
+
+Later this page will be updated with more information on how to get started with Dlool.
+
+If you are already familiar with Dlool, a Pull Request to improve this page is always welcome.

src/routes/documentation/getting-started/what-is-dlool/+page.md

@@ -1 +1,11 @@
-# What's up with this Dlool
+## What is Dlool?
+
+Dlool is a web application to manage your entire school life. It is meant as an easy to use tool for students. While it can be used by teachers and parents, it meant to be used by students. Dlool is highly optimized for exactly that use case.
+
+Dlools core functionallity is:
+
+- **Homework Management** - Dlool allows you to write down your homework so you never forget it again.
+- **Notes** - Dlool has a note taking feature, these aren't meant to replace your normal notes but to be used as a quick way to write down something you need to remember. E.g. The isbn of a book you need to buy for school.
+- **Calendar** - Using Dlool you can easily write down all your tests and other important dates.
+
+Dlool is highly collaborative. Homework, Calendar and public Notes will be shared with your classmates. This is especially useful, if you missed a day of school and need to catch up on what you missed.