Skip to content

Commit 0124226

Browse files
TorstenDittmannTorstenDittmann
authored
Merge pull request #109 from appwrite/feat-feedback
Feat-feedback
2 parents db5c78e + 844d37b commit 0124226

7 files changed

Lines changed: 204 additions & 120 deletions

File tree

‎src/lib/components/Feedback.svelte‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<script lang="ts">
2+
import { page } from '$app/stores';
3+
4+
export let date: string;
5+
let showFeedback = false;
6+
let feedbackType = '';
7+
let email = '';
8+
let comment = '';
9+
let error: string | undefined;
10+
let submitted = false;
11+
let submitting = false;
12+
13+
async function handleSubmit() {
14+
submitting = true;
15+
error = undefined;
16+
const response = await fetch('https://growth.appwrite.io/v1/feedback/docs', {
17+
method: 'POST',
18+
headers: {
19+
'Content-Type': 'application/json'
20+
},
21+
body: JSON.stringify({
22+
email,
23+
type: feedbackType,
24+
route: $page.route.id,
25+
comment
26+
})
27+
});
28+
submitting = false;
29+
if (response.status >= 400) {
30+
error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
31+
return;
32+
}
33+
comment = email = '';
34+
submitted = true;
35+
}
36+
37+
function reset() {
38+
comment = email = '';
39+
submitted = false;
40+
error = undefined;
41+
}
42+
43+
$: if (!showFeedback) {
44+
reset();
45+
}
46+
</script>
47+
48+
<section class="aw-content-footer">
49+
<header class="aw-content-footer-header u-width-full-line">
50+
<div
51+
class="u-flex u-gap-32 u-main-space-between u-cross-center u-width-full-line"
52+
style="flex-wrap: wrap-reverse;"
53+
>
54+
<div class="u-flex u-gap-16 u-cross-center">
55+
<h5 class="aw-main-body-600 aw-u-color-text-primary">Was this page helpful?</h5>
56+
<div class="u-flex u-gap-8">
57+
<button
58+
class="aw-radio-button"
59+
aria-label="helpful"
60+
on:click={() => {
61+
showFeedback = feedbackType === 'positive' ? false : true;
62+
feedbackType = 'positive';
63+
}}
64+
>
65+
<svg
66+
width="16"
67+
height="16"
68+
viewBox="0 0 16 16"
69+
fill="none"
70+
xmlns="http://www.w3.org/2000/svg"
71+
>
72+
<path
73+
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"
74+
fill="#EDEDF0"
75+
/>
76+
<path
77+
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"
78+
fill="#EDEDF0"
79+
/>
80+
</svg>
81+
</button>
82+
<button
83+
class="aw-radio-button"
84+
aria-label="unhelpful"
85+
on:click={() => {
86+
showFeedback = feedbackType === 'negative' ? false : true;
87+
feedbackType = 'negative';
88+
}}
89+
>
90+
<svg
91+
width="16"
92+
height="16"
93+
viewBox="0 0 16 16"
94+
fill="none"
95+
xmlns="http://www.w3.org/2000/svg"
96+
>
97+
<path
98+
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"
99+
fill="#EDEDF0"
100+
/>
101+
<path
102+
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"
103+
fill="#EDEDF0"
104+
/>
105+
</svg>
106+
</button>
107+
</div>
108+
</div>
109+
<div class="aw-content-footer-header-end">
110+
<ul class="aw-metadata aw-caption-400">
111+
{#if date}
112+
<li>Last updated on {new Date(date)?.toLocaleDateString()}</li>
113+
{/if}
114+
<li>
115+
<a
116+
href="https://github.com/appwrite/website"
117+
target="_blank"
118+
class="aw-link u-flex u-gap-4 u-cross-baseline"
119+
>
120+
<span class="icon-pencil-alt u-contents" aria-hidden="true" />
121+
<span>Update on GitHub</span>
122+
</a>
123+
</li>
124+
</ul>
125+
</div>
126+
</div>
127+
</header>
128+
{#if showFeedback}
129+
<form
130+
on:submit|preventDefault={handleSubmit}
131+
class="aw-card is-normal"
132+
style="--card-padding:1rem"
133+
>
134+
<div class="u-flex-vertical u-gap-8">
135+
<label for="message">
136+
<span class="aw-u-color-text-primary">
137+
What did you {feedbackType === 'negative' ? 'dislike' : 'like'}? (optional)
138+
</span>
139+
</label>
140+
<textarea
141+
class="aw-input-text"
142+
id="message"
143+
placeholder="Write your message"
144+
bind:value={comment}
145+
/>
146+
<label for="message" class="u-margin-block-start-8">
147+
<span class="aw-u-color-text-primary">Email</span>
148+
</label>
149+
<input
150+
class="aw-input-text"
151+
placeholder="Enter your email"
152+
type="email"
153+
name="email"
154+
required
155+
bind:value={email}
156+
/>
157+
</div>
158+
{#if submitted}
159+
<p class="aw-u-color-text-primary u-margin-block-start-16">
160+
Your message has been sent successfully. We appreciate your feedback.
161+
</p>
162+
{/if}
163+
{#if error}
164+
<p class="aw-u-color-text-primary u-margin-block-start-16">
165+
There was an error submitting your feedback. Please try again later.
166+
</p>
167+
{/if}
168+
169+
<div class="u-flex u-main-end u-margin-block-start-16 u-gap-8">
170+
<button class="aw-button is-text" on:click={() => (showFeedback = false)}>
171+
<span>Cancel</span>
172+
</button>
173+
<button type="submit" class="aw-button" disabled={submitting || !email}>
174+
<span>Submit</span>
175+
</button>
176+
</div>
177+
</form>
178+
{/if}
179+
</section>

‎src/lib/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ export { default as Spline } from './Spline.svelte';
99
export { default as Article } from './Article.svelte';
1010
export { default as Carousel } from './Carousel.svelte';
1111
export { default as FloatingHeads } from './FloatingHeads.svelte';
12+
export { default as Feedback } from './Feedback.svelte';

‎src/lib/layouts/DocsArticle.svelte‎

Lines changed: 4 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,12 @@
1313
</script>
1414

1515
<script lang="ts">
16+
import { Feedback } from '$lib/components';
17+
1618
export let title: string;
1719
export let toc: Array<TocItem>;
1820
export let back: string | undefined = undefined;
21+
export let date: string;
1922
</script>
2023

2124
<main class="u-contents">
@@ -58,59 +61,7 @@
5861
</header>
5962
<div class="aw-article-content">
6063
<slot />
61-
<section class="aw-content-footer">
62-
<header class="aw-content-footer-header">
63-
<div class="aw-content-footer-header-start">
64-
<!--
65-
<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
66-
<div class="u-flex u-gap-8">
67-
<input
68-
class="aw-radio-button is-like"
69-
type="radio"
70-
aria-label="Helpful"
71-
name="happy"
72-
/>
73-
<input
74-
class="aw-radio-button is-dislike"
75-
type="radio"
76-
aria-label="UnHelpful"
77-
name="happy"
78-
/>
79-
</div>
80-
-->
81-
</div>
82-
<div class="aw-content-footer-header-end">
83-
<ul class="aw-metadata aw-caption-400">
84-
<li>Last updated on September 27, 2023</li>
85-
<li>
86-
<a href="https://github.com/appwrite/website" target="_blank" class="aw-link">
87-
<span class="icon-pencil-alt u-contents" aria-hidden="true" />
88-
<span>Update on GitHub</span>
89-
</a>
90-
</li>
91-
</ul>
92-
</div>
93-
</header>
94-
<!-- <div class="aw-card is-normal" style="--card-padding:1rem">
95-
<label for="message">
96-
<span class="aw-u-color-text-primary">What did you like?</span>
97-
<span class="">(optional)</span>
98-
</label>
99-
<textarea
100-
class="aw-input-text u-margin-block-start-8"
101-
id="message"
102-
placeholder="Write your message"
103-
/>
104-
<div class="u-flex u-main-end u-margin-block-start-16">
105-
<button class="aw-button is-text">
106-
<span class="">Cancel</span>
107-
</button>
108-
<button class="aw-button">
109-
<span class="">Submit</span>
110-
</button>
111-
</div>
112-
</div> -->
113-
</section>
64+
<Feedback {date} />
11465
</div>
11566
<aside class="aw-references-menu aw-u-padding-inline-start-24">
11667
<div class="aw-references-menu-content">

‎src/lib/layouts/DocsTutorial.svelte‎

Lines changed: 13 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<script lang="ts">
2+
import { Feedback } from '$lib/components';
23
import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte';
34
import type { TocItem } from './DocsArticle.svelte';
45
56
export let title: string;
67
export let toc: Array<TocItem>;
78
export let currentStep: number;
89
export let back: string;
10+
export let date: string;
911
1012
export let tutorials: Array<Tutorial>;
1113
@@ -30,18 +32,18 @@
3032
</ul>
3133
<div class="u-position-relative u-flex u-cross-center">
3234
{#if back}
33-
<a
34-
href={back}
35-
class="
35+
<a
36+
href={back}
37+
class="
3638
aw-button is-text is-only-icon aw-u-cross-center aw-u-size-40
3739
u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
38-
aria-label="previous page"
39-
>
40-
<span
41-
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
42-
aria-hidden="true"
43-
/>
44-
</a>
40+
aria-label="previous page"
41+
>
42+
<span
43+
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
44+
aria-hidden="true"
45+
/>
46+
</a>
4547
{/if}
4648
<h1 class="aw-title">{title}</h1>
4749
</div>
@@ -73,59 +75,7 @@
7375
{/if}
7476
</div>
7577

76-
<section class="aw-content-footer">
77-
<header class="aw-content-footer-header u-cross-center">
78-
<div class="aw-content-footer-header-start u-cross-center">
79-
<!--
80-
<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
81-
<div class="u-flex u-gap-8">
82-
<input
83-
class="aw-radio-button is-like"
84-
type="radio"
85-
aria-label="Helpful"
86-
name="happy"
87-
/>
88-
<input
89-
class="aw-radio-button is-dislike"
90-
type="radio"
91-
aria-label="UnHelpful"
92-
name="happy"
93-
/>
94-
</div>
95-
-->
96-
</div>
97-
<div class="aw-content-footer-header-end">
98-
<ul class="aw-metadata aw-caption-400">
99-
<li>Last updated on September 27, 2023</li>
100-
<li>
101-
<a href="https://github.com/appwrite/website" target="_blank" class="aw-link u-flex u-gap-4 u-cross-baseline">
102-
<span class="icon-pencil-alt u-contents" aria-hidden="true" />
103-
<span>Update on GitHub</span>
104-
</a>
105-
</li>
106-
</ul>
107-
</div>
108-
</header>
109-
<!-- <div class="aw-card is-normal" style="--card-padding:1rem">
110-
<label for="message">
111-
<span class="aw-caption-400 aw-u-color-text-primary">What did you like?</span>
112-
<span class="aw-caption-400">(optional)</span>
113-
</label>
114-
<textarea
115-
class="aw-input-text u-margin-block-start-8"
116-
id="message"
117-
placeholder="Write your message"
118-
/>
119-
<div class="u-flex u-gap-8 u-main-end u-margin-block-start-16">
120-
<button class="aw-button is-text">
121-
<span class="">Cancel</span>
122-
</button>
123-
<button class="aw-button">
124-
<span class="">Submit</span>
125-
</button>
126-
</div>
127-
</div> -->
128-
</section>
78+
<Feedback {date} />
12979
</div>
13080
<aside class="aw-references-menu aw-u-padding-inline-start-24">
13181
<div class="aw-references-menu-content">

‎src/markdoc/layouts/Article.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
export let back: string | undefined = undefined;
2727
export let difficulty: string | undefined = undefined;
2828
export let readtime: string | undefined = undefined;
29+
export let date: string;
2930
3031
setContext<LayoutContext>('headings', writable({}));
3132
@@ -77,7 +78,7 @@
7778
<meta name="twitter:card" content="summary_large_image" />
7879
</svelte:head>
7980

80-
<DocsArticle {title} {back} {toc}>
81+
<DocsArticle {title} {back} {toc} {date}>
8182
<svelte:fragment slot="metadata">
8283
{#if difficulty}
8384
<li>{difficulty}</li>

‎src/markdoc/layouts/Tutorial.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
export let readtime: string;
2323
export let step: number;
2424
export let back: string;
25+
export let date: string;
2526
2627
setContext<LayoutContext>('headings', writable({}));
2728
@@ -73,7 +74,7 @@
7374
<meta name="twitter:card" content="summary_large_image" />
7475
</svelte:head>
7576

76-
<DocsTutorial {title} {back} {toc} {tutorials} currentStep={step}>
77+
<DocsTutorial {title} {back} {toc} {tutorials} {date} currentStep={step}>
7778
<svelte:fragment slot="metadata">
7879
{#if difficulty}
7980
<li>{difficulty}</li>

0 commit comments

Comments
 (0)