@tideworthy/tidysites-platform 0.10.7 → 0.10.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.10.9
+
+- Editor: the request panel greets the person by name and speaks plainly; the floating button is a pen, not a chat bubble. `GET /_tidy/change` says who is signed in.
+
+## 0.10.8
+
+- Editor: Request a change, from the bar and a floating button at the corner. A panel takes what to change and which page (the current one by default) and hands it to the platform through the control plane (`POST /_tidy/change`); it shows up under Changes.
+
 ## 0.10.7
 
 - Editor: Publish live, Restore and Remove section confirm in a dialog of the editor's own, never the browser's box. The bar's note reads "A private copy to see working changes on the website, not publicly accessible."

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tideworthy/tidysites-platform",
-	"version": "0.10.7",
+	"version": "0.10.9",
 	"description": "The Tidysites platform integration for EmDash sites: bootstrap, sessions, maintenance, health, and publish hooks under /_tidy/*.",
 	"license": "MIT",
 	"type": "module",
@@ -31,7 +31,8 @@
 		"./routes/fill": "./src/routes/fill.ts",
 		"./routes/schema": "./src/routes/schema.ts",
 		"./routes/maintenance": "./src/routes/maintenance.ts",
-		"./routes/revisions": "./src/routes/revisions.ts"
+		"./routes/revisions": "./src/routes/revisions.ts",
+		"./routes/change": "./src/routes/change.ts"
 	},
 	"scripts": {
 		"typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.editor.json",

package/src/editor/TidyEditor.astro

@@ -64,6 +64,7 @@ const htmlClass = !signedIn ? (signInUrl ? "tidy-has-bar tidy-idle" : "") : !act
 		</div>
 		<script is:inline define:vars={{ htmlClass }}>document.documentElement.className += " " + htmlClass;</script>
 		{signedIn && <script src="./revisions.ts"></script>}
+		{signedIn && <script src="./request.ts"></script>}
 	</>
 )}
 {config && (
@@ -135,6 +136,9 @@ const htmlClass = !signedIn ? (signInUrl ? "tidy-has-bar tidy-idle" : "") : !act
 	.tidy-add-item:hover { border-color: #2b7fd1; background: rgba(43,127,209,.06); }
 	.tidy-add-item span { color: #4a5851; font-size: 13px; }
 	.tidy-viewer { position: fixed; inset: 0; z-index: 2147483002; display: flex; flex-direction: column; background: #fff; }
+	.tidy-fab { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #2b7fd1; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
+	.tidy-fab:hover { background: #2470bd; }
+	.tidy-form { display: grid; gap: 14px; margin-bottom: 16px; }
 	.tidy-dialog-backdrop { position: fixed; inset: 0; z-index: 2147483003; display: grid; place-items: center; background: rgba(23,33,28,.45); padding: 16px; }
 	.tidy-dialog { width: min(440px, 100%); background: #fff; color: #17211c; border-radius: 12px; padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.3); font: 14px/1.45 system-ui, sans-serif; }
 	.tidy-dialog h2 { margin: 0 0 6px; font-size: 17px; }

package/src/editor/request.ts

@@ -0,0 +1,101 @@
+/**
+ * Request a change, from the staging site: a button on the bar and a
+ * floating one at the corner open a panel with the form; the request goes
+ * to the platform through /_tidy/change and shows up under Changes.
+ */
+const ROUTE = "/_tidy/change";
+
+function el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs: Record<string, string> = {}, children: Array<Node | string> = []): HTMLElementTagNameMap[K] {
+	const node = document.createElement(tag);
+	for (const [k, v] of Object.entries(attrs)) {
+		if (k === "text") node.textContent = v;
+		else node.setAttribute(k, v);
+	}
+	node.append(...children);
+	return node;
+}
+
+export function mountRequestChange(): void {
+	const actions = document.getElementById("tidy-bar-actions");
+	if (!actions) return;
+	const here = location.pathname + location.search;
+
+	const panel = el("div", { class: "tidy-panel", hidden: "" });
+	document.body.append(panel);
+	let sending = false;
+
+	function close() {
+		panel.hidden = true;
+		panel.replaceChildren();
+	}
+
+	let who: { name: string | null } | null = null;
+	const firstName = () => (who?.name ?? "").trim().split(/\s+/)[0] || "";
+
+	async function render() {
+		if (!who) who = (await fetch(ROUTE, { credentials: "same-origin" }).then((r) => (r.ok ? r.json() : null)).catch(() => null)) as { name: string | null } | null;
+		const name = firstName();
+		const head = el("div", { class: "tidy-panel-head" }, [
+			el("h2", { text: name ? `Hi ${name},` : "Hi there," }),
+			el("p", { text: "We would love to help you make some adjustments to your website. Describe what you would like to see different or new, and we will get a version back to you as soon as possible." })
+		]);
+		const body = el("textarea", { id: "tidy-change-body", rows: "7", maxlength: "10000", required: "" });
+		const page = el("input", { id: "tidy-change-page", type: "text", value: here });
+		const err = el("p", { class: "tidy-field-note", hidden: "" });
+		const cancel = el("button", { type: "button", class: "tidy-btn", text: "Cancel" });
+		const send = el("button", { type: "button", class: "tidy-btn tidy-btn-primary", text: "Send request" });
+		cancel.addEventListener("click", close);
+		send.addEventListener("click", async () => {
+			if (sending) return;
+			const text = body.value.trim();
+			if (!text) {
+				body.focus();
+				return;
+			}
+			sending = true;
+			send.disabled = true;
+			send.textContent = "Sending";
+			err.hidden = true;
+			const r = await fetch(ROUTE, { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" }, body: JSON.stringify({ body: text, pageUrl: page.value.trim() || null }) }).catch(() => null);
+			const j = ((await r?.json().catch(() => ({}))) ?? {}) as { ok?: boolean; error?: string };
+			sending = false;
+			if (r?.ok && j.ok) {
+				panel.replaceChildren(
+					el("div", { class: "tidy-panel-head" }, [el("h2", { text: name ? `Thanks, ${name}.` : "Thanks." }), el("p", { text: "We have your request and will get a version back to you as soon as possible." })]),
+					el("div", { class: "tidy-panel-actions" }, [el("button", { type: "button", class: "tidy-btn", text: "Close" })])
+				);
+				panel.querySelector("button")?.addEventListener("click", close);
+				return;
+			}
+			send.disabled = false;
+			send.textContent = "Send request";
+			err.textContent = j.error ?? "The request could not be sent. Try again.";
+			err.hidden = false;
+		});
+		panel.replaceChildren(
+			head,
+			el("div", { class: "tidy-form" }, [
+				el("div", { class: "tidy-field" }, [el("label", { class: "tidy-field-label", for: "tidy-change-body", text: "What would you like to see different or new?" }), body]),
+				el("div", { class: "tidy-field" }, [el("label", { class: "tidy-field-label", for: "tidy-change-page", text: "Which page" }), page]),
+				err
+			]),
+			el("div", { class: "tidy-panel-actions" }, [cancel, send])
+		);
+		panel.hidden = false;
+		body.focus();
+	}
+
+	const barBtn = el("button", { type: "button", class: "tidy-btn", text: "Request a change" });
+	barBtn.addEventListener("click", render);
+	actions.prepend(barBtn);
+
+	const fab = el("button", { type: "button", class: "tidy-fab", title: "Request a change", "aria-label": "Request a change" });
+	fab.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/></svg>';
+	fab.addEventListener("click", render);
+	document.body.append(fab);
+	document.addEventListener("keydown", (e) => {
+		if (e.key === "Escape" && !panel.hidden) close();
+	});
+}
+
+mountRequestChange();

package/src/index.ts

@@ -31,7 +31,8 @@ export const PLATFORM_ROUTES = [
 	{ pattern: "/_tidy/fill", entrypoint: `${PACKAGE}/routes/fill` },
 	{ pattern: "/_tidy/schema", entrypoint: `${PACKAGE}/routes/schema` },
 	{ pattern: "/_tidy/maintenance", entrypoint: `${PACKAGE}/routes/maintenance` },
-	{ pattern: "/_tidy/revisions", entrypoint: `${PACKAGE}/routes/revisions` }
+	{ pattern: "/_tidy/revisions", entrypoint: `${PACKAGE}/routes/revisions` },
+	{ pattern: "/_tidy/change", entrypoint: `${PACKAGE}/routes/change` }
 ] as const;
 
 /**

package/src/routes/change.ts

@@ -0,0 +1,60 @@
+/**
+ * /_tidy/change: a change request from the signed-in person on the staging
+ * site, handed to the platform through the control plane with the site's
+ * own secret. The Astro session is the gate; the person's name and email
+ * come from the site's user record.
+ *
+ *   GET                       → { name, email } of the signed-in person
+ *   POST { body, pageUrl? }  → { ok, changeId }
+ */
+import type { APIRoute } from "astro";
+import { isSafeLocalPath, json, readJson } from "../lib/http";
+import { methodNotAllowed, platformRoute } from "./_shared";
+
+export const prerender = false;
+
+interface ControlEnv {
+	TIDY_CONTROL_ORIGIN?: unknown;
+	TIDY_SITE_ID?: unknown;
+	TIDY_PLATFORM_SECRET?: unknown;
+	PLATFORM?: { fetch(input: string, init?: RequestInit): Promise<Response> };
+}
+
+export const POST: APIRoute = platformRoute(
+	async (context, deps, rawEnv) => {
+		const session = context.session ? ((await context.session.get("user")) as { id?: string } | null) : null;
+		if (!session?.id) return new Response("Unauthorized", { status: 401 });
+		const env = rawEnv as ControlEnv;
+		const origin = env.TIDY_CONTROL_ORIGIN;
+		const siteId = env.TIDY_SITE_ID;
+		const secret = env.TIDY_PLATFORM_SECRET;
+		const platform = env.PLATFORM;
+		if (!platform || typeof origin !== "string" || typeof siteId !== "string" || typeof secret !== "string") return json({ error: "not configured" }, 503);
+		const input = await readJson<{ body?: unknown; pageUrl?: unknown }>(context.request);
+		const body = typeof input.body === "string" ? input.body.trim() : "";
+		if (!body) return json({ error: "Say what you would like changed." }, 400);
+		const pageUrl = isSafeLocalPath(input.pageUrl) ? input.pageUrl : null;
+		const user = await deps.store.findUserById(session.id);
+		const r = await platform.fetch(`${origin.replace(/\/+$/, "")}/sites/${encodeURIComponent(siteId)}/changes`, {
+			method: "POST",
+			headers: { authorization: `Bearer ${secret}`, "content-type": "application/json" },
+			body: JSON.stringify({ body: body.slice(0, 10_000), pageUrl, requester: user ? { name: user.name, email: user.email } : null })
+		});
+		const j = (await r.json().catch(() => ({}))) as Record<string, unknown>;
+		return json(r.ok ? { ok: true, changeId: j.changeId ?? null } : { error: (j.error as string) ?? "The request could not be sent." }, r.ok ? 200 : 502, { "cache-control": "no-store" });
+	},
+	{ requireBearer: false }
+);
+
+/** Who is signed in, for the panel's greeting: { name, email } or 401. */
+export const GET: APIRoute = platformRoute(
+	async (context, deps) => {
+		const session = context.session ? ((await context.session.get("user")) as { id?: string } | null) : null;
+		if (!session?.id) return new Response("Unauthorized", { status: 401 });
+		const user = await deps.store.findUserById(session.id);
+		return json({ name: user?.name ?? null, email: user?.email ?? null }, 200, { "cache-control": "no-store" });
+	},
+	{ requireBearer: false }
+);
+
+export const ALL = methodNotAllowed("GET, POST");

package/src/version.ts

@@ -1,3 +1,3 @@
 /** Kept in step with package.json by the release checklist in MAINTAINING.md. */
-export const VERSION = "0.10.7";
+export const VERSION = "0.10.9";
 export const PLUGIN_ID = "tidy-platform";