pandorga 1.4.2 → 1.4.4

data/studio/index.html

@@ -18,8 +18,8 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css"
     />
-    <script type="module" crossorigin src="/studio/assets/index-pL2vB_T0.js"></script>
-    <link rel="stylesheet" crossorigin href="/studio/assets/index-BQdNT4zp.css">
+    <script type="module" crossorigin src="/studio/assets/index-Cf9OPjQU.js"></script>
+    <link rel="stylesheet" crossorigin href="/studio/assets/index-Cd1mlY_H.css">
   </head>
   <body>
     <div id="app"></div>

data/studio-app/src/api/client.js

@@ -73,4 +73,10 @@ export const studioApi = {
       method: "POST",
       body: JSON.stringify(payload),
     }),
+  /** Content-pipeline run for a commit SHA (production). */
+  pipelineStatus: (sha, workflow = null) => {
+    const params = new URLSearchParams({ sha: String(sha || "") });
+    if (workflow) params.set("workflow", String(workflow));
+    return api(`pipeline-status?${params.toString()}`);
+  },
 };

data/studio-app/src/main.js

@@ -202,6 +202,19 @@ const state = {
   navMenuOpen: false,
   /** Theme menu (light / dark / system) in the icon toolbar. */
   themeMenuOpen: false,
+  /**
+   * Content publish indicator (local Export animation or production Actions).
+   * state: idle | syncing | awaiting_run | running | ok | error | stalled | unconfigured
+   */
+  pipeline: {
+    state: "idle",
+    sha: "",
+    runUrl: "",
+    message: "",
+    pollGen: 0,
+  },
+  /** Local Export button in flight. */
+  reexporting: false,
   /** Per-collection list query (session memory). */
   listQueryByCollection: Object.create(null),
   /** Per-collection sort id (session + localStorage). */
@@ -432,6 +445,7 @@ function mediaOpts() {
     captureError,
     clearError,
     goHome,
+    onCommitted: (commitSha) => armPipelineWatch(commitSha),
   };
 }
 
