From 3eb9e72db070bbf9c686c626ac5d5ca62932a851 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 4 Sep 2023 19:03:26 +0200
Subject: [PATCH] feat: markdoc

---
 markdoc.config.json                 |  12 ++
 package.json                        |  10 +-
 pnpm-lock.yaml                      |  87 +++++++++++-
 src/markdoc/layouts/Tutorial.svelte | 206 ++++++++++++++++++++++++++++
 src/markdoc/nodes/Code.svelte       |   5 +
 src/markdoc/nodes/Fence.svelte      |  81 +++++++++++
 src/markdoc/nodes/Heading.svelte    |  34 +++++
 src/markdoc/nodes/Image.svelte      |   9 ++
 src/markdoc/nodes/Link.svelte       |   6 +
 src/markdoc/nodes/List.svelte       |   5 +
 src/markdoc/nodes/Paragraph.svelte  |   1 +
 src/markdoc/nodes/Table.svelte      |   7 +
 src/markdoc/nodes/Tbody.svelte      |   3 +
 src/markdoc/nodes/Td.svelte         |   7 +
 src/markdoc/nodes/Th.svelte         |  11 ++
 src/markdoc/nodes/Thead.svelte      |   3 +
 src/markdoc/nodes/Tr.svelte         |   3 +
 src/markdoc/nodes/_Module.svelte    |  15 ++
 src/markdoc/tags/MultiCode.svelte   |  55 ++++++++
 src/markdoc/tags/Section.svelte     |  19 +++
 src/markdoc/tags/_Module.svelte     |   4 +
 src/routes/test/+page.markdoc       | 168 +++++++++++++++++++++++
 svelte.config.js                    |  24 +++-
 23 files changed, 768 insertions(+), 7 deletions(-)
 create mode 100644 markdoc.config.json
 create mode 100644 src/markdoc/layouts/Tutorial.svelte
 create mode 100644 src/markdoc/nodes/Code.svelte
 create mode 100644 src/markdoc/nodes/Fence.svelte
 create mode 100644 src/markdoc/nodes/Heading.svelte
 create mode 100644 src/markdoc/nodes/Image.svelte
 create mode 100644 src/markdoc/nodes/Link.svelte
 create mode 100644 src/markdoc/nodes/List.svelte
 create mode 100644 src/markdoc/nodes/Paragraph.svelte
 create mode 100644 src/markdoc/nodes/Table.svelte
 create mode 100644 src/markdoc/nodes/Tbody.svelte
 create mode 100644 src/markdoc/nodes/Td.svelte
 create mode 100644 src/markdoc/nodes/Th.svelte
 create mode 100644 src/markdoc/nodes/Thead.svelte
 create mode 100644 src/markdoc/nodes/Tr.svelte
 create mode 100644 src/markdoc/nodes/_Module.svelte
 create mode 100644 src/markdoc/tags/MultiCode.svelte
 create mode 100644 src/markdoc/tags/Section.svelte
 create mode 100644 src/markdoc/tags/_Module.svelte
 create mode 100644 src/routes/test/+page.markdoc

diff --git a/markdoc.config.json b/markdoc.config.json
new file mode 100644
index 000000000..45be77be2
--- /dev/null
+++ b/markdoc.config.json
@@ -0,0 +1,12 @@
+[
+    {
+        "id": "appwrite",
+        "path": "src/",
+        "schema": {
+            "path": ".svelte-kit/markdoc_schema.js",
+            "type": "esm",
+            "property": "default",
+            "watch": true
+        }
+    }
+]
diff --git a/package.json b/package.json
index 05cf8a16e..3aca0c96a 100644
--- a/package.json
+++ b/package.json
@@ -27,21 +27,23 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
+		"oslllo-svg-fixer": "^2.2.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"sass": "^1.65.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-markdoc-preprocess": "^0.3.0",
 		"svelte-sequential-preprocessor": "^2.0.1",
