From fe5443e0f5a94e49294116c7cc26221af020aa01 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 28 Sep 2023 12:40:24 +0200
Subject: [PATCH 1/7] feat: create feedback component

---
 src/lib/components/Feedback.svelte  | 154 ++++++++++++++++++++++++++++
 src/lib/components/index.ts         |   1 +
 src/lib/layouts/DocsArticle.svelte  |  68 +++---------
 src/lib/layouts/DocsTutorial.svelte |  91 +++++-----------
 4 files changed, 198 insertions(+), 116 deletions(-)
 create mode 100644 src/lib/components/Feedback.svelte

diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
new file mode 100644
index 0000000000..3c432cd49b
--- /dev/null
+++ b/src/lib/components/Feedback.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+	let showFeedback = false;
+	let feedbackType = '';
+	let email = '';
+	let comment = '';
+	let error: string | undefined;
+	let submitted = false;
+	let submitting = false;
+
+	async function handleSubmit() {
+		submitting = true;
+		error = undefined;
+		const response = await fetch('https://stage.growth.appwrite.io/v1/feedback/docs', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				email,
+				comment,
+				type: feedbackType
+			})
+		});
+		submitting = false;
+		if (response.status >= 400) {
+			error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
+			return;
+		}
+		comment = email = '';
+		submitted = true;
+	}
+
+	function reset() {
+		comment = email = '';
+		submitted = false;
+		error = undefined;
+	}
+
+	$: if (!showFeedback) {
+		reset();
+	}
+</script>
+
+<section class="aw-content-footer">
+	<header class="aw-content-footer-header">
+		<div class="aw-content-footer-header-start">
+			<h5 class="aw-main-body-600 aw-u-color-text-primary">Was this page helpful?</h5>
+			<div class="u-flex u-gap-8">
+				<button
+					class="aw-radio-button"
+					aria-label="helpful"
+					on:click={() => {
+						showFeedback = feedbackType === 'positive' ? false : true;
+						feedbackType = 'positive';
+					}}
+				>
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M0.000488281 8.5C0.000488281 7.67157 0.672061 7 1.50049 7C2.32892 7 3.00049 7.67157 3.00049 8.5V14.5C3.00049 15.3284 2.32892 16 1.50049 16C0.672061 16 0.000488281 15.3284 0.000488281 14.5V8.5Z"
+							fill="#EDEDF0"
+						/>
+						<path
+							d="M4.00049 8.33333V13.7639C4.00049 14.5215 4.42849 15.214 5.10606 15.5528L5.15591 15.5777C5.71133 15.8554 6.32378 16 6.94476 16H12.3609C13.3142 16 14.1351 15.3271 14.322 14.3922L15.522 8.39223C15.7696 7.15465 14.823 6 13.5609 6H10.0005V2C10.0005 0.895431 9.10506 0 8.00049 0C7.4482 0 7.00049 0.447715 7.00049 1V1.66667C7.00049 2.53215 6.71978 3.37428 6.20049 4.06667L4.80049 5.93333C4.2812 6.62572 4.00049 7.46785 4.00049 8.33333Z"
+							fill="#EDEDF0"
+						/>
+					</svg>
+				</button>
+				<button
+					class="aw-radio-button"
+					aria-label="unhelpful"
+					on:click={() => {
+						showFeedback = feedbackType === 'negative' ? false : true;
+						feedbackType = 'negative';
+					}}
+				>
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M16 7.5C16 8.32843 15.3285 9 14.5 9C13.6716 9 13 8.32843 13 7.5V1.5C13 0.671574 13.6716 8.77022e-07 14.5 9.49446e-07C15.3285 1.02187e-06 16 0.671574 16 1.5V7.5Z"
+							fill="#EDEDF0"
+						/>
+						<path
+							d="M12 7.66667V2.23607C12 1.47852 11.572 0.785998 10.8945 0.447215L10.8446 0.422291C10.2892 0.144581 9.67675 5.2778e-07 9.05577 4.73492e-07L3.63964 0C2.68628 -8.33455e-08 1.86545 0.672919 1.67848 1.60777L0.478483 7.60777C0.230966 8.84535 1.17755 10 2.43964 10H6.00004V14C6.00004 15.1046 6.89547 16 8.00004 16C8.55232 16 9.00004 15.5523 9.00004 15V14.3333C9.00004 13.4679 9.28075 12.6257 9.80004 11.9333L11.2 10.0667C11.7193 9.37428 12 8.53215 12 7.66667Z"
+							fill="#EDEDF0"
+						/>
+					</svg>
+				</button>
+			</div>
+			<slot />
+		</div>
+	</header>
+	{#if showFeedback}
+		<form
+			on:submit|preventDefault={handleSubmit}
+			class="aw-card is-normal"
+			style="--card-padding:1rem"
+		>
+			<div class="u-flex-vertical u-gap-8">
+				<label for="message">
+					<span class="aw-u-color-text-primary">
+						What did you {feedbackType === 'negative' ? 'dislike' : 'like'}? (optional)
+					</span>
+				</label>
+				<textarea
+					class="aw-input-text"
+					id="message"
+					placeholder="Write your message"
+					bind:value={comment}
+				/>
+				<label for="message" class="u-margin-block-start-8">
+					<span class="aw-u-color-text-primary">Email</span>
+				</label>
+				<input
+					class="aw-input-text"
+					placeholder="Enter your email"
+					type="email"
+					name="email"
+					required
+					bind:value={email}
+				/>
+			</div>
+			{#if submitted}
+				<p class="aw-u-color-text-primary u-margin-block-start-16">
+					Your message has been sent successfully. We appreciate your feedback.
+				</p>
+			{/if}
+			{#if error}
+				<p class="aw-u-color-text-primary u-margin-block-start-16">
+					There was an error submitting your feedback. Please try again later.
+				</p>
+			{/if}
+
+			<div class="u-flex u-main-end u-margin-block-start-16 u-gap-8">
+				<button class="aw-button is-text" on:click={() => (showFeedback = false)}>
+					<span>Cancel</span>
+				</button>
+				<button type="submit" class="aw-button" disabled={submitting || !email}>
+					<span>Submit</span>
+				</button>
+			</div>
+		</form>
+	{/if}
+</section>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index eb75c9f9a4..5159056fd8 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -9,3 +9,4 @@ export { default as Spline } from './Spline.svelte';
 export { default as Article } from './Article.svelte';
 export { default as Carousel } from './Carousel.svelte';
 export { default as FloatingHeads } from './FloatingHeads.svelte';
+export { default as Feedback } from './Feedback.svelte';
diff --git a/src/lib/layouts/DocsArticle.svelte b/src/lib/layouts/DocsArticle.svelte
index b5509cff2d..3beeea5c4b 100644
--- a/src/lib/layouts/DocsArticle.svelte
+++ b/src/lib/layouts/DocsArticle.svelte
@@ -13,6 +13,8 @@
 </script>
 
 <script lang="ts">
+	import { Feedback } from '$lib/components';
+
 	export let title: string;
 	export let toc: Array<TocItem>;
 	export let back: string | undefined = undefined;
@@ -58,59 +60,19 @@
 		</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 September 27, 2023</li>
-							<li>
-								<a href="https://github.com/appwrite/website" target="_blank" class="aw-link">
-									<span class="icon-pencil-alt u-contents" aria-hidden="true" />
-									<span>Update on GitHub</span>
-								</a>
-							</li>
-						</ul>
-					</div>
-				</header>
-				<!-- <div class="aw-card is-normal" 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>
+			<Feedback>
+				<div class="aw-content-footer-header-end">
+					<ul class="aw-metadata aw-caption-400">
+						<li>Last updated on September 27, 2023</li>
+						<li>
+							<a href="https://github.com/appwrite/website" target="_blank" class="aw-link">
+								<span class="icon-pencil-alt u-contents" aria-hidden="true" />
+								<span>Update on GitHub</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+			</Feedback>
 		</div>
 		<aside class="aw-references-menu aw-u-padding-inline-start-24">
 			<div class="aw-references-menu-content">
diff --git a/src/lib/layouts/DocsTutorial.svelte b/src/lib/layouts/DocsTutorial.svelte
index d5b923f66b..c0a32544c4 100644
--- a/src/lib/layouts/DocsTutorial.svelte
+++ b/src/lib/layouts/DocsTutorial.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Feedback } from '$lib/components';
 	import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte';
 	import type { TocItem } from './DocsArticle.svelte';
 
@@ -30,18 +31,18 @@
 				</ul>
 				<div class="u-position-relative u-flex u-cross-center">
 					{#if back}
-					<a
-						href={back}
-						class="
+						<a
+							href={back}
+							class="
 						aw-button is-text is-only-icon aw-u-cross-center aw-u-size-40
 						u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
-						aria-label="previous page"
-					>
-						<span
-							class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
-							aria-hidden="true"
-						/>
-					</a>
+							aria-label="previous page"
+						>
+							<span
+								class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
+								aria-hidden="true"
+							/>
+						</a>
 					{/if}
 					<h1 class="aw-title">{title}</h1>
 				</div>
@@ -73,59 +74,23 @@
 				{/if}
 			</div>
 
-			<section class="aw-content-footer">
-				<header class="aw-content-footer-header u-cross-center">
-					<div class="aw-content-footer-header-start u-cross-center">
-					<!-- 
-						<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
-						<div class="u-flex u-gap-8">
-							<input
-								class="aw-radio-button is-like"
-								type="radio"
-								aria-label="Helpful"
-								name="happy"
-							/>
-							<input
-								class="aw-radio-button is-dislike"
-								type="radio"
-								aria-label="UnHelpful"
-								name="happy"
-							/>
-						</div>
-					-->
-					</div>
-					<div class="aw-content-footer-header-end">
-						<ul class="aw-metadata aw-caption-400">
-							<li>Last updated on September 27, 2023</li>
-							<li>
-								<a href="https://github.com/appwrite/website" target="_blank" class="aw-link u-flex u-gap-4 u-cross-baseline">
-									<span class="icon-pencil-alt u-contents" aria-hidden="true" />
-									<span>Update on GitHub</span>
-								</a>
-							</li>
-						</ul>
-					</div>
-				</header>
-				<!-- <div class="aw-card is-normal" style="--card-padding:1rem">
-					<label for="message">
-						<span class="aw-caption-400 aw-u-color-text-primary">What did you like?</span>
-						<span class="aw-caption-400">(optional)</span>
-					</label>
-					<textarea
-						class="aw-input-text u-margin-block-start-8"
-						id="message"
-						placeholder="Write your message"
-					/>
-					<div class="u-flex u-gap-8 u-main-end u-margin-block-start-16">
-						<button class="aw-button is-text">
-							<span class="">Cancel</span>
-						</button>
-						<button class="aw-button">
-							<span class="">Submit</span>
-						</button>
-					</div>
-				</div> -->
-			</section>
+			<Feedback>
+				<div class="aw-content-footer-header-end">
+					<ul class="aw-metadata aw-caption-400">
+						<li>Last updated on September 27, 2023</li>
+						<li>
+							<a
+								href="https://github.com/appwrite/website"
+								target="_blank"
+								class="aw-link u-flex u-gap-4 u-cross-baseline"
+							>
+								<span class="icon-pencil-alt u-contents" aria-hidden="true" />
+								<span>Update on GitHub</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+			</Feedback>
 		</div>
 		<aside class="aw-references-menu aw-u-padding-inline-start-24">
 			<div class="aw-references-menu-content">

From 944ef63a029d94be8c39a209f57e5d4d7b3ca601 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 28 Sep 2023 12:41:32 +0200
Subject: [PATCH 2/7] feat: add route

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

diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index 3c432cd49b..291c1f4584 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { page } from '$app/stores';
+
 	let showFeedback = false;
 	let feedbackType = '';
 	let email = '';
@@ -18,7 +20,8 @@
 			body: JSON.stringify({
 				email,
 				comment,
-				type: feedbackType
+				type: feedbackType,
+				route: $page.route.id
 			})
 		});
 		submitting = false;

From be87f4c62809e71aa17cc2dd2297c42ad754c8e8 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 28 Sep 2023 12:45:11 +0200
Subject: [PATCH 3/7] chore: order fields

---
 src/lib/components/Feedback.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index 291c1f4584..f39adb31cc 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -19,9 +19,9 @@
 			},
 			body: JSON.stringify({
 				email,
-				comment,
 				type: feedbackType,
-				route: $page.route.id
+				route: $page.route.id,
+				comment
 			})
 		});
 		submitting = false;

