@tideworthy/tidysites-platform 0.10.12 → 0.10.14

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.10.14
+
+- Editor bar: Edit, Done and Sign in to edit show a spinner and what they are doing until the page comes back.
+
+## 0.10.13
+
+- Editor: the request panel opens at once; who is signed in is read when the page loads and the greeting fills in. The middleware keeps only the noindex header; robots.txt and the sitemap for staging are the control plane's.
+
 ## 0.10.12
 
 - The staging site is never indexed: every response carries `X-Robots-Tag: noindex, nofollow`, robots.txt disallows everything and the sitemap answers 404. The publish crawl still gets the real robots.txt and sitemap for the live copy.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tideworthy/tidysites-platform",
-	"version": "0.10.12",
+	"version": "0.10.14",
 	"description": "The Tidysites platform integration for EmDash sites: bootstrap, sessions, maintenance, health, and publish hooks under /_tidy/*.",
 	"license": "MIT",
 	"type": "module",

package/src/editor/TidyEditor.astro

@@ -57,12 +57,23 @@ const htmlClass = !signedIn ? (signInUrl ? "tidy-has-bar tidy-idle" : "") : !act
 		<div class="tidy-bar" id="tidy-bar" role="region" aria-label="Site editing">
 			<span class="tidy-bar-label"><span class="tidy-bar-dot" aria-hidden="true"></span>{label} website<span class="tidy-bar-note">A private copy to see working changes on the website, not publicly accessible.</span></span>
 			<div class="tidy-bar-actions" id="tidy-bar-actions">
-				{!signedIn && <a class="tidy-btn tidy-btn-primary" href={signInUrl!}>Sign in to edit</a>}
-				{signedIn && !active && <a class="tidy-btn" href={toggle(true)}>Edit</a>}
-				{signedIn && active && !editable && <a class="tidy-btn" href={toggle(false)}>Done</a>}
+				{!signedIn && <a class="tidy-btn tidy-btn-primary" href={signInUrl!} data-tidy-busy="Signing in">Sign in to edit</a>}
+				{signedIn && !active && <a class="tidy-btn" href={toggle(true)} data-tidy-busy="Opening the editor">Edit</a>}
+				{signedIn && active && !editable && <a class="tidy-btn" href={toggle(false)} data-tidy-busy="Closing the editor">Done</a>}
 			</div>
 		</div>
 		<script is:inline define:vars={{ htmlClass }}>document.documentElement.className += " " + htmlClass;</script>
+		<script is:inline>
+			// A bar button that reloads the page shows it is working until the new page arrives.
+			document.querySelectorAll("#tidy-bar a[data-tidy-busy]").forEach((a) => {
+				a.addEventListener("click", () => {
+					if (a.classList.contains("tidy-busy")) return;
+					a.classList.add("tidy-busy");
+					a.setAttribute("aria-busy", "true");
+					a.innerHTML = '<span class="tidy-spinner" aria-hidden="true"></span>' + a.getAttribute("data-tidy-busy");
+				});
+			});
+		</script>
 		{signedIn && <script src="./revisions.ts"></script>}
 		{signedIn && <script src="./request.ts"></script>}
 	</>
