@charlescms/astro 0.1.0

package/src/toolbar.js

@@ -0,0 +1,128 @@
+// Renders the persistent editor toolbar and exposes its small status API.
+//
+// The toolbar does not publish or open panels itself. Those operations are
+// injected, which keeps this module focused on visibility, button state, busy
+// state, and reserving enough page space that the fixed toolbar covers nothing.
+export function createToolbar({
+  state,
+  currentPageHasFrontmatter,
+  openPageSettings,
+  openVersionsPanel,
+  openStagedPanel,
+  publishPending,
+  discardPending,
+  logout,
+  scanEditableElements
+}) {
+  function installToolbar() {
+    const toolbar = document.createElement("div");
+    toolbar.dataset.charlescmsUi = "true";
+    toolbar.className = "charlescms-toolbar";
+    toolbar.innerHTML = `
+      <div class="charlescms-brand"><strong>CharlesCMS</strong></div>
+      <div class="charlescms-info" data-info></div>
+      <div class="charlescms-toolbar-actions">
+        <button type="button" data-charlescms-review hidden title="See every staged change and which page it's on">Review</button>
+        <button type="button" data-charlescms-discard hidden>Discard</button>
+        <button type="button" data-charlescms-publish hidden>Publish</button>
+        <button type="button" data-charlescms-page-settings hidden title="Fields that don't show on the page itself, like the Google title and description">Page info</button>
+        <button type="button" data-charlescms-highlight title="Outline everything you can edit on this page">Show editable</button>
+        <button type="button" data-charlescms-versions ${state.previewOnly ? 'disabled title="Disabled in this public demo"' : ""}>Versions</button>
+        ${state.previewOnly ? "" : '<button type="button" data-charlescms-logout>Logout</button>'}
+      </div>
+    `;
+    toolbar.querySelector("[data-charlescms-logout]")?.addEventListener("click", logout);
+
+    // Editors start with all editable regions outlined; the toggle provides an
+    // unobstructed preview without leaving edit mode.
+    const highlight = toolbar.querySelector("[data-charlescms-highlight]");
+    const setHighlight = (on) => {
+      document.documentElement.classList.toggle("charlescms-show-all", on);
+      highlight.classList.toggle("charlescms-toggle-on", on);
+      highlight.textContent = on ? "Hide outlines" : "Show editable";
+    };
+    setHighlight(true);
+    highlight.addEventListener("click", () => setHighlight(!document.documentElement.classList.contains("charlescms-show-all")));
+    toolbar.querySelector("[data-charlescms-publish]")?.addEventListener("click", state.previewOnly ? explainPreviewOnly : publishPending);
+    toolbar.querySelector("[data-charlescms-discard]").addEventListener("click", discardPending);
+    toolbar.querySelector("[data-charlescms-review]")?.addEventListener("click", openStagedPanel);
+
+    // "Page info" is the only panel button: it edits the page's fields that
+    // render nowhere visible (Google title, meta description, frontmatter).
+    // Everything visible is edited by clicking it on the page itself.
+    const pageSettings = toolbar.querySelector("[data-charlescms-page-settings]");
+    pageSettings.hidden = !currentPageHasFrontmatter();
+    pageSettings.addEventListener("click", openPageSettings);
+    toolbar.querySelector("[data-charlescms-versions]")?.addEventListener("click", state.previewOnly ? explainPreviewOnly : openVersionsPanel);
+
+    document.body.append(toolbar);
+    state.toolbar = toolbar;
+    installToolbarReserve(toolbar);
+    renderPendingTray();
+  }
+
+  function installToolbarReserve(toolbar) {
+    const body = document.body;
+    body.style.setProperty("--charlescms-page-padding-bottom", getComputedStyle(body).paddingBottom);
+    const update = () => {
+      const reserve = Math.ceil(toolbar.getBoundingClientRect().height + 32);
+      document.documentElement.style.setProperty("--charlescms-toolbar-reserve", `${reserve}px`);
+    };
+    state.toolbarObserver?.disconnect();
+    state.toolbarObserver = new ResizeObserver(update);
+    state.toolbarObserver.observe(toolbar);
+    update();
+  }
+
+  function renderPendingTray() {
+    if (!state.toolbar) return;
+    const publish = state.toolbar.querySelector("[data-charlescms-publish]");
+    const discard = state.toolbar.querySelector("[data-charlescms-discard]");
+    const count = state.pending.size;
+    if (publish) {
+      publish.hidden = false;
+      publish.disabled = state.previewOnly || state.busy;
+      if (state.previewOnly) publish.title = "Disabled in this public demo";
+      else publish.title = count === 0 ? "No changes to publish" : "";
+    }
+    discard.hidden = count === 0;
+    const review = state.toolbar.querySelector("[data-charlescms-review]");
+    if (review) review.hidden = count === 0;
+    // One compact status slot serves both as the idle editable count and the
+    // staged-change indicator. Transient messages reuse the same slot.
+    setToolbarInfo(count > 0
+      ? `${count} change${count === 1 ? "" : "s"} staged`
+      : state.previewOnly ? "Preview only" : `${scanEditableElements().length} editable`);
+  }
+
+  function setToolbarInfo(text) {
+    const info = state.toolbar?.querySelector("[data-info]");
+    if (!info) return;
+    info.textContent = text;
+    info.classList.toggle("charlescms-info-pending", state.pending.size > 0);
+  }
+
+  function explainPreviewOnly() {
+    setToolbarStatus("Disabled in this public demo. Real installations can publish through your connector.");
+  }
+
+  function setBusy(value, message = "") {
+    state.busy = value;
+    if (message) setToolbarStatus(message);
+    if (!state.toolbar) return;
+    for (const button of state.toolbar.querySelectorAll("button")) {
+      button.disabled = value;
+    }
+  }
+
+  function setToolbarStatus(message) {
+    setToolbarInfo(message);
+  }
+
+  return {
+    installToolbar,
+    renderPendingTray,
+    setBusy,
+    setToolbarStatus
+  };
+}