From 76d541a255c153d130f70f68ebc909f49516f100 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 28 Sep 2023 12:46:29 +0200
Subject: [PATCH 4/7] fix: endpoint

---
 src/lib/components/Feedback.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index f39adb31cc..eb6e8037af 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -12,7 +12,7 @@
 	async function handleSubmit() {
 		submitting = true;
 		error = undefined;
-		const response = await fetch('https://stage.growth.appwrite.io/v1/feedback/docs', {
+		const response = await fetch('https://growth.appwrite.io/v1/feedback/docs', {
 			method: 'POST',
 			headers: {
 				'Content-Type': 'application/json'

From 8b214766389b9a14538529c1ef4cd99991a80296 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 28 Sep 2023 13:53:16 +0200
Subject: [PATCH 5/7] fix: feedback component

---
 src/lib/components/Feedback.svelte          | 127 ++++++++++++--------
 src/lib/layouts/DocsArticle.svelte          |  15 +--
 src/lib/layouts/DocsTutorial.svelte         |  19 +--
 src/markdoc/layouts/Article.svelte          |   3 +-
 src/markdoc/layouts/Tutorial.svelte         |   3 +-
 src/routes/docs/products/auth/+page.markdoc |   5 +-
 6 files changed, 85 insertions(+), 87 deletions(-)

diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index eb6e8037af..c0adf0389c 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 
+	export let date: string;
 	let showFeedback = false;
 	let feedbackType = '';
 	let email = '';
@@ -45,62 +46,82 @@
 </script>
 
 <section class="aw-content-footer">
-	<header class="aw-content-footer-header">
-		<div class="aw-content-footer-header-start">
-			<h5 class="aw-main-body-600 aw-u-color-text-primary">Was this page helpful?</h5>
-			<div class="u-flex u-gap-8">
-				<button
-					class="aw-radio-button"
-					aria-label="helpful"
-					on:click={() => {
-						showFeedback = feedbackType === 'positive' ? false : true;
-						feedbackType = 'positive';
-					}}
-				>
-					<svg
-						width="16"
-						height="16"
-						viewBox="0 0 16 16"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
+	<header class="aw-content-footer-header u-width-full-line">
+		<div
+			class="aw-content-footer-header-start u-flex u-main-space-between u-cross-center u-width-full-line"
+		>
+			<div class="u-flex u-gap-16">
+				<h5 class="aw-main-body-600 aw-u-color-text-primary">Was this page helpful?</h5>
+				<div class="u-flex u-gap-8">
+					<button
+						class="aw-radio-button"
+						aria-label="helpful"
+						on:click={() => {
+							showFeedback = feedbackType === 'positive' ? false : true;
+							feedbackType = 'positive';
+						}}
 					>
-						<path
-							d="M0.000488281 8.5C0.000488281 7.67157 0.672061 7 1.50049 7C2.32892 7 3.00049 7.67157 3.00049 8.5V14.5C3.00049 15.3284 2.32892 16 1.50049 16C0.672061 16 0.000488281 15.3284 0.000488281 14.5V8.5Z"
-							fill="#EDEDF0"
-						/>
-						<path
-							d="M4.00049 8.33333V13.7639C4.00049 14.5215 4.42849 15.214 5.10606 15.5528L5.15591 15.5777C5.71133 15.8554 6.32378 16 6.94476 16H12.3609C13.3142 16 14.1351 15.3271 14.322 14.3922L15.522 8.39223C15.7696 7.15465 14.823 6 13.5609 6H10.0005V2C10.0005 0.895431 9.10506 0 8.00049 0C7.4482 0 7.00049 0.447715 7.00049 1V1.66667C7.00049 2.53215 6.71978 3.37428 6.20049 4.06667L4.80049 5.93333C4.2812 6.62572 4.00049 7.46785 4.00049 8.33333Z"
-							fill="#EDEDF0"
-						/>
-					</svg>
-				</button>
-				<button
-					class="aw-radio-button"
-					aria-label="unhelpful"
-					on:click={() => {
-						showFeedback = feedbackType === 'negative' ? false : true;
-						feedbackType = 'negative';
-					}}
-				>
-					<svg
-						width="16"
-						height="16"
-						viewBox="0 0 16 16"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
+						<svg
+							width="16"
+							height="16"
+							viewBox="0 0 16 16"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M0.000488281 8.5C0.000488281 7.67157 0.672061 7 1.50049 7C2.32892 7 3.00049 7.67157 3.00049 8.5V14.5C3.00049 15.3284 2.32892 16 1.50049 16C0.672061 16 0.000488281 15.3284 0.000488281 14.5V8.5Z"
+								fill="#EDEDF0"
+							/>
+							<path
+								d="M4.00049 8.33333V13.7639C4.00049 14.5215 4.42849 15.214 5.10606 15.5528L5.15591 15.5777C5.71133 15.8554 6.32378 16 6.94476 16H12.3609C13.3142 16 14.1351 15.3271 14.322 14.3922L15.522 8.39223C15.7696 7.15465 14.823 6 13.5609 6H10.0005V2C10.0005 0.895431 9.10506 0 8.00049 0C7.4482 0 7.00049 0.447715 7.00049 1V1.66667C7.00049 2.53215 6.71978 3.37428 6.20049 4.06667L4.80049 5.93333C4.2812 6.62572 4.00049 7.46785 4.00049 8.33333Z"
+								fill="#EDEDF0"
+							/>
+						</svg>
+					</button>
+					<button
+						class="aw-radio-button"
+						aria-label="unhelpful"
+						on:click={() => {
+							showFeedback = feedbackType === 'negative' ? false : true;
+							feedbackType = 'negative';
+						}}
 					>
-						<path
-							d="M16 7.5C16 8.32843 15.3285 9 14.5 9C13.6716 9 13 8.32843 13 7.5V1.5C13 0.671574 13.6716 8.77022e-07 14.5 9.49446e-07C15.3285 1.02187e-06 16 0.671574 16 1.5V7.5Z"
-							fill="#EDEDF0"
-						/>
-						<path
-							d="M12 7.66667V2.23607C12 1.47852 11.572 0.785998 10.8945 0.447215L10.8446 0.422291C10.2892 0.144581 9.67675 5.2778e-07 9.05577 4.73492e-07L3.63964 0C2.68628 -8.33455e-08 1.86545 0.672919 1.67848 1.60777L0.478483 7.60777C0.230966 8.84535 1.17755 10 2.43964 10H6.00004V14C6.00004 15.1046 6.89547 16 8.00004 16C8.55232 16 9.00004 15.5523 9.00004 15V14.3333C9.00004 13.4679 9.28075 12.6257 9.80004 11.9333L11.2 10.0667C11.7193 9.37428 12 8.53215 12 7.66667Z"
-							fill="#EDEDF0"
-						/>
-					</svg>
-				</button>
+						<svg
+							width="16"
+							height="16"
+							viewBox="0 0 16 16"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M16 7.5C16 8.32843 15.3285 9 14.5 9C13.6716 9 13 8.32843 13 7.5V1.5C13 0.671574 13.6716 8.77022e-07 14.5 9.49446e-07C15.3285 1.02187e-06 16 0.671574 16 1.5V7.5Z"
+								fill="#EDEDF0"
+							/>
+							<path
+								d="M12 7.66667V2.23607C12 1.47852 11.572 0.785998 10.8945 0.447215L10.8446 0.422291C10.2892 0.144581 9.67675 5.2778e-07 9.05577 4.73492e-07L3.63964 0C2.68628 -8.33455e-08 1.86545 0.672919 1.67848 1.60777L0.478483 7.60777C0.230966 8.84535 1.17755 10 2.43964 10H6.00004V14C6.00004 15.1046 6.89547 16 8.00004 16C8.55232 16 9.00004 15.5523 9.00004 15V14.3333C9.00004 13.4679 9.28075 12.6257 9.80004 11.9333L11.2 10.0667C11.7193 9.37428 12 8.53215 12 7.66667Z"
+								fill="#EDEDF0"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+			<div class="aw-content-footer-header-end">
+				<ul class="aw-metadata aw-caption-400">
+					{#if date}
+						<li>Last updated on {new Date(date)?.toLocaleDateString()}</li>
+					{/if}
+					<li>
+						<a
+							href="https://github.com/appwrite/website"
+							target="_blank"
+							class="aw-link u-flex u-gap-4 u-cross-baseline"
+						>
+							<span class="icon-pencil-alt u-contents" aria-hidden="true" />
+							<span>Update on GitHub</span>
+						</a>
+					</li>
+				</ul>
 			</div>
-			<slot />
 		</div>
 	</header>
 	{#if showFeedback}
diff --git a/src/lib/layouts/DocsArticle.svelte b/src/lib/layouts/DocsArticle.svelte
index 3beeea5c4b..5f2f8f0d7e 100644
--- a/src/lib/layouts/DocsArticle.svelte
+++ b/src/lib/layouts/DocsArticle.svelte
@@ -18,6 +18,7 @@
 	export let title: string;
 	export let toc: Array<TocItem>;
 	export let back: string | undefined = undefined;
+	export let date: string;
 </script>
 
 <main class="u-contents">
@@ -60,19 +61,7 @@
 		</header>
 		<div class="aw-article-content">
 			<slot />
-			<Feedback>
-				<div class="aw-content-footer-header-end">
-					<ul class="aw-metadata aw-caption-400">
-						<li>Last updated on September 27, 2023</li>
-						<li>
-							<a href="https://github.com/appwrite/website" target="_blank" class="aw-link">
-								<span class="icon-pencil-alt u-contents" aria-hidden="true" />
-								<span>Update on GitHub</span>
-							</a>
-						</li>
-					</ul>
-				</div>
-			</Feedback>
+			<Feedback {date} />
 		</div>
 		<aside class="aw-references-menu aw-u-padding-inline-start-24">
 			<div class="aw-references-menu-content">
diff --git a/src/lib/layouts/DocsTutorial.svelte b/src/lib/layouts/DocsTutorial.svelte
index c0a32544c4..b2c1ab6827 100644
--- a/src/lib/layouts/DocsTutorial.svelte
+++ b/src/lib/layouts/DocsTutorial.svelte
@@ -7,6 +7,7 @@
 	export let toc: Array<TocItem>;
 	export let currentStep: number;
 	export let back: string;
+	export let date: string;
 
 	export let tutorials: Array<Tutorial>;
 
@@ -74,23 +75,7 @@
 				{/if}
 			</div>
 
-			<Feedback>
-				<div class="aw-content-footer-header-end">
-					<ul class="aw-metadata aw-caption-400">
-						<li>Last updated on September 27, 2023</li>
-						<li>
-							<a
-								href="https://github.com/appwrite/website"
-								target="_blank"
-								class="aw-link u-flex u-gap-4 u-cross-baseline"
-							>
-								<span class="icon-pencil-alt u-contents" aria-hidden="true" />
-								<span>Update on GitHub</span>
-							</a>
-						</li>
-					</ul>
-				</div>
-			</Feedback>
+			<Feedback {date} />
 		</div>
 		<aside class="aw-references-menu aw-u-padding-inline-start-24">
 			<div class="aw-references-menu-content">
diff --git a/src/markdoc/layouts/Article.svelte b/src/markdoc/layouts/Article.svelte
index c020d081ac..f3d92b54cf 100644
--- a/src/markdoc/layouts/Article.svelte
+++ b/src/markdoc/layouts/Article.svelte
@@ -26,6 +26,7 @@
 	export let back: string | undefined = undefined;
 	export let difficulty: string | undefined = undefined;
 	export let readtime: string | undefined = undefined;
+	export let date: string;
 
 	setContext<LayoutContext>('headings', writable({}));
 
@@ -77,7 +78,7 @@
 	<meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 
-<DocsArticle {title} {back} {toc}>
+<DocsArticle {title} {back} {toc} {date}>
 	<svelte:fragment slot="metadata">
 		{#if difficulty}
 			<li>{difficulty}</li>
diff --git a/src/markdoc/layouts/Tutorial.svelte b/src/markdoc/layouts/Tutorial.svelte
index 6c06b4a08e..08f8dc04c9 100644
--- a/src/markdoc/layouts/Tutorial.svelte
+++ b/src/markdoc/layouts/Tutorial.svelte
@@ -22,6 +22,7 @@
 	export let readtime: string;
 	export let step: number;
 	export let back: string;
+	export let date: string;
 
 	setContext<LayoutContext>('headings', writable({}));
 
@@ -73,7 +74,7 @@
 	<meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 
-<DocsTutorial {title} {back} {toc} {tutorials} currentStep={step}>
+<DocsTutorial {title} {back} {toc} {tutorials} {date} currentStep={step}>
 	<svelte:fragment slot="metadata">
 		{#if difficulty}
 			<li>{difficulty}</li>
diff --git a/src/routes/docs/products/auth/+page.markdoc b/src/routes/docs/products/auth/+page.markdoc
index b815a50da6..24902c3e3b 100644
--- a/src/routes/docs/products/auth/+page.markdoc
+++ b/src/routes/docs/products/auth/+page.markdoc
@@ -3,12 +3,13 @@ layout: article
 title: Authentication
 description: Explore Appwrite's powerful authentication solutions. Learn how to implement secure user authentication, manage user identities, and enhance your application's security."
 back: /docs
+date: 2023-09-28
 ---
 
-Appwrite Authentication delivers more than just user sign up and log in. 
+Appwrite Authentication delivers more than just user sign up and log in.
 Authentication makes it easy to build secure and robust authentication with support for many different authentication methods.
 
-You can manage user accounts with user preferences, user labeling, or organizing users into teams. 
+You can manage user accounts with user preferences, user labeling, or organizing users into teams.
 Combined with a robust permissions system, Appwrite Authentication provides everything you need to authenticate and manage users.
 
 [Quick start {% icon icon="cheveron-right" /%}](/docs/products/auth/quick-start)

From e45dc86e38de66062ce4c2ec1e9923610346c3a7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 28 Sep 2023 14:09:52 +0200
Subject: [PATCH 6/7] fix: style

---
 src/lib/components/Feedback.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index c0adf0389c..17a21f27e0 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -49,8 +49,9 @@
 	<header class="aw-content-footer-header u-width-full-line">
 		<div
 			class="aw-content-footer-header-start u-flex u-main-space-between u-cross-center u-width-full-line"
+			style="flex-wrap: wrap-reverse;"
 		>
-			<div class="u-flex u-gap-16">
+			<div class="u-flex u-gap-16 u-cross-center">
 				<h5 class="aw-main-body-600 aw-u-color-text-primary">Was this page helpful?</h5>
 				<div class="u-flex u-gap-8">
 					<button

From 7e4d24545ed67cad5be8f010f0495b183de9fe41 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 28 Sep 2023 14:12:29 +0200
Subject: [PATCH 7/7] fix: style

---
 src/lib/components/Feedback.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index 17a21f27e0..efdfb9dee4 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -48,7 +48,7 @@
 <section class="aw-content-footer">
 	<header class="aw-content-footer-header u-width-full-line">
 		<div
-			class="aw-content-footer-header-start u-flex u-main-space-between u-cross-center u-width-full-line"
+			class="u-flex u-gap-32 u-main-space-between u-cross-center u-width-full-line"
 			style="flex-wrap: wrap-reverse;"
 		>
 			<div class="u-flex u-gap-16 u-cross-center">