@tideworthy/tidysites-platform 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.6.1
+
+- Editor: EmDash's toolbar is hidden while editing is off, so the Edit pill is the one control on the page. It still shows on article pages in edit mode, where EmDash's inline editing needs it.
+
+## 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.1",
 	"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,54 @@
 ---
 /**
- * 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. EmDash's own
+ * toolbar shows only there: while editing is off the pill is the one control.
  */
 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>
+		<script is:inline>document.documentElement.classList.add("tidy-idle");</script>
+	</>
+)}
+{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, .tidy-idle #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 +94,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.1";
 export const PLUGIN_ID = "tidy-platform";