+		"svgtofont": "^3.22.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2",
-		"vitest": "^0.32.2",
-		"oslllo-svg-fixer": "^2.2.0",
-		"svgtofont": "^3.22.0"
+		"vitest": "^0.32.2"
 	},
 	"type": "module",
 	"dependencies": {
-		"@fontsource/inter": "^5.0.8"
+		"@fontsource/inter": "^5.0.8",
+		"highlight.js": "^11.8.0"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5d6a1d69d..6b120dd38 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ dependencies:
   '@fontsource/inter':
     specifier: ^5.0.8
     version: 5.0.8
+  highlight.js:
+    specifier: ^11.8.0
+    version: 11.8.0
+  shiki:
+    specifier: ^0.14.4
+    version: 0.14.4
 
 devDependencies:
   '@melt-ui/pp':
@@ -58,6 +64,9 @@ devDependencies:
   svelte-check:
     specifier: ^3.4.3
     version: 3.5.0(postcss@8.4.27)(sass@1.65.1)(svelte@4.2.0)
+  svelte-markdoc-preprocess:
+    specifier: ^0.3.0
+    version: 0.3.0
   svelte-sequential-preprocessor:
     specifier: ^2.0.1
     version: 2.0.1
@@ -799,6 +808,21 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
+  /@markdoc/markdoc@0.3.2:
+    resolution: {integrity: sha512-D0SaanaSkTIARvQu+zQqPEpKcvYUBR/mfac9e8JzS89P7eXhiNWPonUN7avRS1saZHpIQWIRote97qT+jGk5Gw==}
+    engines: {node: '>=14.7.0'}
+    peerDependencies:
+      '@types/react': '*'
+      react: '*'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+    optionalDependencies:
+      '@types/markdown-it': 12.2.3
+    dev: true
+
   /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.40.0)(svelte@4.2.0):
     resolution: {integrity: sha512-GZeqp7UWLNZUC2dJpREnZrWMR88vy27WO7C3cIBz4KW3/CFD19FjNkd3VbSRfcRryrMkdnEs9nu2VUa8/0u58w==}
     engines: {pnpm: '>=8.6.3'}
@@ -1134,6 +1158,25 @@ packages:
       '@types/node': 20.5.0
     dev: true
 
+  /@types/linkify-it@3.0.3:
+    resolution: {integrity: sha512-pTjcqY9E4nOI55Wgpz7eiI8+LzdYnw3qxXCfHyBDdPbYvbyLgWLJGh8EdPvqawwMK1Uo1794AUkkR38Fr0g+2g==}
+    dev: true
+    optional: true
+
+  /@types/markdown-it@12.2.3:
+    resolution: {integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==}
+    requiresBuild: true
+    dependencies:
+      '@types/linkify-it': 3.0.3
+      '@types/mdurl': 1.0.2
+    dev: true
+    optional: true
+
+  /@types/mdurl@1.0.2:
+    resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
+    dev: true
+    optional: true
+
   /@types/node@16.9.1:
     resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==}
     dev: true
@@ -1422,6 +1465,10 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /ansi-sequence-parser@1.1.1:
+    resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==}
+    dev: false
+
   /ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -2723,6 +2770,15 @@ packages:
       kind-of: 4.0.0
     dev: true
 
