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/src/content-panel.js ADDED Viewed

@@ -0,0 +1,440 @@
+// Owns content discovery and deterministic forms for data and frontmatter.
+//
+// The panel holds only what has no clickable spot on the page (page settings,
+// stored data that doesn't render here); search spans everything. Selecting a
+// row opens a form whose inputs are bound to exact source-map operation ids; DOM
+// text matching is never used to decide what source bytes should be written.
+import { routeFromAstroFile } from "./routes.js";
+import { registerMediaPreview, publicPathFromRepoPath, applyMediaPreviews } from "./media-preview.js";
+export function createContentPanel({
+  state,
+  routeFromMarkdownFile,
+  closeEditor,
+  mountPanel,
+  stageEdit,
+  downloadRepoPath,
+  fileToBase64,
+  setToolbarStatus,
+  escapeHtml,
+  escapeAttribute
+}) {
+  function isFrontmatterEntry(entry) {
+    return entry.operations?.length === 1 && entry.operations[0].kind === "frontmatter";
+  }
+  function isMarkdownBodyEntry(entry) {
+    const kind = entry.operations?.[0]?.kind;
+    return kind === "markdown-text" || kind === "markdown-block";
+  }
+  function frontmatterGroups() {
+    // Keep fields in source order so the form follows the document rather than
+    // an arbitrary object/map iteration order.
+    const groups = new Map();
+    for (const entry of state.allSourceMap.filter(isFrontmatterEntry).filter(isEditorFacingFrontmatter)) {
+      if (!groups.has(entry.file)) groups.set(entry.file, []);
+      groups.get(entry.file).push(entry);
+    }
+    for (const entries of groups.values()) {
+      entries.sort((a, b) => a.operations[0].start - b.operations[0].start);
+    }
+    return groups;
+  }
+  function isEditorFacingFrontmatter(entry) {
+    return entry.operations?.[0]?.name !== "layout";
+  }
+  // "Page info" edits the fields that render nowhere visible on the page —
+  // the Google/browser-tab title, the meta description, and any other
+  // frontmatter — for Markdown pages AND .astro pages alike.
+  function openPageSettings() {
+    const markdown = markdownPageInfo();
+    if (markdown) {
+      openFrontmatterPanel(markdown.file, markdown.entries, "Page info");
+      return;
+    }
+    const astro = astroPageInfo();
+    if (astro) {
+      openDataModulePanel(astro.file, astro.entries, null, "Page info");
+      return;
+    }
+    setToolbarStatus("This page has no hidden fields to edit.");
+  }
+  function markdownPageInfo() {
+    const here = location.pathname.replace(/\/+$/, "") || "/";
+    const groups = frontmatterGroups();
+    const matchedFile = state.sourceMap.find(isMarkdownBodyEntry)?.file;
+    const group = matchedFile && groups.has(matchedFile)
+      ? [matchedFile, groups.get(matchedFile)]
+      : [...groups.entries()].find(([file]) => routeFromMarkdownFile(file) === here);
+    return group ? { file: group[0], entries: group[1] } : null;
+  }
+  // The current page's prop fields whose value never shows in the page's
+  // visible text — on a typical .astro page that is exactly the <head> title
+  // and description. Values that DO show on the page are edited by clicking
+  // them there, so they stay out of this form. Presentation-only filtering:
+  // every write still goes through the entry's exact source operations.
+  function astroPageInfo() {
+    const here = location.pathname.replace(/\/+$/, "") || "/";
+    const visible = normalizeForCompare(document.body.innerText);
+    for (const [file, entries] of dataModules()) {
+      if (!/\.astro$/i.test(file) || routeFromAstroFile(file, "") !== here) continue;
+      const picked = [];
+      for (const entry of entries) {
+        const hiddenOps = entry.operations.filter((operation) => {
+          const value = normalizeForCompare(operation.oldValue);
+          return value.length > 1 && !visible.includes(value.slice(0, 80));
+        });
+        if (hiddenOps.length) picked.push({ ...entry, operations: hiddenOps });
+      }
+      if (picked.length) return { file, entries: picked };
+    }
+    return null;
+  }
+  function normalizeForCompare(value) {
+    return String(value || "").replace(/\s+/g, " ").trim().toLowerCase();
+  }
+  function dataModules() {
+    // Navigation and general data share one deterministic form model. Their kind
+    // is retained because the source writer applies different safety rules.
+    const groups = new Map();
+    for (const entry of (state.allSourceMap || []).filter((item) => item.kind === "data" || item.kind === "nav")) {
+      if (!groups.has(entry.file)) groups.set(entry.file, []);
+      groups.get(entry.file).push(entry);
+    }
+    return groups;
+  }
+  // Whether the toolbar should offer the "Page info" button at all.
+  function currentPageHasFrontmatter() {
+    return Boolean(markdownPageInfo() || astroPageInfo());
+  }
+  function groupEntryFields(entry) {
+    // Analyzer-generated operation names encode array item boundaries. Turning
+    // them back into groups makes a menu/card collection readable to editors
+    // without exposing source filenames or implementation terminology.
+    const groups = new Map();
+    const ensure = (key, heading) => {
+      if (!groups.has(key)) groups.set(key, { key, heading, ops: [], media: [] });
+      return groups.get(key);
+    };
+    for (const operation of entry.operations) {
+      const item = operation.name.match(/^item(\d+)_/);
+      if (item) ensure(`i${item[1]}`, `#${Number(item[1]) + 1}`).ops.push(operation);
+      else if (/^item_\d+$/.test(operation.name)) ensure("links", "Menu links").ops.push(operation);
+      else if (/^prop\d+_/.test(operation.name)) ensure("page", "Page text").ops.push(operation);
+      else ensure("fields", "Details").ops.push(operation);
+    }
+    for (const media of entry.media || []) {
+      const item = media.name.match(/^item(\d+)_/);
+      ensure(item ? `i${item[1]}` : "images", item ? `#${Number(item[1]) + 1}` : "Images").media.push(media);
+    }
+    for (const group of groups.values()) {
+      const titleOperation = group.ops.find((operation) => /_(?:name|title|label|heading)$/i.test(operation.name));
+      if (!titleOperation) continue;
+      const value = state.pending.get(entry.id)?.value?.[titleOperation.name] ?? titleOperation.oldValue;
+      if (String(value || "").trim()) group.heading = value;
+    }
+    return [...groups.values()];
+  }
+  function dataFieldLabel(operation) {
+    if (operation.href) return operation.href;
+    let match = operation.name.match(/^item\d+_(.+)$/);
+    if (match) return fieldLabel(match[1]);
+    match = operation.name.match(/^item_(\d+)$/);
+    if (match) return `Link ${Number(match[1]) + 1}`;
+    match = operation.name.match(/^(?:field|prop)\d+_(.+)$/);
+    if (match) return fieldLabel(match[1]);
+    return fieldLabel(operation.name);
+  }
+  function openDataModulePanel(file, entries, focus, panelTitle) {
+    closeEditor();
+    const dialog = document.createElement("div");
+    dialog.dataset.charlescmsUi = "true";
+    dialog.className = "charlescms-panel charlescms-frontmatter";
+    const fieldHtml = (entry, operation) => {
+      const value = state.pending.get(entry.id)?.value?.[operation.name] ?? operation.oldValue;
+      const rows = Math.min(5, String(value).split("\n").length);
+      const control = String(value).length > 60
+        ? `<textarea data-data-entry="${escapeAttribute(entry.id)}" data-data-name="${escapeAttribute(operation.name)}" rows="${rows}">${escapeHtml(value)}</textarea>`
+        : `<input data-data-entry="${escapeAttribute(entry.id)}" data-data-name="${escapeAttribute(operation.name)}" value="${escapeAttribute(value)}">`;
+      const label = dataFieldLabel(operation);
+      const hint = panelTitle ? pageInfoHint(label) : "";
+      // The title attribute is the developer's x-ray: hovering a field reveals
+      // the technical operation name without adding any visible noise.
+      return `<label title="${escapeAttribute(operation.name)}">${escapeHtml(label)}${hint ? `<small class="charlescms-field-hint">${escapeHtml(hint)}</small>` : ""}\n${control}</label>`;
+    };
+    dialog.innerHTML = `
+      <div class="charlescms-panel-header">
+        <div>
+          <div class="charlescms-title">${escapeHtml(panelTitle || contentFileLabel(file))}</div>
+          ${panelTitle ? `<p class="charlescms-panel-subtitle">Fields that don't appear on the page itself.</p>` : ""}
+        </div>
+        <button class="charlescms-icon-button" data-close aria-label="Close">×</button>
+      </div>
+      <div class="charlescms-frontmatter-fields">
+        ${entries.map((entry) => groupEntryFields(entry).map((group) => `
+          <div class="charlescms-data-block" data-block="${escapeAttribute(`${entry.id}:${group.key}`)}">
+            ${group.heading && !panelTitle ? `<div class="charlescms-data-group">${escapeHtml(group.heading)}</div>` : ""}
+            ${group.ops.map((operation) => fieldHtml(entry, operation)).join("")}
+            ${group.media.map((media) => mediaFieldHtml(media)).join("")}
+          </div>
+        `).join("")).join("")}
+      </div>
+      <p class="charlescms-panel-note">Editing the content here updates every place it appears on the site. Link destinations and image paths are fixed; replacing an image overwrites the file in place. Changes apply after you publish and the site redeploys.</p>
+      <div class="charlescms-panel-source">${escapeHtml(sourceBadge(file, panelTitle ? "page props" : "data"))}</div>
+      <div class="charlescms-actions"><button data-close>Cancel</button><button data-save>Save changes</button></div>
+    `;
+    mountPanel(dialog);
+    if (focus) {
+      const block = dialog.querySelector(`[data-block="${CSS.escape(`${focus.entryId}:${focus.groupKey}`)}"]`);
+      if (block) {
+        block.scrollIntoView({ block: "center" });
+        block.classList.add("charlescms-flash");
+        const field = (focus.opName && block.querySelector(`[data-data-name="${CSS.escape(focus.opName)}"]`))
+          || block.querySelector("input, textarea");
+        field?.focus();
+        field?.select?.();
+      }
+    }
+    for (const input of dialog.querySelectorAll("[data-data-media]")) input.addEventListener("change", replaceDataMedia);
+    for (const close of dialog.querySelectorAll("[data-close]")) close.addEventListener("click", closeEditor);
+    dialog.querySelector("[data-save]").addEventListener("click", () => saveDataModule(dialog, file));
+  }
+  // A live "this is how the page appears on Google" preview. It mirrors the
+  // form's Title and Description fields as the user types, which explains these
+  // otherwise-invisible fields better than any label could.
+  // A whisper-quiet provenance line for developers ("about.md · frontmatter",
+  // "contact.astro · page props") — tiny and tucked under the form so it never
+  // distracts a non-technical editor.
+  function sourceBadge(file, kind) {
+    return `${String(file).replace(/\\/g, "/").split("/").pop()} · ${kind}`;
+  }
+  // Field hints for the Page info form: each field says where it shows up, so
+  // the form never needs to be decoded ("what is this title for?").
+  function pageInfoHint(label) {
+    if (/^title$/i.test(label)) return "The blue headline on Google — and the name of the browser tab.";
+    if (/^description$/i.test(label)) return "The grey text under the headline on Google.";
+    return "";
+  }
+  function saveDataModule(dialog, file) {
+    // Stage only entries with changed inputs. Each staged value still includes
+    // all fields in that entry so the writer receives a complete, stable shape.
+    const touched = new Set();
+    for (const input of dialog.querySelectorAll("[data-data-entry]")) {
+      const entry = state.sourceMapById.get(input.dataset.dataEntry);
+      const operation = entry?.operations?.find((item) => item.name === input.dataset.dataName);
+      if (!entry || !operation) continue;
+      const current = state.pending.get(entry.id)?.value?.[operation.name] ?? operation.oldValue;
+      if (input.value !== current) touched.add(entry);
+    }
+    for (const entry of touched) {
+      const original = {};
+      const value = {};
+      for (const operation of entry.operations) {
+        original[operation.name] = operation.oldValue;
+        const input = dialog.querySelector(`[data-data-entry="${CSS.escape(entry.id)}"][data-data-name="${CSS.escape(operation.name)}"]`);
+        value[operation.name] = input ? input.value : operation.oldValue;
+      }
+      const item = {
+        id: entry.id,
+        element: null,
+        fields: entry.operations.map((operation) => operation.name),
+        type: entry.kind === "nav" ? "nav" : "data",
+        value: original,
+        label: `${contentFileLabel(file)}: ${entry.label}`
+      };
+      stageEdit(item, value, {
+        id: entry.id,
+        type: item.type,
+        route: location.pathname,
+        value,
+        label: item.label,
+        original: JSON.stringify(original)
+      });
+      applyBridgedValues(entry.id, value);
+    }
+    closeEditor();
+  }
+  // Push saved values back into the page immediately: every element the bridge
+  // bound for this entry carries the operation name it renders, so the preview
+  // updates the moment Save is pressed — publish is only for going live.
+  function applyBridgedValues(entryId, value) {
+    for (const node of document.querySelectorAll(`[data-charlescms-bridge-entry="${CSS.escape(entryId)}"]`)) {
+      const operationName = node.dataset.charlescmsBridgeOp;
+      if (operationName === undefined || value[operationName] === undefined) continue;
+      if (node.tagName === "IMG") continue; // media swaps run through their own flow
+      setBridgedText(node, String(value[operationName]));
+    }
+  }
+  function setBridgedText(node, text) {
+    // Elements with child markup keep their structure: the FIRST non-empty text
+    // node — at any depth — is replaced. Walking the whole subtree (not just direct
+    // children) is what makes a menu link reflect its edit: an active nav link
+    // renders its label next to an indicator element, and a link can wrap its label
+    // in a <span>, so the text we must update is nested, not a direct child. The old
+    // direct-child-only check missed those and prepended a duplicate instead.
+    if (!node.children.length) {
+      node.textContent = text;
+      return;
+    }
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+    let textNode;
+    while ((textNode = walker.nextNode())) {
+      if (textNode.textContent.trim()) {
+        textNode.textContent = text;
+        return;
+      }
+    }
+    node.prepend(document.createTextNode(text));
+  }
+  function decodeFrontmatterValue(value, quote) {
+    // Source-map values preserve source escaping. Forms display the human value;
+    // the source writer later re-encodes it using the original quote style.
+    const raw = String(value ?? "");
+    if (quote === '"') {
+      try { return JSON.parse(`"${raw}"`); } catch { return raw; }
+    }
+    if (quote === "'") return raw.replaceAll("''", "'");
+    return raw;
+  }
+  function mediaFieldHtml(media) {
+    const repoPath = downloadRepoPath(media.path);
+    const thumb = `<img src="${escapeAttribute(media.path)}" alt="" style="width:44px;height:44px;object-fit:cover;border-radius:6px;margin-right:10px;vertical-align:middle;border:1px solid rgba(0,0,0,.1)">`;
+    const control = state.previewOnly
+      ? "<span>Uploads are disabled in this demo.</span>"
+      : repoPath
+        ? `<input type="file" accept="image/*" data-data-media="${escapeAttribute(repoPath)}">`
+        : "<span>External or dynamic image — not replaceable.</span>";
+    return `<label>${escapeHtml(media.label)} · image\n<span style="display:flex;align-items:center">${thumb}${control}</span></label>`;
+  }
+  async function replaceDataMedia(event) {
+    if (state.previewOnly) return;
+    const file = event.target.files?.[0];
+    const repoPath = event.target.dataset.dataMedia;
+    if (!file || !repoPath) return;
+    event.target.disabled = true;
+    try {
+      const existing = await state.connector.getFile(repoPath).catch(() => null);
+      await state.connector.putBase64(repoPath, await fileToBase64(file), {
+        sha: existing?.sha,
+        message: `Replace image: ${repoPath}`
+      });
+      // Show the new image right away (on the page and the thumbnail) — the
+      // committed file isn't served until the site rebuilds, so a local blob
+      // bridges the gap and survives navigation within the session.
+      registerMediaPreview(publicPathFromRepoPath(repoPath), file);
+      applyMediaPreviews();
+      setToolbarStatus(`Replaced ${repoPath}. Redeploy to serve the new file.`);
+    } catch (error) {
+      setToolbarStatus(error.message || "Replace failed.");
+    } finally {
+      event.target.disabled = false;
+    }
+  }
+  function openFrontmatterPanel(file, entries, panelTitle) {
+    closeEditor();
+    const dialog = document.createElement("div");
+    dialog.dataset.charlescmsUi = "true";
+    dialog.className = "charlescms-panel charlescms-frontmatter";
+    dialog.innerHTML = `
+      <div class="charlescms-panel-header">
+        <div>
+          <div class="charlescms-title">${escapeHtml(panelTitle || contentFileLabel(file))}</div>
+          ${panelTitle ? `<p class="charlescms-panel-subtitle">Fields that don't appear on the page itself.</p>` : ""}
+        </div>
+        <button class="charlescms-icon-button" data-close aria-label="Close">×</button>
+      </div>
+      <div class="charlescms-frontmatter-fields">
+        ${entries.map((entry) => {
+          const operation = entry.operations[0];
+          const value = state.pending.get(entry.id)?.value?.[operation.name]
+            ?? decodeFrontmatterValue(operation.oldValue, operation.quote);
+          const rows = Math.min(6, value.split("\n").length);
+          const label = fieldLabel(operation.name);
+          const hint = panelTitle ? pageInfoHint(label) : "";
+          return `<label title="${escapeAttribute(operation.name)}">${escapeHtml(label)}${hint ? `<small class="charlescms-field-hint">${escapeHtml(hint)}</small>` : ""}
+            <textarea data-frontmatter-id="${escapeAttribute(entry.id)}" rows="${rows}">${escapeHtml(value)}</textarea>
+          </label>`;
+        }).join("")}
+      </div>
+      <div class="charlescms-panel-source">${escapeHtml(sourceBadge(file, "frontmatter"))}</div>
+      <div class="charlescms-actions"><button data-close>Cancel</button><button data-save>Save changes</button></div>
+    `;
+    mountPanel(dialog);
+    for (const close of dialog.querySelectorAll("[data-close]")) close.addEventListener("click", closeEditor);
+    dialog.querySelector("[data-save]").addEventListener("click", () => {
+      for (const input of dialog.querySelectorAll("[data-frontmatter-id]")) {
+        const entry = state.sourceMapById.get(input.dataset.frontmatterId);
+        const operation = entry?.operations?.[0];
+        if (!entry || !operation) continue;
+        const current = state.pending.get(entry.id)?.value?.[operation.name]
+          ?? decodeFrontmatterValue(operation.oldValue, operation.quote);
+        if (input.value === current) continue;
+        const value = { [operation.name]: input.value };
+        const item = {
+          id: entry.id,
+          element: null,
+          fields: [operation.name],
+          type: "frontmatter",
+          value: { [operation.name]: current },
+          label: `${contentFileLabel(file)}: ${fieldLabel(operation.name)}`
+        };
+        stageEdit(item, value, {
+          id: entry.id,
+          type: "frontmatter",
+          route: routeFromMarkdownFile(file) || location.pathname,
+          value,
+          label: item.label,
+          original: current
+        });
+        applyBridgedValues(entry.id, value);
+      }
+      closeEditor();
+    });
+  }
+  return {
+    isFrontmatterEntry,
+    isMarkdownBodyEntry,
+    frontmatterGroups,
+    dataModules,
+    currentPageHasFrontmatter,
+    applyBridgedValues,
+    openPageSettings,
+    openDataModulePanel,
+    openFrontmatterPanel
+  };
+}
+function contentFileLabel(file) {
+  const name = (String(file).replace(/\\/g, "/").split("/").pop() || file)
+    .replace(/\.(?:md|mdx|ts|js|mjs|cjs|json|astro)$/i, "");
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}
+function fieldLabel(name) {
+  return String(name)
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[-_.]+/g, " ")
+    .replace(/^./, (character) => character.toUpperCase());
+}