[Docs Site] Add feedback prompt (cloudflare#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

astro.config.ts

@@ -158,6 +158,7 @@ export default defineConfig({
 				PageTitle: "./src/components/overrides/PageTitle.astro",
 				SocialIcons: "./src/components/overrides/SocialIcons.astro",
 				SkipLink: "./src/components/overrides/SkipLink.astro",
+				TableOfContents: "./src/components/overrides/TableOfContents.astro",
 			},
 			sidebar: await autogenSections(),
 			customCss: [

package.json

@@ -34,6 +34,7 @@
 		"@cloudflare/vitest-pool-workers": "^0.5.27",
 		"@cloudflare/workers-types": "^4.20241022.0",
 		"@codingheads/sticky-header": "^1.0.2",
+		"@iconify-json/material-symbols": "^1.2.6",
 		"@stoplight/json-schema-tree": "^4.0.0",
 		"@types/dompurify": "^3.0.5",
 		"@types/hast": "^3.0.4",

src/components/FeedbackPrompt.astro

@@ -0,0 +1,213 @@
+---
+import { AstroIcon } from "~/components";
+---
+
+<feedback-prompt class="not-content">
+	<div id="feedback-thumbs">
+		<h2>Was this helpful?</h2>
+		<div class="not-content">
+			<AstroIcon name="material-symbols:thumb-up-outline-rounded" title="Yes" />
+			<AstroIcon
+				name="material-symbols:thumb-down-outline-rounded"
+				title="No"
+			/>
+		</div>
+	</div>
+	<div id="feedback-yes" class="hidden">
+		<h2>What did you like?</h2>
+		<form>
+			<fieldset>
+				<div>
+					<input type="radio" id="accurate" value="accurate" name="reason" />
+					<label for="accurate">Accurate</label>
+				</div>
+				<div>
+					<input
+						type="radio"
+						id="easy-to-understand"
+						value="easy-to-understand"
+						name="reason"
+					/>
+					<label for="easy-to-understand">Easy to understand</label>
+				</div>
+				<div>
+					<input
+						type="radio"
+						id="solved-my-problem"
+						value="solved-my-problem"
+						name="reason"
+					/>
+					<label for="solved-my-problem">Solved my problem</label>
+				</div>
+				<div>
+					<input
+						type="radio"
+						id="helped-me-decide-to-use-the-product"
+						value="solved-my-problem"
+						name="reason"
+					/>
+					<label for="helped-me-decide-to-use-the-product"
+						>Helped me decide to use the product</label
+					>
+				</div>
+				<div>
+					<input type="radio" id="other" value="other" name="reason" />
+					<label for="other">Other</label>
+					<input
+						type="text"
+						placeholder="Tell us more about your experience."
+						id="info"
+						name="info"
+					/>
+				</div>
+				<input type="submit" value="Submit" />
+			</fieldset>
+		</form>
+	</div>
+	<div id="feedback-no" class="hidden">
+		<h2>What went wrong?</h2>
+		<form>
+			<fieldset>
+				<div>
+					<input
+						type="radio"
+						id="hard-to-understand"
+						value="hard-to-understand"
+						name="reason"
+					/>
+					<label for="hard-to-understand">Hard to understand</label>
+				</div>
+				<div>
+					<input
+						type="radio"
+						id="incorrect-information"
+						value="incorrect-information"
+						name="reason"
+					/>
+					<label for="incorrect-information">Incorrect information</label>
+				</div>
+				<div>
+					<input
+						type="radio"
+						id="missing-the-information"
+						value="missing-the-information"
+						name="reason"
+					/>
+					<label for="missing-the-information">Missing the information</label>
+				</div>
+				<div>
+					<input type="radio" id="other" value="other" name="reason" />
+					<label for="other">Other</label>
+					<input
+						type="text"
+						placeholder="Tell us more about your experience."
+						id="info"
+						name="info"
+					/>
+				</div>
+				<input type="submit" value="Submit" />
+			</fieldset>
+		</form>
+	</div>
+
+	<div id="feedback-thanks" class="hidden">
+		<h2>Thank you for helping improve Cloudflare's documentation!</h2>
+	</div>
+</feedback-prompt>
+
+<style>
+	fieldset {
+		padding-top: 0;
+		padding-left: 0;
+	}
+
+	label {
+		font-size: small;
+		color: var(--sl-color-gray-3);
+	}
+
+	input[type="submit"],
+	input::placeholder {
+		font-size: x-small;
+	}
+
+	h2 {
+		color: var(--sl-color-white);
+		font-size: var(--sl-text-h5);
+		font-weight: 600;
+		line-height: var(--sl-line-height-headings);
+		margin-bottom: 0.5rem;
+	}
+
+	#info {
+		display: none;
+	}
+
+	#other:checked ~ #info {
+		display: flex;
+	}
+
+	[data-icon] {
+		cursor: pointer;
+		color: var(--sl-color-gray-3);
+		font-size: 1.5rem;
+		margin-right: 0.5rem;
+
+		&:hover {
+			color: var(--sl-color-text-accent);
+			border-color: var(--sl-color-text-accent);
+		}
+	}
+</style>
+
+<script>
+	class FeedbackPrompt extends HTMLElement {
+		connectedCallback() {
+			const icons = {
+				'[data-icon="material-symbols:thumb-up-outline-rounded"]':
+					"#feedback-yes",
+				'[data-icon="material-symbols:thumb-down-outline-rounded"]':
+					"#feedback-no",
+			};
+
+			const thumbsDiv = this.querySelector("#feedback-thumbs");
+			const thanksDiv = this.querySelector("#feedback-thanks");
+
+			if (!thumbsDiv || !thanksDiv) return;
+
+			for (const [button, questions] of Object.entries(icons)) {
+				this.querySelector(button)?.addEventListener("click", () => {
+					thumbsDiv.classList.add("hidden");
+
+					const questionsDiv = this.querySelector(questions);
+
+					if (!questionsDiv) return;
+
+					questionsDiv.classList.remove("hidden");
+
+					const form = questionsDiv.querySelector("form");
+
+					if (!form) return;
+
+					form.addEventListener("submit", async (e) => {
+						e.preventDefault();
+
+						const formData = new FormData(e.target as HTMLFormElement);
+						formData.set("page", window.location.pathname);
+						formData.set("option", questions.split("-")[1]);
+
+						fetch("https://feedback.developers.cloudflare.com", {
+							method: "POST",
+							body: formData,
+						});
+
+						questionsDiv.classList.add("hidden");
+						thanksDiv.classList.remove("hidden");
+					});
+				});
+			}
+		}
+	}
+
+	customElements.define("feedback-prompt", FeedbackPrompt);
+</script>

src/components/index.ts

@@ -15,6 +15,7 @@ export { default as Example } from "./Example.astro";
 export { default as ExternalResources } from "./ExternalResources.astro";
 export { default as Feature } from "./Feature.astro";
 export { default as FeatureTable } from "./FeatureTable.astro";
+export { default as FeedbackPrompt } from "./FeedbackPrompt.astro";
 export { default as Flex } from "./Flex.astro";
 export { default as GitHubCode } from "./GitHubCode.astro";
 export { default as Glossary } from "./Glossary.astro";

src/components/overrides/MarkdownContent.astro

@@ -1,7 +1,10 @@
 ---
 import type { Props } from "@astrojs/starlight/props";
 import '@astrojs/starlight/style/markdown.css';
+
 import ImageZoom from "starlight-image-zoom/components/ImageZoom.astro";
+
+import { FeedbackPrompt } from "~/components";
 /*
     MIT License
 
@@ -40,6 +43,9 @@ const { tableOfContents } = Astro.props.entry.data;
 <ImageZoom />
 <div class="sl-markdown-content">
     <slot />
+	<div class="!mt-[1.5em] block min-[1152px]:hidden">
+		<FeedbackPrompt />
+	</div>
 </div>
 <style>
 	/* Custom styles for heading anchor links. */

src/components/overrides/TableOfContents.astro

@@ -0,0 +1,10 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+import Default from "@astrojs/starlight/components/TableOfContents.astro";
+
+import { FeedbackPrompt } from "~/components";
+---
+
+<Default {...Astro.props} />
+<br />
+<FeedbackPrompt />