+  /highlight.js@11.8.0:
+    resolution: {integrity: sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
+  /html-escaper@3.0.3:
+    resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
+    dev: true
+
   /htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
     dependencies:
@@ -3056,7 +3112,6 @@ packages:
 
   /jsonc-parser@3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
-    dev: true
 
   /jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
@@ -4155,6 +4210,15 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /shiki@0.14.4:
+    resolution: {integrity: sha512-IXCRip2IQzKwxArNNq1S+On4KPML3Yyn8Zzs/xRgcgOWIr8ntIK3IKzjFPfjy/7kt9ZMjc+FItfqHRBg8b6tNQ==}
+    dependencies:
+      ansi-sequence-parser: 1.1.1
+      jsonc-parser: 3.2.0
+      vscode-oniguruma: 1.7.0
+      vscode-textmate: 8.0.0
+    dev: false
+
   /siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
     dev: true
@@ -4459,6 +4523,19 @@ packages:
       svelte: 4.2.0
     dev: true
 
+  /svelte-markdoc-preprocess@0.3.0:
+    resolution: {integrity: sha512-o1VisVNqRdeCTjYbhxtpsxGquujKT3Ksnk4ttdPxi2dWKFBO1IvtxGKiDudVMMI+s3mcsbu/uA/0bYfeqsf+DQ==}
+    dependencies:
+      '@markdoc/markdoc': 0.3.2
+      html-escaper: 3.0.3
+      js-yaml: 4.1.0
+      svelte: 4.2.0
+      typescript: 5.1.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - react
+    dev: true
+
   /svelte-preprocess@5.0.4(postcss@8.4.27)(sass@1.65.1)(svelte@4.2.0)(typescript@5.1.6):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
@@ -5015,6 +5092,14 @@ packages:
       - terser
     dev: true
 
+  /vscode-oniguruma@1.7.0:
+    resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
+    dev: false
+
+  /vscode-textmate@8.0.0:
+    resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
+    dev: false
+
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
diff --git a/src/markdoc/layouts/Tutorial.svelte b/src/markdoc/layouts/Tutorial.svelte
new file mode 100644
index 000000000..d56bd8b33
--- /dev/null
+++ b/src/markdoc/layouts/Tutorial.svelte
@@ -0,0 +1,206 @@
+<script context="module" lang="ts">
+	import { writable, type Writable } from 'svelte/store';
+
+	export type LayoutContext = Writable<
+		Record<string, {
+			text: string;
+			step?: number;
+		}>
+	>;
+</script>
+
+<script lang="ts">
+	import { Docs } from '$lib/layouts';
+	import Sidebar from '$routes/docs/Sidebar.svelte';
+	import { getContext, setContext } from 'svelte';
+
+	export let title: string;
+	export let difficulty: string;
+	export let readtime: string;
+
+	setContext<LayoutContext>('headings', writable({}));
+
+	const headings = getContext<LayoutContext>('headings');
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+</svelte:head>
+
+<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=".">
+							<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>
+</Docs>
diff --git a/src/markdoc/nodes/Code.svelte b/src/markdoc/nodes/Code.svelte
new file mode 100644
index 000000000..36d1bcfd9
--- /dev/null
+++ b/src/markdoc/nodes/Code.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let content: string;
+</script>
+
+<span class="aw-inline-code">{@html content}</span>
diff --git a/src/markdoc/nodes/Fence.svelte b/src/markdoc/nodes/Fence.svelte
new file mode 100644
index 000000000..55d772579
--- /dev/null
+++ b/src/markdoc/nodes/Fence.svelte
@@ -0,0 +1,81 @@
+<script context="module" lang="ts">
+	import 'highlight.js/styles/panda-syntax-dark.css';
+	import hljs from 'highlight.js/lib/core';
+	import dart from 'highlight.js/lib/languages/dart';
+	import javascript from 'highlight.js/lib/languages/javascript';
+	import typescript from 'highlight.js/lib/languages/typescript';
+	import xml from 'highlight.js/lib/languages/xml';
+	import shell from 'highlight.js/lib/languages/shell';
+	import markdown from 'highlight.js/lib/languages/markdown';
+	import json from 'highlight.js/lib/languages/json';
+	import swift from 'highlight.js/lib/languages/swift';
+	import php from 'highlight.js/lib/languages/php';
+	import { getContext, hasContext } from 'svelte';
+	import type { CodeContext } from '../tags/MultiCode.svelte';
+
+	hljs.registerLanguage('dart', dart);
+	hljs.registerLanguage('js', javascript);
+	hljs.registerLanguage('ts', typescript);
+	hljs.registerLanguage('xml', xml);
+	hljs.registerLanguage('html', xml);
+	hljs.registerLanguage('sh', shell);
+	hljs.registerLanguage('md', markdown);
+	hljs.registerLanguage('json', json);
+	hljs.registerLanguage('swift', swift);
+	hljs.registerLanguage('php', php);
+</script>
+
+<script lang="ts">
+	export let content: string;
+	export let language: string;
+	export let process: boolean;
+
+	const insideMultiCode = hasContext('multi-code');
+	const selected = insideMultiCode ? getContext<CodeContext>('multi-code').selected : null;
+
+	if (insideMultiCode) {
+		getContext<CodeContext>('multi-code').snippets.update((n) => {
+			n.add(language);
+
+			return n;
+		});
+	}
+
+	const result = process ? hljs.highlight(content, { language: language ?? 'sh' }).value : content;
+</script>
+
+{#if insideMultiCode}
+	{#if $selected === language}
+		<pre><code class={`language-${language}`}>{@html result}</code></pre>
+	{/if}
+{:else}
+	<section class="aw-code-snippet" aria-label="code-snippet panel">
+		<header class="aw-code-snippet-header">
+			<div class="aw-code-snippet-header-start">
+				<div class="u-flex u-gap-16">
+					<div class="aw-tag"><span class="text">Default</span></div>
+				</div>
+			</div>
+			<div class="aw-code-snippet-header-end">
+				<ul class="buttons-list u-flex u-gap-8">
+					<li class="buttons-list-item u-flex u-cross-child-scenter">
+						<div class="aw-select">
+							<select>
+								<option value="Web SDK">Web SDK</option>
+							</select>
+							<span class="icon-cheveron-down" aria-hidden="true" />
+						</div>
+					</li>
+					<li class="buttons-list-item aw-u-padding-inline-start-20">
+						<button class="aw-icon-button" aria-label="copy code from code-snippet"
+							><span class="icon-duplicate" aria-hidden="true" /></button
+						>
+					</li>
+				</ul>
+			</div>
+		</header>
+		<div class="aw-code-snippet-content">
+			<pre><code class={`language-${language}`}>{@html result}</code></pre>
+		</div>
+	</section>
+{/if}
diff --git a/src/markdoc/nodes/Heading.svelte b/src/markdoc/nodes/Heading.svelte
new file mode 100644
index 000000000..24c966d2d
--- /dev/null
+++ b/src/markdoc/nodes/Heading.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { getContext, hasContext, onMount } from 'svelte';
+	import type { LayoutContext } from '../layouts/Tutorial.svelte';
+
+	export let level: number;
+	export let id: string | undefined = undefined;
+	export let step: number | undefined = undefined;
+
+	const tag = `h${level}`;
+	let element: HTMLElement | undefined;
+
+	$: if (element && hasContext('headings')) {
+		getContext<LayoutContext>('headings').update((n) => {
+			if (id === undefined) {
+				return n;
+			}
+			n[id] = {
+				step,
+				text: element?.textContent ?? ''
+			};
+
+			return n;
+		});
+	}
+</script>
+
+<svelte:element
+	this={tag}
+	{id}
+	bind:this={element}
+	class="aw-main-body-500 aw-u-color-text-primary"
+>
+	<slot />
+</svelte:element>
diff --git a/src/markdoc/nodes/Image.svelte b/src/markdoc/nodes/Image.svelte
new file mode 100644
index 000000000..0464dd999
--- /dev/null
+++ b/src/markdoc/nodes/Image.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let src: string;
+	export let alt: string;
+	export let title: string;
+</script>
+
+<div class="aw-media">
+	<img {src} {alt} {title} loading="lazy" />
+</div>
diff --git a/src/markdoc/nodes/Link.svelte b/src/markdoc/nodes/Link.svelte
new file mode 100644
index 000000000..ee8e7a4ba
--- /dev/null
+++ b/src/markdoc/nodes/Link.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let href: string;
+	export let title: string;
+</script>
+
+<a class="aw-link" {href} {title}><slot /></a>
diff --git a/src/markdoc/nodes/List.svelte b/src/markdoc/nodes/List.svelte
new file mode 100644
index 000000000..6c5361c99
--- /dev/null
+++ b/src/markdoc/nodes/List.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let ordered: boolean;
+</script>
+
+<svelte:element this={ordered ? 'ol' : 'ul'} class="aw-list"><slot /></svelte:element>
diff --git a/src/markdoc/nodes/Paragraph.svelte b/src/markdoc/nodes/Paragraph.svelte
new file mode 100644
index 000000000..551972c31
--- /dev/null
+++ b/src/markdoc/nodes/Paragraph.svelte
@@ -0,0 +1 @@
+<p class="aw-paragraph-md"><slot /></p>
\ No newline at end of file
diff --git a/src/markdoc/nodes/Table.svelte b/src/markdoc/nodes/Table.svelte
new file mode 100644
index 000000000..123911d7d
--- /dev/null
+++ b/src/markdoc/nodes/Table.svelte
@@ -0,0 +1,7 @@
+<div class="aw-table-wrapper">
+	<div class="aw-table-scroll">
+		<table class="aw-table">
+			<slot />
+		</table>
+	</div>
+</div>
diff --git a/src/markdoc/nodes/Tbody.svelte b/src/markdoc/nodes/Tbody.svelte
new file mode 100644
index 000000000..cbad22b17
--- /dev/null
+++ b/src/markdoc/nodes/Tbody.svelte
@@ -0,0 +1,3 @@
+<tbody class="aw-table-body">
+	<slot />
+</tbody>
\ No newline at end of file
diff --git a/src/markdoc/nodes/Td.svelte b/src/markdoc/nodes/Td.svelte
new file mode 100644
index 000000000..787a20300
--- /dev/null
+++ b/src/markdoc/nodes/Td.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let align: string;
+</script>
+
+<td class="aw-table-col">
+	<slot />
+</td>
diff --git a/src/markdoc/nodes/Th.svelte b/src/markdoc/nodes/Th.svelte
new file mode 100644
index 000000000..06c233169
--- /dev/null
+++ b/src/markdoc/nodes/Th.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLThAttributes } from 'svelte/elements';
+
+	export let align: HTMLThAttributes['align'] = undefined;
+</script>
+
+<th class="aw-table-head-col" {align}>
+	<span class="aw-eyebrow">
+		<slot />
+	</span>
+</th>
diff --git a/src/markdoc/nodes/Thead.svelte b/src/markdoc/nodes/Thead.svelte
new file mode 100644
index 000000000..d97bdafff
--- /dev/null
+++ b/src/markdoc/nodes/Thead.svelte
@@ -0,0 +1,3 @@
+<thead class="aw-table-header">
+	<slot />
+</thead>
diff --git a/src/markdoc/nodes/Tr.svelte b/src/markdoc/nodes/Tr.svelte
new file mode 100644
index 000000000..efffe77e4
--- /dev/null
+++ b/src/markdoc/nodes/Tr.svelte
@@ -0,0 +1,3 @@
+<tr class="aw-table-row">
+	<slot />
+</tr>
\ No newline at end of file
diff --git a/src/markdoc/nodes/_Module.svelte b/src/markdoc/nodes/_Module.svelte
new file mode 100644
index 000000000..7db380023
--- /dev/null
+++ b/src/markdoc/nodes/_Module.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+    export { default as Code } from './Code.svelte';
+    export { default as Fence } from './Fence.svelte';
+	export { default as Heading } from './Heading.svelte';
+	export { default as List } from './List.svelte';
+	export { default as Paragraph } from './Paragraph.svelte';
+	export { default as Image } from './Image.svelte';
+	export { default as Link } from './Link.svelte';
+	export { default as Table } from './Table.svelte';
+	export { default as Tbody } from './Tbody.svelte';
+	export { default as Td } from './Td.svelte';
+	export { default as Th } from './Th.svelte';
+	export { default as Thead } from './Thead.svelte';
+	export { default as Tr } from './Tr.svelte';
+</script>
diff --git a/src/markdoc/tags/MultiCode.svelte b/src/markdoc/tags/MultiCode.svelte
new file mode 100644
index 000000000..87e7ff016
--- /dev/null
+++ b/src/markdoc/tags/MultiCode.svelte
@@ -0,0 +1,55 @@
+<script context="module" lang="ts">
+	import type { Writable } from 'svelte/store';
+	export type CodeContext = {
+		selected: Writable<string | null>;
+		snippets: Writable<Set<string>>;
+	};
+</script>
+
+<script lang="ts">
+	import { getContext, setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	setContext<CodeContext>('multi-code', {
+		selected: writable(null),
+		snippets: writable(new Set())
+	});
+
+	const { snippets, selected } = getContext<CodeContext>('multi-code');
+
+	snippets.subscribe(n => {
+		if ($selected === null && n.size > 0) {
+			$selected = Array.from(n)[0];
+		}
+	})
+</script>
+
+<section class="aw-code-snippet" aria-label="code-snippet panel">
+	<header class="aw-code-snippet-header">
+		<div class="aw-code-snippet-header-start">
+			<div class="u-flex u-gap-16">
+				<div class="aw-tag"><span class="text">Default</span></div>
+			</div>
+		</div>
+		<div class="aw-code-snippet-header-end">
+			<ul class="buttons-list u-flex u-gap-8">
+				<li class="buttons-list-item u-flex u-cross-child-scenter">
+					<div class="aw-select">
+						<select bind:value={$selected}>
+							{#each Array.from($snippets) as language}
+								<option value={language}>{language}</option>
+							{/each}
+						</select>
+						<span class="icon-cheveron-down" aria-hidden="true" />
+					</div>
+				</li>
+				<li class="buttons-list-item aw-u-padding-inline-start-20">
+					<button class="aw-icon-button" aria-label="copy code from code-snippet"
+						><span class="icon-duplicate" aria-hidden="true" /></button
+					>
+				</li>
+			</ul>
+		</div>
+	</header>
+	<div class="aw-code-snippet-content"><slot /></div>
+</section>
diff --git a/src/markdoc/tags/Section.svelte b/src/markdoc/tags/Section.svelte
new file mode 100644
index 000000000..725f43bf0
--- /dev/null
+++ b/src/markdoc/tags/Section.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Heading from '../nodes/Heading.svelte';
+
+	export let id: string;
+	export let step: number;
+	export let title: string;
+</script>
+
+<section class="aw-article-content-section is-with-line">
+	<section class="aw-article-content-sub-section">
+		<header class="aw-article-content-header">
+			<span class="aw-numeric-badge">{step}</span>
+			<Heading level={2} {id} {step}>
+				{title}
+			</Heading>
+		</header>
+		<slot />
+	</section>
+</section>
diff --git a/src/markdoc/tags/_Module.svelte b/src/markdoc/tags/_Module.svelte
new file mode 100644
index 000000000..0a3c60a34
--- /dev/null
+++ b/src/markdoc/tags/_Module.svelte
@@ -0,0 +1,4 @@
+<script context="module">
+	export { default as Section } from './Section.svelte';
+	export { default as MultiCode } from './MultiCode.svelte';
+</script>
diff --git a/src/routes/test/+page.markdoc b/src/routes/test/+page.markdoc
new file mode 100644
index 000000000..8146db337
--- /dev/null
+++ b/src/routes/test/+page.markdoc
@@ -0,0 +1,168 @@
+---
+title: Hello world
+difficulty: beginner
+readtime: 3
+---
+
+Text can be **bold**, _italic_, ~~strikethrough~~or a [link to another page](#).
+
+There should be whitespace between paragraphs.
+
+There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.
+
+# Header 1 {% #header-1 %}
+
+This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
+
+## Header 2 {% #header-2 %}
+
+> This is a blockquote following a header.
+> 
+> When something is important enough, you do it even if the odds are not in your favor.
+
+### Header 3 {% #header-3 %}
+
+This is a fenced codeblock:
+
+```js
+// Javascript code with syntax highlighting.
+const cars = ["BMW", "Volvo", "Mini"];
+let text = "";
+
+for (let x of cars) {
+  text += x + " ";
+}
+```
+
+And you can also have `inline code`.
+
+#### Header 4
+
+* This is an unordered list following a header.
+* This is an unordered list following a header.
+* This is an unordered list following a header.
+
+##### Header 5
+
+1. This is an ordered list following a header.
+1. This is an ordered list following a header.
+1. This is an ordered list following a header.
+
+###### Header 6
+
+This is a nice table:
+
+| head1             | head two          | three             |
+| ----------------- | ----------------- | ----------------- |
+| ok                | good swedish fish | nice              |
+| out of stock      | good and plenty   | nice              |
+| ok                | good `oreos`      | hmm               |
+| ok                | good `zoute` drop | yumm              |
+
+### There's a horizontal rule below this.
+
+---
+
+### And a nested list:
+
+- level 1 item
+  - level 2 item
+  - level 2 item
+    - level 3 item
+    - level 3 item
+- level 1 item
+  - level 2 item
+  - level 2 item
+  - level 2 item
+- level 1 item
+  - level 2 item
+  - level 2 item
+- level 1 item
+
+### Image
+
+![](https://pink.appwrite.io/articles/announcement.png)
+
+{% section #featured-products-1 step=1 title="Featured products 1" %}
+Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas ut. Dictum tortor arcu feugiat metus pellentesque posuere.
+{% /section %}
+
+{% section #featured-products-2 step=2 title="Featured products 2" %}
+Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas ut. Dictum tortor arcu feugiat metus pellentesque posuere.
+
+## Sub title
+
+{% multicode %}
+```js
+const sdk = require('node-appwrite');
+
+const client = new sdk.Client();
+const users = new sdk.Users(client);
+
+client
+    .setEndpoint('https://cloud.appwrite.io/v1')
+    .setProject('5df5acd0d48c2')
+    .setKey('919c2d18fb5d4...a2ae413da83346ad2');
+
+const promise = users.create('[USER_ID]');
+
+promise.then(function (response) {
+    console.log(response);
+}, function (error) {
+    console.log(error);
+});
+```
+
+```php
+<?php
+
+use Appwrite\Client;
+use Appwrite\Services\Users;
+
+$client = new Client();
+
+$client
+    ->setEndpoint('https://cloud.appwrite.io/v1')
+    ->setProject('5df5acd0d48c2')
+    ->setKey('919c2d18fb5d4...a2ae413da83346ad2');
+
+$users = new Users($client);
+
+$result = $users->create('[USER_ID]');
+```
+
+```swift
+import Appwrite
+
+func main() async throws {
+    let client = Client()
+      .setEndpoint("https://cloud.appwrite.io/v1")
+      .setProject("5df5acd0d48c2")
+      .setKey("919c2d18fb5d4...a2ae413da83346ad2")
+
+    let users = Users(client)
+    let user = try await users.create(
+        userId: "[USER_ID]"
+    )
+
+    print(String(describing: user)
+}
+```
+{% /multicode %}
+
+## Sub title
+
+Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas ut. Dictum tortor arcu feugiat metus pellentesque posuere.
+{% /section %}
+
+{% section #featured-products-3 step=3 title="Featured products 3" %}
+Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas ut. Dictum tortor arcu feugiat metus pellentesque posuere.
+
+## Sub title
+
+Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas ut. Dictum tortor arcu feugiat metus pellentesque posuere.
+
+## Sub title
+
+Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas ut. Dictum tortor arcu feugiat metus pellentesque posuere.
+{% /section %}
diff --git a/svelte.config.js b/svelte.config.js
index b4b883ba7..d1e0c3f69 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,12 +1,32 @@
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+import { vitePreprocess } from '@sveltejs/kit/vite';
 import { preprocessMeltUI } from '@melt-ui/pp';
+import { markdoc } from 'svelte-markdoc-preprocess';
 import sequence from 'svelte-sequential-preprocessor';
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+
+function absoulute (path) {
+    return join(dirname(fileURLToPath(import.meta.url)), path)
+}
+
 /** @type {import('@sveltejs/kit').Config}*/
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: sequence([vitePreprocess(), preprocessMeltUI()]),
+	preprocess: sequence([
+		vitePreprocess(),
+		markdoc({
+			generateSchema: true,
+			nodes: absoulute('./src/markdoc/nodes/_Module.svelte'),
+			tags: absoulute('./src/markdoc/tags/_Module.svelte'),
+			layouts: {
+				default: absoulute('./src/markdoc/layouts/Tutorial.svelte'),
+			}
+		}),
+		preprocessMeltUI()
+	]),
+	extensions: ['.markdoc', '.svelte'],
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.