fix: alot of stuff

src/lib/utils/references.ts

@@ -0,0 +1,40 @@
+export const versions = ['1.3.x'];
+
+export enum Service {
+	Account = 'account',
+	Avatars = 'avatars',
+	Database = 'database',
+	Functions = 'functions',
+	Health = 'health',
+	Locale = 'locale',
+	Storage = 'storage',
+	Teams = 'teams'
+}
+
+export enum Platform {
+	ClientApple = 'client-apple',
+	ClientFlutter = 'client-flutter',
+	ClientWeb = 'client-web',
+	ServerDart = 'server-dart',
+	ServerDeno = 'server-deno',
+	ServerDotNet = 'server-dotnet',
+	ServerNodeJs = 'server-nodejs',
+	ServerPhp = 'server-php',
+	ServerPython = 'server-python',
+	ServerRuby = 'server-ruby',
+	ServerSwift = 'server-swift'
+}
+
+export const languageMap: Record<Platform, string> = {
+	[Platform.ClientApple]: 'swift',
+	[Platform.ClientFlutter]: 'dart',
+	[Platform.ClientWeb]: 'js',
+	[Platform.ServerDart]: 'dart',
+	[Platform.ServerDeno]: 'ts',
+	[Platform.ServerDotNet]: 'cs',
+	[Platform.ServerNodeJs]: 'js',
+	[Platform.ServerPhp]: 'php',
+	[Platform.ServerPython]: 'py',
+	[Platform.ServerRuby]: 'rb',
+	[Platform.ServerSwift]: 'swift'
+};

src/lib/utils/specs.ts

@@ -189,7 +189,7 @@ export async function getService(
 
 		const path = `/node_modules/appwrite/docs/examples/${version}/${platform}/examples/${operation['x-appwrite'].demo}`;
 		if (!(path in examples)) {
-			throw new Error("Example doesn't exist");
+			throw new Error("Example doesn't exist: " + path);
 		}
 		data.methods.push({
 			id: operation['x-appwrite'].method,

src/markdoc/nodes/Fence.svelte

@@ -10,7 +10,11 @@
 	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 python from 'highlight.js/lib/languages/python';
 	import diff from 'highlight.js/lib/languages/diff';
+	import ruby from 'highlight.js/lib/languages/ruby';
+	import csharp from 'highlight.js/lib/languages/csharp';
+	
 	import { getContext, hasContext } from 'svelte';
 	import type { CodeContext } from '../tags/MultiCode.svelte';
 
@@ -24,6 +28,9 @@
 	hljs.registerLanguage('json', json);
 	hljs.registerLanguage('swift', swift);
 	hljs.registerLanguage('php', php);
+	hljs.registerLanguage('py', python);
+	hljs.registerLanguage('rb', ruby);
+	hljs.registerLanguage('cs', csharp);
 	hljs.registerLanguage('diff', diff);
 </script>
 
@@ -43,7 +50,7 @@
 		});
 	}
 
