From 84b30f93c744f20cc71bd934b834bb87b1a32a08 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 6 Sep 2023 15:20:36 +0200
Subject: [PATCH] feat: new structure

---
 src/lib/layouts/Docs.svelte                   |   2 +-
 src/lib/layouts/DocsArticle.svelte            | 140 +++++++++++
 src/lib/layouts/DocsTutorial.svelte           | 160 +++++++++++++
 src/lib/layouts/index.ts                      |   2 +
 src/markdoc/layouts/Article.svelte            | 193 ++-------------
 src/markdoc/layouts/Tutorial.svelte           | 219 ++----------------
 src/markdoc/nodes/Heading.svelte              |   6 +-
 .../docs/tutorials/example/+page.svelte       |  17 +-
 8 files changed, 338 insertions(+), 401 deletions(-)
 create mode 100644 src/lib/layouts/DocsArticle.svelte
 create mode 100644 src/lib/layouts/DocsTutorial.svelte

diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index 2e8bfae02..d273476cf 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -21,7 +21,7 @@
 	$: variantClass = variantClasses[variant];
 </script>
 
-<div id="top" class="u-position-relative">
+<div class="u-position-relative">
 	<div
 		class={variantClass}
 		style:--container-size={variant === 'default' ? 'var(--container-size-large)' : undefined}
