npm - @charlescms/astro - Versions diffs - 0.1.0 - Mend

@charlescms/astro 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/LICENSE +21 -0
package/README.md +366 -0
package/SECURITY.md +77 -0
package/THIRD_PARTY_NOTICES.md +56 -0
package/connector/worker.js +505 -0
package/connector/wrangler.toml +15 -0
package/package.json +92 -0
package/scripts/check-licenses.js +45 -0
package/scripts/check-package.js +62 -0
package/scripts/setup.js +719 -0
package/scripts/update-vendored-site.js +71 -0
package/src/admin.astro +314 -0
package/src/analyzer.js +639 -0
package/src/asset-images.js +130 -0
package/src/astro-frontmatter.js +17 -0
package/src/boot.js +35 -0
package/src/client.js +347 -0
package/src/connector-client.js +185 -0
package/src/content-bridge.js +162 -0
package/src/content-panel.js +440 -0
package/src/data-analyzer.js +304 -0
package/src/edit-affordance.js +463 -0
package/src/editor-styles.js +243 -0
package/src/element-editor.js +355 -0
package/src/fields.js +6 -0
package/src/frontmatter.js +153 -0
package/src/ids.js +20 -0
package/src/index.js +681 -0
package/src/js-ast.js +140 -0
package/src/markdown-analyzer.js +95 -0
package/src/media-preview.js +58 -0
package/src/panel-manager.js +133 -0
package/src/publishing.js +457 -0
package/src/rich-text-editor.js +209 -0
package/src/routes.js +21 -0
package/src/runtime-controller.js +206 -0
package/src/sanitize.js +150 -0
package/src/section-editor.js +437 -0
package/src/source-edit.js +310 -0
package/src/source-map-runtime.js +184 -0
package/src/staged-panel.js +145 -0
package/src/toolbar.js +128 -0
package/src/versions-panel.js +112 -0

package/scripts/update-vendored-site.js ADDED Viewed

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+import { copyFile, mkdir, readFile, readdir, rename, rm } from "node:fs/promises";
+import { spawn } from "node:child_process";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const siteRoot = resolve(process.argv[2] || "");
+if (!process.argv[2]) {
+  console.error("Usage: npm run update:vendored-site -- /path/to/astro-site");
+  process.exit(1);
+}
+const packageJson = JSON.parse(await readFile(join(packageRoot, "package.json"), "utf8"));
+const vendorDir = join(siteRoot, "vendor");
+const connectorDir = join(siteRoot, ".charlescms", "connector");
+await mkdir(vendorDir, { recursive: true });
+await mkdir(connectorDir, { recursive: true });
+const packed = JSON.parse(await run("npm", [
+  "pack",
+  packageRoot,
+  "--json",
+  "--pack-destination",
+  vendorDir
+], siteRoot));
+const packedName = packed[0]?.filename;
+if (!packedName) throw new Error("npm pack did not report a tarball filename.");
+// npm keys a `file:` tarball by name+version and caches the extracted result, so
+// re-installing the same version (the normal case while iterating) often leaves
+// STALE code installed even after editing the package. Give every build a unique
+// tarball filename so npm always sees a new source and unpacks it for real.
+const stamp = new Date().toISOString().replace(/[^0-9]/g, "").slice(0, 14);
+const filename = packedName.replace(/\.tgz$/, `-${stamp}.tgz`);
+await rename(join(vendorDir, packedName), join(vendorDir, filename));
+// Drop any older vendored tarballs so the folder doesn't accumulate them.
+for (const name of await readdir(vendorDir)) {
+  if (name.endsWith(".tgz") && name !== filename) await rm(join(vendorDir, name), { force: true });
+}
+// Remove the installed copy + Vite's cache of the package's transformed browser
+// code, so neither npm nor the dev server can serve the previous build.
+await rm(join(siteRoot, "node_modules", ...packageJson.name.split("/")), { recursive: true, force: true });
+await rm(join(siteRoot, "node_modules", ".vite"), { recursive: true, force: true });
+await run("npm", ["install", `file:vendor/${filename}`, "--save-exact"], siteRoot);
+await copyFile(join(packageRoot, "connector", "worker.js"), join(connectorDir, "worker.js"));
+console.log(`Updated ${siteRoot}`);
+console.log(`  ${packageJson.name}: file:vendor/${filename}`);
+console.log("  connector worker: .charlescms/connector/worker.js");
+console.log("Redeploy the connector if worker.js changed.");
+function run(command, args, cwd) {
+  return new Promise((resolve, reject) => {
+    // On Windows, npm is a .cmd batch file that only resolves via a shell.
+    const child = spawn(command, args, { cwd, stdio: ["ignore", "pipe", "pipe"], shell: process.platform === "win32" });
+    let stdout = "";
+    let stderr = "";
+    child.stdout.on("data", (chunk) => { stdout += chunk; });
+    child.stderr.on("data", (chunk) => { stderr += chunk; });
+    child.on("error", reject);
+    child.on("close", (code) => {
+      if (code === 0) resolve(stdout);
+      else reject(new Error(`${command} ${args.join(" ")} failed (${code}): ${stderr.trim()}`));
+    });
+  });
+}