package/src/versions-panel.js

@@ -0,0 +1,112 @@
+// Presents Git commit history as editor-friendly versions.
+//
+// Restoring a version never rewrites Git history. The connector creates a new
+// revert commit, then this panel waits for the deployed page to become reachable
+// again before reporting success.
+export function createVersionsPanel({
+  state,
+  closeEditor,
+  mountPanel,
+  setBusy,
+  setToolbarStatus,
+  waitForLivePage,
+  showPanelError,
+  branchHint,
+  escapeHtml,
+  escapeAttribute
+}) {
+  async function openVersionsPanel() {
+    // Panels are mutually exclusive. Closing first also cleans listeners owned
+    // by the previously mounted panel.
+    closeEditor();
+    const dialog = document.createElement("div");
+    dialog.dataset.charlescmsUi = "true";
+    dialog.className = "charlescms-panel charlescms-versions";
+    dialog.innerHTML = `
+      <div class="charlescms-panel-header">
+        <div>
+          <div class="charlescms-kicker">Versions</div>
+          <div class="charlescms-title">Published changes</div>
+        </div>
+        <button class="charlescms-icon-button" data-close aria-label="Close">×</button>
+      </div>
+      <div data-versions-list class="charlescms-versions-list">Loading...</div>
+    `;
+    mountPanel(dialog);
+    dialog.querySelector("[data-close]").addEventListener("click", closeEditor);
+    await loadVersions(dialog);
+  }
+
+  // Only commits the CMS itself published. Raw repository history (developer
+  // commits, merges, refactors) is the developer's domain — showing it here
+  // would invite an editor to "restore" a code change they can't assess.
+  // CMS commits are recognisable by the fixed message prefixes the editor
+  // writes (publishing.js) and the revert commits this panel creates.
+  function isCmsPublish(version) {
+    return /^(?:Update content|Update section|Add section|Remove section|Remove media|Upload media|Replace download|Revert)\b/.test(String(version.message || ""));
+  }
+
+  async function loadVersions(dialog) {
+    const list = dialog.querySelector("[data-versions-list]");
+    try {
+      const versions = (await state.connector.listCommits()).filter(isCmsPublish);
+      if (versions.length === 0) {
+        list.textContent = "No published versions yet. Changes you publish will appear here, each with an undo.";
+        return;
+      }
+      list.innerHTML = versions.map((version, index) => `
+        <div class="charlescms-version">
+          <div>
+            <strong>${escapeHtml(firstLine(version.message) || version.sha.slice(0, 7))}</strong>
+            <span>${escapeHtml(formatVersionDate(version.committedAt || version.authoredAt))}</span>
+          </div>
+          <button type="button" data-revert="${escapeAttribute(version.sha)}">${index === 0 ? "Undo last publish" : "Restore"}</button>
+        </div>
+      `).join("");
+      // Event delegation keeps one listener regardless of history length.
+      list.addEventListener("click", async (event) => {
+        const button = event.target.closest("[data-revert]");
+        if (!button) return;
+        await revertVersion(button.dataset.revert, dialog);
+      });
+    } catch (error) {
+      list.textContent = error?.status === 404
+        ? `History couldn't load: ${branchHint()}.`
+        : (error.message || "Versions could not be loaded.");
+    }
+  }
+
+  async function revertVersion(sha, dialog) {
+    if (state.busy) return;
+    // Reverting creates a new commit. Existing history is never rewritten, so a
+    // later restore remains possible and the repository keeps a complete audit.
+    if (!window.confirm("Undo this change? This adds a new commit that reverses it — your history stays intact.")) return;
+    setBusy(true, "Reverting...");
+    try {
+      await state.connector.revertCommit(sha);
+      setToolbarStatus("Reverted. Waiting for the deployed page...");
+      await waitForLivePage();
+      setToolbarStatus("Reverted.");
+      dialog.remove();
+      state.active = null;
+    } catch (error) {
+      showPanelError(dialog, error.message || "Revert failed.");
+      setToolbarStatus(error.message || "Revert failed.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return { openVersionsPanel };
+}
+
+function firstLine(value) {
+  return String(value || "").split("\n")[0];
+}
+
+function formatVersionDate(value) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString();
+}