@goodfellow-cms/admin 0.5.0 → 0.6.0

package/dist/plugin-protocol-DkvBDqsF.js

@@ -0,0 +1,119 @@
+//#region src/frame/channel.ts
+/**
+* Requests and events between the admin panel and a frame running the site's
+* code, over one `MessagePort`. The admin panel's side treats everything a
+* frame sends as untrusted: the site's blocks run there, and could send anything.
+*/
+/** The message the admin panel's page sends a frame once it has loaded, with the port to talk on. */
+const CONNECT_MESSAGE = "goodfellow:connect";
+/** A request the other side refused or couldn't answer. */
+var ChannelError = class extends Error {
+	name = "ChannelError";
+};
+function isMessage(data) {
+	if (typeof data !== "object" || data === null) return false;
+	const type = data.type;
+	return type === "request" || type === "response" || type === "event";
+}
+/** What an error says, as text: errors can't cross the port as they are. */
+function errorText(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+function createChannel(port, handlers = {}) {
+	const own = { ...handlers };
+	const pending = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Map();
+	let next = 1;
+	let closed = false;
+	port.onmessage = async (event) => {
+		const message = event.data;
+		if (!isMessage(message)) return;
+		if (message.type === "response") {
+			const waiting = pending.get(message.id);
+			if (!waiting) return;
+			pending.delete(message.id);
+			if (message.ok) waiting.resolve(message.result);
+			else waiting.reject(new ChannelError(message.error));
+			return;
+		}
+		if (message.type === "event") {
+			for (const listener of listeners.get(message.name) ?? []) listener(message.payload);
+			return;
+		}
+		const handler = typeof message.method === "string" ? Object.hasOwn(own, message.method) && own[message.method] : void 0;
+		if (!handler) {
+			port.postMessage({
+				type: "response",
+				id: message.id,
+				ok: false,
+				error: `No such request: ${message.method}`
+			});
+			return;
+		}
+		try {
+			const result = await handler(message.params);
+			if (!closed) port.postMessage({
+				type: "response",
+				id: message.id,
+				ok: true,
+				result
+			});
+		} catch (error) {
+			if (!closed) port.postMessage({
+				type: "response",
+				id: message.id,
+				ok: false,
+				error: errorText(error)
+			});
+		}
+	};
+	return {
+		call(method, params, transfer = []) {
+			if (closed) return Promise.reject(new ChannelError("The frame has closed."));
+			const id = next++;
+			return new Promise((resolve, reject) => {
+				pending.set(id, {
+					resolve,
+					reject
+				});
+				port.postMessage({
+					type: "request",
+					id,
+					method,
+					params
+				}, transfer);
+			});
+		},
+		emit(name, payload) {
+			if (!closed) port.postMessage({
+				type: "event",
+				name,
+				payload
+			});
+		},
+		on(name, listener) {
+			const set = listeners.get(name) ?? /* @__PURE__ */ new Set();
+			listeners.set(name, set);
+			set.add(listener);
+			return () => set.delete(listener);
+		},
+		handle(method, handler) {
+			own[method] = handler;
+			return () => {
+				if (own[method] === handler) delete own[method];
+			};
+		},
+		close() {
+			closed = true;
+			port.close();
+			for (const waiting of pending.values()) waiting.reject(new ChannelError("The frame has closed."));
+			pending.clear();
+		}
+	};
+}
+//#endregion
+//#region src/frame/plugin-protocol.ts
+/** A plugin's frame sends this to the admin panel's page once it's listening, and the page answers with a port. */
+const PLUGIN_READY_MESSAGE = "goodfellow:plugin-ready";
+//#endregion
+export { CONNECT_MESSAGE as n, createChannel as r, PLUGIN_READY_MESSAGE as t };

package/dist/plugin.d.ts

@@ -0,0 +1,5 @@
+import { PluginAdmin } from "@goodfellow-cms/core";
+//#region src/plugin.d.ts
+/** Starts a plugin's admin frame with its admin module's default export. */
+export declare function mountPluginFrame(admin: PluginAdmin): void;
+//#endregion

package/dist/plugin.js

@@ -0,0 +1,153 @@
+import { r as createChannel, t as PLUGIN_READY_MESSAGE } from "./plugin-protocol-DkvBDqsF.js";
+//#region src/plugin.ts
+/** Shows the admin panel's light or dark choice, as the admin panel's stylesheet reads it. */
+function applyTheme(choice) {
+	const root = document.documentElement;
+	if (choice === "system") delete root.dataset.gfaTheme;
+	else root.dataset.gfaTheme = choice;
+}
+function adminApi(channel, init) {
+	return {
+		plugin: init.plugin,
+		siteUrl: init.siteUrl,
+		read: (paths) => channel.call("read", { paths }),
+		readBytes: (path) => channel.call("readBytes", { path }),
+		list: (folder) => channel.call("list", { folder }),
+		publish: (changes, message) => channel.call("publish", {
+			changes,
+			message
+		}),
+		server: (path, request = {}) => channel.call("server", {
+			path,
+			...request
+		}),
+		navigate: (href) => {
+			channel.call("navigate", href).catch(() => {});
+		},
+		task: (id, input) => channel.call("task", {
+			id,
+			input: input ?? null
+		}),
+		secretsHelp: () => channel.call("secrets.help"),
+		openSecretsLink: (url) => {
+			channel.call("secrets.open", { url }).catch(() => {});
+		}
+	};
+}
+/** Opens an editor plugin's editor in the frame, giving the admin panel's page what it can do. */
+async function openEditor(admin, channel, init, element, api) {
+	const open = init.editor;
+	if (!admin.editor || !open) throw new Error(`${init.plugin.title} has no page editor.`);
+	let latest = open.data;
+	const session = {
+		...open,
+		change: (data, state) => {
+			latest = data;
+			channel.call("editor.change", {
+				data,
+				...state && { state }
+			}).catch(() => {});
+		},
+		chooseMedia: (kind, value) => channel.call("media.choose", {
+			kind,
+			value: value ?? ""
+		}),
+		sharePreview: (root) => channel.call("editor.sharePreview", { root }),
+		draw: (block) => channel.call("editor.draw", { block }),
+		styles: () => channel.call("editor.styles")
+	};
+	document.documentElement.classList.add("gfa-plugin-editor");
+	const controls = await admin.editor.mount(element, session, api) ?? {};
+	window.addEventListener("pagehide", () => controls.destroy?.());
+	return {
+		opened: {
+			set: typeof controls.set === "function",
+			undo: Boolean(controls.undo && controls.redo)
+		},
+		controls,
+		latest: () => latest
+	};
+}
+/** Starts a plugin's admin frame with its admin module's default export. */
+function mountPluginFrame(admin) {
+	document.documentElement.classList.add("gfa-plugin");
+	const element = document.getElementById("goodfellow-plugin") ?? document.body;
+	let connected = false;
+	const onMessage = (event) => {
+		const port = event.ports[0];
+		if (connected || event.source !== window.parent || !port) return;
+		if (event.data?.type !== "goodfellow:connect") return;
+		connected = true;
+		window.removeEventListener("message", onMessage);
+		const channel = createChannel(port);
+		let api;
+		let init;
+		let editor;
+		channel.handle("init", async (given) => {
+			init = given;
+			applyTheme(given.theme);
+			api = adminApi(channel, given);
+			if (given.mode === "editor") {
+				editor = await openEditor(admin, channel, given, element, api);
+				return editor.opened;
+			}
+			if (given.mode !== "screen") return;
+			const mount = given.screen && admin.screens && Object.hasOwn(admin.screens, given.screen) && admin.screens[given.screen];
+			if (!mount) throw new Error(`${given.plugin.title} has no screen called "${given.screen}".`);
+			const body = document.body;
+			let reported = 0;
+			new ResizeObserver(() => {
+				const height = Math.ceil(body.getBoundingClientRect().height);
+				if (height === reported) return;
+				reported = height;
+				channel.call("resize", { height }).catch(() => {});
+			}).observe(body);
+			const cleanup = await mount(element, api);
+			if (typeof cleanup === "function") window.addEventListener("pagehide", () => cleanup());
+		});
+		channel.handle("theme", (choice) => applyTheme(choice));
+		channel.handle("call", ({ method, args }) => {
+			const service = admin.services && Object.hasOwn(admin.services, method) && admin.services[method];
+			if (!service || !api) throw new Error(`No such service: ${method}`);
+			return service(Array.isArray(args) ? args : [], api);
+		});
+		const media = () => {
+			if (!admin.media || !api) throw new Error(`${init?.plugin.title ?? "This plugin"} doesn't keep media.`);
+			return {
+				storage: admin.media,
+				api
+			};
+		};
+		channel.handle("media.ready", () => {
+			const { storage, api } = media();
+			return storage.ready(api);
+		});
+		channel.handle("media.upload", ({ files }) => {
+			const { storage, api } = media();
+			return storage.upload(files, api);
+		});
+		channel.handle("media.remove", ({ addresses }) => {
+			const { storage, api } = media();
+			return storage.remove(addresses, api);
+		});
+		const opened = () => {
+			if (!editor) throw new Error(`${init?.plugin.title ?? "This plugin"}'s editor isn't open.`);
+			return editor;
+		};
+		channel.handle("editor.data", async () => {
+			const { controls, latest } = opened();
+			return controls.data ? await controls.data() : latest();
+		});
+		channel.handle("editor.set", async (data) => {
+			const { controls } = opened();
+			if (!controls.set) throw new Error("This editor doesn't take changes from outside.");
+			await controls.set(data);
+		});
+		channel.handle("editor.undo", () => opened().controls.undo?.());
+		channel.handle("editor.redo", () => opened().controls.redo?.());
+	};
+	window.addEventListener("message", onMessage);
+	window.parent.postMessage(PLUGIN_READY_MESSAGE, "*");
+}
+//#endregion
+export { mountPluginFrame };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodfellow-cms/admin",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Goodfellow's admin panel: a visual editor for a site's pages, layout and settings.",
   "keywords": [
     "goodfellow",
@@ -35,12 +35,18 @@
       "types": "./dist/editor.d.ts",
       "import": "./dist/editor.js"
     },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.js"
+    },
     "./styles.css": "./styles.css",
