From 9aba5feb5ee999d580ce72e7426c55d52f7842fa Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 10 Oct 2023 11:03:12 +0100
Subject: [PATCH 1/5] remove scrollbar from carousel

---
 src/lib/components/Carousel.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
index ae4d4be13f..2ed3bc5580 100644
--- a/src/lib/components/Carousel.svelte
+++ b/src/lib/components/Carousel.svelte
@@ -120,6 +120,11 @@
         scroll-snap-type: x proximity;
 
         scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
     }
 
     .carousel :global(li) {

From a6c87a03bd3a7da1e50dccb10b1e54a010289ca9 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 10 Oct 2023 11:15:31 +0100
Subject: [PATCH 2/5] fix card zoom chrome

---
 src/lib/components/Carousel.svelte       |  8 +++++---
 src/routes/community/+page.svelte        |  2 +-
 src/routes/docs/+page.svelte             |  2 +-
 src/routes/docs/CodeCard.svelte          |  3 +++
 src/scss/8-sequences/_grid-articles.scss | 26 +++++++++++++-----------
 5 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
index 2ed3bc5580..fc18aa7521 100644
--- a/src/lib/components/Carousel.svelte
+++ b/src/lib/components/Carousel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     let carousel: HTMLElement;
 
-    export let isBig = false;
+    export let size: 'default' | 'medium' | 'big' = 'default';
     export let gap = 32;
     let scroll = 0;
 
@@ -66,8 +66,10 @@
 
     <div class="carousel-wrapper" data-state={isStart ? 'start' : isEnd ? 'end' : 'middle'}>
         <ul
-            class="aw-grid-articles aw-u-gap-32 u-margin-block-start-32 carousel"
-            class:is-big={isBig}
+            class="aw-grid-articles u-margin-block-start-32 carousel"
+            class:is-medium={size === 'medium'}
+            class:is-big={size === 'big'}
+            style:gap="{gap}px"
             bind:this={carousel}
             on:scroll={handleScroll}
         >
diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
index 48c4368a8b..1f5689d05d 100644
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -493,7 +493,7 @@
             </div>
             <div class="aw-big-padding-section-level-2">
                 <section class="aw-container aw-u-sep-block-start aw-u-padding-block-start-64">
-                    <Carousel isBig>
+                    <Carousel size="big">
                         <svelte:fragment slot="header">
                             <h4 class="aw-label aw-u-color-text-primary">Upcoming Events</h4>
                         </svelte:fragment>
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index 6642f8e1b0..acff5c4bb4 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -154,7 +154,7 @@
             <p class="aw-description u-max-width-600 u-margin-block-start-16">
                 If you learn best from code examples, follow one of our tutorials.
             </p>
-            <Carousel>
+            <Carousel size="medium">
                 {#each tutorials as tutorial}
                     <li style:scroll-snap-align="start">
                         <CodeCard {...tutorial} />
diff --git a/src/routes/docs/CodeCard.svelte b/src/routes/docs/CodeCard.svelte
index d7daf45758..afc72abae4 100644
--- a/src/routes/docs/CodeCard.svelte
+++ b/src/routes/docs/CodeCard.svelte
@@ -34,3 +34,6 @@
         </p>
     </article>
 </a>
+
+<style>
+</style>
diff --git a/src/scss/8-sequences/_grid-articles.scss b/src/scss/8-sequences/_grid-articles.scss
index f603345ab5..ca587c2492 100644
--- a/src/scss/8-sequences/_grid-articles.scss
+++ b/src/scss/8-sequences/_grid-articles.scss
@@ -3,19 +3,24 @@
 .#{$p}-grid-articles {
   --p-grid-articles-item-border-color: var(--p-grid-articles-item-border-color-default);
   --p-grid-articles-item-border-color-default: var(--aw-color-smooth);
-  //--p-grid-articles-item-border-color-hover: var(--aw-color-smooth);
+  
 
   --p-grid-articles-item-bg-color: var(--p-grid-articles-item-bg-color-default);
   --p-grid-articles-item-bg-color-default: var(--aw-color-white);
-  //--p-grid-articles-item-bg-color-hover: var(--aw-color-white);
+  
+
+  --p-grid-articles-width: #{pxToRem(280)};
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(pxToRem(280), 1fr));
-  grid-auto-columns:minmax(pxToRem(280), 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(var(--p-grid-articles-width), 1fr));
+  grid-auto-columns:minmax(var(--p-grid-articles-width), 1fr);
+
+  &.is-medium {
+    --p-grid-articles-width: #{pxToRem(320)};
+  }
 
   &.is-big {
-    grid-template-columns: repeat(auto-fill, minmax(pxToRem(360), 1fr));
-    grid-auto-columns:minmax(pxToRem(360), 1fr);
+    --p-grid-articles-width: #{pxToRem(360)};
   }
 
   &-scroll {
@@ -38,7 +43,9 @@
 
     &-image {
       overflow:hidden; border-radius:pxToRem(8);
+      
       > * {
+        display: block;
         transition:var(--transition); 
         width: 100%;
         height: 100%;
@@ -55,13 +62,8 @@
         }
       }
     }
-
-    //&:where(:hover, :focus) {
-    //  --p-grid-articles-item-bg-color: var(--p-grid-articles-item-bg-color-hover);
-    //  --p-grid-articles-item-border-color: var(--p-grid-articles-item-border-color-hover);
-    //}
-
   }