-	const result = process ? hljs.highlight(content, { language: language ?? 'sh' }).value : content;
+	$: result = process ? hljs.highlight(content, { language: language ?? 'sh' }).value : content;
 </script>
 
 {#if insideMultiCode}

src/routes/docs/reference/[version]/[platform]/[service]/+page.server.ts

@@ -1,19 +1,10 @@
 import type { EntryGenerator, PageServerLoad } from './$types';
 import { getService } from '$lib/utils/specs';
+import { Platform, Service, versions } from '$lib/utils/references';
+import { error } from '@sveltejs/kit';
 
-const services = [
-	'account',
-	'avatars',
-	'database',
-	'functions',
-	'health',
-	'locale',
-	'storage',
-	'teams'
-];
-const versions = ['1.3.x'];
-const platforms = ['client-web', 'client-flutter'];
-
+const services = Object.values(Service);
+const platforms = Object.values(Platform);
 export const prerender = true;
 export const entries: EntryGenerator = () => {
 	return versions.flatMap((version) => {
@@ -27,6 +18,9 @@ export const entries: EntryGenerator = () => {
 
 export const load: PageServerLoad = async ({ params }) => {
 	const { version, platform, service } = params;
+	if (!versions.includes(version)) throw error(404, 'Invalid version');
+	if (!services.includes(service as Service)) throw error(404, 'Invalid service');
+	if (!platforms.includes(platform as Platform)) throw error(404, 'Invalid platform');
 	const data = getService(version, platform, service);
 	return data;
 };

src/routes/docs/reference/[version]/[platform]/[service]/+page.svelte

@@ -1,6 +1,9 @@
-<script>
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import { MainFooter } from '$lib/components';
 	import { parse } from '$lib/utils/markdown';
+	import { Platform, languageMap, versions } from '$lib/utils/references.js';
 	import { Fence } from '$markdoc/nodes/_Module.svelte';
 
 	const handleRefClick = () => {
@@ -9,6 +12,22 @@
 	};
 
 	export let data;
+
+	function selectPlatform(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
+		const { version, service } = $page.params;
+		goto(`/docs/reference/${version}/${event.currentTarget.value}/${service}`, {
+			invalidateAll: true
+		});
+	}
+
+	function selectVersion(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
+		const { platform, service } = $page.params;
+		const version = event.currentTarget.value === 'cloud' ? '1.3.x' : event.currentTarget.value;
+		goto(`/docs/reference/${version}/${platform}/${service}`);
+	}
+
+	$: platform = $page.params.platform as Platform;
+	$: platformType = platform.startsWith('client-') ? 'CLIENT' : 'SERVER';
 </script>
 
 <main class="u-contents">
@@ -16,15 +35,24 @@
 		<header class="aw-article-header">
 			<div class="aw-article-header-start">
 				<h1 class="aw-title">{data.service?.name}</h1>
-				<div class="aw-inline-code">CLIENT</div>
+				<div class="aw-inline-code">{platformType}</div>
 			</div>
 			<div class="aw-article-header-end">
 				<div class="u-flex u-gap-24 aw-u-color-text-primary">
 					<div class="u-flex u-cross-center u-gap-8">
 						<label class="u-small" for="platform">Platform</label>
 						<div class="aw-select is-colored">
-							<select id="platform">
-								<option>Web SDK</option>
+							<select id="platform" on:change={selectPlatform}>
+								<optgroup label="Client">
+									{#each Object.values(Platform).filter((p) => p.startsWith('client-')) as platform}
+										<option>{platform}</option>
+									{/each}
+								</optgroup>
+								<optgroup label="Server">
+									{#each Object.values(Platform).filter((p) => p.startsWith('server-')) as platform}
+										<option>{platform}</option>
+									{/each}
+								</optgroup>
 							</select>
 							<span class="icon-cheveron-down" aria-hidden="true" />
 						</div>
@@ -32,8 +60,11 @@
 					<div class="u-flex u-cross-center u-gap-8">
 						<label class="u-small" for="version">Version</label>
 						<div class="aw-select is-colored">
-							<select id="version">
-								<option>Cloud</option>
+							<select id="version" on:change={selectVersion}>
+								<option value="cloud">Cloud</option>
+								{#each versions as version}
+									<option value={version}>{version}</option>
+								{/each}
 							</select>
 							<span class="icon-cheveron-down" aria-hidden="true" />
 						</div>
@@ -113,7 +144,9 @@
 													<li>
 														<article>
 															<header class="u-flex u-cross-baseline u-gap-8">
-																<h3 class="aw-eyebrow aw-u-color-text-primary">{response.code}</h3>
+																<h3 class="aw-eyebrow aw-u-color-text-primary">
+																	{response.code}
+																</h3>
 																<span class="aw-caption-400">{response.contentType}</span>
 															</header>
 															<p class="aw-sub-body-400 u-margin-block-start-16">
@@ -135,7 +168,7 @@
 								class="u-position-sticky"
 								style="--inset-block-start:var(--p-grid-huge-navs-secondary-sticky-position);"
 							>
-								<Fence language="js" content={method.demo} process />
+								<Fence language={languageMap[platform]} content={method.demo} process />
 							</div>
 						</div>
 					</div>