Skip to content

Commit d4c0b0d

Browse files
KianNHKianNH
authored
[Docs Site] Add feedback prompt (#18129)
* [Docs Site] Add feedback prompt * Fix min width, add the rest of the values * max not min * fix min-width unit, add additional info into payload * rename other-answer to info * Update src/components/FeedbackPrompt.astro
1 parent 40dac23 commit d4c0b0d

File tree

7 files changed

+243
-0
lines changed

7 files changed

+243
-0
lines changed

‎astro.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,7 @@ export default defineConfig({
158158
PageTitle: "./src/components/overrides/PageTitle.astro",
159159
SocialIcons: "./src/components/overrides/SocialIcons.astro",
160160
SkipLink: "./src/components/overrides/SkipLink.astro",
161+
TableOfContents: "./src/components/overrides/TableOfContents.astro",
161162
},
162163
sidebar: await autogenSections(),
163164
customCss: [

‎package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@cloudflare/vitest-pool-workers": "^0.5.27",
3535
"@cloudflare/workers-types": "^4.20241022.0",
3636
"@codingheads/sticky-header": "^1.0.2",
37+
"@iconify-json/material-symbols": "^1.2.6",
3738
"@stoplight/json-schema-tree": "^4.0.0",
3839
"@types/dompurify": "^3.0.5",
3940
"@types/hast": "^3.0.4",

‎src/components/FeedbackPrompt.astro‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
---
2+
import { AstroIcon } from "~/components";
3+
---
4+
5+
<feedback-prompt class="not-content">
6+
<div id="feedback-thumbs">
7+
<h2>Was this helpful?</h2>
8+
<div class="not-content">
9+
<AstroIcon name="material-symbols:thumb-up-outline-rounded" title="Yes" />
10+
<AstroIcon
11+
name="material-symbols:thumb-down-outline-rounded"
12+
title="No"
13+
/>
14+
</div>
15+
</div>
16+
<div id="feedback-yes" class="hidden">
17+
<h2>What did you like?</h2>
18+
<form>
19+
<fieldset>
20+
<div>
21+
<input type="radio" id="accurate" value="accurate" name="reason" />
22+
<label for="accurate">Accurate</label>
23+
</div>
24+
<div>
25+
<input
26+
type="radio"
27+
id="easy-to-understand"
28+
value="easy-to-understand"
29+
name="reason"
30+
/>
31+
<label for="easy-to-understand">Easy to understand</label>
32+
</div>
33+
<div>
34+
<input
35+
type="radio"
36+
id="solved-my-problem"
37+
value="solved-my-problem"
38+
name="reason"
39+
/>
40+
<label for="solved-my-problem">Solved my problem</label>
41+
</div>
42+
<div>
43+
<input
44+
type="radio"
45+
id="helped-me-decide-to-use-the-product"
46+
value="solved-my-problem"
47+
name="reason"
48+
/>
49+
<label for="helped-me-decide-to-use-the-product"
50+
>Helped me decide to use the product</label
51+
>
52+
</div>
53+
<div>
54+
<input type="radio" id="other" value="other" name="reason" />
55+
<label for="other">Other</label>
56+
<input
57+
type="text"
58+
placeholder="Tell us more about your experience."
59+
id="info"
60+
name="info"
61+
/>
62+
</div>
63+
<input type="submit" value="Submit" />
64+
</fieldset>
65+
</form>
66+
</div>
67+
<div id="feedback-no" class="hidden">
68+
<h2>What went wrong?</h2>
69+
<form>
70+
<fieldset>
71+
<div>
72+
<input
73+
type="radio"
74+
id="hard-to-understand"
75+
value="hard-to-understand"
76+
name="reason"
77+
/>
78+
<label for="hard-to-understand">Hard to understand</label>
79+
</div>
80+
<div>
81+
<input
82+
type="radio"
83+
id="incorrect-information"
84+
value="incorrect-information"
85+
name="reason"
86+
/>
87+
<label for="incorrect-information">Incorrect information</label>
88+
</div>
89+
<div>
90+
<input
91+
type="radio"
92+
id="missing-the-information"
93+
value="missing-the-information"
94+
name="reason"
95+
/>
96+
<label for="missing-the-information">Missing the information</label>
97+
</div>
98+
<div>
99+
<input type="radio" id="other" value="other" name="reason" />
100+
<label for="other">Other</label>
101+
<input
102+
type="text"
103+
placeholder="Tell us more about your experience."
104+
id="info"
105+
name="info"
106+
/>
107+
</div>
108+
<input type="submit" value="Submit" />
109+
</fieldset>
110+
</form>
111+
</div>
112+
113+
<div id="feedback-thanks" class="hidden">
114+
<h2>Thank you for helping improve Cloudflare's documentation!</h2>
115+
</div>
116+
</feedback-prompt>
117+
118+
<style>
119+
fieldset {
120+
padding-top: 0;
121+
padding-left: 0;
122+
}
123+
124+
label {
125+
font-size: small;
126+
color: var(--sl-color-gray-3);
127+
}
128+
129+
input[type="submit"],
130+
input::placeholder {
131+
font-size: x-small;
132+
}
133+
134+
h2 {
135+
color: var(--sl-color-white);
136+
font-size: var(--sl-text-h5);
137+
font-weight: 600;
138+
line-height: var(--sl-line-height-headings);
139+
margin-bottom: 0.5rem;
140+
}
141+
142+
#info {
143+
display: none;
144+
}
145+
146+
#other:checked ~ #info {
147+
display: flex;
148+
}
149+
150+
[data-icon] {
151+
cursor: pointer;
152+
color: var(--sl-color-gray-3);
153+
font-size: 1.5rem;
154+
margin-right: 0.5rem;
155+
156+
&:hover {
157+
color: var(--sl-color-text-accent);
158+
border-color: var(--sl-color-text-accent);
159+
}
160+
}
161+
</style>
162+
163+
<script>
164+
class FeedbackPrompt extends HTMLElement {
165+
connectedCallback() {
166+
const icons = {
167+
'[data-icon="material-symbols:thumb-up-outline-rounded"]':
168+
"#feedback-yes",
169+
'[data-icon="material-symbols:thumb-down-outline-rounded"]':
170+
"#feedback-no",
171+
};
172+
173+
const thumbsDiv = this.querySelector("#feedback-thumbs");
174+
const thanksDiv = this.querySelector("#feedback-thanks");
175+
176+
if (!thumbsDiv || !thanksDiv) return;
177+
178+
for (const [button, questions] of Object.entries(icons)) {
179+
this.querySelector(button)?.addEventListener("click", () => {
180+
thumbsDiv.classList.add("hidden");
181+
182+
const questionsDiv = this.querySelector(questions);
183+
184+
if (!questionsDiv) return;
185+
186+
questionsDiv.classList.remove("hidden");
187+
188+
const form = questionsDiv.querySelector("form");
189+
190+
if (!form) return;
191+
192+
form.addEventListener("submit", async (e) => {
193+
e.preventDefault();
194+
195+
const formData = new FormData(e.target as HTMLFormElement);
196+
formData.set("page", window.location.pathname);
197+
formData.set("option", questions.split("-")[1]);
198+
199+
fetch("https://feedback.developers.cloudflare.com", {
200+
method: "POST",
201+
body: formData,
202+
});
203+
204+
questionsDiv.classList.add("hidden");
205+
thanksDiv.classList.remove("hidden");
206+
});
207+
});
208+
}
209+
}
210+
}
211+
212+
customElements.define("feedback-prompt", FeedbackPrompt);
213+
</script>

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export { default as Example } from "./Example.astro";
1515
export { default as ExternalResources } from "./ExternalResources.astro";
1616
export { default as Feature } from "./Feature.astro";
1717
export { default as FeatureTable } from "./FeatureTable.astro";
18+
export { default as FeedbackPrompt } from "./FeedbackPrompt.astro";
1819
export { default as Flex } from "./Flex.astro";
1920
export { default as GitHubCode } from "./GitHubCode.astro";
2021
export { default as Glossary } from "./Glossary.astro";

‎src/components/overrides/MarkdownContent.astro‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
---
22
import type { Props } from "@astrojs/starlight/props";
33
import '@astrojs/starlight/style/markdown.css';
4+
45
import ImageZoom from "starlight-image-zoom/components/ImageZoom.astro";
6+
7+
import { FeedbackPrompt } from "~/components";
58
/*
69
MIT License
710
@@ -40,6 +43,9 @@ const { tableOfContents } = Astro.props.entry.data;
4043
<ImageZoom />
4144
<div class="sl-markdown-content">
4245
<slot />
46+
<div class="!mt-[1.5em] block min-[1152px]:hidden">
47+
<FeedbackPrompt />
48+
</div>
4349
</div>
4450
<style>
4551
/* Custom styles for heading anchor links. */

‎src/components/overrides/TableOfContents.astro‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
import type { Props } from "@astrojs/starlight/props";
3+
import Default from "@astrojs/starlight/components/TableOfContents.astro";
4+
5+
import { FeedbackPrompt } from "~/components";
6+
---
7+
8+
<Default {...Astro.props} />
9+
<br />
10+
<FeedbackPrompt />

0 commit comments

Comments
 (0)