@backmatter/next 0.0.20 → 0.0.22

package/src/site-editor.tsx

@@ -0,0 +1,341 @@
+// packages/next/src/site-editor.tsx
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { startTransition, useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { subscribeSiteDoc } from "./site-doc-bridge";
+import { readSiteDoc, sameSiteDoc, type SiteDocRef } from "./site-doc";
+
+function useSiteDoc(): SiteDocRef | null {
+  const pathname = usePathname();
+  const [doc, setDoc] = useState<SiteDocRef | null>(null);
+
+  useEffect(() => {
+    const apply = (next: SiteDocRef | null) => {
+      setDoc((prev) => (sameSiteDoc(prev, next) ? prev : next));
+    };
+    apply(readSiteDoc());
+    const stop = subscribeSiteDoc(apply);
+    const observer = new MutationObserver(() => apply(readSiteDoc()));
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["data-locale", "data-type", "data-slug", "data-workspace"],
+    });
+    return () => {
+      stop();
+      observer.disconnect();
+    };
+  }, [pathname]);
+
+  return doc;
+}
+
+function dashboardOrigin(): string {
+  if (typeof document === "undefined") return "";
+  const marked = document.querySelector('meta[name="backmatter:dashboard"]')?.getAttribute("content");
+  if (marked) return marked.replace(/\/$/, "");
+  if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
+    return `${location.protocol}//${location.hostname}:5173`;
+  }
+  return "";
+}
+
+export function SiteChrome({
+  branch,
+  tree,
+  exiting,
+  onExit,
+}: {
+  branch?: string;
+  tree?: string;
+  exiting?: boolean;
+  onExit: () => void;
+}) {
+  const router = useRouter();
+  const doc = useSiteDoc();
+  const [editorMounted, setEditorMounted] = useState(false);
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [chatMounted, setChatMounted] = useState(false);
+  const [chatOpen, setChatOpen] = useState(false);
+  const [publishOpen, setPublishOpen] = useState(false);
+  const [changeCount, setChangeCount] = useState(0);
+  const [origin, setOrigin] = useState("");
+  const editorFrame = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    setOrigin(dashboardOrigin());
+  }, []);
+
+  useEffect(() => {
+    function onKey(event: KeyboardEvent) {
+      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "j") return;
+      event.preventDefault();
+      setChatMounted(true);
+      setChatOpen((open) => !open);
+    }
+    document.addEventListener("keydown", onKey, true);
+    return () => document.removeEventListener("keydown", onKey, true);
+  }, []);
+
+  useEffect(() => {
+    function onMessage(event: MessageEvent) {
+      if (event.origin !== origin) return;
+      const data = event.data as {
+        type?: string;
+        changeCount?: number;
+        key?: string;
+        metaKey?: boolean;
+        ctrlKey?: boolean;
+      };
+      if (data?.type === "backmatter:git" && typeof data.changeCount === "number") {
+        setChangeCount(data.changeCount);
+      }
+      if (
+        data?.type === "backmatter:hotkey" &&
+        data.key?.toLowerCase() === "j" &&
+        (data.metaKey || data.ctrlKey)
+      ) {
+        setChatMounted(true);
+        setChatOpen((open) => !open);
+      }
+      if (data?.type === "backmatter:published") {
+        setPublishOpen(false);
+        setChangeCount(0);
+        editorFrame.current?.contentWindow?.postMessage({ type: "backmatter:reload-doc" }, origin);
+        startTransition(() => router.refresh());
+      }
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [origin, router]);
+
+  const label = doc ? `${doc.type}/${doc.slug}` : "No document";
+  const editorSrc =
+    doc && origin
+      ? `${origin}/workspaces/${doc.workspaceId}/docs/${doc.locale}/${doc.type}/${doc.slug}?embed=1`
+      : "";
+
+  function onChatWrote() {
+    editorFrame.current?.contentWindow?.postMessage({ type: "backmatter:reload-doc" }, origin);
+    startTransition(() => router.refresh());
+  }
+
+  return (
+    <>
+      <style>{"body{padding-bottom:36px}"}</style>
+      {editorMounted && doc && editorSrc ? (
+        <iframe
+          ref={editorFrame}
+          title={`Edit ${label}`}
+          src={editorSrc}
+          style={{
+            ...editorStyle,
+            visibility: editorOpen ? "visible" : "hidden",
+            pointerEvents: editorOpen ? "auto" : "none",
+          }}
+        />
+      ) : null}
+      {chatMounted && doc ? (
+        <CmsChat
+          doc={doc}
+          hidden={!chatOpen}
+          onWrote={onChatWrote}
+          onClosed={() => setChatOpen(false)}
+        />
+      ) : null}
+      {doc && origin ? (
+        <iframe
+          title="Publish"
+          src={`${origin}/embed/publish/${doc.workspaceId}`}
+          style={{
+            ...publishStyle,
+            visibility: publishOpen ? "visible" : "hidden",
+            pointerEvents: publishOpen ? "auto" : "none",
+          }}
+        />
+      ) : null}
+      <footer aria-label="Backmatter" style={barStyle}>
+        <button
+          type="button"
+          aria-pressed={editorOpen}
+          disabled={!doc}
+          onClick={() => {
+            setEditorMounted(true);
+            setEditorOpen((open) => !open);
+          }}
+          style={docButton}
+        >
+          {label}
+        </button>
+        <BarText>Preview</BarText>
+        {branch ? <BarText>{branch}</BarText> : null}
+        {tree ? <BarText>draft</BarText> : null}
+        <span style={{ flex: 1 }} />
+        <button type="button" aria-pressed={publishOpen} onClick={() => setPublishOpen((open) => !open)} style={barButton}>
+          Publish{changeCount ? ` ${changeCount}` : ""}
+        </button>
+        <button
+          type="button"
+          aria-pressed={chatOpen}
+          onClick={() => {
+            setChatMounted(true);
+            setChatOpen((open) => !open);
+          }}
+          title="Toggle AI chat (⌘J)"
+          style={barButton}
+        >
+          Agent
+        </button>
+        <button type="button" aria-label="Exit preview" disabled={exiting} onClick={onExit} style={barButton}>
+          Exit
+        </button>
+      </footer>
+    </>
+  );
+}
+
+function CmsChat({
+  doc,
+  hidden,
+  onWrote,
+  onClosed,
+}: {
+  doc: SiteDocRef;
+  hidden: boolean;
+  onWrote: () => void;
+  onClosed: () => void;
+}) {
+  const frame = useRef<HTMLIFrameElement>(null);
+  const onWroteRef = useRef(onWrote);
+  const onClosedRef = useRef(onClosed);
+  const hiddenRef = useRef(hidden);
+  onWroteRef.current = onWrote;
+  onClosedRef.current = onClosed;
+  hiddenRef.current = hidden;
+  const origin = dashboardOrigin();
+
+  function openChat() {
+    const frameEl = frame.current;
+    if (!frameEl) return;
+    frameEl.focus();
+    frameEl.contentWindow?.postMessage({ type: "backmatter:chat-open" }, origin);
+  }
+
+  useEffect(() => {
+    if (!hidden) openChat();
+  }, [hidden, origin]);
+
+  useEffect(() => {
+    const focus = { locale: doc.locale, type: doc.type, slug: doc.slug };
+    function postFocus() {
+      frame.current?.contentWindow?.postMessage({ type: "backmatter:focus", doc: focus }, origin);
+    }
+    function onMessage(event: MessageEvent) {
+      if (event.origin !== origin) return;
+      if (event.data?.type === "backmatter:chat-ready") {
+        postFocus();
+        if (!hiddenRef.current) openChat();
+      }
+      if (event.data?.type === "backmatter:doc-changed") onWroteRef.current();
+      if (event.data?.type === "backmatter:chat-closed") onClosedRef.current();
+    }
+    window.addEventListener("message", onMessage);
+    postFocus();
+    return () => window.removeEventListener("message", onMessage);
+  }, [doc.locale, doc.type, doc.slug, origin]);
+
+  if (!origin) return null;
+  return (
+    <iframe
+      ref={frame}
+      title="AI chat"
+      src={`${origin}/embed/chat/${doc.workspaceId}`}
+      style={{
+        ...chatStyle,
+        visibility: hidden ? "hidden" : "visible",
+        pointerEvents: hidden ? "none" : "auto",
+      }}
+    />
+  );
+}
+
+function BarText({ children }: { children: ReactNode }) {
+  return <span style={mutedStyle}>{children}</span>;
+}
+
+const barStyle: CSSProperties = {
+  position: "fixed",
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 2147483000,
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  height: 36,
+  padding: "0 12px",
+  paddingBottom: "env(safe-area-inset-bottom, 0px)",
+  boxSizing: "border-box",
+  borderTop: "1px solid #e4e4e7",
+  background: "#f4f4f5",
+  color: "#71717a",
+  font: "12px/1 ui-sans-serif, system-ui, sans-serif",
+};
+
+const barButton: CSSProperties = {
+  border: 0,
+  background: "transparent",
+  color: "#18181b",
+  font: "inherit",
+  cursor: "pointer",
+  padding: "4px 6px",
+};
+
+const docButton: CSSProperties = {
+  ...barButton,
+  fontWeight: 600,
+};
+
+const mutedStyle: CSSProperties = { color: "#71717a", fontSize: 12, margin: 0 };
+
+const editorStyle: CSSProperties = {
+  position: "fixed",
+  left: 0,
+  right: 0,
+  bottom: 36,
+  zIndex: 2147482999,
+  width: "100%",
+  height: "min(78vh, calc(100vh - 48px))",
+  border: 0,
+  borderTop: "1px solid #e4e4e7",
+  background: "#ffffff",
+  boxShadow: "0 -8px 24px rgba(24, 24, 27, 0.08)",
+};
+
+const chatStyle: CSSProperties = {
+  position: "fixed",
+  right: 12,
+  bottom: 48,
+  zIndex: 2147483001,
+  width: "min(440px, calc(100vw - 24px))",
+  height: "min(640px, calc(100vh - 120px))",
+  border: 0,
+  borderRadius: 14,
+  background: "#f4f4f5",
+  boxShadow: "0 16px 48px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.08)",
+};
+
+const publishStyle: CSSProperties = {
+  position: "fixed",
+  right: 12,
+  bottom: 48,
+  zIndex: 2147483001,
+  width: "min(420px, calc(100vw - 24px))",
+  height: "min(520px, calc(100vh - 120px))",
+  border: "1px solid #e4e4e7",
+  borderRadius: 8,
+  background: "#ffffff",
+  boxShadow: "0 12px 40px rgba(24, 24, 27, 0.16)",
+};

package/src/source-data.ts

@@ -0,0 +1,42 @@
+// packages/next/src/source-data.ts
+// The one place that decides how an external model's record is obtained for a
+// route: `load(ref)` for a real slug, `sample()` for the template document.
+// Both the catch-all and `renderPreview` call this; `renderLayoutDoc` only
+// receives the result.
+import { isTemplateSlug, type ModelDef, type SourceDef, type SourceRef } from "@backmatter/core";
+
+export type SourceResult = { ok: true; data: unknown } | { ok: false };
+
+/** Source for `model`, or throw when an external model has no `sources/{type}.ts`. */
+export function requireSource(
+  sources: Record<string, SourceDef> | undefined,
+  model: ModelDef,
+): SourceDef | undefined {
+  const source = sources?.[model.type];
+  if (model.external && !source) {
+    throw new Error(
+      `[backmatter] model "${model.type}" is external but sources/${model.type}.ts was not found`,
+    );
+  }
+  return source;
+}
+
+/**
+ * `{ ok: false }` means the outside record does not exist and the route is a 404.
+ * Without a source `data` is `undefined`. On the template slug `data` is the
+ * sample record, or `null` when the source has no `sample`.
+ */
+export async function resolveSourceData(
+  source: SourceDef | undefined,
+  model: ModelDef,
+  ref: SourceRef,
+): Promise<SourceResult> {
+  if (!source) return { ok: true, data: undefined };
+  if (isTemplateSlug(model, ref.slug)) {
+    const sample = source.sample ? await source.sample(ref.locale) : null;
+    return { ok: true, data: sample };
+  }
+  const record = await source.load(ref);
+  if (record === null || record === undefined) return { ok: false };
+  return { ok: true, data: record };
+}