@tideworthy/tidysites-platform 0.10.2 → 0.10.3

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.10.3
+
+- Editor: one bar on the staging site for everyone. A visitor gets Sign in to edit, which goes through the platform's door for the site (`<control>/sites/<id>/sign-in?back=`) and comes back signed in; a signed-in editor gets Edit and the controls as before. The bar is taller, named "Staging website" with an amber edge and a line on what staging is. The publish crawl never sees it.
+
 ## 0.10.2
 
 - Editor: the Revisions list starts after the newest publish, which is what is live now and has nothing to view or restore; a deep link to it opens the list. Inside the revision viewer EmDash's pill is hidden along with the bar.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tideworthy/tidysites-platform",
-	"version": "0.10.2",
+	"version": "0.10.3",
 	"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

@@ -1,9 +1,10 @@
 ---
 /**
  * The Tideworthy on-site editor. Mount it from the layout on every page; it
- * renders nothing for a visitor and, for a signed-in editor, a bar across the
- * top of the page: "Edit" while editing is off, the editor's controls while
- * it is on (the `emdash-edit-mode` cookie, set and cleared by /_tidy/edit).
+ * renders one bar across the top of the staging site for everyone: Sign in
+ * for a visitor, "Edit" for a signed-in editor while editing is off, the
+ * editor's controls while it is on (the `emdash-edit-mode` cookie, set and
+ * cleared by /_tidy/edit). The live site, a crawl of staging, never has it.
  * 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
@@ -16,6 +17,7 @@
  * height) so a template's sticky header can sit below it.
  */
 import type { Block, BlockTypeSchema } from "./ops";
+import { workerEnv } from "../lib/env";
 
 interface Props {
 	collection?: string;
@@ -34,25 +36,34 @@ const { collection, id, field = "sections", blocks, value, records = [], label =
 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;
+// A visitor on the staging site (sessions exist only there) gets a slim bar
+// with Sign in: the platform door signs them in as what they are there and
+// sends them back here. The publish crawl never sees it.
+const env = await workerEnv();
+const signInUrl =
+	!signedIn && Astro.session && Astro.request.headers.get("user-agent") !== "tidysites-publish" && typeof env?.TIDY_CONTROL_ORIGIN === "string" && typeof env?.TIDY_SITE_ID === "string"
+		? `${env.TIDY_CONTROL_ORIGIN.replace(/\/+$/, "")}/sites/${encodeURIComponent(env.TIDY_SITE_ID)}/sign-in?back=${encodeURIComponent(here)}`
+		: null;
 const toggle = (on: boolean) => `/_tidy/edit?on=${on ? 1 : 0}&to=${encodeURIComponent(here)}`;
 // Any entry page is editable: a sections page gets the frames and the picker,
 // an article page gets the bar (Publish, Business details, Done) over EmDash's
 // inline prose editing. One editor on the site, never two.
 const editable = active && Boolean(collection && id);
 const config = editable ? JSON.stringify({ collection, id, field, blocks: blocks ?? [], value: value ?? [], records, done: toggle(false) }) : null;
-const htmlClass = !signedIn ? "" : !active ? "tidy-has-bar tidy-idle" : "tidy-has-bar";
+const htmlClass = !signedIn ? (signInUrl ? "tidy-has-bar tidy-idle" : "") : !active ? "tidy-has-bar tidy-idle" : "tidy-has-bar";
 ---
-{signedIn && (
+{(signedIn || signInUrl) && (
 	<>
 		<div class="tidy-bar" id="tidy-bar" role="region" aria-label="Site editing">
-			<span class="tidy-bar-label">{label}</span>
+			<span class="tidy-bar-label"><span class="tidy-bar-dot" aria-hidden="true"></span>{label} website<span class="tidy-bar-note">A private copy for working on it. Visitors see the live website.</span></span>
 			<div class="tidy-bar-actions" id="tidy-bar-actions">
-				{!active && <a class="tidy-btn tidy-btn-primary" href={toggle(true)}>Edit</a>}
-				{active && !editable && <a class="tidy-btn" href={toggle(false)}>Done</a>}
+				{!signedIn && <a class="tidy-btn tidy-btn-primary" href={signInUrl!}>Sign in to edit</a>}
+				{signedIn && !active && <a class="tidy-btn tidy-btn-primary" href={toggle(true)}>Edit</a>}
+				{signedIn && active && !editable && <a class="tidy-btn" href={toggle(false)}>Done</a>}
 			</div>
 		</div>
 		<script is:inline define:vars={{ htmlClass }}>document.documentElement.className += " " + htmlClass;</script>
-		<script src="./revisions.ts"></script>
+		{signedIn && <script src="./revisions.ts"></script>}
 	</>
 )}
 {config && (
@@ -64,10 +75,13 @@ const htmlClass = !signedIn ? "" : !active ? "tidy-has-bar tidy-idle" : "tidy-ha
 <style is:global>
 	/* EmDash's own pill never shows under the bar; its inline prose editing keeps working underneath. */
 	html.tidy-has-bar #emdash-toolbar { display: none !important; }
-	html.tidy-has-bar { --tidy-bar: 44px; }
+	html.tidy-has-bar { --tidy-bar: 52px; }
 	html.tidy-has-bar body { padding-top: var(--tidy-bar); }
-	.tidy-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--tidy-bar, 44px); z-index: 2147483000; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; box-sizing: border-box; background: #17211c; color: #fff; font: 500 13px/1 system-ui, sans-serif; box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 6px 20px rgba(0,0,0,.18); }
-	.tidy-bar-label { opacity: .7; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
+	.tidy-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--tidy-bar, 52px); z-index: 2147483000; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; box-sizing: border-box; background: #17211c; color: #fff; font: 500 13px/1 system-ui, sans-serif; border-top: 3px solid #f0b429; box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 6px 20px rgba(0,0,0,.18); }
+	.tidy-bar-label { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 600; }
+	.tidy-bar-dot { width: 9px; height: 9px; border-radius: 50%; background: #f0b429; box-shadow: 0 0 0 3px rgba(240,180,41,.25); flex: none; }
+	.tidy-bar-note { font-weight: 400; font-size: 13px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+	@media (max-width: 720px) { .tidy-bar-note { display: none; } }
 	.tidy-bar-actions { display: flex; align-items: center; gap: 8px; }
 	.tidy-bar-actions a { text-decoration: none; }
 	.tidy-bar .tidy-btn { padding: 6px 12px; }

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