@tideworthy/tidysites-platform 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.6.0
+
+- `GET /_tidy/edit?on=1|0&to=/path`: switches on-site editing on or off for the signed-in editor (the `emdash-edit-mode` cookie) and returns to the page. No bearer; a visitor without a session is sent back unchanged.
+- Editor: mounts itself. The layout renders `<TidyEditor>` on every page; it shows nothing to a visitor, an "Edit" pill to a signed-in editor, and the editor once editing is on. A page without blocks gets the pill only (EmDash's inline editing handles its prose). The pill gains "Done". Every prop is optional now; EmDash's toolbar is hidden only while this editor runs (`html.tidy-editing`).
+
+## 0.5.1
+
+- Editor: a record region nested inside a section (a service card in the services grid) gets its own "Edit details" chip; clicking it edits the record instead of following the card's link, and leaving it hands the chip back to the section.
+
 ## 0.5.0
 
 - Editor: image picker over the site's media library with upload, for block fields whose id names an image URL (`imageUrl`, `photoUrl`, …) and for record fields of kind image.

package/README.md

@@ -55,7 +55,7 @@ const editMode = Astro.cookies.get("emdash-edit-mode")?.value === "true";
 {editMode && <TidyEditor collection="pages" id={page.data.id} blocks={blockSchema} value={content} />}
 ```
 
-The template renders the block list inside `<div data-tidy-blocks>` and each custom block inside `<div data-tidy-block={_key} data-tidy-type={_type}>`, and passes `PortableText` a copy of the array (`[...blocks]`) so EmDash's inline editor does not mount on it. `blocks` is the plugin definition's `portableTextBlocks`. Hovering a block shows a chip (Edit, move, add below, remove); Edit opens a panel built from the block's fields; Save writes a draft through EmDash's content API with the signed-in editor's session and reloads; Publish publishes every entry saved in the session. A text field whose id ends in `imageUrl` (or `photoUrl`, `logoUrl`) gets an image picker over the media library with upload. Records: wrap a region in `data-tidy-record="services" data-tidy-record-id="…" data-tidy-record-label="Service details"` and pass `records` to the component; the form comes from EmDash's manifest and saves publish at once. Pass the business record in `records` and it is always one click away in the pill. On these pages EmDash's toolbar is hidden and its inline editing is off; article bodies keep EmDash's inline editor by passing the original array and not mounting this component.
+The template renders the block list inside `<div data-tidy-blocks>` and each custom block inside `<div data-tidy-block={_key} data-tidy-type={_type}>`, and passes `PortableText` a copy of the array (`[...blocks]`) so EmDash's inline editor does not mount on it. `blocks` is the plugin definition's `portableTextBlocks`. Hovering a block shows a chip (Edit, move, add below, remove); Edit opens a panel built from the block's fields; Save writes a draft through EmDash's content API with the signed-in editor's session and reloads; Publish publishes every entry saved in the session. A text field whose id ends in `imageUrl` (or `photoUrl`, `logoUrl`) gets an image picker over the media library with upload. Records: wrap a region in `data-tidy-record="services" data-tidy-record-id="…" data-tidy-record-label="Service details"` and pass `records` to the component; the form comes from EmDash's manifest and saves publish at once. Pass the business record in `records` and it is always one click away in the pill. A section that lists records (a services grid) wraps each card in the same `data-tidy-record` attributes, so the card edits its record and the section's chip edits the section. On these pages EmDash's toolbar is hidden and its inline editing is off; article bodies keep EmDash's inline editor by passing the original array and not mounting this component.
 
 ## Bindings the routes read
 
@@ -96,6 +96,10 @@ Mints a one-time sign-in link for a person the platform has already authenticate
 
 The browser lands here. Signs the user in (an Astro session, exactly as EmDash's own login does), sets or clears the visual-editing cookie, and redirects with 303 to the requested path. A link can be used once. Expired, reused, or unknown links get a 410 page.
 
+### `GET /_tidy/edit?on=1|0&to=/path`
+
+No bearer. For the browser session the claim signed in: sets (`on=1`) or clears the `emdash-edit-mode` cookie and answers 303 to `to` (a local path; anything else becomes `/`). Without a signed-in session it answers the same 303 and changes nothing. The editor's pill links here.
+
 ### `GET /_tidy/health`
 
 `{ ok, plugin, setupComplete, siteTitle, siteUrl, migrations: { applied, pending }, time }`. `ok` is false and the status is 503 when migrations are pending.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tideworthy/tidysites-platform",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"description": "The Tidysites platform integration for EmDash sites: bootstrap, sessions, maintenance, health, and publish hooks under /_tidy/*.",
 	"license": "MIT",
 	"type": "module",
@@ -25,6 +25,7 @@
 		"./routes/bootstrap": "./src/routes/bootstrap.ts",
 		"./routes/session": "./src/routes/session.ts",
 		"./routes/session-claim": "./src/routes/session-claim.ts",
+		"./routes/edit": "./src/routes/edit.ts",
 		"./routes/health": "./src/routes/health.ts",
 		"./routes/rotate-token": "./src/routes/rotate-token.ts",
 		"./routes/fill": "./src/routes/fill.ts",

package/src/editor/TidyEditor.astro

@@ -1,31 +1,50 @@
 ---
 /**
- * The Tideworthy on-site editor for block-built pages. Render it from the
- * layout when the page is in edit mode, with the entry the page shows, the
- * block schemas the template declares, and the block list as rendered. The
- * template frames each custom block with `data-tidy-block` (its key) and
- * `data-tidy-type`, and wraps the list in `data-tidy-blocks`. A record region
- * (`data-tidy-record`, `data-tidy-record-id`, `data-tidy-record-label`) gets an
- * "Edit details" chip whose form comes from EmDash's manifest.
+ * The Tideworthy on-site editor. Mount it from the layout on every page; it
+ * renders nothing for a visitor, an "Edit" pill for a signed-in editor, and
+ * the editor itself once editing is on (the `emdash-edit-mode` cookie, set
+ * and cleared by /_tidy/edit from the pill). Block pages hand it the entry
+ * they show, the block schemas the template declares, and the block list as
+ * rendered; the template frames each custom block with `data-tidy-block`
+ * (its key) and `data-tidy-type`, and wraps the list in `data-tidy-blocks`.
+ * A record region (`data-tidy-record`, `data-tidy-record-id`,
+ * `data-tidy-record-label`) gets an "Edit details" chip whose form comes
+ * from EmDash's manifest. A page without blocks (an article) gets the pill
+ * only; EmDash's inline editing handles its prose in edit mode.
  */
 import type { Block, BlockSchema } from "./ops";
 
 interface Props {
-	collection: string;
-	id: string;
+	collection?: string;
+	id?: string;
 	field?: string;
-	blocks: BlockSchema[];
-	value: Block[];
+	blocks?: BlockSchema[];
+	value?: Block[] | null;
 	/** Records reachable from the pill (the business) or from `[data-tidy-record]` regions on the page. */
 	records?: Array<{ collection: string; id: string; label: string }>;
 }
 const { collection, id, field = "content", blocks, value, records = [] } = Astro.props;
-const config = JSON.stringify({ collection, id, field, blocks, value, records });
+const signedIn = Boolean(Astro.session ? await Astro.session.get("user") : null);
+const active = Astro.cookies.get("emdash-edit-mode")?.value === "true";
+const here = Astro.url.pathname + Astro.url.search;
+const toggle = (on: boolean) => `/_tidy/edit?on=${on ? 1 : 0}&to=${encodeURIComponent(here)}`;
+const editable = active && Boolean(collection && id && blocks && value);
+const config = editable ? JSON.stringify({ collection, id, field, blocks, value, records, done: toggle(false) }) : null;
 ---
-<script type="application/json" id="tidy-editor-config" set:html={config.replace(/</g, "\\u003c")} />
-<script src="./runtime.ts"></script>
+{signedIn && !active && (
+	<div class="tidy-status tidy-status-idle"><a class="tidy-btn tidy-btn-primary" href={toggle(true)}>Edit</a></div>
+)}
+{signedIn && active && !editable && (
+	<div class="tidy-status"><span>Editing</span><a class="tidy-btn" href={toggle(false)}>Done</a></div>
+)}
+{config && (
+	<>
+		<script type="application/json" id="tidy-editor-config" set:html={config.replace(/</g, "\\u003c")} />
+		<script src="./runtime.ts"></script>
+	</>
+)}
 <style is:global>
-	#emdash-toolbar { display: none !important; }
+	.tidy-editing #emdash-toolbar { display: none !important; }
 	[data-tidy-record] { outline: 2px dashed transparent; outline-offset: 4px; transition: outline-color 120ms; cursor: pointer; }
 	[data-tidy-record]:hover, [data-tidy-record].tidy-active { outline-color: #2b7fd1; }
 	.tidy-image-preview { display: grid; place-items: center; min-height: 96px; border: 1px solid #d3dcd6; border-radius: 6px; background: #f6f7f5; overflow: hidden; }
@@ -71,4 +90,6 @@ const config = JSON.stringify({ collection, id, field, blocks, value, records })
 	.tidy-add-item:hover { border-color: #2b7fd1; background: rgba(43,127,209,.06); }
 	.tidy-add-item span { color: #4a5851; font-size: 13px; }
 	.tidy-status { position: fixed; left: 16px; bottom: 16px; z-index: 2147483000; display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: #17211c; color: #fff; border-radius: 999px; font: 500 13px system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
+	.tidy-status a { text-decoration: none; }
+	.tidy-status-idle { padding: 4px; }
 </style>

package/src/editor/runtime.ts

@@ -32,6 +32,8 @@ interface Config {
 	blocks: BlockSchema[];
 	value: Block[];
 	records?: RecordRef[];
+	/** Where "Done" goes: /_tidy/edit switching editing off and returning here. */
+	done?: string;
 }
 
 interface ManifestField {
@@ -88,6 +90,7 @@ export function start(config: Config): void {
 	const frames = () => Array.from(document.querySelectorAll<HTMLElement>("[data-tidy-block]"));
 
 	// EmDash's inline editor is for prose pages; here the sections and records own their fields.
+	document.documentElement.classList.add("tidy-editing");
 	document.querySelectorAll("[data-emdash-ref]").forEach((n) => n.removeAttribute("data-emdash-ref"));
 
 	// --- pending publishes ---------------------------------------------------
@@ -99,7 +102,8 @@ export function start(config: Config): void {
 	const statusText = el("span");
 	const bizBtn = el("button", { type: "button", class: "tidy-btn", text: "Business details" });
 	const publishBtn = el("button", { type: "button", class: "tidy-btn tidy-btn-primary", text: "Publish" });
-	status.append(statusText, bizBtn, publishBtn);
+	const doneBtn = el("a", { class: "tidy-btn", href: config.done ?? `/_tidy/edit?on=0&to=${encodeURIComponent(location.pathname + location.search)}`, text: "Done" });
+	status.append(statusText, bizBtn, publishBtn, doneBtn);
 	document.body.append(status);
 	const business = (config.records ?? []).find((r) => r.collection === "business");
 	bizBtn.hidden = !business;
@@ -202,6 +206,8 @@ export function start(config: Config): void {
 	for (const f of frames()) {
 		f.addEventListener("mouseenter", () => showBlockChip(f));
 		f.addEventListener("click", (e) => {
+			// A record listed inside the section (a service card) handles its own click.
+			if ((e.target as HTMLElement).closest("[data-tidy-record]")) return;
 			if (isInteractive(e.target)) return;
 			e.preventDefault();
 			showBlockChip(f);
@@ -209,14 +215,21 @@ export function start(config: Config): void {
 		});
 	}
 	for (const r of Array.from(document.querySelectorAll<HTMLElement>("[data-tidy-record]"))) {
+		const frame = r.parentElement?.closest<HTMLElement>("[data-tidy-block]") ?? null;
 		r.addEventListener("mouseenter", () => showRecordChip(r));
+		// Leaving a card inside a section hands the chip back to the section.
+		if (frame) r.addEventListener("mouseleave", () => showBlockChip(frame));
 		r.addEventListener("click", (e) => {
-			if (isInteractive(e.target)) return;
+			// Cards are often links; in edit mode a click edits instead of navigating.
+			if ((e.target as HTMLElement).closest("button,input,select,textarea,label")) return;
 			e.preventDefault();
+			e.stopPropagation();
 			showRecordChip(r);
 			void openRecord({ collection: r.dataset.tidyRecord ?? "", id: r.dataset.tidyRecordId ?? "", label: r.dataset.tidyRecordLabel ?? "" });
 		});
 	}
+	// The chip sits outside every frame; hovering it must not count as leaving.
+	chip.addEventListener("mouseenter", () => current?.classList.add("tidy-active"));
 	bEdit.addEventListener("click", () => {
 		if (!current) return;
 		if (current.dataset.tidyBlock) openBlock(current.dataset.tidyBlock);

package/src/index.ts

@@ -25,6 +25,7 @@ export const PLATFORM_ROUTES = [
 	{ pattern: "/_tidy/bootstrap", entrypoint: `${PACKAGE}/routes/bootstrap` },
 	{ pattern: "/_tidy/session", entrypoint: `${PACKAGE}/routes/session` },
 	{ pattern: "/_tidy/session/claim", entrypoint: `${PACKAGE}/routes/session-claim` },
+	{ pattern: "/_tidy/edit", entrypoint: `${PACKAGE}/routes/edit` },
 	{ pattern: "/_tidy/health", entrypoint: `${PACKAGE}/routes/health` },
 	{ pattern: "/_tidy/rotate-token", entrypoint: `${PACKAGE}/routes/rotate-token` },
 	{ pattern: "/_tidy/fill", entrypoint: `${PACKAGE}/routes/fill` },

package/src/routes/edit.ts

@@ -0,0 +1,26 @@
+/**
+ * GET /_tidy/edit?on=1|0&to=/path: switch on-site editing on or off for the
+ * signed-in editor and go back to the page. No bearer: the browser calls it
+ * from the editor's pill. Anyone without a session is sent back unchanged.
+ */
+import type { APIRoute } from "astro";
+import { isSafeLocalPath } from "../lib/http";
+import { methodNotAllowed } from "./_shared";
+
+export const prerender = false;
+
+const EDIT_COOKIE = "emdash-edit-mode";
+
+export const GET: APIRoute = async (context) => {
+	const to = context.url.searchParams.get("to");
+	const back = isSafeLocalPath(to) ? to : "/";
+	const headers = { location: back, "cache-control": "no-store" };
+	const user = context.session ? await context.session.get("user") : null;
+	if (!user) return new Response(null, { status: 303, headers });
+	const secure = context.url.protocol === "https:";
+	if (context.url.searchParams.get("on") === "1") context.cookies.set(EDIT_COOKIE, "true", { path: "/", sameSite: "lax", secure });
+	else context.cookies.delete(EDIT_COOKIE, { path: "/" });
+	return new Response(null, { status: 303, headers });
+};
+
+export const ALL = methodNotAllowed("GET");

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