diff --git a/src/lib/layouts/DocsArticle.svelte b/src/lib/layouts/DocsArticle.svelte
new file mode 100644
index 000000000..e8324594d
--- /dev/null
+++ b/src/lib/layouts/DocsArticle.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+	export let title: string;
+	export let toc: Array<{
+		title: string;
+		href: string;
+		step?: number;
+		children?: Array<{
+			title: string;
+			href: string;
+		}>;
+	}>;
+</script>
+
+<main class="u-contents">
+	<article class="aw-article u-contents">
+		<header class="aw-article-header">
+			<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
+				<button
+					class="
+                        aw-button is-text aw-is-only-mobile
+                        aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
+					aria-label="previous page"
+				>
+					<span class="icon-cheveron-left" aria-hidden="true" />
+				</button>
+				<ul class="aw-metadata aw-caption-400">
+					<slot name="metadata" />
+				</ul>
+				<div class="u-position-relative u-flex u-cross-center">
+					<button
+						class="
+                        aw-button is-text is-icon aw-u-cross-center aw-u-size-40
+                        u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
+						aria-label="previous page"
+					>
+						<span
+							class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary"
+							aria-hidden="true"
+						/>
+					</button>
+					<h1 class="aw-title">{title}</h1>
+				</div>
+			</div>
+			<div class="aw-article-header-end" />
+		</header>
+		<div class="aw-article-content">
+			<slot />
+			<section class="aw-content-footer">
+				<header class="aw-content-footer-header">
+					<div class="aw-content-footer-header-start">
+						<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
+						<div class="u-flex u-gap-8">
+							<input
+								class="aw-radio-button is-like"
+								type="radio"
+								aria-label="Helpful"
+								name="happy"
+							/>
+							<input
+								class="aw-radio-button is-dislike"
+								type="radio"
+								aria-label="UnHelpful"
+								name="happy"
+							/>
+						</div>
+					</div>
+					<div class="aw-content-footer-header-end">
+						<ul class="aw-metadata aw-caption-400">
+							<li>Last updated on July 16, 2023</li>
+							<li>
+								<button class="">
+									<!-- TODO: wait for implement icons in website -->
+									<span class="icon-edit" aria-hidden="true" />
+									<span>Update on GitHub</span>
+								</button>
+							</li>
+						</ul>
+					</div>
+				</header>
+				<div class="aw-card is-transparent" style="--card-padding:1rem">
+					<label for="message">
+						<span class="aw-u-color-text-primary">What did you like?</span>
+						<span class="">(optional)</span>
+					</label>
+					<textarea
+						class="aw-input-text u-margin-block-start-8"
+						id="message"
+						placeholder="Write your message"
+					/>
+					<div class="u-flex u-main-end u-margin-block-start-16">
+						<button class="aw-button is-text">
+							<span class="">Cancel</span>
+						</button>
+						<button class="aw-button">
+							<span class="">Submit</span>
+						</button>
+					</div>
+				</div>
+			</section>
+		</div>
+		<aside class="aw-references-menu aw-u-padding-inline-start-24">
+			<div class="aw-references-menu-content">
+				<div class="u-flex u-main-space-between u-cross-center u-gap-16">
+					<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
+				</div>
+				<ol class="aw-references-menu-list">
+					{#each toc as parent}
+						<li class="aw-references-menu-item">
+							<a href={parent.href} class="aw-references-menu-link">
+								{#if parent?.step}
+									<span class="aw-numeric-badge">{parent.step}</span>
+								{/if}
+								<span class="aw-caption-400">{parent.title}</span>
+							</a>
+							{#if parent.children}
+								<ol
+									class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
+								>
+									{#each parent.children as child}
+										<li class="aw-references-menu-item">
+											<a href={child.href} class="aw-references-menu-link">
+												<span class="aw-caption-400">{child.title}</span>
+											</a>
+										</li>
+									{/each}
+								</ol>
+							{/if}
+						</li>
+					{/each}
+				</ol>
+				<div class="u-sep-block-start u-padding-block-start-20">
+					<a class="aw-button is-text u-main-start aw-u-padding-inline-0" href="#top">
+						<span class="icon-arrow-up" aria-hidden="true" />
+						<span class="aw-sub-body-500">Back to top</span>
+					</a>
+				</div>
+			</div>
+		</aside>
+	</article>
+</main>
diff --git a/src/lib/layouts/DocsTutorial.svelte b/src/lib/layouts/DocsTutorial.svelte
new file mode 100644
index 000000000..6c5876675
--- /dev/null
+++ b/src/lib/layouts/DocsTutorial.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+	type Link = {
+		title: string;
+		href: string;
+		step: number;
+	};
+
+	export let title: string;
+	export let toc: Array<
+		Link & {
+			children?: Array<Omit<Link, 'step'>>;
+		}
+	>;
+	export let nextStep: Link | undefined = undefined;
+	export let prevStep: Link | undefined = undefined;
+</script>
+
+<main class="u-contents">
+	<article class="aw-article u-contents">
+		<header class="aw-article-header">
+			<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
+				<button
+					class="
+						aw-button is-text aw-is-only-mobile
+						aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
+					aria-label="previous page"
+				>
+					<span class="icon-cheveron-left" aria-hidden="true" />
+				</button>
+				<ul class="aw-metadata aw-caption-400">
+					<slot name="metadata" />
+				</ul>
+				<div class="u-position-relative u-flex u-cross-center">
+					<button
+						class="
+						aw-button is-text is-only-icon aw-u-cross-center aw-u-size-40
+						u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
+						aria-label="previous page"
+					>
+						<span
+							class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary"
+							aria-hidden="true"
+						/>
+					</button>
+					<h1 class="aw-title">{title}</h1>
+				</div>
+			</div>
+			<div class="aw-article-header-end" />
+		</header>
+		<div class="aw-article-content">
+			<slot />
+			<div class="u-flex u-main-space-between">
+				{#if prevStep}
+					<a href={prevStep.href} class="aw-button is-text">
+						<span class="icon-cheveron-left" aria-hidden="true" />
+						<span class="aw-sub-body-500">
+							Step {prevStep.step}<span class="aw-is-not-mobile">: {prevStep.title}</span>
+						</span>
+					</a>
+				{/if}
+				{#if nextStep}
+					<a href={nextStep.href} class="aw-button is-secondary">
+						<span class="aw-sub-body-500">
+							Step {nextStep.step}<span class="aw-is-not-mobile">: {nextStep.title}</span>
+						</span>
+						<span class="icon-cheveron-right" aria-hidden="true" />
+					</a>
+				{/if}
+			</div>
+
+			<section class="aw-content-footer">
+				<header class="aw-content-footer-header u-cross-center">
+					<div class="aw-content-footer-header-start u-cross-center">
+						<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
+						<div class="u-flex u-gap-8">
+							<input
+								class="aw-radio-button is-like"
+								type="radio"
+								aria-label="Helpful"
+								name="happy"
+							/>
+							<input
+								class="aw-radio-button is-dislike"
+								type="radio"
+								aria-label="UnHelpful"
+								name="happy"
+							/>
+						</div>
+					</div>
+					<div class="aw-content-footer-header-end">
+						<ul class="aw-metadata aw-caption-400">
+							<li>Last updated: July 16, 2023</li>
+							<li>
+								<button class="u-flex u-gap-4 u-cross-baseline">
+									<span class="icon-pencil-alt u-contents" aria-hidden="true" />
+									<span>Update on GitHub</span>
+								</button>
+							</li>
+						</ul>
+					</div>
+				</header>
+				<div class="aw-card is-transparent" style="--card-padding:1rem">
+					<label for="message">
+						<span class="aw-caption-400 aw-u-color-text-primary">What did you like?</span>
+						<span class="aw-caption-400">(optional)</span>
+					</label>
+					<textarea
+						class="aw-input-text u-margin-block-start-8"
+						id="message"
+						placeholder="Write your message"
+					/>
+					<div class="u-flex u-gap-8 u-main-end u-margin-block-start-16">
+						<button class="aw-button is-text">
+							<span class="">Cancel</span>
+						</button>
+						<button class="aw-button">
+							<span class="">Submit</span>
+						</button>
+					</div>
+				</div>
+			</section>
+		</div>
+		<aside class="aw-references-menu aw-u-padding-inline-start-24">
+			<div class="aw-references-menu-content">
+				<div class="u-flex u-main-space-between u-cross-center u-gap-16">
+					<h5 class="aw-references-menu-title aw-eyebrow">Tutorial Steps</h5>
+				</div>
+				<ol class="aw-references-menu-list">
+					{#each toc as parent}
+						<li class="aw-references-menu-item">
+							<a href={parent.href} class="aw-references-menu-link">
+								<span class="aw-numeric-badge">{parent.step}</span>
+								<span class="aw-caption-400">{parent.title}</span>
+							</a>
+							{#if parent.children}
+								<ol
+									class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
+								>
+									{#each parent.children as child}
+										<li class="aw-references-menu-item">
+											<a href={child.href} class="aw-references-menu-link">
+												<span class="aw-caption-400">{child.title}</span>
+											</a>
+										</li>
+									{/each}
+								</ol>
+							{/if}
+						</li>
+					{/each}
+				</ol>
+				<div class="u-sep-block-start u-padding-block-start-20">
+					<a class="aw-button is-text u-main-start aw-u-padding-inline-0" href="#top">
+						<span class="icon-arrow-up" aria-hidden="true" />
+						<span class="aw-sub-body-500">Back to top</span>
+					</a>
+				</div>
+			</div>
+		</aside>
+	</article>
+</main>
diff --git a/src/lib/layouts/index.ts b/src/lib/layouts/index.ts
index 0b10fcdbe..a96a8e217 100644
--- a/src/lib/layouts/index.ts
+++ b/src/lib/layouts/index.ts
@@ -1,2 +1,4 @@
 export { default as Main } from './Main.svelte';
 export { default as Docs } from './Docs.svelte';
+export { default as DocsArticle } from './DocsArticle.svelte';
+export { default as DocsTutorial } from './DocsTutorial.svelte';
diff --git a/src/markdoc/layouts/Article.svelte b/src/markdoc/layouts/Article.svelte
index 86dcf945c..b04275371 100644
--- a/src/markdoc/layouts/Article.svelte
+++ b/src/markdoc/layouts/Article.svelte
@@ -5,7 +5,7 @@
 		Record<
 			string,
 			{
-				text: string;
+				title: string;
 				step?: number;
 			}
 		>
@@ -13,7 +13,7 @@
 </script>
 
 <script lang="ts">
-	import { Docs } from '$lib/layouts';
+	import { Docs, DocsArticle } from '$lib/layouts';
 	import { getContext, setContext } from 'svelte';
 	import Sidebar from '$routes/docs/Sidebar.svelte';
 
@@ -25,6 +25,11 @@
 	setContext<LayoutContext>('headings', writable({}));
 
 	const headings = getContext<LayoutContext>('headings');
+
+	$: toc = Object.entries($headings).map(([id, heading]) => ({
+		...heading,
+		href: `#${id}`,
+	}));
 </script>
 
 <svelte:head>
@@ -34,177 +39,15 @@
 
 <Docs variant="two-side-navs">
 	<Sidebar />
-	<main class="u-contents">
-		<article class="aw-article u-contents">
-			<header class="aw-article-header">
-				<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
-					<button
-						class="
-                            aw-button is-text aw-is-only-mobile
-                            aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
-						aria-label="previous page"
-					>
-						<span class="icon-cheveron-left" aria-hidden="true" />
-					</button>
-					<ul class="aw-metadata aw-caption-400">
-						{#if difficulty}
-							<li>{difficulty}</li>
-						{/if}
-						{#if readtime}
-							<li>{readtime} min</li>
-						{/if}
-					</ul>
-					<div class="u-position-relative u-flex u-cross-center">
-						<button
-							class="
-                            aw-button is-text is-icon aw-u-cross-center aw-u-size-40
-                            u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
-							aria-label="previous page"
-						>
-							<span
-								class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary"
-								aria-hidden="true"
-							/>
-						</button>
-						<h1 class="aw-title">{title}</h1>
-					</div>
-				</div>
-				<div class="aw-article-header-end" />
-			</header>
-			<div class="aw-article-content">
-				<slot />
-				<section class="aw-content-footer">
-					<header class="aw-content-footer-header">
-						<div class="aw-content-footer-header-start">
-							<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
-							<div class="u-flex u-gap-8">
-								<input
-									class="aw-radio-button is-like"
-									type="radio"
-									aria-label="Helpful"
-									name="happy"
-								/>
-								<input
-									class="aw-radio-button is-dislike"
-									type="radio"
-									aria-label="UnHelpful"
-									name="happy"
-								/>
-							</div>
-						</div>
-						<div class="aw-content-footer-header-end">
-							<ul class="aw-metadata aw-caption-400">
-								<li>Last updated on July 16, 2023</li>
-								<li>
-									<button class="">
-										<!-- TODO: wait for implement icons in website -->
-										<span class="icon-edit" aria-hidden="true" />
-										<span>Update on GitHub</span>
-									</button>
-								</li>
-							</ul>
-						</div>
-					</header>
-					<div class="aw-card is-transparent" style="--card-padding:1rem">
-						<label for="message">
-							<span class="aw-u-color-text-primary">What did you like?</span>
-							<span class="">(optional)</span>
-						</label>
-						<textarea
-							class="aw-input-text u-margin-block-start-8"
-							id="message"
-							placeholder="Write your message"
-						/>
-						<div class="u-flex u-main-end u-margin-block-start-16">
-							<button class="aw-button is-text">
-								<span class="">Cancel</span>
-							</button>
-							<button class="aw-button">
-								<span class="">Submit</span>
-							</button>
-						</div>
-					</div>
-				</section>
-			</div>
-			<aside class="aw-references-menu aw-u-padding-inline-start-24">
-				<div class="aw-references-menu-content">
-					<div class="u-flex u-main-space-between u-cross-center u-gap-16">
-						<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
-					</div>
-					<ol class="aw-references-menu-list">
-						{#each Object.entries($headings) as [id, heading]}
-							<li class="aw-references-menu-item">
-								<a href={`#${id}`} class="aw-references-menu-link">
-									{#if heading.step !== undefined}
-										<span class="aw-numeric-badge">{heading.step}</span>
-									{/if}
-									<span class="aw-caption-400">{heading.text}</span>
-								</a>
-							</li>
-						{/each}
-					</ol>
-					<div class="u-sep-block-start u-padding-block-start-20">
-						<a class="aw-button is-text u-main-start aw-u-padding-inline-0" href="#top">
-							<span class="icon-arrow-up" aria-hidden="true" />
-							<span class="aw-sub-body-500">Back to top</span>
-						</a>
-					</div>
-				</div>
-			</aside>
-		</article>
-	</main>
-	<footer class="aw-main-footer u-margin-block-start-48 u-small">
-		<div class="aw-main-footer-grid-1">
-			<ul class="aw-main-footer-grid-1-column-1 u-flex u-gap-8">
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite on Discord">
-						<span class="icon-discord" aria-hidden="true" />
-					</button>
-				</li>
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite GitHub">
-						<span class="icon-github" aria-hidden="true" />
-					</button>
-				</li>
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite on Twitter">
-						<span class="icon-twitter" aria-hidden="true" />
-					</button>
-				</li>
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite on LinkedIn">
-						<span class="icon-linkedin" aria-hidden="true" />
-					</button>
-				</li>
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite YouTube">
-						<span class="icon-youtube" aria-hidden="true" />
-					</button>
-				</li>
-			</ul>
-			<div class="aw-main-footer-grid-1-column-2">
-				<div class="aw-select is-colored">
-					<button class="physical-select">
-						<span class="icon-moon" aria-hidden="true" />
-						<span>Dark</span>
-					</button>
-					<span class="icon-cheveron-down" aria-hidden="true" />
-				</div>
-			</div>
-			<ul class="aw-main-footer-grid-1-column-3 aw-main-footer-links">
-				<li>
-					<a href=".">Supports</a>
-				</li>
-				<li>
-					<a href=".">Status</a>
-				</li>
-				<li>
-					<a href=".">Changelog</a>
-				</li>
-			</ul>
-			<div class="aw-main-footer-grid-1-column-4 aw-main-footer-copyright">
-				Copyright © 2023 Appwrite
-			</div>
-		</div>
-	</footer>
+	<DocsArticle {title} {toc}>
+		<svelte:fragment slot="metadata">
+			{#if difficulty}
+				<li>{difficulty}</li>
+			{/if}
+			{#if readtime}
+				<li>{readtime} min</li>
+			{/if}
+		</svelte:fragment>
+		<slot />
+	</DocsArticle>
 </Docs>
diff --git a/src/markdoc/layouts/Tutorial.svelte b/src/markdoc/layouts/Tutorial.svelte
index 00f126064..b6fa041bd 100644
--- a/src/markdoc/layouts/Tutorial.svelte
+++ b/src/markdoc/layouts/Tutorial.svelte
@@ -5,7 +5,7 @@
 		Record<
 			string,
 			{
-				text: string;
+				title: string;
 				step?: number;
 			}
 		>
@@ -13,7 +13,7 @@
 </script>
 
 <script lang="ts">
-	import { Docs } from '$lib/layouts';
+	import { Docs, DocsTutorial } from '$lib/layouts';
 	import { getContext, setContext } from 'svelte';
 	import Sidebar from '$routes/docs/Sidebar.svelte';
 
@@ -34,208 +34,15 @@
 
 <Docs variant="two-side-navs">
 	<Sidebar />
-	<main class="u-contents">
-		<article class="aw-article u-contents">
-			<header class="aw-article-header">
-				<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
-					<button
-						class="
-                            aw-button is-text aw-is-only-mobile
-                            aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
-						aria-label="previous page"
-					>
-						<span class="icon-cheveron-left" aria-hidden="true" />
-					</button>
-					<ul class="aw-metadata aw-caption-400">
-						{#if difficulty}
-							<li>{difficulty}</li>
-						{/if}
-						{#if readtime}
-							<li>{readtime} min</li>
-						{/if}
-					</ul>
-					<div class="u-position-relative u-flex u-cross-center">
-						<button
-							class="
-                            aw-button is-text is-icon aw-u-cross-center aw-u-size-40
-                            u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
-							aria-label="previous page"
-						>
-							<span
-								class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary"
-								aria-hidden="true"
-							/>
-						</button>
-						<h1 class="aw-title">{title}</h1>
-					</div>
-				</div>
-				<div class="aw-article-header-end" />
-			</header>
-			<div class="aw-article-content">
-				<slot />
-				<div class="u-flex u-main-space-between">
-					<button class="aw-button is-text">
-						<span class="icon-cheveron-left" aria-hidden="true" />
-						<span class="aw-sub-body-500">Step 1: Setting up the environment</span>
-					</button>
-					<button class="aw-button is-secondary">
-						<span class="aw-sub-body-500"> Step 3: Creating a login page</span>
-						<span class="icon-cheveron-right" aria-hidden="true" />
-					</button>
-				</div>
-				<section class="aw-content-footer">
-					<header class="aw-content-footer-header">
-						<div class="aw-content-footer-header-start">
-							<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
-							<div class="u-flex u-gap-8">
-								<input
-									class="aw-radio-button is-like"
-									type="radio"
-									aria-label="Helpful"
-									name="happy"
-								/>
-								<input
-									class="aw-radio-button is-dislike"
-									type="radio"
-									aria-label="UnHelpful"
-									name="happy"
-								/>
-							</div>
-						</div>
-						<div class="aw-content-footer-header-end">
-							<ul class="aw-metadata aw-caption-400">
-								<li>Last updated on July 16, 2023</li>
-								<li>
-									<button class="">
-										<!-- TODO: wait for implement icons in website -->
-										<span class="icon-edit" aria-hidden="true" />
-										<span>Update on GitHub</span>
-									</button>
-								</li>
-							</ul>
-						</div>
-					</header>
-					<div class="aw-card is-transparent" style="--card-padding:1rem">
-						<label for="message">
-							<span class="aw-u-color-text-primary">What did you like?</span>
-							<span class="">(optional)</span>
-						</label>
-						<textarea
-							class="aw-input-text u-margin-block-start-8"
-							id="message"
-							placeholder="Write your message"
-						/>
-						<div class="u-flex u-main-end u-margin-block-start-16">
-							<button class="aw-button is-text">
-								<span class="">Cancel</span>
-							</button>
-							<button class="aw-button">
-								<span class="">Submit</span>
-							</button>
-						</div>
-					</div>
-				</section>
-			</div>
-
-			<aside class="aw-references-menu aw-u-padding-inline-start-24">
-				<div class="aw-references-menu-content">
-					<div class="u-flex u-main-space-between u-cross-center u-gap-16">
-						<h5 class="aw-references-menu-title aw-eyebrow">Tutorial Steps</h5>
-					</div>
-					<ol class="aw-references-menu-list">
-						<li class="aw-references-menu-item">
-							<a href="." class="aw-references-menu-link"
-								><span class="aw-numeric-badge">1</span>
-								<span class="aw-caption-400">Title</span></a
-							>
-						</li>
-						<li class="aw-references-menu-item">
-							<a href="." class="aw-references-menu-link is-selected"
-								><span class="aw-numeric-badge">2</span>
-								<span class="aw-caption-400">Title</span></a
-							>
-							<ol class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32">
-								<li class="aw-references-menu-item">
-									<a href="." class="aw-references-menu-link is-selected"
-										><span class="aw-caption-400">Subtitle</span></a
-									>
-								</li>
-								<li class="aw-references-menu-item">
-									<a href="." class="aw-references-menu-link is-selected"
-										><span class="aw-caption-400">Subtitle</span></a
-									>
-								</li>
-							</ol>
-						</li>
-						<li class="aw-references-menu-item">
-							<a href="." class="aw-references-menu-link"
-								><span class="aw-numeric-badge">3</span>
-								<span class="aw-caption-400">Title</span></a
-							>
-						</li>
-					</ol>
-					<div class="u-sep-block-start u-padding-block-start-20">
-						<a class="aw-button is-text u-main-start aw-u-padding-inline-0" href="#top"
-							><span class="icon-arrow-up" aria-hidden="true" />
-							<span class="aw-sub-body-500">Back to top</span></a
-						>
-					</div>
-				</div>
-			</aside>
-		</article>
-	</main>
-	<footer class="aw-main-footer u-margin-block-start-48 u-small">
-		<div class="aw-main-footer-grid-1">
-			<ul class="aw-main-footer-grid-1-column-1 u-flex u-gap-8">
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite on Discord">
-						<span class="icon-discord" aria-hidden="true" />
-					</button>
-				</li>
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite GitHub">
-						<span class="icon-github" aria-hidden="true" />
-					</button>
-				</li>
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite on Twitter">
-						<span class="icon-twitter" aria-hidden="true" />
-					</button>
-				</li>
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite on LinkedIn">
-						<span class="icon-linkedin" aria-hidden="true" />
-					</button>
-				</li>
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite YouTube">
-						<span class="icon-youtube" aria-hidden="true" />
-					</button>
-				</li>
-			</ul>
-			<div class="aw-main-footer-grid-1-column-2">
-				<div class="aw-select is-colored">
-					<button class="physical-select">
-						<span class="icon-moon" aria-hidden="true" />
-						<span>Dark</span>
-					</button>
-					<span class="icon-cheveron-down" aria-hidden="true" />
-				</div>
-			</div>
-			<ul class="aw-main-footer-grid-1-column-3 aw-main-footer-links">
-				<li>
-					<a href=".">Supports</a>
-				</li>
-				<li>
-					<a href=".">Status</a>
-				</li>
-				<li>
-					<a href=".">Changelog</a>
-				</li>
-			</ul>
-			<div class="aw-main-footer-grid-1-column-4 aw-main-footer-copyright">
-				Copyright © 2023 Appwrite
-			</div>
-		</div>
-	</footer>
+	<DocsTutorial {title} toc={[]}>
+		<svelte:fragment slot="metadata">
+			{#if difficulty}
+				<li>{difficulty}</li>
+			{/if}
+			{#if readtime}
+				<li>{readtime} min</li>
+			{/if}
+		</svelte:fragment>
+		<slot />
+	</DocsTutorial>
 </Docs>
diff --git a/src/markdoc/nodes/Heading.svelte b/src/markdoc/nodes/Heading.svelte
index 24c966d2d..ffdba7ab5 100644
--- a/src/markdoc/nodes/Heading.svelte
+++ b/src/markdoc/nodes/Heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { getContext, hasContext, onMount } from 'svelte';
-	import type { LayoutContext } from '../layouts/Tutorial.svelte';
+	import { getContext, hasContext } from 'svelte';
+	import type { LayoutContext } from '../layouts/Article.svelte';
 
 	export let level: number;
 	export let id: string | undefined = undefined;
@@ -16,7 +16,7 @@
 			}
 			n[id] = {
 				step,
-				text: element?.textContent ?? ''
+				title: element?.textContent ?? ''
 			};
 
 			return n;
diff --git a/src/routes/docs/tutorials/example/+page.svelte b/src/routes/docs/tutorials/example/+page.svelte
index 5e2b98b97..60b94de82 100644
--- a/src/routes/docs/tutorials/example/+page.svelte
+++ b/src/routes/docs/tutorials/example/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { Docs } from '$lib/layouts';
 	import Sidebar from '$routes/docs/Sidebar.svelte';
-	import MainFooter from "../../../../lib/components/MainFooter.svelte";
+	import MainFooter from "$lib/components/MainFooter.svelte";
 </script>
 
 <Docs variant="two-side-navs">
@@ -363,19 +363,4 @@
 	</main>
 
 	<MainFooter variant="docs"/>
-
 </Docs>
-
-<!-- <script type="module" src="/src/main.ts"></script>
-
-<script>
-    $(document).ready(function() {
-        $("#MenuButton, #ToggleMenu").on("click", function(){
-            $(".aw-grid-two-side-navs").toggleClass("is-open");
-            $(".aw-references-menu").removeClass("is-open");
-        });
-
-
-       
-    });
-</script> -->