+
   #{$theme-dark} & {
     --p-grid-articles-item-border-color-default: var(--aw-color-white)  / 0.2;
     --p-grid-articles-item-bg-color-default: var(--aw-color-white)  / 0.06;

From a7111d81b97a13d9dbcf100b535e9c3d2549dceb Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 10 Oct 2023 11:20:29 +0100
Subject: [PATCH 3/5] fix cmd K not working in non-Mac devices

---
 src/lib/layouts/Docs.svelte   | 12 ++++++++++--
 src/scss/6-elements/_kbd.scss |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index 50b9f3bb60..02d72f7718 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -33,6 +33,7 @@
 
 <script lang="ts">
     import Search from '$lib/components/Search.svelte';
+    import { isMac } from '@melt-ui/svelte/internal/helpers';
 
     export let variant: DocsLayoutVariant = 'default';
 
@@ -54,9 +55,12 @@
     });
 
     function handleKeypress(event: KeyboardEvent) {
-        if (event.metaKey && event.key.toLowerCase() === 'k') {
+        const cmdPressed = isMac() ? event.metaKey : event.ctrlKey;
+        if (cmdPressed && event.key.toLowerCase() === 'k') {
+            event.preventDefault();
             $layoutState.showSearch = true;
         } else if (event.key.toLowerCase() === 'escape' || event.key.toLowerCase() === 'esc') {
+            event.preventDefault();
             $layoutState.showSearch = false;
         }
     }
@@ -156,7 +160,11 @@
                             <span class="text">Search in docs</span>
 
                             <div class="u-flex u-gap-4 u-margin-inline-start-auto">
-                                <span class="aw-kbd" aria-label="command">⌘</span>
+                                {#if isMac()}
+                                    <span class="aw-kbd" aria-label="command">⌘</span>
+                                {:else}
+                                    <span class="aw-kbd" aria-label="control">Ctrl</span>
+                                {/if}
                                 <span class="aw-kbd">K</span>
                             </div>
                         </button>
diff --git a/src/scss/6-elements/_kbd.scss b/src/scss/6-elements/_kbd.scss
index 58ca799a8f..7b50dd54cd 100644
--- a/src/scss/6-elements/_kbd.scss
+++ b/src/scss/6-elements/_kbd.scss
@@ -9,6 +9,7 @@
 
   display:inline-flex; justify-content:center; align-items:center;
   min-inline-size:pxToRem(24); block-size:pxToRem(24);
+  padding-inline: pxToRem(3.5);
   border-radius:pxToRem(4); flex-shrink:0;
   -webkit-user-select:none; user-select:none;
 

From d0371dbda1ed2623fc6315cac7dcd84a77c53063 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 10 Oct 2023 18:57:41 +0100
Subject: [PATCH 4/5] command center enhancements

---
 package.json                     |   2 +-
 pnpm-lock.yaml                   |  20 +-
 src/lib/components/Search.svelte | 508 +++++++++++++++++--------------
 src/lib/layouts/Docs.svelte      |  13 -
 src/scss/6-elements/_button.scss |  10 +-
 5 files changed, 293 insertions(+), 260 deletions(-)

diff --git a/package.json b/package.json
index f403f6aa60..237b547d27 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     },
     "devDependencies": {
         "@melt-ui/pp": "^0.1.2",
-        "@melt-ui/svelte": "^0.51.0",
+        "@melt-ui/svelte": "^0.54.1",
         "@playwright/test": "^1.37.1",
         "@sveltejs/adapter-node": "^1.3.1",
         "@sveltejs/adapter-static": "^2.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1440c26efc..a091c453d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ dependencies:
     version: 0.1.0-next.9
   '@appwrite.io/repo':
     specifier: github:appwrite/appwrite
-    version: github.com/appwrite/appwrite/514a5c37fd262186386e2523528a3ffc6f9db381
+    version: github.com/appwrite/appwrite/030f9629a69f7db0f3da3e76d1805383bb3a3acd
   '@splinetool/viewer':
     specifier: 0.9.455
     version: 0.9.455
@@ -39,10 +39,10 @@ dependencies:
 devDependencies:
   '@melt-ui/pp':
     specifier: ^0.1.2
-    version: 0.1.2(@melt-ui/svelte@0.51.0)(svelte@4.2.0)
+    version: 0.1.2(@melt-ui/svelte@0.54.1)(svelte@4.2.0)
   '@melt-ui/svelte':
-    specifier: ^0.51.0
-    version: 0.51.0(svelte@4.2.0)
+    specifier: ^0.54.1
+    version: 0.54.1(svelte@4.2.0)
   '@playwright/test':
     specifier: ^1.37.1
     version: 1.38.0
@@ -504,19 +504,19 @@ packages:
       '@types/markdown-it': 12.2.3
     dev: true
 
-  /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.51.0)(svelte@4.2.0):
+  /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.54.1)(svelte@4.2.0):
     resolution: {integrity: sha512-GZeqp7UWLNZUC2dJpREnZrWMR88vy27WO7C3cIBz4KW3/CFD19FjNkd3VbSRfcRryrMkdnEs9nu2VUa8/0u58w==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0
     dependencies:
-      '@melt-ui/svelte': 0.51.0(svelte@4.2.0)
+      '@melt-ui/svelte': 0.54.1(svelte@4.2.0)
       svelte: 4.2.0
     dev: true
 
-  /@melt-ui/svelte@0.51.0(svelte@4.2.0):
-    resolution: {integrity: sha512-RRtwHEEJnueJ0wnezJb6Dod8p0ItjCOSf7bjPivZDcqIWOoSTkXdn2upfzpVnNj3RobsjiQrpKbbdsZgUd92gA==}
+  /@melt-ui/svelte@0.54.1(svelte@4.2.0):
+    resolution: {integrity: sha512-sUAum/TSx0+DZYV5FNRTGRl38nv157PIbE2dy4IwXp6wJH97CWi7DuwaI4rrao9N2UKAUMIT0wmUVLeEULDCZw==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
@@ -5565,8 +5565,8 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
-  github.com/appwrite/appwrite/514a5c37fd262186386e2523528a3ffc6f9db381:
-    resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/514a5c37fd262186386e2523528a3ffc6f9db381}
+  github.com/appwrite/appwrite/030f9629a69f7db0f3da3e76d1805383bb3a3acd:
+    resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/030f9629a69f7db0f3da3e76d1805383bb3a3acd}
     name: '@appwrite.io/repo'
     version: 0.0.0
     dev: false
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index 5cd1a8e2ae..a3d1d03ae5 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -1,236 +1,282 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	import type { Action } from 'svelte/action';
-	import { MeiliSearch, type Hits, type Hit } from 'meilisearch';
-	import { afterNavigate } from '$app/navigation';
-
-	export let open: boolean = true;
-
-	let value: string;
-	let container: HTMLDivElement;
-
-	const client = new MeiliSearch({
-		host: 'https://search.appwrite.org',
-		apiKey: 'd7e83e21c0daf2a471ef4c463c7872e55b91b0cd02e2d20e9c6f6f1c4cd09ed3'
-	});
-	const index = client.index<Props>('website');
-
-	type Props = {
-		url: string;
-		title?: string;
-		uid?: string;
-		meta?: Record<string, string>;
-		page_block?: number;
-		urls_tags?: Array<string>;
-		h1?: string;
-		h2?: string;
-		h3?: string;
-		h4?: string;
-		h5?: string;
-		h6?: string;
-		p?: string;
-		anchor?: string;
-	};
-
-	let results: Hits<Props> = [];
-
-	async function search(value: string) {
-		return index.search(value, {
-			limit: 20
-		});
-	}
-
-	async function handleInput(value: string) {
-		if (!value) {
-			results = [];
-		} else {
-			const response = await search(value);
-			results = response.hits;
-		}
-	}
-
-	function handleExit(event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) {
-		if (event.target === container) {
-			open = false;
-		}
-	}
-
-	function createHref(hit: Hit<Props>): string {
-		const anchor = hit.anchor === '#' ? '' : hit.anchor ?? '';
-		const target = hit.url + anchor;
-
-		return target.toString();
-	}
-
-	const recommended: Hits<Props> = [
-		{
-			uid: 'recommended-references-account',
-			url: '/docs/references/cloud/client-web/databases',
-			h1: 'References',
-			h2: 'Databases'
-		},
-		{
-			uid: 'recommended-references-teans',
-			url: '/docs/references/cloud/client-web/teams',
-			h1: 'References',
-			h2: 'Teams'
-		},
-		{
-			uid: 'recommended-references-databases',
-			url: '/docs/references/cloud/client-web/databases',
-			h1: 'References',
-			h2: 'Databases'
-		},
-		{
-			uid: 'recommended-references-storage',
-			url: '/docs/references/cloud/client-web/storage',
-			h1: 'References',
-			h2: 'Storage'
-		}
-	];
-
-	const arrowKeyFocus: Action = (node) => {
-		const callback = (event: KeyboardEvent) => {
-			switch (event.key) {
-				case 'ArrowDown':
-					{
-						event.preventDefault();
-						const index = Number(node.getAttribute('data-hit'));
-						if (index === null) return;
-						const target = index + 1;
-						const element = document.querySelector(`[data-hit="${target}"]`) as HTMLElement;
-						element?.focus();
-					}
-					break;
-				case 'ArrowUp':
-					{
-						event.preventDefault();
-						const index = Number(node.getAttribute('data-hit'));
-						if (index === null) return;
-						const target = index - 1;
-						const element = document.querySelector(`[data-hit="${target}"]`) as HTMLElement;
-						element?.focus();
-					}
-					break;
-			}
-		};
-
-		node.addEventListener('keydown', callback);
-
-		return {
-			destroy() {
-				node.removeEventListener('keydown', callback);
-			}
-		};
-	};
-
-	afterNavigate(() => {
-		open = false;
-	});
-
-	$: handleInput(value);
+    import { afterNavigate, goto } from '$app/navigation';
+    import { layoutState } from '$lib/layouts/Docs.svelte';
+    import { createCombobox, melt } from '@melt-ui/svelte';
+    import { isMac } from '@melt-ui/svelte/internal/helpers';
+    import { MeiliSearch, type Hit, type Hits } from 'meilisearch';
+    import { tick } from 'svelte';
+
+    export let open = true;
+
+    let value: string;
+    let container: HTMLDivElement;
+
+    const client = new MeiliSearch({
+        host: 'https://search.appwrite.org',
+        apiKey: 'd7e83e21c0daf2a471ef4c463c7872e55b91b0cd02e2d20e9c6f6f1c4cd09ed3'
+    });
+    const index = client.index<Props>('website');
+
+    type Props = {
+        url: string;
+        title?: string;
+        uid?: string;
+        meta?: Record<string, string>;
+        page_block?: number;
+        urls_tags?: Array<string>;
+        h1?: string;
+        h2?: string;
+        h3?: string;
+        h4?: string;
+        h5?: string;
+        h6?: string;
+        p?: string;
+        anchor?: string;
+    };
+
+    let results: Hits<Props> = [];
+
+    async function search(value: string) {
+        return index.search(value, {
+            limit: 20
+        });
+    }
+
+    async function handleInput(value: string) {
+        if (!value) {
+            results = [];
+        } else {
+            const response = await search(value);
+            results = response.hits;
+        }
+    }
+
+    function handleExit(event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+        if (event.target === container) {
+            open = false;
+            value = '';
+        }
+    }
+
+    function createHref(hit: Hit<Props>): string {
+        const anchor = hit.anchor === '#' ? '' : hit.anchor ?? '';
+        const target = hit.url + anchor;
+
+        return target.toString();
+    }
+
+    const recommended: Hits<Props> = [
+        {
+            uid: 'recommended-references-account',
+            url: '/docs/references/cloud/client-web/databases',
+            h1: 'References',
+            h2: 'Databases'
+        },
+        {
+            uid: 'recommended-references-teans',
+            url: '/docs/references/cloud/client-web/teams',
+            h1: 'References',
+            h2: 'Teams'
+        },
+        {
+            uid: 'recommended-references-databases',
+            url: '/docs/references/cloud/client-web/databases',
+            h1: 'References',
+            h2: 'Databases'
+        },
+        {
+            uid: 'recommended-references-storage',
+            url: '/docs/references/cloud/client-web/storage',
+            h1: 'References',
+            h2: 'Storage'
+        }
+    ];
+
+    afterNavigate(() => {
+        open = false;
+    });
+
+    $: handleInput(value);
+
+    let inputEl: HTMLInputElement;
+    $: if (open && inputEl) {
+        inputEl.value = '';
+        inputEl?.focus();
+    }
+
+    const {
+        elements: { input, menu, option },
+        states: { inputValue }
+    } = createCombobox<Props>({
+        forceVisible: true,
+        portal: null,
+        positioning: null,
+        onSelectedChange({ next }) {
+            if (next) {
+                goto(next.value.url);
+                tick().then(() => {
+                    inputValue.set('');
+                });
+                inputValue.set('');
+            }
+            return undefined;
+        }
+    });
+
+    function handleKeypress(event: KeyboardEvent) {
+        const cmdPressed = isMac() ? event.metaKey : event.ctrlKey;
+        if (cmdPressed && event.key.toLowerCase() === 'k') {
+            event.preventDefault();
+            $layoutState.showSearch = true;
+        } else if (event.key.toLowerCase() === 'escape' || event.key.toLowerCase() === 'esc') {
+            event.preventDefault();
+            $layoutState.showSearch = false;
+        }
+    }
 </script>
 
