appwrite · TorstenDittmann · Sep 19, 2023 · Sep 18, 2023 · Sep 18, 2023 · Sep 18, 2023
diff --git a/src/lib/components/FooterNav.svelte b/src/lib/components/FooterNav.svelte
@@ -52,18 +52,17 @@
 				</svg>
 			</button>
 			<ul class="aw-footer-nav-secondary-list">
-				<li class="aw-footer-nav-secondary-item"><a href="">Company</a></li>
-				<li class="aw-footer-nav-secondary-item"><a href="">Community</a></li>
-				<li class="aw-footer-nav-secondary-item"><a href="">Blog</a></li>
-				<li class="aw-footer-nav-secondary-item"><a href="">Careers</a></li>
-				<li class="aw-footer-nav-secondary-item"><a href="">Contact Us</a></li>
-				<li class="aw-footer-nav-secondary-item"><a href="">Roadmap</a></li>
-				<li class="aw-footer-nav-secondary-item"><a href="">Changelog</a></li>
-				<li class="aw-footer-nac-secondary-item" on:click={() => globalThis.OneTrust.ToggleInfoDisplay()}>cookie settings</li>
+				<li class="aw-footer-nav-secondary-item"><a href="#">Company</a></li>
+				<li class="aw-footer-nav-secondary-item"><a href="#">Community</a></li>
+				<li class="aw-footer-nav-secondary-item"><a href="#">Blog</a></li>
+				<li class="aw-footer-nav-secondary-item"><a href="#">Careers</a></li>
+				<li class="aw-footer-nav-secondary-item"><a href="#">Contact Us</a></li>
+				<li class="aw-footer-nav-secondary-item"><a href="#">Roadmap</a></li>
+				<li class="aw-footer-nav-secondary-item"><a href="#">Changelog</a></li>
 			</ul>
 		</li>
 		<li class="aw-footer-nav-main-item">
-			<h5 class="aw-footer-nav-main-title aw-is-not-mobile"><a href="">Legal</a></h5>
+			<h5 class="aw-footer-nav-main-title aw-is-not-mobile"><a href="#">Legal</a></h5>
 			<button class="aw-footer-nav-button aw-is-only-mobile">
 				<span class="aw-caption-500">Legal</span>
 				<svg

diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { createTooltip, melt } from '@melt-ui/svelte';
+	import type { FloatingConfig } from '@melt-ui/svelte/internal/actions';
+
+	export let placement: FloatingConfig['placement'] = 'top';
+	export let disabled = false;
+
+	const {
+		elements: { trigger, content, arrow },
+		states: { open }
+	} = createTooltip({
+		positioning: {
+			placement
+		},
+		openDelay: 0,
+		closeOnPointerDown: false,
+		forceVisible: true
+	});
+</script>
+
+<span use:melt={$trigger}>
+	<slot />
+</span>
+
+{#if $open && !disabled}
+	<div use:melt={$content} class="aw-tooltip aw-sub-body-400">
+		<div use:melt={$arrow} />
+		<slot name="tooltip" />
+	</div>
+{/if}
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
@@ -3,3 +3,4 @@ export { default as MainFooter } from './MainFooter.svelte';
 export { default as PreFooter } from './PreFooter.svelte';
 export { default as MobileNav } from './MobileNav.svelte';
 export { default as Phone } from './Phone.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
@@ -21,6 +21,7 @@
 	};
 
 	$: variantClass = variantClasses[variant];
+
 </script>
 
 <div class="u-position-relative">