+    "./plugin.css": "./plugin.css",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
-    "styles.css"
+    "styles.css",
+    "plugin.css"
   ],
   "dependencies": {
     "@codemirror/commands": "6.11.1",
@@ -50,10 +56,10 @@
     "@codemirror/state": "6.7.6",
     "@codemirror/theme-one-dark": "6.1.3",
     "@codemirror/view": "6.43.14",
-    "@goodfellow-cms/ai": "0.5.0",
-    "@goodfellow-cms/core": "0.5.0",
-    "@goodfellow-cms/react": "0.5.0",
-    "@goodfellow-cms/registry": "0.5.0",
+    "@goodfellow-cms/ai": "0.6.0",
+    "@goodfellow-cms/core": "0.6.0",
+    "@goodfellow-cms/react": "0.6.0",
+    "@goodfellow-cms/registry": "0.6.0",
     "codemirror": "6.0.2",
     "lucide-react": "1.52.0",
     "turndown": "7.2.4",

package/plugin.css

@@ -0,0 +1,215 @@
+/*
+ * The base look of a plugin's admin frame: the admin panel's colors, as
+ * `--gfa-*` custom properties that follow its light or dark choice, its
+ * font, and plain buttons, fields and headings. A plugin's screens can use
+ * the properties in styles of their own.
+ */
+:root {
+  color-scheme: light dark;
+}
+
+:root {
+  --gfa-bg: light-dark(#f8fafc, #0b1120);
+  --gfa-surface: light-dark(#ffffff, #111827);
+  --gfa-text: light-dark(#0f172a, #e2e8f0);
+  --gfa-muted: light-dark(#64748b, #94a3b8);
+  --gfa-border: light-dark(#e2e8f0, #1f2937);
+  --gfa-input-border: light-dark(#cbd5e1, #475569);
+  --gfa-accent: light-dark(#2563eb, #60a5fa);
+  --gfa-accent-text: light-dark(#ffffff, #0b1120);
+  --gfa-current-bg: light-dark(#eff6ff, #172554);
+  --gfa-danger: light-dark(#dc2626, #f87171);
+  --gfa-danger-border: light-dark(#fecaca, #7f1d1d);
+  --gfa-success-bg: light-dark(#ecfdf5, #052e1c);
+  --gfa-success-text: light-dark(#065f46, #6ee7b7);
+  --gfa-success-border: light-dark(#a7f3d0, #065f46);
+  --gfa-published-bg: light-dark(#047857, #34d399);
+  --gfa-published-text: light-dark(#ffffff, #022c22);
+  --gfa-error-bg: light-dark(#fef2f2, #3b0d0d);
+  --gfa-error-text: light-dark(#991b1b, #fca5a5);
+  --gfa-warning-bg: light-dark(#fef3c7, #451a03);
+  --gfa-warning-text: light-dark(#92400e, #fde68a);
+  --gfa-demo-bg: light-dark(#fef9c3, #422006);
+  --gfa-demo-border: light-dark(#fde68a, #854d0e);
+  --gfa-demo-text: light-dark(#713f12, #fde68a);
+  --gfa-draft-bg: light-dark(#eff6ff, #172554);
+  --gfa-draft-border: light-dark(#bfdbfe, #1e40af);
+  --gfa-draft-text: light-dark(#1e3a8a, #dbeafe);
+  --gfa-checker: light-dark(#f1f5f9, #1e293b);
+  --gfa-checker-alt: light-dark(#ffffff, #0f172a);
+  --gfa-tooltip-bg: light-dark(#0f172a, #e2e8f0);
+  --gfa-tooltip-text: light-dark(#f8fafc, #0b1120);
+  --gfa-radius: 6px;
+  --gfa-topbar-height: 52px;
+  --gfa-code-active-line: light-dark(rgb(37 99 235 / 0.06), rgb(96 165 250 / 0.08));
+  --gfa-code-selection: light-dark(rgb(37 99 235 / 0.2), rgb(96 165 250 / 0.3));
+}
+
+:root[data-gfa-theme="light"] {
+  color-scheme: light;
+}
+
+:root[data-gfa-theme="dark"] {
+  color-scheme: dark;
+}
+
+html,
+body {
+  margin: 0;
+  background: var(--gfa-bg);
+  color: var(--gfa-text);
+  font:
+    15px / 1.5 ui-sans-serif,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    sans-serif;
+}
+
+/* Spaced as the admin panel's other screens, since a screen's frame fills the screen. */
+body {
+  padding: 24px;
+  max-width: 960px;
+}
+
+/* Nothing in a screen's frame scrolls on its own: the frame grows with it. */
+html {
+  overflow: hidden;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+h1,
+h2,
+h3 {
+  line-height: 1.25;
+  margin: 0 0 0.75rem;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 16px;
+}
+
+h2 {
+  font-size: 17px;
+}
+
+h3 {
+  font-size: 15px;
+  margin-top: 1.25rem;
+}
+
+section {
+  margin-top: 2rem;
+}
+
+p {
+  margin: 0 0 0.75rem;
+}
+
+a {
+  color: var(--gfa-accent);
+}
+
+label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+  background: var(--gfa-surface);
+  border: 1px solid var(--gfa-input-border);
+  border-radius: var(--gfa-radius);
+  padding: 0.4rem 0.6rem;
+  width: 100%;
+  max-width: 32rem;
+}
+
+button {
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--gfa-accent-text);
+  background: var(--gfa-accent);
+  border: 1px solid var(--gfa-accent);
+  border-radius: var(--gfa-radius);
+  padding: 0.4rem 0.9rem;
+}
+
+button:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+:focus-visible {
+  outline: 2px solid var(--gfa-accent);
+  outline-offset: 2px;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  width: auto;
+  margin: 0 0.4rem 0 0;
+}
+
+small,
+.gfa-hint {
+  display: block;
+  color: var(--gfa-muted);
+  font-size: 13px;
+  margin-top: 0.25rem;
+  max-width: 40rem;
+}
+
+ol,
+ul {
+  padding-left: 1.25rem;
+  margin: 0 0 0.75rem;
+  max-width: 44rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+code,
+pre {
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  font-size: 13px;
+}
+
+pre {
+  margin: 0.4rem 0 0;
+  padding: 0.5rem 0.75rem;
+  max-width: 40rem;
+  overflow-x: auto;
+  background: var(--gfa-surface);
+  border: 1px solid var(--gfa-border);
+  border-radius: var(--gfa-radius);
+}
+
+details {
+  margin: 0.75rem 0;
+}
+
+summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+
+/* An editor plugin's frame: its editor fills the frame, which the admin panel sizes. */
+html.gfa-plugin-editor,
+html.gfa-plugin-editor body,
+html.gfa-plugin-editor #goodfellow-plugin {
+  height: 100%;
+}