+<svelte:window on:keydown={handleKeypress} />
+
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-{#if open}
-	<div
-		class="u-position-fixed u-padding-0 u-inset-0 u-flex u-main-center u-cross-center"
-		style:z-index="100"
-		style:background="hsl(var(--aw-color-black) / 0.3)"
-		style:backdrop-filter="blur(15px)"
-		style:-webkit-backdrop-filter="blur(15px)"
-		bind:this={container}
-		on:click={handleExit}
-		transition:fade={{ duration: 50 }}
-	>
-		<div
-			class="aw-input-text-search-wrapper aw-u-max-width-680 aw-u-margin-inline-20 u-width-full-line"
-		>
-			<span
-				class="aw-icon-search u-z-index-5"
-				aria-hidden="true"
-				style="inset-block-start:0.9rem"
-			/>
-			<div id="searchbox" />
-
-			<!-- svelte-ignore a11y-autofocus -->
-			<input
-				autofocus
-				class="aw-input-button -u-padding-block-0 u-position-relative u-z-index-1"
-				type="text"
-				id="search"
-				bind:value
-				placeholder="Search in docs"
-				style="border-end-start-radius:0; border-end-end-radius:0;"
-				use:arrowKeyFocus
-				data-hit="-1"
-			/>
-			<div
-				class="aw-card is-normal u-overflow-y-auto"
-				style="--card-padding-mobile:1rem; border-radius:0 0 0.5rem 0.5rem; margin-block-start:-0.0625rem; max-block-size: min(18.75rem, calc(100vh - 5.5rem)); border-block-start-width:0;"
-			>
-				<div class="u-flex-vertical u-gap-24">
-					{#if value}
-						{#if results.length > 0}
-							<section>
-								<h6 class="aw-eyebrow">{results.length} results found</h6>
-								<ul class="u-flex-vertical u-gap-4 u-margin-block-start-8">
-									{#each results as hit, i (hit.uid)}
-										<li>
-											<a
-												data-hit={i}
-												href={createHref(hit)}
-												use:arrowKeyFocus
-												class="aw-button aw-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent aw-u-padding-block-8 aw-padding-inline-12 aw-u-cross-start u-max-width-100-percent"
-											>
-												<div class="aw-u-trim-1">
-													<span class="aw-u-color-text-secondary">{hit.h1}</span>
-													{#if hit.h2}
-														<span class="aw-u-color-text-secondary"> / </span>
-														<span class="aw-u-color-text-primary">{hit.h2}</span>
-													{/if}
-												</div>
-												{#if hit.p}
-													<div class="u-inline aw-u-color-text-secondary aw-u-trim-1">
-														{hit.p}
-													</div>
-												{/if}
-											</a>
-										</li>
-									{/each}
-								</ul>
-							</section>
-						{:else}
-							<p class="aw-caption-400">No results found for <span class="u-bold">{value}</span></p>
-						{/if}
-					{/if}
-					<section>
-						<h6 class="aw-eyebrow">Recommended</h6>
-						<ul class="u-flex-vertical u-gap-4 u-margin-block-start-8">
-							{#each recommended as hit, i (hit.uid)}
-								{@const index = i + (results.length ? results.length : 0)}
-								<li>
-									<a
-										data-hit={index}
-										href={createHref(hit)}
-										use:arrowKeyFocus
-										class="aw-button aw-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent aw-u-padding-block-4 aw-u-cross-start"
-									>
-										<div class="aw-u-trim-1">
-											<span class="aw-u-color-text-secondary">{hit.h1}</span>
-											{#if hit.h2}
-												<span class="aw-u-color-text-secondary"> / </span>
-												<span class="aw-u-color-text-primary">{hit.h2}</span>
-											{/if}
-										</div>
-									</a>
-								</li>
-							{/each}
-						</ul>
-					</section>
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}
+<div
+    class="wrapper u-position-fixed u-padding-0 u-inset-0 u-flex u-main-center u-cross-center"
+    data-visible={open ? '' : undefined}
+    style:z-index="100"
+    style:background="hsl(var(--aw-color-black) / 0.3)"
+    style:backdrop-filter="blur(15px)"
+    style:-webkit-backdrop-filter="blur(15px)"
+    bind:this={container}
+    on:click={handleExit}
+>
+    <div
+        class="aw-input-text-search-wrapper aw-u-max-width-680 aw-u-margin-inline-20 u-width-full-line"
+    >
+        <span
+            class="aw-icon-search u-z-index-5"
+            aria-hidden="true"
+            style="inset-block-start:0.9rem"
+        />
+        <div id="searchbox" />
+
+        <input
+            class="aw-input-button -u-padding-block-0 u-position-relative u-z-index-1"
+            type="text"
+            id="search"
+            bind:value
+            placeholder="Search in docs"
+            style="border-end-start-radius:0; border-end-end-radius:0;"
+            use:melt={$input}
+            bind:this={inputEl}
+            data-hit="-1"
+            on:keydown={(e) => {
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                }
+            }}
+        />
+        <div
+            class="aw-card is-normal u-flex-vertical u-gap-24"
+            use:melt={$menu}
+            style="--card-padding-mobile:1rem; border-radius:0 0 0.5rem 0.5rem;"
+        >
+            {#if value}
+                <section>
+                    {#if results.length > 0}
+                        <h6 class="aw-eyebrow">{results.length} results found</h6>
+                        <ul class="u-flex-vertical u-gap-4 u-margin-block-start-8">
+                            {#each results as hit, i (hit.uid)}
+                                <li>
+                                    <a
+                                        data-hit={i}
+                                        href={createHref(hit)}
+                                        class="aw-button aw-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent
+                                            aw-u-padding-block-8 aw-padding-inline-12 aw-u-cross-start u-max-width-100-percent"
+                                        use:melt={$option({
+                                            value: hit,
+                                            label: hit.title ?? i.toString()
+                                        })}
+                                    >
+                                        <div class="aw-u-trim-1">
+                                            <span class="aw-u-color-text-secondary">{hit.h1}</span>
+                                            {#if hit.h2}
+                                                <span class="aw-u-color-text-secondary"> / </span>
+                                                <span class="aw-u-color-text-primary">{hit.h2}</span
+                                                >
+                                            {/if}
+                                        </div>
+                                        {#if hit.p}
+                                            <div
+                                                class="u-inline aw-u-color-text-secondary aw-u-trim-1"
+                                            >
+                                                {hit.p}
+                                            </div>
+                                        {/if}
+                                    </a>
+                                </li>
+                            {/each}
+                        </ul>
+                    {:else}
+                        <p class="aw-caption-400">
+                            No results found for <span class="u-bold">{value}</span>
+                        </p>
+                    {/if}
+                </section>
+            {/if}
+            <section>
+                <h6 class="aw-eyebrow">Recommended</h6>
+                <ul class="u-flex-vertical u-gap-4 u-margin-block-start-8">
+                    {#each recommended as hit, i (hit.uid)}
+                        {@const index = i + (results.length ? results.length : 0)}
+                        <li>
+                            <a
+                                data-hit={index}
+                                href={createHref(hit)}
+                                use:melt={$option({
+                                    value: hit,
+                                    label: hit.title ?? i.toString()
+                                })}
+                                class="aw-button aw-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent aw-u-padding-block-4 aw-u-cross-start"
+                            >
+                                <div class="aw-u-trim-1">
+                                    <span class="aw-u-color-text-secondary">{hit.h1}</span>
+                                    {#if hit.h2}
+                                        <span class="aw-u-color-text-secondary"> / </span>
+                                        <span class="aw-u-color-text-primary">{hit.h2}</span>
+                                    {/if}
+                                </div>
+                            </a>
+                        </li>
+                    {/each}
+                </ul>
+            </section>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .wrapper {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 250ms ease;
+    }
+
+    .wrapper[data-visible] {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    a.aw-button {
+        scroll-margin-block: 1rem;
+    }
+
+    .aw-card {
+        margin-block-start: -0.0625rem;
+        max-block-size: min(18.75rem, calc(100vh - 5.5rem));
+        border-block-start-width: 0;
+
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+    }
+</style>
diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index 02d72f7718..85ff638531 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -53,21 +53,8 @@
             showSidenav: false
         }));
     });
-
-    function handleKeypress(event: KeyboardEvent) {
-        const cmdPressed = isMac() ? event.metaKey : event.ctrlKey;
-        if (cmdPressed && event.key.toLowerCase() === 'k') {
-            event.preventDefault();
-            $layoutState.showSearch = true;
-        } else if (event.key.toLowerCase() === 'escape' || event.key.toLowerCase() === 'esc') {
-            event.preventDefault();
-            $layoutState.showSearch = false;
-        }
-    }
 </script>
 
-<svelte:window on:keydown={handleKeypress} />
-
 <div class="u-position-relative">
     <div
         class={variantClass}
diff --git a/src/scss/6-elements/_button.scss b/src/scss/6-elements/_button.scss
index 34dc70ad45..7dac6de65d 100644
--- a/src/scss/6-elements/_button.scss
+++ b/src/scss/6-elements/_button.scss
@@ -163,31 +163,31 @@
       }
     }
 
-    &:where(:hover, :active):where(:not(#{$disabled})) {
+    &:where(:hover, :active, [data-highlighted]):where(:not(#{$disabled})) {
       box-shadow:none; color:hsl(var(--aw-color-greyscale-900));
 
       -webkit-backdrop-filter: blur(pxToRem(8));
       backdrop-filter: blur(pxToRem(8));
       #{$theme-dark} & {color:hsl(var(--color-neutral-0));}
     }
-    &:where(:hover):where(:not(#{$disabled})) { background:linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.51) 54.74%, rgba(255, 255, 255, 0.38) 100%); }
+    &:where(:hover, [data-highlighted]):where(:not(#{$disabled})) { background:linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.51) 54.74%, rgba(255, 255, 255, 0.38) 100%); }
     &:where(:active):where(:not(#{$disabled})) { background:linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.80) 54.74%, rgba(255, 255, 255, 0.60) 100%); }
     #{$theme-dark} & {
       color:hsl(var(--color-neutral-0));
-      &:where(:hover):where(:not(#{$disabled})) { background:linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.10) 54.74%, rgba(255, 255, 255, 0.06) 100%); }
+      &:where(:hover, [data-highlighted]):where(:not(#{$disabled})) { background:linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.10) 54.74%, rgba(255, 255, 255, 0.06) 100%); }
       &:where(:active):where(:not(#{$disabled})) { background:linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.15) 54.74%, rgba(255, 255, 255, 0.09) 100%); }
 
       .#{$p}-inline-tag { background:rgba(255, 255, 255, 0.12); }
     }
     #{$theme-light} & {
       color:hsl(var(--aw-color-greyscale-700));
-      &:where(:hover, :active):where(:not(#{$disabled})) {
+      &:where(:hover, :active, [data-highlighted]):where(:not(#{$disabled})) {
         box-shadow:none; color:hsl(var(--aw-color-greyscale-900));
         -webkit-backdrop-filter:blur(pxToRem(8));
         backdrop-filter:blur(pxToRem(8));
        // #{$theme-dark} & { color:hsl(var(--color-neutral-0))!important; }
       }
-      &:where(:hover):where(:not(#{$disabled})) { background:linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.51) 54.74%, rgba(255, 255, 255, 0.38) 100%); }
+      &:where(:hover, [data-highlighted]):where(:not(#{$disabled})) { background:linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.51) 54.74%, rgba(255, 255, 255, 0.38) 100%); }
       &:where(:active):where(:not(#{$disabled})) { background:linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.80) 54.74%, rgba(255, 255, 255, 0.60) 100%); }
 
       .#{$p}-inline-tag {

From 0445cd393355037741c28c0dce77e9774406840d Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 10 Oct 2023 19:07:05 +0100
Subject: [PATCH 5/5] fix headlines

---
 src/markdoc/nodes/Heading.svelte              | 114 +++++++++---------
 src/markdoc/nodes/Paragraph.svelte            |  19 ++-
 .../+page.markdoc                             |  10 +-
 src/scss/7-components/_article.scss           |   2 +-
 4 files changed, 79 insertions(+), 66 deletions(-)

diff --git a/src/markdoc/nodes/Heading.svelte b/src/markdoc/nodes/Heading.svelte
index 355e7bf510..a7f9e39858 100644
--- a/src/markdoc/nodes/Heading.svelte
+++ b/src/markdoc/nodes/Heading.svelte
@@ -1,68 +1,72 @@
 <script lang="ts">
-	import { getContext, hasContext, onMount, setContext } from 'svelte';
-	import type { LayoutContext } from '../layouts/Article.svelte';
+    import { getContext, hasContext, onMount } from 'svelte';
+    import type { LayoutContext } from '../layouts/Article.svelte';
 
-	export let level: number;
-	export let id: string | undefined = undefined;
-	export let step: number | undefined = undefined;
-	export let inReferences = false;
+    export let level: number;
+    export let id: string | undefined = undefined;
+    export let step: number | undefined = undefined;
+    export let inReferences = false;
 
-	const tag = `h${level + 1}`;
-	const ctx = hasContext('headings') ? getContext<LayoutContext>('headings') : undefined;
-	const classList: Record<typeof level, string> = {
-		1: 'aw-label',
-		2: 'aw-description',
-		3: 'aw-main-body-500',
-		4: 'aw-sub-body-500'
-	};
+    const tag = `h${level + 1}`;
+    const ctx = hasContext('headings') ? getContext<LayoutContext>('headings') : undefined;
+    const classList: Record<typeof level, string> = {
+        1: 'aw-label',
+        2: 'aw-description',
+        3: 'aw-main-body-500',
+        4: 'aw-sub-body-500'
+    };
 
-	let element: HTMLElement | undefined;
+    let element: HTMLElement | undefined;
 
-	onMount(() => {
-		if (!element || !$ctx || !id) {
-			return;
-		}
+    onMount(() => {
+        if (!element || !$ctx || !id) {
+            return;
+        }
 
-		$ctx = {
-			...$ctx,
-			[id]: {
-				step,
-				title: element?.textContent ?? '',
-				visible: false
-			}
-		};
+        $ctx = {
+            ...$ctx,
+            [id]: {
+                step,
+                title: element?.textContent ?? '',
+                visible: false
+            }
+        };
 
-		const callback = (entries: IntersectionObserverEntry[]) => {
-			entries.forEach((entry) => {
-				if (id && $ctx && id in $ctx) {
-					$ctx[id].visible = entry.isIntersecting;
-				}
-			});
-		};
-		const observer = new IntersectionObserver(callback, {
-			root: null,
-			threshold: 1
-		});
+        const callback = (entries: IntersectionObserverEntry[]) => {
+            entries.forEach((entry) => {
+                if (id && $ctx && id in $ctx) {
+                    $ctx[id].visible = entry.isIntersecting;
+                }
+            });
+        };
+        const observer = new IntersectionObserver(callback, {
+            root: null,
+            threshold: 1
+        });
 
-		observer.observe(element);
-	});
+        observer.observe(element);
+    });
 </script>
 
 {#if id}
-	<a href={`#${id}`} class="aw-link">
-		<svelte:element
-			this={tag}
-			{id}
-			bind:this={element}
-			class:aw-snap-location={id && !inReferences}
-			class:aw-snap-location-references={id && inReferences}
-			class="{classList[level]} aw-u-color-text-primary"
-		>
-			<slot />
-		</svelte:element>
-	</a>
+    <a href={`#${id}`} class="aw-link">
+        <svelte:element
+            this={tag}
+            {id}
+            bind:this={element}
+            class:aw-snap-location={id && !inReferences}
+            class:aw-snap-location-references={id && inReferences}
+            class="{classList[level]} aw-u-color-text-primary"
+        >
+            <slot />
+        </svelte:element>
+    </a>
 {:else}
-	<svelte:element this={tag} bind:this={element} class="{classList[level]} aw-u-color-text-primary">
-		<slot />
-	</svelte:element>
+    <svelte:element
+        this={tag}
+        bind:this={element}
+        class="{classList[level]} aw-u-color-text-primary"
+    >
+        <slot />
+    </svelte:element>
 {/if}
diff --git a/src/markdoc/nodes/Paragraph.svelte b/src/markdoc/nodes/Paragraph.svelte
index 0baece6eab..d74e5adc5c 100644
--- a/src/markdoc/nodes/Paragraph.svelte
+++ b/src/markdoc/nodes/Paragraph.svelte
@@ -1,11 +1,20 @@
-<script>
-	import { getContext, hasContext } from 'svelte';
+<script lang="ts">
+    import { getContext, hasContext } from 'svelte';
 
-	const noParagraph = hasContext('no-paragraph') ? getContext('no-paragraph') : false;
+    const noParagraph = hasContext('no-paragraph') ? getContext('no-paragraph') : false;
+
+    let className = '';
+    export { className as class };
 </script>
 
 {#if noParagraph}
-	<slot />
+    <slot />
 {:else}
-	<p class={`aw-paragraph-md${$$props.class ? ` ${$$props.class}` : ''}`}><slot /></p>
+    <p class="aw-paragraph-lg {className}"><slot /></p>
 {/if}
+
+<style lang="scss">
+    p {
+        margin-block-end: 2rem;
+    }
+</style>
diff --git a/src/routes/blog/post/the-journey-and-meaning-behind-our-new-logo/+page.markdoc b/src/routes/blog/post/the-journey-and-meaning-behind-our-new-logo/+page.markdoc
index f8a4b46798..e221e4f445 100644
--- a/src/routes/blog/post/the-journey-and-meaning-behind-our-new-logo/+page.markdoc
+++ b/src/routes/blog/post/the-journey-and-meaning-behind-our-new-logo/+page.markdoc
@@ -12,7 +12,7 @@ category:  design
 
 In the fast-evolving world of technology and software development, change is not just inevitable; it's essential for growth and progress. One of Appwrite's recent transformations has been the evolution of our logo. Today, we'll take you on the creative journey that led to our new logo's design and meaning - a journey with our community at its core.
 
-### How it started
+# How it started
 
 Our first logo was initially designed by our CEO, Eldad. Its design aimed to align with our first slogan: 'Let's make coding fun again' - featuring rounded elements reminiscent of a gaming controller and the HTML symbol, which stood for our product's original focus.
 
@@ -30,7 +30,7 @@ We realized it was time for a change, time for a logo that not only embodied the
 
 We transitioned from a playful approach to something a bit more serious, making Appwrite a platform that companies could rely on as they scaled.
 
-### Our creative journey
+# Our creative journey
 
 Crafting a new logo was no small task. It required meticulous planning, creativity, and a deep understanding of what Appwrite stood for.
 
@@ -40,7 +40,7 @@ While we initially experimented with obvious hints related to the coding world (
 
 ![Appwrite's new logo drafts](/images/blog/the-journey-and-meaning-behind-our-new-logo/drafts.png)
 
-### Breakthrough moment
+# Breakthrough moment
 
 After many reviews, we finally pinpointed the elements we actually aimed to capture. The aspects that make Appwrite unique: our global community and the essence of coding.
 
@@ -51,7 +51,7 @@ With the design vectorized, it was time for final review rounds and tweaks. We f
 ![Appwrite's new logo transition from draft to vector](/images/blog/the-journey-and-meaning-behind-our-new-logo/break.png)
 
 
-### Our new logo
+# Our new logo
 
 The result of this creative journey is a logo that reflects the essence of Appwrite. It's not just a symbol; it's a representation of our commitment to building a global community united by a love for code.
 
@@ -68,7 +68,7 @@ Finally, its overall look is reminiscent of the lowercase letter 'a,' standing f
 
 Our new logo inspired the rest of our visual identity. Our [website](https://appwrite.io/), promotional materials, and even [documentation](https://appwrite.io/docs) are now harmonized with this new identity, giving Appwrite a fresh, meaningful, and cohesive look.
 
-### The road ahead
+# The road ahead
 
 The evolution of our logo is not just a visual change; it's a reflection of our growth, our commitment to our community, and our dedication to empowering developers worldwide.
 
diff --git a/src/scss/7-components/_article.scss b/src/scss/7-components/_article.scss
index 3c8d112980..20c158c50b 100644
--- a/src/scss/7-components/_article.scss
+++ b/src/scss/7-components/_article.scss
@@ -18,7 +18,7 @@
     &-spacing-logic .#{$p}{
       &-sub-body-400  { margin-block:pxToRem(16); }
       &-sub-body-500  { margin-block-end:pxToRem(4); }
-      &-main-body-500 { margin-block-start:pxToRem(4); margin-block-end:pxToRem(4); }
+      &-main-body-500 { margin-block-end:pxToRem(8); }
       &-description   { margin-block-start:pxToRem(4); margin-block-end:pxToRem(4); }
       &-label         { margin-block-end:pxToRem(16); }
       &-paragraph-md  { margin-block-end:pxToRem(32); }