diff --git a/src/lib/layouts/Sidebar.svelte b/src/lib/layouts/Sidebar.svelte
@@ -0,0 +1,122 @@
+<script lang="ts" context="module">
+	export type NavLink = {
+		label: string;
+		href: string;
+		icon?: string;
+	};
+
+	export type NavGroup = {
+		label?: string;
+		items: Array<NavLink>;
+	};
+
+	export type NavParent = {
+		backlink: string;
+		label: string;
+		icon: string;
+		href: string;
+	};
+
+	export type NavTree = Array<NavGroup | NavLink>;
+</script>
+
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	export let expandable = false;
+	export let navigation: NavTree;
+	export let parent: NavParent | undefined = undefined;
+
+	const handleMenuClick = () => {
+		const gridHugeNavs = document.querySelector('.aw-grid-huge-navs');
+		const referencesMenu = document.querySelector('.aw-references-menu');
+
+		gridHugeNavs?.classList.toggle('is-open');
+		referencesMenu?.classList.remove('is-open');
+	};
+
+	function isNavLink(item: NavLink | NavGroup): item is NavLink {
+		return 'href' in item;
+	}
+</script>
+
+<nav class="aw-side-nav" class:is-transparent={!expandable}>
+	<div class="aw-side-nav-wrapper">
+		<button class="aw-input-text aw-is-not-desktop">
+			<span class="icon-search" />
+			<span class="text">Search in docs</span>
+		</button>
+		<div class="aw-side-nav-scroll">
+			{#if parent}
+				<section style:padding-bottom="16px" style:border-bottom="1px solid #232325">
+					<a class="aw-side-nav-button" href={parent.backlink}>
+						<span class="icon-cheveron-left" aria-hidden="true" />
+						<span class="aw-caption-400">Back</span>
+					</a>
+					<a
+						class="aw-side-nav-button"
+						href={parent.href}
+						class:is-selected={$page.url?.pathname === parent.href}
+					>
+						<span class={parent.icon} aria-hidden="true" />
+						<span class="aw-caption-500">{parent.label}</span>
+					</a>
+				</section>
+			{/if}
+			{#each navigation as navGroup}
+				<section>
+					{#if isNavLink(navGroup)}
+						<a
+							class="aw-side-nav-button"
+							href={navGroup.href}
+							class:is-selected={$page.url?.pathname === navGroup.href}
+						>
+							<span class={navGroup.icon} aria-hidden="true" />
+							<span class="aw-caption-400">{navGroup.label}</span>
+						</a>
+					{:else}
+						{#if navGroup.label}
+							<h4 class="aw-side-nav-header aw-eyebrow">{navGroup.label}</h4>
+						{/if}
+						<ul>
+							{#each navGroup.items as groupItem}
+									<li>
+										<a
+											class="aw-side-nav-button"
+											class:is-selected={$page.url?.pathname === groupItem.href}
+											href={groupItem.href}
+										>
+											{#if groupItem.icon}
+												<span class={groupItem.icon} aria-hidden="true" />
+											{/if}
+											<span class="aw-caption-400">{groupItem.label}</span>
+										</a>
+									</li>
+							{/each}
+						</ul>
+					{/if}
+				</section>
+			{/each}
+		</div>
+		{#if expandable}
+			<button
+				on:click={handleMenuClick}
+				class="aw-icon-button u-margin-inline-start-auto"
+				aria-label="toggle nav"
+			>
+				<span class="icon-cheveron-right" aria-hidden="true" />
+			</button>
+		{/if}
+		<div class="aw-side-nav-mobile-footer-buttons">
+			<button class="aw-button u-width-full-line">
+				<span class="text">Go to console</span>
+			</button>
+
+			<button class="aw-button is-text u-width-full-line">
+				<span class="aw-icon-star" aria-hidden="true" />
+				<span class="text">Star on GitHub</span>
+				<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
+			</button>
+		</div>
+	</div>
+</nav>
diff --git a/src/lib/utils/code.ts b/src/lib/utils/code.ts
@@ -14,6 +14,11 @@ 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 http from 'highlight.js/lib/languages/http';
+import kotlin from 'highlight.js/lib/languages/kotlin';
+import java from 'highlight.js/lib/languages/java';
+import css from 'highlight.js/lib/languages/css';
+import graphql from 'highlight.js/lib/languages/graphql';
+import { Platform } from './references';
 
 const languages = {
 	js: javascript,
@@ -31,22 +36,56 @@ const languages = {
 	rb: ruby,
 	cs: csharp,
 	http: http,
+	kotlin: kotlin,
+	java: java,
+	css: css,
+	graphql: graphql
 } as const satisfies Record<string, LanguageFn>;
 
+const platformAliases: Record<Platform, keyof typeof languages> = {
+	[Platform.ClientWeb]: 'js',
+	[Platform.ClientFlutter]: 'dart',
+	[Platform.ClientAndroidJava]: 'java',
+	[Platform.ClientAndroidKotlin]: 'kotlin',
+	[Platform.ClientApple]: 'swift',
+	[Platform.ServerDart]: 'dart',
+	[Platform.ServerDeno]: 'ts',
+	[Platform.ServerDotNet]: 'cs',
+	[Platform.ServerNodeJs]: 'js',
+	[Platform.ServerPhp]: 'php',
+	[Platform.ServerPython]: 'py',
+	[Platform.ServerRuby]: 'rb',
+	[Platform.ServerSwift]: 'swift'
+};
+
 Object.entries(languages).forEach(([key, value]) => {
 	hljs.registerLanguage(key, value);
 });
 
-export type Language = keyof typeof languages;
+Object.entries(platformAliases).forEach(([key, value]) => {
+	hljs.registerAliases(key, {
+		languageName: value
+	});
+});
+
+export type Language = keyof typeof languages | Platform;
 
 type Args = {
 	content: string;
 	language?: Language;
+	withLineNumbers?: boolean;
 };
 
 export const getCodeHtml = (args: Args) => {
-	const { content, language } = args;
+	const { content, language, withLineNumbers } = args;
 	const res = hljs.highlight(content, { language: language ?? 'sh' }).value;
+	const lines = res.split(/\n/g).slice(0, -1);
+	const final = lines.reduce((carry, line) => {
+		carry += `<span class="line">${line}</span>\n`;
+		return carry;
+	}, '');
 
-	return `<pre><code class="language-${language}">${res}</code></pre>`;
+	return `<pre><code class="language-${language} ${
+		withLineNumbers ? 'line-numbers' : ''
+	}">${final}</code></pre>`;
 };
diff --git a/src/lib/utils/copy.ts b/src/lib/utils/copy.ts
@@ -0,0 +1,42 @@
+async function securedCopy(value: string) {
+    try {
+        await navigator.clipboard.writeText(value);
+    } catch {
+        return false;
+    }
+
+    return true;
+}
+
+function unsecuredCopy(value: string) {
+    const textArea = document.createElement('textarea');
+    textArea.value = value;
+
+    // Avoid scrolling to bottom
+    textArea.style.top = '0';
+    textArea.style.left = '0';
+    textArea.style.position = 'fixed';
+
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    let success = true;
+    try {
+        document.execCommand('copy');
+    } catch {
+        success = false;
+    } finally {
+        document.body.removeChild(textArea);
+    }
+
+    return success;
+}
+
+export async function copy(value: string) {
+    // securedCopy works only in HTTPS environment.
+    // unsecuredCopy works in HTTP and only runs if securedCopy fails.
+    const success = (await securedCopy(value)) || unsecuredCopy(value);
+
+    return success;
+}
diff --git a/src/lib/utils/references.ts b/src/lib/utils/references.ts
@@ -15,9 +15,11 @@ export enum Service {
 }
 
 export enum Platform {
-	ClientApple = 'client-apple',
-	ClientFlutter = 'client-flutter',
 	ClientWeb = 'client-web',
+	ClientFlutter = 'client-flutter',
+	ClientApple = 'client-apple',
+	ClientAndroidKotlin = 'client-android-kotlin',
+	ClientAndroidJava = 'client-android-java',
 	ServerDart = 'server-dart',
 	ServerDeno = 'server-deno',
 	ServerDotNet = 'server-dotnet',
@@ -28,16 +30,49 @@ export enum Platform {
 	ServerSwift = 'server-swift'
 }
 
-export const languageMap: Record<Platform, Language> = {
-	[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'
+export const platformMap: Record<Language, string> = {
+	[Platform.ClientApple]: 'Apple',
+	[Platform.ClientFlutter]: 'Flutter',
+	[Platform.ClientWeb]: 'Web',
+	[Platform.ClientAndroidKotlin]: 'Android (Kotlin)',
+	[Platform.ClientAndroidJava]: 'Android (Java)',
+	[Platform.ServerDart]: 'Dart',
+	[Platform.ServerDeno]: 'Deno',
+	[Platform.ServerDotNet]: '.NET',
+	[Platform.ServerNodeJs]: 'Node.js',
+	[Platform.ServerPhp]: 'PHP',
+	[Platform.ServerPython]: 'Python',
+	[Platform.ServerRuby]: 'Ruby',
+	[Platform.ServerSwift]: 'Swift',
+	sh: 'Shell',
+	js: 'JavaScript',
+	ts: 'TypeScript',
+	dart: 'Dart',
+	java: 'Java',
+	kotlin: 'Kotlin',
+	cs: 'C#',
+	py: 'Python',
+	rb: 'Ruby',
+	php: 'PHP',
+	swift: 'Swift',
+	xml: 'XML',
+	html: 'HTML',
+	md: 'Markdown',
+	json: 'JSON',
+	diff: 'Diff',
+	http: 'HTTP',
+	css: 'CSS',
+	graphql: 'GraphQL'
+};
+
+export const serviceMap: Record<Service, string> = {
+	[Service.Account]: 'Account',
+	[Service.Avatars]: 'Avatars',
+	[Service.Databases]: 'Databases',
+	[Service.Functions]: 'Functions',
+	[Service.Health]: 'Health',
+	[Service.Locale]: 'Locale',
+	[Service.Storage]: 'Storage',
+	[Service.Teams]: 'Teams',
+	[Service.Users]: 'Users'
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,7 @@ @@
     	};
     	$: variantClass = variantClasses[variant];
     </script>
     <div class="u-position-relative">
@@ Expand Down @@