@@ -110,6 +121,9 @@ const htmlClass = !signedIn ? (signInUrl ? "tidy-has-bar tidy-idle" : "") : !act
 	.tidy-btn-primary { background: #2b7fd1; border-color: #2b7fd1; color: #fff; }
 	.tidy-btn-primary:hover { background: #2470bd; }
 	.tidy-btn-danger:hover { background: #b3261e; border-color: #b3261e; }
+	.tidy-busy { pointer-events: none; opacity: .85; display: inline-flex; align-items: center; gap: 8px; }
+	.tidy-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: tidy-spin .7s linear infinite; }
+	@keyframes tidy-spin { to { transform: rotate(360deg); } }
 	.tidy-btn-go { background: #1f9d55; border-color: #1f9d55; color: #fff; }
 	.tidy-btn-go:hover { background: #1a8a4a; }
 	.tidy-btn-sm { padding: 3px 8px; font-size: 12px; }

package/src/editor/request.ts

@@ -27,16 +27,27 @@ export function mountRequestChange(): void {
 	function close() {
 		panel.hidden = true;
 		panel.replaceChildren();
+		greeting = null;
 	}
 
+	// Who is signed in, read once the page is up so the panel opens at once; the greeting fills in when it arrives.
 	let who: { name: string | null } | null = null;
 	const firstName = () => (who?.name ?? "").trim().split(/\s+/)[0] || "";
+	let greeting: HTMLElement | null = null;
+	const whoReady = fetch(ROUTE, { credentials: "same-origin" })
+		.then((r) => (r.ok ? r.json() : null))
+		.then((j) => {
+			who = (j as { name: string | null } | null) ?? null;
+			if (greeting && firstName()) greeting.textContent = `Hi ${firstName()},`;
+		})
+		.catch(() => undefined);
 
-	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;
+	function render() {
+		void whoReady;
 		const name = firstName();
+		greeting = el("h2", { text: name ? `Hi ${name},` : "Hi there," });
 		const head = el("div", { class: "tidy-panel-head" }, [
-			el("h2", { text: name ? `Hi ${name},` : "Hi there," }),
+			greeting,
 			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: "" });
@@ -61,7 +72,7 @@ export function mountRequestChange(): void {
 			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-head" }, [el("h2", { text: firstName() ? `Thanks, ${firstName()}.` : "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);

package/src/middleware.ts

@@ -1,36 +1,26 @@
 /**
  * Astro middleware registered by tidyPlatform(): the framing policy from
- * TIDY_FRAME_ANCESTORS, and no indexing of the staging site. This worker is
- * the staging site (the live site is a static copy served by its own small
- * worker), so every answer here carries noindex, robots.txt disallows
- * everything and the sitemap is gone. The publish crawl identifies itself
- * and gets the real robots.txt and sitemap, which is what the live copy
- * ships.
+ * TIDY_FRAME_ANCESTORS, and noindex on every page this worker serves. This
+ * worker is the staging site (the live site is a static copy served by its
+ * own small worker); the control plane in front of it answers robots.txt
+ * and the sitemap for staging hostnames. The publish crawl identifies
+ * itself and is left alone, so the live copy carries no noindex.
  */
 import type { MiddlewareHandler } from "astro";
 import { workerEnv } from "./lib/env";
 import { applyFramePolicy, frameAncestors } from "./lib/frame";
 
 const PUBLISH_CRAWL = "tidysites-publish";
-const NOINDEX = "noindex, nofollow";
 
 export const onRequest: MiddlewareHandler = async (context, next) => {
 	const crawl = context.request.headers.get("user-agent") === PUBLISH_CRAWL;
-	if (!crawl) {
-		const path = context.url.pathname;
-		if (path === "/robots.txt") {
-			return new Response("User-agent: *\nDisallow: /\n", { headers: { "content-type": "text/plain; charset=utf-8", "cache-control": "no-store", "x-robots-tag": NOINDEX } });
-		}
-		if (path === "/sitemap.xml" || path === "/sitemap-index.xml" || /^\/sitemap-\d+\.xml$/.test(path)) {
-			return new Response("Not found", { status: 404, headers: { "cache-control": "no-store", "x-robots-tag": NOINDEX } });
-		}
-	}
 	const response = await next();
 	const env = await workerEnv();
 	const ancestors = frameAncestors(env?.TIDY_FRAME_ANCESTORS);
+	if (ancestors.length === 0 && crawl) return response;
 	const apply = (headers: Headers) => {
 		if (ancestors.length > 0) applyFramePolicy(headers, ancestors);
-		if (!crawl) headers.set("x-robots-tag", NOINDEX);
+		if (!crawl) headers.set("x-robots-tag", "noindex, nofollow");
 	};
 	// Response headers can be immutable (static assets, redirects); rebuild when so.
 	try {

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.12";
+export const VERSION = "0.10.14";
 export const PLUGIN_ID = "tidy-platform";