package/src/admin.astro ADDED Viewed

@@ -0,0 +1,314 @@
+---
+import config from "virtual:charlescms-config";
+const previewOnly = Boolean(config.previewOnly);
+const defaultEditPath = String(config.defaultEditPath || config.editablePaths?.[0] || "/");
+const connection = config.connection || {};
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>CharlesCMS</title>
+    <style>
+      :root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f4f2eb; color: #172026; }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        padding: 24px;
+        background: linear-gradient(135deg, #1c262c 0%, #11181d 100%);
+      }
+      main { width: min(460px, 100%); display: grid; gap: 18px; }
+      .brand { display: flex; align-items: center; gap: 10px; color: white; font-weight: 900; }
+      .mark { width: 34px; height: 34px; display: block; }
+      .panel { display: grid; gap: 22px; background: rgba(255,255,255,.94); border: 1px solid rgba(255, 255, 255, .46); border-radius: 8px; padding: 30px; box-shadow: 0 28px 84px rgba(8, 14, 18, .28); backdrop-filter: blur(18px); }
+      h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.03; letter-spacing: 0; }
+      p { margin: 0; color: #5b6970; line-height: 1.55; }
+      form { display: grid; gap: 14px; }
+      label { display: grid; gap: 7px; font-weight: 700; color: #26333d; }
+      input { width: 100%; font: inherit; padding: 13px 14px; border-radius: 7px; border: 1px solid #bdc7d0; background: #fbfcfd; color: #172026; outline: none; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
+      input:focus { border-color: #176b5c; background: white; box-shadow: 0 0 0 4px rgba(23, 107, 92, .14); }
+      button { width: 100%; margin-top: 4px; border: 0; border-radius: 7px; padding: 13px 14px; background: #172026; color: white; font: inherit; font-weight: 900; cursor: pointer; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 12px 26px rgba(23, 32, 38, .18); }
+      button:hover { background: #0f171d; box-shadow: 0 14px 32px rgba(23, 32, 38, .22); }
+      button:active { transform: translateY(1px); }
+      .error { min-height: 22px; color: #a61b1b; font-size: 14px; }
+      .hint { font-size: 13px; }
+      .hint a { color: #176b5c; font-weight: 800; }
+      .demo-actions { display: grid; gap: 12px; }
+      .access { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #d8ded8; border-radius: 7px; background: #f8faf7; color: #5b6970; font-size: 13px; line-height: 1.4; }
+      .access strong { color: #172026; }
+      .secondary { display: inline-flex; justify-content: center; color: #172026; text-decoration: none; border: 1px solid #bdc7d0; border-radius: 7px; padding: 12px 14px; font-weight: 850; background: #fbfcfd; }
+      .footnote { color: rgba(255,255,255,.76); font-size: 13px; text-align: center; }
+      .advanced { border-top: 1px solid #e4e8ec; padding-top: 8px; }
+      .advanced summary { cursor: pointer; font-weight: 800; color: #3a4a55; padding: 4px 0; }
+      .sub { display: block; margin-top: 6px; color: #6a7782; font-size: 12px; font-weight: 500; }
+      @media (max-width: 520px) {
+        body { align-items: end; padding: 18px; }
+        .panel { padding: 24px; }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="brand"><svg class="mark" viewBox="0 0 80 80" width="34" height="34" aria-hidden="true"><path d="M55 22 A24 24 0 1 0 55 58" fill="none" stroke="#f2c14e" stroke-width="10" stroke-linecap="round"/><rect x="47" y="30" width="7" height="20" rx="3.5" fill="#f6f4ee"/></svg><span>CharlesCMS</span></div>
+      <section class="panel">
+        {previewOnly ? (
+          <>
+            <div>
+              <h1>Preview the editor</h1>
+              <p>This public demo lets you edit pages locally in your browser. Publish, versions, and uploads are disabled here.</p>
+            </div>
+            <div class="access"><strong>Demo access</strong><span>No username or password required.</span></div>
+            <div class="demo-actions">
+              <button id="preview-demo">Open preview-only editor</button>
+              <a class="secondary" href={defaultEditPath}>Open demo without editor</a>
+            </div>
+          </>
+        ) : (
+          <>
+            <div id="ready" hidden>
+              <div>
+                <h1>Ready to edit</h1>
+                <p>You're connected to <strong id="ready-repo">this site</strong>. Open the site and click any text to start editing.</p>
+              </div>
+              <form id="ready-form" class="demo-actions">
+                <label>
+                  Editor password
+                  <input id="ready-password" name="editorKey" type="password" autocomplete="current-password" placeholder="Required Worker AUTH_SECRET" required />
+                  <span class="sub">Must match the connector's required AUTH_SECRET.</span>
+                </label>
+                <button id="start-editing">Start editing</button>
+                <button type="button" id="switch-connection" class="secondary">Use a different connection</button>
+              </form>
+              <div class="error" id="ready-error"></div>
+            </div>
+            <div id="connect" hidden>
+              <div>
+                <h1>Connect CharlesCMS</h1>
+                <p>Paste the details printed by <code>npx charlescms setup --deploy --open</code>. Git credentials stay in the Worker, not in this browser.</p>
+              </div>
+              <form id="connect-form">
+                <label>
+                  Connector URL
+                  <input name="connector" placeholder="https://site-charlescms.workers.dev" autocomplete="off" required />
+                </label>
+                <label>
+                  Repository
+                  <input name="repo" placeholder="owner/name" autocomplete="off" required />
+                </label>
+                <label>
+                  Branch
+                  <input name="branch" placeholder="default branch (e.g. main)" autocomplete="off" />
+                  <span class="sub">Leave blank to use the repository's default branch.</span>
+                </label>
+                <label>
+                  Editor password
+                  <input name="editorKey" type="password" autocomplete="current-password" placeholder="Required Worker AUTH_SECRET" required />
+                  <span class="sub">Must match the connector's required AUTH_SECRET.</span>
+                </label>
+                <details class="advanced">
+                  <summary>Advanced</summary>
+                  <label>
+                    Source root
+                    <input name="sourceRoot" placeholder="website" autocomplete="off" />
+                    <span class="sub">Only for monorepos — the subfolder your Astro site lives in (e.g. website). Leave blank otherwise.</span>
+                  </label>
+                </details>
+                <div class="error" id="error"></div>
+                <button>Connect</button>
+              </form>
+            </div>
+          </>
+        )}
+      </section>
+      <div class="footnote">Protected visual editing for Astro.</div>
+    </main>
+    <script type="module" define:vars={{ defaultEditPath, previewOnly, connection }}>
+      const configKey = "charlescms_connector";
+      const lastKey = `${configKey}_last`;
+      const explicitNext = new URLSearchParams(location.search).get("next");
+      const nextPath = safeLocalPath(explicitNext || defaultEditPath, defaultEditPath);
+      const previewDemo = document.querySelector("#preview-demo");
+      if (previewOnly) {
+        if (!explicitNext) location.replace(defaultEditPath);
+        previewDemo?.addEventListener("click", () => { location.href = nextPath; });
+      } else {
+        setupConnect();
+      }
+      function setupConnect() {
+        const saved = readSession();
+        const last = readJSON(lastKey);
+        const preset = connection || {};
+        // Already connected in this browser → go straight into the editor.
+        if (saved.connector && saved.repo) {
+          location.replace(nextPath);
+          return;
+        }
+        // Owner baked a connection into astro.config → clean "Start editing"
+        // screen, no developer form, no jargon.
+        if (preset.connector && preset.repo) {
+          showReady(preset);
+          return;
+        }
+        // No connection anywhere → show the form, prefilled from the last
+        // connection used (so Logout never forces a full retype) or a partial preset.
+        showForm({ ...preset, ...last });
+      }
+      function showReady(preset) {
+        const ready = document.querySelector("#ready");
+        const repoEl = document.querySelector("#ready-repo");
+        const readyError = document.querySelector("#ready-error");
+        if (repoEl && preset.repo) repoEl.textContent = preset.repo;
+        ready.hidden = false;
+        const form = document.querySelector("#ready-form");
+        const startButton = document.querySelector("#start-editing");
+        form?.addEventListener("submit", async (event) => {
+          event.preventDefault();
+          readyError.textContent = "";
+          startButton.disabled = true;
+          startButton.textContent = "Checking...";
+          const config = normalizeConfig({ ...preset, editorKey: form.elements.editorKey.value });
+          try {
+            const access = await verifyAccess(config);
+            // Owner didn't pin a branch → use the repository's real default
+            // (e.g. master), so a wrong "main" guess never silently 404s publishes.
+            if (!preset.branch && access.defaultBranch) config.branch = access.defaultBranch;
+            // The connection lives in astro.config, but the editor password is a
+            // secret that is not baked in — persist it (with the connection) so
+            // the editor runtime can send it on every publish.
+            saveConfig(config);
+            location.href = nextPath;
+          } catch (caught) {
+            readyError.textContent = readableError(caught);
+            startButton.disabled = false;
+            startButton.textContent = "Start editing";
+          }
+        });
+        document.querySelector("#switch-connection")?.addEventListener("click", () => {
+          ready.hidden = true;
+          showForm({ ...preset });
+        });
+      }
+      function showForm(prefill) {
+        const wrap = document.querySelector("#connect");
+        const form = document.querySelector("#connect-form");
+        const error = document.querySelector("#error");
+        wrap.hidden = false;
+        for (const [name, value] of Object.entries(prefill || {})) {
+          const input = form.elements[name];
+          if (input && value != null && value !== "") input.value = value;
+        }
+        form.addEventListener("submit", async (event) => {
+          event.preventDefault();
+          error.textContent = "";
+          const button = form.querySelector("button");
+          button.disabled = true;
+          button.textContent = "Checking...";
+          const config = normalizeConfig(Object.fromEntries(new FormData(form)));
+          try {
+            const access = await verifyAccess(config);
+            if (!form.elements.branch.value && access.defaultBranch) {
+              config.branch = access.defaultBranch;
+            }
+            saveConfig(config);
+            location.href = nextPath;
+          } catch (caught) {
+            error.textContent = readableError(caught);
+          } finally {
+            button.disabled = false;
+            button.textContent = "Connect";
+          }
+        });
+      }
+      function saveConfig(config) {
+        // Active credentials live only for this browser tab.
+        sessionStorage.setItem(configKey, JSON.stringify(config));
+        localStorage.removeItem(configKey);
+        // Remembered prefill copy must NOT carry the secret — it survives Logout.
+        const { editorKey, ...prefill } = config;
+        localStorage.setItem(lastKey, JSON.stringify(prefill));
+      }
+      function normalizeConfig(value) {
+        return {
+          repo: String(value.repo || "").trim(),
+          branch: String(value.branch || "main").trim() || "main",
+          connector: String(value.connector || "").trim().replace(/\/+$/g, ""),
+          sourceRoot: String(value.sourceRoot || "").trim().replace(/^\/+|\/+$/g, ""),
+          editorKey: String(value.editorKey || "").trim()
+        };
+      }
+      function safeLocalPath(value, fallback) {
+        const path = String(value || "");
+        return path.startsWith("/") && !path.startsWith("//") ? path : fallback;
+      }
+      async function verifyAccess(config) {
+        if (!config.connector) throw new ConnectorError("A CharlesCMS connector URL is required.");
+        if (!config.repo || !config.repo.includes("/")) throw new ConnectorError("Repository must be in owner/name form.");
+        const response = await fetch(`${config.connector}/api/verify`, {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+            ...(config.editorKey ? { "x-charlescms-auth": config.editorKey } : {})
+          },
+          body: JSON.stringify({ repo: config.repo, branch: config.branch })
+        });
+        const data = await response.json().catch(() => ({}));
+        if (!response.ok) throw new ConnectorError(data.error || `Connector request failed (${response.status}).`, response.status);
+        return data;
+      }
+      class ConnectorError extends Error {
+        constructor(message, status = 0) {
+          super(message);
+          this.status = status;
+        }
+      }
+      function readJSON(key) {
+        try {
+          return JSON.parse(localStorage.getItem(key) || "{}") || {};
+        } catch {
+          return {};
+        }
+      }
+      function readSession() {
+        try {
+          const current = JSON.parse(sessionStorage.getItem(configKey) || "{}") || {};
+          if (current.connector && current.repo) return current;
+          // Migrate older CharlesCMS sessions away from persistent localStorage.
+          const legacy = JSON.parse(localStorage.getItem(configKey) || "{}") || {};
+          if (legacy.connector && legacy.repo) {
+            sessionStorage.setItem(configKey, JSON.stringify(legacy));
+            const { editorKey, ...prefill } = legacy;
+            localStorage.setItem(lastKey, JSON.stringify(prefill));
+            localStorage.removeItem(configKey);
+            return legacy;
+          }
+        } catch {}
+        return {};
+      }
+      function readableError(caught) {
+        if (caught instanceof ConnectorError && caught.status === 401) return "Incorrect editor password.";
+        if (caught instanceof ConnectorError && caught.status === 403) return "This connector does not allow this site origin or repository.";
+        if (caught instanceof ConnectorError && caught.status === 404) return "Repository not found, or the Git provider app/token cannot access it.";
+        return caught?.message || "Could not connect to the CharlesCMS connector.";
+      }
+    </script>
+  </body>
+</html>