@codepress/blog 0.2.0 → 0.3.0

package/dist/chunks/chunk-BPAM7T27.js

@@ -0,0 +1,315 @@
+import {
+  BLOCK_ID_ATTRIBUTE,
+  PROPS_ATTRIBUTE
+} from "./chunk-XLJBCIXI.js";
+
+// src/editor/config.ts
+var DEFAULT_TIMINGS = {
+  autosaveMs: 2e3,
+  draftPollMs: 1e4,
+  publishReloadMs: 4e3
+};
+function resolveTimings(timings) {
+  const pick = (key) => {
+    const value = timings?.[key];
+    return typeof value === "number" && value > 0 ? value : DEFAULT_TIMINGS[key];
+  };
+  return {
+    autosaveMs: pick("autosaveMs"),
+    draftPollMs: pick("draftPollMs"),
+    publishReloadMs: pick("publishReloadMs")
+  };
+}
+var DEFAULT_COLUMN = "mx-auto w-full max-w-[720px] px-5 sm:px-8";
+var DEFAULT_APP_URL = "https://codepress.dev";
+var BLOG_TOOLBAR_BOTTOM_VAR = "--blog-toolbar-bottom";
+var EDITOR_SCOPE_CLASS = "cp-blog-editor";
+
+// src/editor/EditDesignLink.tsx
+import { jsx } from "react/jsx-runtime";
+function designTargetOf(capabilities) {
+  const {
+    organization_slug: organizationSlug,
+    repository_full_name: repository
+  } = capabilities;
+  return organizationSlug && repository ? { organizationSlug, repository } : null;
+}
+function designUrl({ organizationSlug, repository }, slug, appUrl = "") {
+  const query = new URLSearchParams({
+    repo: repository,
+    path: `/blog/${slug}`
+  });
+  return `${appUrl}/dashboard/${encodeURIComponent(organizationSlug)}/design?${query.toString()}`;
+}
+function EditDesignLink({
+  href,
+  children = "Edit design",
+  ...rest
+}) {
+  if (!href) return null;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-testid": "blog-edit-design",
+      children
+    }
+  );
+}
+
+// src/editor/document.ts
+import { isTag, isText } from "domhandler";
+import { parseDocument } from "htmlparser2";
+var META_ATTRIBUTE = "data-cp-meta";
+var WHITESPACE = /^\s*$/;
+var ASCII_SPACES = /[ \t\n\f\r]+/g;
+var ASCII_EDGE_START = /^[ \t\n\f\r]+/;
+var ASCII_EDGE_END = /[ \t\n\f\r]+$/;
+var ASCII_BLANK = /^[ \t\n\f\r]*$/;
+function textOf(node) {
+  return "data" in node && typeof node.data === "string" ? node.data : "";
+}
+function parseMeta(script) {
+  try {
+    const value = JSON.parse(script.children.map(textOf).join(""));
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      return { meta: value };
+    }
+  } catch {
+  }
+  return { meta: {}, problem: "The metadata block is not a JSON object." };
+}
+function parsePostSource(source) {
+  const doc = parseDocument(source, {
+    withStartIndices: true,
+    withEndIndices: true
+  });
+  const result = {
+    prefix: "",
+    metaText: "",
+    meta: {},
+    blocks: [],
+    gaps: [],
+    problems: []
+  };
+  let gap = "";
+  let sawMeta = false;
+  for (const node of doc.children) {
+    const start = node.startIndex ?? 0;
+    const end = (node.endIndex ?? start) + 1;
+    if (isText(node)) {
+      const raw = source.slice(start, end);
+      if (!WHITESPACE.test(raw)) {
+        result.problems.push(
+          `Text outside any block: "${raw.trim().slice(0, 40)}".`
+        );
+      }
+      gap += raw;
+      continue;
+    }
+    if (!isTag(node)) {
+      result.problems.push("The file contains a comment or directive.");
+      gap += source.slice(start, end);
+      continue;
+    }
+    if (!sawMeta) {
+      sawMeta = true;
+      if (node.name === "script" && META_ATTRIBUTE in node.attribs) {
+        result.prefix = gap;
+        result.metaText = source.slice(start, end);
+        const parsed = parseMeta(node);
+        result.meta = parsed.meta;
+        if (parsed.problem) result.problems.push(parsed.problem);
+        gap = "";
+        continue;
+      }
+      result.problems.push("The file has no metadata block.");
+    }
+    result.gaps.push(gap);
+    gap = "";
+    result.blocks.push({
+      id: node.attribs[BLOCK_ID_ATTRIBUTE] ?? null,
+      tag: node.name,
+      text: source.slice(start, end)
+    });
+  }
+  if (!sawMeta) result.problems.push("The file has no metadata block.");
+  result.gaps.push(gap);
+  return result;
+}
+function serializeMeta(meta) {
+  const json = JSON.stringify(meta, null, 2).split("\n").map((line) => `  ${line}`).join("\n");
+  return `<script type="application/json" ${META_ATTRIBUTE}>
+${json}
+</script>`;
+}
+function sameJson(a, b) {
+  return JSON.stringify(canonicalJson(a)) === JSON.stringify(canonicalJson(b));
+}
+function canonicalJson(value) {
+  if (Array.isArray(value)) return value.map(canonicalJson);
+  if (value && typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([key, item]) => [key, canonicalJson(item)])
+    );
+  }
+  return value;
+}
+function assemblePostFile(source, meta, blocks) {
+  const keepMeta = source && source.metaText && sameJson(source.meta, meta);
+  const metaText = keepMeta ? source.metaText : serializeMeta(meta);
+  let out = (source?.prefix ?? "") + metaText;
+  let gap = "\n";
+  blocks.forEach((block, position) => {
+    const origin = block.sourceIndex ?? block.replaces ?? null;
+    if (source && origin != null) gap = source.gaps[origin] || "\n";
+    else if (source && position === 0) gap = source.gaps[0] || "\n";
+    const original = block.sourceIndex != null ? source?.blocks[block.sourceIndex] : void 0;
+    out += gap + (original ? original.text : block.html);
+  });
+  const trailing = source ? source.gaps[source.gaps.length - 1] : "\n";
+  return out + (trailing || "\n");
+}
+var BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "hr",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "figure",
+  "figcaption",
+  "div",
+  "cp-callout",
+  "cp-figure"
+]);
+var VOID_TAGS = /* @__PURE__ */ new Set(["br", "hr", "img"]);
+function collapse(text) {
+  return text.replace(ASCII_SPACES, " ");
+}
+function canonicalAttributes(node) {
+  return Object.entries(node.attribs).filter(([name]) => name !== BLOCK_ID_ATTRIBUTE).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([name, value]) => {
+    if (name === PROPS_ATTRIBUTE) {
+      try {
+        return `${name}=${JSON.stringify(canonicalJson(JSON.parse(value)))}`;
+      } catch {
+      }
+    }
+    return `${name}=${JSON.stringify(value)}`;
+  }).join(" ");
+}
+function canonicalChildren(children, preformatted, trimEdges) {
+  const parts = children.map(
+    (child) => isTag(child) ? { tag: child.name, text: canonicalElement(child, preformatted) } : {
+      tag: null,
+      text: preformatted ? textOf(child) : collapse(textOf(child))
+    }
+  );
+  if (!preformatted && trimEdges) {
+    const first = parts[0];
+    const last = parts[parts.length - 1];
+    if (first && first.tag === null)
+      first.text = first.text.replace(ASCII_EDGE_START, "");
+    if (last && last.tag === null)
+      last.text = last.text.replace(ASCII_EDGE_END, "");
+  }
+  return parts.filter((part, index) => {
+    if (preformatted || part.tag !== null) return true;
+    if (part.text === "") return false;
+    if (!ASCII_BLANK.test(part.text)) return true;
+    const neighbours = [parts[index - 1], parts[index + 1]];
+    return !neighbours.some((n) => n?.tag != null && BLOCK_TAGS.has(n.tag));
+  }).map((part) => part.text).join("");
+}
+var PARAGRAPH_WRAPPED = /* @__PURE__ */ new Set(["li", "blockquote", "cp-callout"]);
+function comparableChildren(node) {
+  if (!PARAGRAPH_WRAPPED.has(node.name)) return node.children;
+  const meaningful = node.children.filter(
+    (child) => !(isText(child) && ASCII_BLANK.test(child.data))
+  );
+  const only = meaningful.length === 1 ? meaningful[0] : void 0;
+  if (only && isTag(only) && only.name === "p" && Object.keys(only.attribs).every((name) => name === BLOCK_ID_ATTRIBUTE)) {
+    return only.children;
+  }
+  return node.children;
+}
+function canonicalElement(node, preformatted) {
+  const attributes = canonicalAttributes(node);
+  const open = `<${node.name}${attributes ? ` ${attributes}` : ""}>`;
+  if (VOID_TAGS.has(node.name)) return open;
+  const inside = preformatted || node.name === "pre";
+  const trimEdges = BLOCK_TAGS.has(node.name);
+  return `${open}${canonicalChildren(comparableChildren(node), inside, trimEdges)}</${node.name}>`;
+}
+function canonicalBlock(html) {
+  return canonicalChildren(parseDocument(html).children, false, true);
+}
+
+// src/editor/header.ts
+import { useLayoutEffect, useState } from "react";
+var DEFAULT_HEADER_SELECTOR = "[data-blog-header]";
+function findHostHeader(selector, editorRoot) {
+  const matched = document.querySelector(
+    selector ?? DEFAULT_HEADER_SELECTOR
+  );
+  if (matched) return matched;
+  return Array.from(document.querySelectorAll("header")).find(
+    (element) => !editorRoot?.contains(element)
+  ) ?? null;
+}
+function useHeaderOffset(header, own) {
+  const selector = header?.selector;
+  const offset = header?.offset;
+  const [height, setHeight] = useState(0);
+  useLayoutEffect(() => {
+    if (offset !== void 0) return;
+    const element = findHostHeader(
+      selector,
+      own.current?.closest('[data-testid="blog-editor"]') ?? own.current
+    );
+    if (!element) {
+      setHeight(0);
+      return;
+    }
+    const update = () => setHeight(element.offsetHeight);
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [selector, offset, own]);
+  return offset ?? height;
+}
+
+export {
+  DEFAULT_TIMINGS,
+  resolveTimings,
+  DEFAULT_COLUMN,
+  DEFAULT_APP_URL,
+  BLOG_TOOLBAR_BOTTOM_VAR,
+  EDITOR_SCOPE_CLASS,
+  designTargetOf,
+  designUrl,
+  EditDesignLink,
+  parsePostSource,
+  assemblePostFile,
+  canonicalBlock,
+  DEFAULT_HEADER_SELECTOR,
+  useHeaderOffset
+};

package/dist/chunks/{chunk-3GCZFCUK.js → chunk-LFSX43CO.js}

@@ -6,10 +6,13 @@ import {
 var DEFAULT_API_BASE = "https://api.codepress.dev/v1";
 var DEFAULT_BASE_PATH = "/blog";
 var DEFAULT_REVALIDATE_SECONDS = 60;
+var DEFAULT_APP_URL = "https://codepress.dev";
 function resolveBlog(config) {
   const origin = new URL(config.baseUrl).origin;
   const basePath = `/${(config.basePath ?? DEFAULT_BASE_PATH).replace(/^\/+|\/+$/g, "")}`;
   const name = config.name ?? new URL(origin).host;
+  const apiBase = config.apiBase ?? DEFAULT_API_BASE;
+  const revalidate = config.revalidate ?? DEFAULT_REVALIDATE_SECONDS;
   return {
     site: {
       baseUrl: `${origin}${basePath}`,
@@ -20,12 +23,19 @@ function resolveBlog(config) {
       defaultImage: config.defaultImage ?? ""
     },
     basePath,
-    revalidate: config.revalidate ?? DEFAULT_REVALIDATE_SECONDS,
+    revalidate,
     source: createHttpContentSource({
-      apiBase: config.apiBase ?? DEFAULT_API_BASE,
+      apiBase,
       site: config.site,
       timeoutMs: config.timeoutMs
-    })
+    }),
+    editing: {
+      site: config.site,
+      apiBase,
+      basePath,
+      appUrl: config.appUrl ?? DEFAULT_APP_URL,
+      revalidate
+    }
   };
 }
 function isBuildPhase() {
@@ -45,6 +55,7 @@ export {
   DEFAULT_API_BASE,
   DEFAULT_BASE_PATH,
   DEFAULT_REVALIDATE_SECONDS,
+  DEFAULT_APP_URL,
   resolveBlog,
   isBuildPhase,
   listPostsForRender

package/dist/chunks/{chunk-WJVZD4UI.js → chunk-PPMNLNLD.js}

@@ -65,10 +65,11 @@ function JsonLd({ data }) {
 function BlogIndexView({
   blog,
   posts,
-  structuredData = true
+  structuredData = true,
+  editor: Editor
 }) {
   const { site, basePath } = blog;
-  return /* @__PURE__ */ jsxs("main", { className: "cp-blog-index", style: PAGE_STYLE, children: [
+  const page = /* @__PURE__ */ jsxs("main", { className: "cp-blog-index", style: PAGE_STYLE, children: [
     structuredData ? /* @__PURE__ */ jsx(JsonLd, { data: indexJsonLd(site, posts) }) : null,
     /* @__PURE__ */ jsx("h1", { children: site.title }),
     /* @__PURE__ */ jsx("p", { style: MUTED_STYLE, children: site.description }),
@@ -78,14 +79,16 @@ function BlogIndexView({
       /* @__PURE__ */ jsx("p", { children: meta.description })
     ] }) }, slug)) })
   ] });
+  return Editor ? /* @__PURE__ */ jsx(Editor, { ...blog.editing, children: page }) : page;
 }
 function BlogPostView({
   blog,
   post,
-  structuredData = true
+  structuredData = true,
+  editor: Editor
 }) {
   const { meta, html } = post;
-  return /* @__PURE__ */ jsxs("main", { className: "cp-blog-post", style: PAGE_STYLE, children: [
+  const page = /* @__PURE__ */ jsxs("main", { className: "cp-blog-post", style: PAGE_STYLE, children: [
     structuredData ? postJsonLd(blog.site, post).map((data) => /* @__PURE__ */ jsx(JsonLd, { data }, data)) : null,
     /* @__PURE__ */ jsxs(Link, { href: blog.basePath, style: MUTED_STYLE, children: [
       /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2190" }),
@@ -103,6 +106,7 @@ function BlogPostView({
     ] }),
     /* @__PURE__ */ jsx("article", { className: "cp-blog-prose", children: renderPostBody(html) })
   ] });
+  return Editor ? /* @__PURE__ */ jsx(Editor, { ...blog.editing, slug: post.slug, children: page }) : page;
 }
 
 export {

package/dist/chunks/{chunk-3WRTL63O.js → chunk-WEBQTRDI.js}

@@ -13,7 +13,7 @@ function createDraftClient({
   auth
 }) {
   const root = apiBase.replace(/\/+$/, "");
-  const request = async (method, path, body) => {
+  const request = async (method, path, body, keepalive = false) => {
     const headers = { Accept: "application/json" };
     if (body !== void 0) headers["Content-Type"] = "application/json";
     const token = await auth.getToken();
@@ -21,7 +21,8 @@ function createDraftClient({
     const response = await fetch(`${root}${path}`, {
       method,
       headers,
-      body: body === void 0 ? void 0 : JSON.stringify(body)
+      body: body === void 0 ? void 0 : JSON.stringify(body),
+      keepalive
     });
     auth.onResponse?.(response);
     return response;
@@ -68,12 +69,14 @@ function createDraftClient({
         return { error: networkMessage };
       }
     },
-    async saveDraft(site, slug, html, baseSha) {
+    async saveDraft(site, slug, html, baseSha, options) {
       try {
-        const response = await request("PUT", draftPath(site, slug), {
-          html,
-          base_sha: baseSha
-        });
+        const response = await request(
+          "PUT",
+          draftPath(site, slug),
+          { html, base_sha: baseSha },
+          options?.keepalive
+        );
         if (response.ok) {
           return { kind: "saved", draft: await response.json() };
         }

package/dist/cli.js

@@ -25,6 +25,8 @@ Options:
   --base-path <path>   Where the blog is mounted (default: /blog)
   --api-base <url>     The CodePress API root (default: https://api.codepress.dev/v1)
   --revalidate <secs>  Seconds between ISR regenerations (default: 60)
+  --app-url <url>      The CodePress app editors sign in on
+                       (default: https://codepress.dev)
   --router <app|pages> Which router to use (default: detected)
   --force              Overwrite the files init writes when they already exist.
                        A /blog route served by another file (the other router,
@@ -36,6 +38,15 @@ Options:
 var SITE_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 var PATH_SEGMENT = /^[a-z0-9]+(?:[-_][a-z0-9]+)*$/;
 var CONFIG_BASENAME = "codepress-blog";
+var EDITOR_BASENAME = "codepress-blog-editor";
+var EDITOR_DEPENDENCIES = {
+  "@tiptap/extension-image": "3.24.0",
+  "@tiptap/extension-unique-id": "3.24.0",
+  "@tiptap/pm": "3.24.0",
+  "@tiptap/react": "3.24.0",
+  "@tiptap/starter-kit": "3.24.0",
+  "@tiptap/suggestion": "3.24.0"
+};
 var InitError = class extends Error {
 };
 function readPackageJson(root) {
@@ -70,9 +81,10 @@ function detectLayout(root, forced) {
     );
   }
   const routesDir = (router === "app" ? app : pages) ?? path.join(root, router);
-  const allRoutesDirs = ["app", "pages"].flatMap(
-    (name) => [path.join(root, name), path.join(root, "src", name)].filter(isDirectory).map((dir) => ({ dir, router: name }))
-  );
+  const allRoutesDirs = [
+    ...app ? [{ dir: app, router: "app" }] : [],
+    ...pages ? [{ dir: pages, router: "pages" }] : []
+  ];
   return {
     root,
     router,
@@ -82,7 +94,13 @@ function detectLayout(root, forced) {
     typescript: existsSync(path.join(root, "tsconfig.json"))
   };
 }
-var BLOG_ROUTE_KEYS = /* @__PURE__ */ new Set(["", "[]", "feed.xml", "sitemap.xml"]);
+var BLOG_ROUTE_KEYS = /* @__PURE__ */ new Set([
+  "",
+  "[]",
+  "feed.xml",
+  "sitemap.xml",
+  "__cp/callback"
+]);
 function routeKey(segments) {
   if (segments.some((segment) => segment.startsWith("[[..."))) return "*";
   return segments.map((segment) => segment.startsWith("[") ? "[]" : segment).join("/");
@@ -95,8 +113,10 @@ function existingRoutes(dir, router, basePath) {
       const full = path.join(current, entry);
       if (isDirectory(full)) {
         if (entry === "node_modules") continue;
+        if (router === "app" && entry.startsWith("_")) continue;
         const invisible = /^\(.*\)$/.test(entry) || entry.startsWith("@");
-        walk(full, invisible ? url : [...url, entry]);
+        const segment = router === "app" ? entry.replace(/%5F/gi, "_") : entry;
+        walk(full, invisible ? url : [...url, segment]);
         continue;
       }
       if (!/\.(mdx?|[cm]?[jt]sx?)$/.test(entry)) continue;
@@ -145,6 +165,7 @@ function configSource(layout, options) {
     options.baseUrl ? `  baseUrl: ${JSON.stringify(options.baseUrl)},` : `  baseUrl: process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000",`,
     `  basePath: ${JSON.stringify(options.basePath)},`,
     ...options.apiBase ? [`  apiBase: ${JSON.stringify(options.apiBase)},`] : [],
+    ...options.appUrl ? [`  appUrl: ${JSON.stringify(options.appUrl)},`] : [],
     `  revalidate: ${options.revalidate},`
   ];
   const typed = layout.typescript;
@@ -165,17 +186,36 @@ function routeFiles(layout, options, configFile) {
     ...options.basePath.split("/").filter(Boolean)
   );
   const files = /* @__PURE__ */ new Map();
-  const add = (file, body) => files.set(file, body(importPath(file, configFile)));
+  const add = (file, body) => files.set(file, body(importPath(file, configFile), file));
   const css = `import "@codepress/blog/blog.css";
 `;
   const r = options.revalidate;
+  const editorFile = path.join(layout.configDir, `${EDITOR_BASENAME}.${ext}`);
+  const editor = (file) => importPath(file, editorFile);
+  files.set(
+    editorFile,
+    `"use client";
+// Written by \`npx @codepress/blog init\`. Editing on this site's own pages,
+// for editors who sign in through CodePress. It renders nothing unless the
+// content site reports host editing enabled. \`@codepress/blog/editor\` also
+// exports helpers, so it is not a client boundary itself: import the editor
+// through this file.
+import "@codepress/blog/editor.css";
+
+export {
+  HostEditing as BlogEditor,
+  HostEditorCallback as BlogEditorCallback,
+} from "@codepress/blog/editor";
+`
+  );
   if (layout.router === "app") {
     add(
       path.join(base, `page.${ext}`),
-      (config) => `${css}import { createAppBlog } from "@codepress/blog/next";
+      (config, file) => `${css}import { createAppBlog } from "@codepress/blog/next";
 import { blogConfig } from "${config}";
+import { BlogEditor } from "${editor(file)}";
 
-const blog = createAppBlog(blogConfig);
+const blog = createAppBlog(blogConfig, { editor: BlogEditor });
 
 export const revalidate = ${r};
 export const generateMetadata = blog.generateIndexMetadata;
@@ -184,16 +224,30 @@ export default blog.IndexPage;
     );
     add(
       path.join(base, "[slug]", `page.${ext}`),
-      (config) => `${css}import { createAppBlog } from "@codepress/blog/next";
+      (config, file) => `${css}import { createAppBlog } from "@codepress/blog/next";
 import { blogConfig } from "${config}";
+import { BlogEditor } from "${editor(file)}";
 
-const blog = createAppBlog(blogConfig);
+const blog = createAppBlog(blogConfig, { editor: BlogEditor });
 
 export const revalidate = ${r};
 export const dynamicParams = true;
 export const generateStaticParams = blog.generateStaticParams;
 export const generateMetadata = blog.generatePostMetadata;
 export default blog.PostPage;
+`
+    );
+    add(
+      // `%5F` makes the segment `__cp`: a folder starting with `_` is private.
+      path.join(base, "%5F_cp", "callback", `page.${ext}`),
+      (config, file) => `import { createAppBlog } from "@codepress/blog/next";
+import { blogConfig } from "${config}";
+import { BlogEditorCallback } from "${editor(file)}";
+
+const blog = createAppBlog(blogConfig, { callback: BlogEditorCallback });
+
+export const metadata = blog.callbackMetadata;
+export default blog.CallbackPage;
 `
     );
     add(
@@ -217,10 +271,11 @@ export const GET = createAppBlogRoutes(blogConfig).sitemap;
   } else {
     add(
       path.join(base, `index.${ext}`),
-      (config) => `${css}import { createPagesBlog } from "@codepress/blog/next/pages";
+      (config, file) => `${css}import { createPagesBlog } from "@codepress/blog/next/pages";
 import { blogConfig } from "${config}";
+import { BlogEditor } from "${editor(file)}";
 
-const blog = createPagesBlog(blogConfig);
+const blog = createPagesBlog(blogConfig, { editor: BlogEditor });
 
 export const getStaticProps = blog.getIndexStaticProps;
 export default blog.IndexPage;
@@ -228,14 +283,26 @@ export default blog.IndexPage;
     );
     add(
       path.join(base, `[slug].${ext}`),
-      (config) => `${css}import { createPagesBlog } from "@codepress/blog/next/pages";
+      (config, file) => `${css}import { createPagesBlog } from "@codepress/blog/next/pages";
 import { blogConfig } from "${config}";
+import { BlogEditor } from "${editor(file)}";
 
-const blog = createPagesBlog(blogConfig);
+const blog = createPagesBlog(blogConfig, { editor: BlogEditor });
 
 export const getStaticPaths = blog.getPostStaticPaths;
 export const getStaticProps = blog.getPostStaticProps;
 export default blog.PostPage;
+`
+    );
+    add(
+      path.join(base, "__cp", `callback.${ext}`),
+      (config, file) => `import { createPagesBlog } from "@codepress/blog/next/pages";
+import { blogConfig } from "${config}";
+import { BlogEditorCallback } from "${editor(file)}";
+
+const blog = createPagesBlog(blogConfig, { callback: BlogEditorCallback });
+
+export default blog.CallbackPage;
 `
     );
     add(
@@ -272,6 +339,7 @@ function parseOptions(argv) {
       "base-url": { type: "string" },
       "base-path": { type: "string", default: "/blog" },
       "api-base": { type: "string" },
+      "app-url": { type: "string" },
       revalidate: { type: "string", default: "60" },
       router: { type: "string" },
       force: { type: "boolean", default: false },
@@ -296,7 +364,8 @@ function validate(values) {
   }
   for (const [flag, value] of [
     ["--base-url", values["base-url"]],
-    ["--api-base", values["api-base"]]
+    ["--api-base", values["api-base"]],
+    ["--app-url", values["app-url"]]
   ]) {
     if (value !== void 0 && !/^https?:\/\/[^/]/.test(value)) {
       throw new InitError(`${flag} must be an http(s) URL, not "${value}".`);
@@ -313,6 +382,7 @@ function validate(values) {
     baseUrl: values["base-url"]?.replace(/\/+$/, ""),
     basePath: `/${segments.join("/")}`,
     apiBase: values["api-base"],
+    appUrl: values["app-url"]?.replace(/\/+$/, ""),
     revalidate
   };
 }
@@ -376,9 +446,18 @@ function runInit(argv, {
     const dependencies = {
       ...pkg.dependencies
     };
-    const dependencyChanged = !dependencies["@codepress/blog"];
+    const devDependencies = pkg.devDependencies ?? {};
+    const added = [];
+    for (const [name, range] of Object.entries({
+      "@codepress/blog": `^${version2}`,
+      ...EDITOR_DEPENDENCIES
+    })) {
+      if (dependencies[name] || devDependencies[name]) continue;
+      dependencies[name] = range;
+      added.push(`${name}@${range}`);
+    }
+    const dependencyChanged = added.length > 0;
     if (dependencyChanged) {
-      dependencies["@codepress/blog"] = `^${version2}`;
       pkg.dependencies = Object.fromEntries(
         Object.entries(dependencies).sort(([a], [b]) => a.localeCompare(b))
       );
@@ -395,12 +474,15 @@ function runInit(argv, {
     if (dependencyChanged) {
       writeFileSync(pkgFile, `${JSON.stringify(pkg, null, 2)}
 `);
-      io.log(`  added @codepress/blog@^${version2} to package.json`);
+      for (const name of added) io.log(`  added ${name} to package.json`);
     }
     io.log("");
     io.log(
       "The pages render inside your root layout and import @codepress/blog/blog.css."
     );
+    io.log(
+      `Editing on these pages shows once your CodePress organization turns on blog host editing and lists this site's origin in the content site's allowed origins. Mark your header with data-blog-header so the editor's toolbar pins below it.`
+    );
     if (dependencyChanged)
       io.log("Next: install dependencies (npm install, pnpm install or yarn).");
     if (!options.baseUrl) {