@@ -825,6 +839,192 @@ function isLocalDevHost() {
   return host === "localhost" || host === "127.0.0.1" || host === "[::1]";
 }
 
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function pipelineChipMeta(pipelineState) {
+  switch (pipelineState) {
+    case "syncing":
+    case "running":
+      return {
+        label: "Exporting…",
+        icon: "progress_activity",
+        className: "pipeline-chip pipeline-running",
+        spinning: true,
+        title: "Content export is running",
+      };
+    case "awaiting_run":
+      return {
+        label: "Waiting…",
+        icon: "schedule",
+        className: "pipeline-chip pipeline-awaiting",
+        spinning: false,
+        title: "Waiting for the content pipeline run",
+      };
+    case "ok":
+      return {
+        label: "Live",
+        icon: "check_circle",
+        className: "pipeline-chip pipeline-ok",
+        spinning: false,
+        title: "Content pipeline succeeded for this commit",
+      };
+    case "error":
+      return {
+        label: "Failed",
+        icon: "error",
+        className: "pipeline-chip pipeline-error",
+        spinning: false,
+        title: state.pipeline.message || "Content pipeline failed",
+      };
+    case "stalled":
+      return {
+        label: "No run",
+        icon: "hourglass_disabled",
+        className: "pipeline-chip pipeline-stalled",
+        spinning: false,
+        title: "No pipeline run appeared for this commit yet",
+      };
+    case "unconfigured":
+      return {
+        label: "Pipeline",
+        icon: "cloud_off",
+        className: "pipeline-chip pipeline-idle",
+        spinning: false,
+        title: "STUDIO_CONTENT_WORKFLOW is not set on the Studio API",
+      };
+    default:
+      return {
+        label: "Pipeline",
+        icon: "cloud",
+        className: "pipeline-chip pipeline-idle",
+        spinning: false,
+        title: "Content pipeline status",
+      };
+  }
+}
+
+function renderPipelineChip() {
+  const meta = pipelineChipMeta(state.pipeline.state);
+  const runUrl = state.pipeline.runUrl;
+  const kids = [
+    el("span", {
+      className:
+        "material-symbols-outlined" + (meta.spinning ? " studio-icon-spin" : ""),
+      text: meta.icon,
+      "aria-hidden": "true",
+    }),
+    el("span", { className: "btn-label", text: meta.label }),
+  ];
+  return el(
+    "button",
+    {
+      className: `btn btn-tool ${meta.className}`,
+      type: "button",
+      title: meta.title,
+      "aria-label": meta.label,
+      role: "status",
+      "data-studio-action": "pipeline-status",
+      disabled: !runUrl,
+      onClick: () => {
+        if (!runUrl) return;
+        try {
+          window.open(runUrl, "_blank", "noopener,noreferrer");
+        } catch {
+          /* ignore */
+        }
+      },
+    },
+    kids
+  );
+}
+
+/**
+ * After a production Save, poll Actions for the content-pipeline run on this SHA.
+ */
+function armPipelineWatch(commitSha) {
+  const sha = String(commitSha || "").trim().toLowerCase();
+  if (!sha || isLocalDevHost()) return;
+  const gen = ++state.pipeline.pollGen;
+  state.pipeline.state = "awaiting_run";
+  state.pipeline.sha = sha;
+  state.pipeline.runUrl = "";
+  state.pipeline.message = "";
+  renderShell();
+  void pollPipelineStatus(gen, sha);
+}
+
+async function pollPipelineStatus(gen, sha) {
+  const started = Date.now();
+  const STALL_MS = 10 * 60 * 1000;
+  const MAX_MS = 30 * 60 * 1000;
+  let softFails = 0;
+
+  while (gen === state.pipeline.pollGen) {
+    const elapsed = Date.now() - started;
+    if (elapsed > MAX_MS) {
+      if (state.pipeline.state === "running" || state.pipeline.state === "awaiting_run") {
+        state.pipeline.state = "stalled";
+        state.pipeline.message = "Timed out waiting for the content pipeline.";
+        renderShell();
+      }
+      return;
+    }
+
+    try {
+      const data = await studioApi.pipelineStatus(sha);
+      if (gen !== state.pipeline.pollGen) return;
+      softFails = 0;
+      state.pipeline.runUrl = data.run?.html_url || state.pipeline.runUrl || "";
+      state.pipeline.message = "";
+
+      if (data.state === "unconfigured") {
+        state.pipeline.state = "unconfigured";
+        renderShell();
+        return;
+      }
+      if (data.state === "ok" || data.state === "error") {
+        state.pipeline.state = data.state;
+        if (data.state === "error") {
+          state.pipeline.message = "Content pipeline failed for this commit.";
+        }
+        renderShell();
+        return;
+      }
+      if (data.state === "running") {
+        state.pipeline.state = "running";
+      } else if (data.state === "awaiting_run") {
+        if (elapsed > STALL_MS) {
+          state.pipeline.state = "stalled";
+          renderShell();
+          return;
+        }
+        state.pipeline.state = "awaiting_run";
+      }
+      renderShell();
+    } catch (err) {
+      if (gen !== state.pipeline.pollGen) return;
+      softFails += 1;
+      const code = err?.code || "";
+      if (code === "actions_forbidden" || code === "github_unconfigured") {
+        state.pipeline.state = "error";
+        state.pipeline.message = String(err.message || err);
+        renderShell();
+        return;
+      }
+      if (softFails >= 5) {
+        state.pipeline.state = "error";
+        state.pipeline.message = String(err.message || err);
+        renderShell();
+        return;
+      }
+    }
+
+    await sleep(elapsed < 60_000 ? 2500 : 7000);
+  }
+}
+
 function collectionAllowsCreate(col = state.collection) {
   if (!col || col.type !== "collection") return false;
   return col.operations?.create !== false;
@@ -956,17 +1156,28 @@ function renderStudioToolbar({ brand = null, menuToggle = null } = {}) {
     );
   }
   if (isLocalDevHost()) {
+    const exportBusy = state.reexporting || state.pipeline.state === "syncing";
     actions.push(
       toolbarActionButton({
-        className: "btn btn-tool btn-reexport",
-        title: "Export content JSON locally and reload",
-        ariaLabel: "Export locally",
+        className:
+          "btn btn-tool btn-reexport" +
+          (exportBusy ? " pipeline-running" : "") +
+          (state.pipeline.state === "ok" && !exportBusy ? " pipeline-ok" : "") +
+          (state.pipeline.state === "error" && !exportBusy ? " pipeline-error" : ""),
+        title: exportBusy
+          ? "Exporting content JSON locally"
+          : "Export content JSON locally and reload",
+        ariaLabel: exportBusy ? "Exporting locally" : "Export locally",
         action: "reexport",
+        disabled: exportBusy,
         onClick: () => reexportLocalContent(),
-        icon: "sync",
-        label: "Export",
+        icon: exportBusy ? "progress_activity" : "sync",
+        label: exportBusy ? "Exporting…" : "Export",
+        spinning: exportBusy,
       })
     );
+  } else if (state.pipeline.state !== "idle") {
+    actions.push(renderPipelineChip());
   }
 
   const kids = [
@@ -3782,6 +3993,10 @@ function discardChanges() {
 }
 
 async function reexportLocalContent() {
+  if (state.reexporting) return;
+  state.reexporting = true;
+  state.pipeline.state = "syncing";
+  state.pipeline.message = "";
   state.status = "Reexporting…";
   clearError();
   renderShell();
@@ -3799,6 +4014,7 @@ async function reexportLocalContent() {
     if (!res.ok || !data.ok) {
       throw new Error((data && data.error) || `Export failed: ${res.status}`);
     }
+    state.pipeline.state = "ok";
     state.status = "Reexported — reloading…";
     renderShell();
     setTimeout(() => {
@@ -3811,8 +4027,12 @@ async function reexportLocalContent() {
       }
     }, 200);
   } catch (err) {
+    state.pipeline.state = "error";
+    state.pipeline.message = String(err.message || err);
     captureError(err);
     renderShell();
+  } finally {
+    state.reexporting = false;
   }
 }
 
@@ -3872,7 +4092,7 @@ async function createNewEntry() {
     }
     if (exists) throw new Error(`${path} already exists`);
 
-    await studioApi.putFile({
+    const created = await studioApi.putFile({
       path,
       content,
       sha: null,
@@ -3880,6 +4100,7 @@ async function createNewEntry() {
     });
     invalidateTreeCache(col.name);
     state.status = `Created ${path}`;
+    armPipelineWatch(created?.commit);
     await selectCollection(col);
     await openFile(path);
   } catch (err) {
@@ -3904,7 +4125,7 @@ async function deleteEntry(path, sha = null) {
       const data = await studioApi.getFile(path);
       fileSha = data.sha;
     }
-    await studioApi.deleteFile({
+    const deleted = await studioApi.deleteFile({
       path,
       sha: fileSha,
       message: `studio: delete ${path}`,
@@ -3920,6 +4141,7 @@ async function deleteEntry(path, sha = null) {
       state.body = "";
     }
     state.status = `Deleted ${path}`;
+    armPipelineWatch(deleted?.commit);
     if (col) await selectCollection(col);
     else renderShell();
   } catch (err) {
@@ -3999,6 +4221,7 @@ async function saveCurrent() {
     captureBaseline();
     // List thumbs/titles may have changed — drop session tree for this collection.
     if (col?.name) invalidateTreeCache(col.name);
+    armPipelineWatch(result?.commit);
   } catch (err) {
     captureError(err);
   } finally {

data/studio-app/src/media/browser.js

@@ -544,13 +544,16 @@ async function deleteMediaFile(item, opts) {
       const data = await api.getFile(path);
       sha = data.sha;
     }
-    await api.deleteFile({
+    const deleted = await api.deleteFile({
       path,
       sha,
       message: `studio: delete ${path}`,
     });
     state.mediaBusy = false;
     state.status = `Deleted ${path}`;
+    if (typeof opts.onCommitted === "function") {
+      opts.onCommitted(deleted?.commit);
+    }
     await openMediaDir(state.mediaPath, opts);
   } catch (err) {
     state.mediaBusy = false;
@@ -600,12 +603,15 @@ async function createFolder(opts) {
   state.status = `Creating ${name}…`;
   render();
   try {
-    await api.createMediaFolder({
+    const created = await api.createMediaFolder({
       path,
       message: `studio: mkdir ${path}`,
     });
     state.mediaBusy = false;
     state.status = `Created ${toPublicPath(path) || path}`;
+    if (typeof opts.onCommitted === "function") {
+      opts.onCommitted(created?.commit);
+    }
     await openMediaDir(state.mediaPath, opts);
   } catch (err) {
     state.mediaBusy = false;
@@ -619,6 +625,7 @@ async function uploadFiles(files, opts) {
   clearError();
   const dir = state.mediaPath || MEDIA_ROOT;
   let ok = 0;
+  let lastCommit = null;
   state.mediaBusy = true;
 
   for (const file of files) {
@@ -643,6 +650,7 @@ async function uploadFiles(files, opts) {
       });
       ok += 1;
       state.status = `Uploaded ${result.public_path || toPublicPath(path)}`;
+      lastCommit = result?.commit || lastCommit;
     } catch (err) {
       captureError(err);
       state.mediaBusy = false;
@@ -653,5 +661,8 @@ async function uploadFiles(files, opts) {
 
   state.mediaBusy = false;
   if (ok) state.status = ok === 1 ? state.status : `Uploaded ${ok} files`;
+  if (ok && lastCommit && typeof opts.onCommitted === "function") {
+    opts.onCommitted(lastCommit);
+  }
   await openMediaDir(dir, opts);
 }

data/studio-app/src/styles/studio.css

@@ -719,6 +719,67 @@ button.studio-brand-home.studio-brand-toolbar[aria-current="page"] {
   background: color-mix(in srgb, #746f30 45%, var(--panel));
 }
 
+/* Content-pipeline status chip (production) / Export sync colors (local). */
+.pipeline-chip {
+  cursor: default;
+}
+
+.pipeline-chip:not(:disabled) {
+  cursor: pointer;
+}
+
+.pipeline-awaiting,
+.btn-reexport.pipeline-running,
+.pipeline-running {
+  color: #5c4b00;
+  border-color: color-mix(in srgb, #e0a100 55%, var(--outline-variant));
+  background: color-mix(in srgb, #f5c84c 50%, var(--background));
+}
+
+.pipeline-ok,
+.btn-reexport.pipeline-ok {
+  color: #14532d;
+  border-color: color-mix(in srgb, #22c55e 50%, var(--outline-variant));
+  background: color-mix(in srgb, #86efac 45%, var(--background));
+}
+
+.pipeline-error,
+.btn-reexport.pipeline-error,
+.pipeline-stalled {
+  color: #7f1d1d;
+  border-color: color-mix(in srgb, #ef4444 50%, var(--outline-variant));
+  background: color-mix(in srgb, #fca5a5 40%, var(--background));
+}
+
+.pipeline-idle {
+  color: var(--on-surface-variant);
+  border-color: var(--outline-variant);
+  background: var(--surface-container);
+}
+
+[data-theme="dark"] .pipeline-awaiting,
+[data-theme="dark"] .pipeline-running,
+[data-theme="dark"] .btn-reexport.pipeline-running {
+  color: #f5e6a3;
+  border-color: color-mix(in srgb, #e0a100 45%, var(--outline-variant));
+  background: color-mix(in srgb, #746f30 50%, var(--panel));
+}
+
+[data-theme="dark"] .pipeline-ok,
+[data-theme="dark"] .btn-reexport.pipeline-ok {
+  color: #bbf7d0;
+  border-color: color-mix(in srgb, #22c55e 45%, var(--outline-variant));
+  background: color-mix(in srgb, #14532d 55%, var(--panel));
+}
+
+[data-theme="dark"] .pipeline-error,
+[data-theme="dark"] .btn-reexport.pipeline-error,
+[data-theme="dark"] .pipeline-stalled {
+  color: #fecaca;
+  border-color: color-mix(in srgb, #ef4444 45%, var(--outline-variant));
+  background: color-mix(in srgb, #7f1d1d 55%, var(--panel));
+}
+
 .studio-icon-bar .btn-icon {
   width: var(--studio-list-control-height);
   min-width: var(--studio-list-control-height);
@@ -1915,6 +1976,7 @@ button.studio-brand-home.studio-brand-toolbar[aria-current="page"] {
 }
 
 .editor-format-toolbar {
+  --editor-tool-size: 2.35rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -1928,10 +1990,15 @@ button.studio-brand-home.studio-brand-toolbar[aria-current="page"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 2rem;
-  height: 2rem;
+  box-sizing: border-box;
+  width: var(--editor-tool-size);
+  min-width: var(--editor-tool-size);
+  max-width: var(--editor-tool-size);
+  height: var(--editor-tool-size);
+  min-height: var(--editor-tool-size);
+  max-height: var(--editor-tool-size);
   margin: 0;
-  padding: 0 0.35rem;
+  padding: 0;
   border: 0;
   border-radius: 0;
   background: transparent;
@@ -1940,6 +2007,8 @@ button.studio-brand-home.studio-brand-toolbar[aria-current="page"] {
   font: inherit;
   font-size: 0.82rem;
   font-weight: 600;
+  line-height: 1;
+  overflow: hidden;
 }
 
 .editor-toolbar-btn:hover {
@@ -1960,10 +2029,15 @@ button.studio-brand-home.studio-brand-toolbar[aria-current="page"] {
 }
 
 .editor-toolbar-select {
+  box-sizing: border-box;
+  height: var(--editor-tool-size);
+  min-height: var(--editor-tool-size);
+  max-height: var(--editor-tool-size);
   border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
   background: var(--background);
-  padding: 0.25rem 0.4rem;
+  padding: 0 0.4rem;
   font-size: 0.82rem;
+  line-height: 1;
   max-width: 8.5rem;
 }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pandorga
 version: !ruby/object:Gem::Version
-  version: 1.4.2
+  version: 1.4.4
 platform: ruby
 authors:
 - The Pandorga contributors
@@ -449,8 +449,8 @@ files:
 - studio-app/src/preview/render.js
 - studio-app/src/styles/studio.css
 - studio-app/vite.config.js
-- studio/assets/index-BQdNT4zp.css
-- studio/assets/index-pL2vB_T0.js
+- studio/assets/index-Cd1mlY_H.css
+- studio/assets/index-Cf9OPjQU.js
 - studio/index.html
 - studio/schema.yml
 - templates/articles/README.md