@tideworthy/tidysites-platform 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # 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.

package/README.md

@@ -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.1",
+	"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;

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