@kdrgny/justjson 1.7.0 → 1.8.0

package/README.md

@@ -43,6 +43,7 @@ Design your schema, enter content, upload images. Everything is written to `cont
 | **Validate in CI** | `justjson validate` checks content against the schema — broken relations, duplicate slugs, missing media, type errors. Exits non-zero on failure. |
 | **Draft / published** | Toggle an entry's status; the generated loader returns published entries by default. |
 | **One-click site** | No site yet? `init --astro` (or a button in the editor) generates a working Astro site around your content. |
+| **Design & Preview** | Theme your generated site (palette, accent, font, corners) with a live sample, and run it inside the editor to watch changes land. |
 | **Ship it** | Setup snippet for your framework, one-click content commit, push to GitHub, then deploy links for Vercel and Netlify — using the `git`/`gh` already on your machine. No tokens stored. |
 | **Astro collections** | [`@kdrgny/justjson-astro`](https://www.npmjs.com/package/@kdrgny/justjson-astro) turns your content into typed Astro content collections in one line. |
 | **English or Turkish** | The editor ships in English; switch to Turkish from the project menu any time. |

package/dist/cli.js

@@ -4707,6 +4707,86 @@ function inferProject(data) {
   }
   return { schema: { version: 1, collections, singletons }, entries, singletons: singletonData };
 }
+var PALETTES = [
+  {
+    id: "paper",
+    label: "Paper",
+    bg: "#faf9f5",
+    text: "#1c1a17",
+    muted: "#6b6558",
+    border: "#e4e0d5"
+  },
+  {
+    id: "plain",
+    label: "Plain",
+    bg: "#ffffff",
+    text: "#18181b",
+    muted: "#71717a",
+    border: "#e4e4e7"
+  },
+  { id: "ink", label: "Ink", bg: "#141414", text: "#f4f4f5", muted: "#a1a1aa", border: "#2a2a2a" },
+  {
+    id: "sand",
+    label: "Sand",
+    bg: "#f5f1e8",
+    text: "#2b2620",
+    muted: "#7a7060",
+    border: "#ddd5c4"
+  },
+  { id: "sky", label: "Sky", bg: "#f7fafc", text: "#111b26", muted: "#5d7183", border: "#dbe6ef" }
+];
+var THEME_FONTS = [
+  {
+    id: "sans",
+    label: "Sans",
+    stack: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'
+  },
+  { id: "serif", label: "Serif", stack: 'ui-serif, Georgia, "Times New Roman", serif' },
+  { id: "mono", label: "Mono", stack: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  {
+    id: "humanist",
+    label: "Humanist",
+    stack: '"Optima", "Gill Sans", "Trebuchet MS", ui-sans-serif, sans-serif'
+  }
+];
+var HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+var MAX_RADIUS = 24;
+function defaultTheme() {
+  return { palette: "paper", accent: "#b8860b", font: "sans", radius: 8, density: "normal" };
+}
+function pick(list, id, fallback) {
+  return typeof id === "string" && list.some((x) => x.id === id) ? id : fallback;
+}
+function parseTheme(input) {
+  const base = defaultTheme();
+  if (typeof input !== "object" || input === null) return base;
+  const raw = input;
+  const radius = typeof raw.radius === "number" ? raw.radius : base.radius;
+  const density = raw.density;
+  return {
+    palette: pick(PALETTES, raw.palette, base.palette),
+    accent: typeof raw.accent === "string" && HEX.test(raw.accent) ? raw.accent : base.accent,
+    font: pick(THEME_FONTS, raw.font, base.font),
+    radius: Math.min(MAX_RADIUS, Math.max(0, Math.round(radius))),
+    density: density === "tight" || density === "normal" || density === "roomy" ? density : base.density
+  };
+}
+function themePath(contentDir) {
+  return `${contentDir}/_theme.json`;
+}
+async function loadTheme(adapter, contentDir = "content") {
+  const raw = await adapter.read(themePath(contentDir));
+  if (raw === null) return parseTheme(null);
+  try {
+    return parseTheme(JSON.parse(raw));
+  } catch {
+    return parseTheme(null);
+  }
+}
+async function saveTheme(adapter, theme, contentDir = "content") {
+  await adapter.write(themePath(contentDir), `${JSON.stringify(parseTheme(theme), null, 2)}
+`);
+}
 
 // src/cli.ts
 import { Command } from "commander";
@@ -5602,24 +5682,56 @@ function formatJson(issues) {
 import { access, mkdir as mkdir2, writeFile as writeFile3 } from "fs/promises";
 import { dirname as dirname2, join as join4 } from "path";
 var ASTRO_VERSION = "^5.18.0";
-var LOADER_VERSION = "^1.7.0";
-var STYLE = `  <style is:global>
-    :root { color-scheme: light dark; }
-    body {
-      margin: 0 auto;
-      max-width: 44rem;
-      padding: 3rem 1.25rem 6rem;
-      font: 16px/1.65 ui-sans-serif, system-ui, sans-serif;
-    }
-    h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 0.35rem; }
-    h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin: 2.75rem 0 0.75rem; }
-    ul { list-style: none; margin: 0; padding: 0; }
-    li + li { margin-top: 0.6rem; }
-    a { color: inherit; }
-    time { opacity: 0.6; font-size: 0.9rem; }
-    img { max-width: 100%; height: auto; border-radius: 8px; }
-    .body { white-space: pre-wrap; }
-  </style>`;
+var LOADER_VERSION = "^1.8.0";
+var LAYOUT = `---
+import { parseTheme, themeCss } from '@kdrgny/justjson-astro/theme'
+import theme from '../../content/_theme.json'
+
+// G\xF6r\xFCn\xFCm content/_theme.json'dan gelir \u2014 JustJSON'da de\u011Fi\u015Ftirince buras\u0131 da de\u011Fi\u015Fir.
+const css = themeCss(parseTheme(theme))
+const { title } = Astro.props
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    <style is:global set:html={css} />
+    <style is:global>
+      body {
+        margin: 0 auto;
+        max-width: 44rem;
+        padding: var(--jj-page) 1.25rem calc(var(--jj-page) * 2);
+        background: var(--jj-bg);
+        color: var(--jj-text);
+        font-family: var(--jj-font);
+        font-size: 16px;
+        line-height: var(--jj-lead);
+      }
+      h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 0.35rem; }
+      h2 {
+        font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        color: var(--jj-muted);
+        margin: calc(var(--jj-page) * 0.8) 0 var(--jj-gap);
+      }
+      ul { list-style: none; margin: 0; padding: 0; }
+      li + li { margin-top: var(--jj-gap); }
+      a { color: var(--jj-accent); text-decoration: none; }
+      a:hover { text-decoration: underline; }
+      time { color: var(--jj-muted); font-size: 0.9rem; }
+      img { max-width: 100%; height: auto; border-radius: var(--jj-radius); }
+      code { background: color-mix(in oklab, var(--jj-text) 8%, transparent); padding: 0.1em 0.35em; border-radius: calc(var(--jj-radius) / 2); }
+      .body { white-space: pre-wrap; }
+      .back { color: var(--jj-muted); font-size: 0.9rem; }
+    </style>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+`;
 function titleFieldOf(fields) {
   const preferred = fields.find(
     (f) => ["title", "name", "label", "role", "version"].includes(f.key)
@@ -5642,6 +5754,7 @@ function detailPage(collection) {
   ].filter(Boolean);
   return `---
 import { getCollection } from 'astro:content'
+import Layout from '../../layouts/Base.astro'
 
 export async function getStaticPaths() {
   const entries = await getCollection('${collection.name}')
@@ -5650,18 +5763,10 @@ export async function getStaticPaths() {
 
 const { entry } = Astro.props
 ---
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{entry.data.${titleKey} ?? entry.id}</title>
-${STYLE}
-  </head>
-  <body>
-    <p><a href="/">&larr; Back</a></p>
-${parts.map((p) => `    ${p}`).join("\n")}
-  </body>
-</html>
+<Layout title={entry.data.${titleKey} ?? entry.id}>
+  <p class="back"><a href="/">&larr; Back</a></p>
+${parts.map((p) => `  ${p}`).join("\n")}
+</Layout>
 `;
 }
 function indexPage(schema, projectName) {
@@ -5686,23 +5791,17 @@ function indexPage(schema, projectName) {
     </ul>`;
   });
   const empty = `    <p>No content yet \u2014 run <code>npx @kdrgny/justjson</code> and add some.</p>`;
+  const pageTitle = singleton ? `{site?.data.${titleFieldOf(singleton.fields)} ?? '${projectName}'}` : `"${projectName}"`;
   return `---
 import { ${imports} } from 'astro:content'
+import Layout from '../layouts/Base.astro'
 
 ${loads.join("\n")}
 ---
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>${singleton ? `{site?.data.${titleFieldOf(singleton.fields)} ?? '${projectName}'}` : projectName}</title>
-${STYLE}
-  </head>
-  <body>
-    <h1>${heading}</h1>
-${sections.length ? sections.join("\n") : empty}
-  </body>
-</html>
+<Layout title={${pageTitle.startsWith("{") ? pageTitle.slice(1, -1) : pageTitle}}>
+  <h1>${heading}</h1>
+${(sections.length ? sections.join("\n") : empty).replace(/^ {4}/gm, "  ")}
+</Layout>
 `;
 }
 function varFor(name) {
@@ -5742,6 +5841,9 @@ dist
 // Every collection and singleton in content/_schema.json, typed from your fields.
 export const collections = await justjsonCollections()
 `,
+    "content/_theme.json": `${JSON.stringify(defaultTheme(), null, 2)}
+`,
+    "src/layouts/Base.astro": LAYOUT,
     "src/pages/index.astro": indexPage(schema, projectName)
   };
   for (const collection of schema.collections) {
@@ -5775,8 +5877,8 @@ async function writeAstroSite(root2, schema, projectName) {
 
 // src/server.ts
 import { exec } from "child_process";
-import { mkdir as mkdir3, readFile as readFile3, writeFile as writeFile4 } from "fs/promises";
-import { basename as basename2, dirname as dirname3, extname, join as join6, normalize } from "path";
+import { mkdir as mkdir3, readFile as readFile4, writeFile as writeFile4 } from "fs/promises";
+import { basename as basename2, dirname as dirname3, extname, join as join7, normalize } from "path";
 import { fileURLToPath } from "url";
 import { serve } from "@hono/node-server";
 import { Hono } from "hono";
@@ -5905,6 +6007,90 @@ async function createGitHubRepo(root2, options) {
   return { name: options.name };
 }
 
+// src/preview.ts
+import { spawn } from "child_process";
+import { readFile as readFile3 } from "fs/promises";
+import { join as join6 } from "path";
+function detectDevScript(pkg) {
+  if (typeof pkg !== "object" || pkg === null) return null;
+  const scripts = pkg.scripts;
+  if (!scripts?.dev) return null;
+  return { command: "npm", args: ["run", "dev"] };
+}
+var ANSI = /\u001b\[[0-9;]*m/g;
+var URL_RE2 = /(https?:\/\/localhost:\d+[^\s\u001b]*)/i;
+function cleanUrl(line) {
+  const match = line.replace(ANSI, "").match(URL_RE2);
+  if (!match?.[1]) return null;
+  return match[1].replace(/\/$/, "");
+}
+var PreviewProcess = class {
+  constructor(root2) {
+    this.root = root2;
+  }
+  root;
+  child = null;
+  state = { status: "idle" };
+  log = [];
+  getState() {
+    return this.state;
+  }
+  recentLog() {
+    return this.log.slice(-40).join("\n");
+  }
+  async start() {
+    if (this.state.status === "running" || this.state.status === "starting") return this.state;
+    let pkg;
+    try {
+      pkg = JSON.parse(await readFile3(join6(this.root, "package.json"), "utf8"));
+    } catch {
+      this.state = {
+        status: "error",
+        message: "No package.json \u2014 this folder has no site to preview."
+      };
+      return this.state;
+    }
+    const dev = detectDevScript(pkg);
+    if (!dev) {
+      this.state = {
+        status: "error",
+        message: 'No "dev" script \u2014 generate a site first (Ship it).'
+      };
+      return this.state;
+    }
+    this.log = [];
+    this.state = { status: "starting" };
+    const child = spawn(dev.command, dev.args, {
+      cwd: this.root,
+      env: { ...process.env, FORCE_COLOR: "0", BROWSER: "none" },
+      shell: process.platform === "win32"
+    });
+    this.child = child;
+    const capture = (buf) => {
+      const text = buf.toString();
+      this.log.push(text);
+      const url = cleanUrl(text);
+      if (url && this.state.status !== "running") {
+        this.state = { status: "running", url };
+      }
+    };
+    child.stdout?.on("data", capture);
+    child.stderr?.on("data", capture);
+    child.on("exit", (code) => {
+      this.child = null;
+      if (this.state.status !== "error") {
+        this.state = code === 0 || code === null ? { status: "idle" } : { status: "error", message: `Dev server stopped (exit ${code}).` };
+      }
+    });
+    return this.state;
+  }
+  stop() {
+    this.child?.kill();
+    this.child = null;
+    this.state = { status: "idle" };
+  }
+};
+
 // src/server.ts
 var editorDir = fileURLToPath(new URL("./editor", import.meta.url));
 var PROVIDER_BASE_URLS = {
@@ -5984,6 +6170,7 @@ async function createServer(root2) {
   const empty = { version: 1, collections: [], singletons: [] };
   let schema = await loadSchema(adapter, contentDir) ?? empty;
   let store = new ContentStore(adapter, schema, contentDir);
+  const preview = new PreviewProcess(root2);
   const app = new Hono();
   app.onError((err, c) => {
     if (err instanceof NotFoundError) return c.json({ error: err.message }, 404);
@@ -6008,6 +6195,12 @@ async function createServer(root2) {
     }
     return c.json(await writeAstroSite(root2, schema, basename2(root2) || "my-site"));
   });
+  app.get("/api/_preview", (c) => c.json(preview.getState()));
+  app.post("/api/_preview/start", async (c) => c.json(await preview.start()));
+  app.post("/api/_preview/stop", (c) => {
+    preview.stop();
+    return c.json(preview.getState());
+  });
   app.get(
     "/api/_ship",
     async (c) => c.json({
@@ -6051,6 +6244,11 @@ async function createServer(root2) {
       return c.json({ error: e.message }, 400);
     }
   });
+  app.get("/api/_theme", async (c) => c.json(await loadTheme(adapter, contentDir)));
+  app.put("/api/_theme", async (c) => {
+    await saveTheme(adapter, parseTheme(await c.req.json()), contentDir);
+    return c.json(await loadTheme(adapter, contentDir));
+  });
   app.get("/api/_templates", (c) => c.json({ items: templateList() }));
   app.post("/api/_init", async (c) => {
     const { template: id } = await c.req.json();
@@ -6134,7 +6332,7 @@ async function createServer(root2) {
     const base = slugify((body.filename ?? "gorsel").replace(/\.[^.]+$/, "")) || "gorsel";
     const name = `${base}-${Date.now().toString(36)}.webp`;
     const rel = `${contentDir}/media/${name}`;
-    const abs = join6(root2, rel);
+    const abs = join7(root2, rel);
     await mkdir3(dirname3(abs), { recursive: true });
     await writeFile4(abs, Buffer.from(body.dataBase64, "base64"));
     return c.json({ path: rel });
@@ -6178,7 +6376,7 @@ async function createServer(root2) {
       return c.text("forbidden", 400);
     }
     try {
-      const bytes = await readFile3(join6(root2, contentDir, "media", file));
+      const bytes = await readFile4(join7(root2, contentDir, "media", file));
       return new Response(bytes, { headers: { "content-type": "image/webp" } });
     } catch {
       return c.text("not found", 404);
@@ -6205,14 +6403,14 @@ async function createServer(root2) {
   app.get("/*", async (c) => {
     const urlPath = c.req.path === "/" ? "/index.html" : c.req.path;
     const rel = normalize(urlPath).replace(/^(\.\.[/\\])+/, "");
-    const file = join6(editorDir, rel);
+    const file = join7(editorDir, rel);
     if (!file.startsWith(editorDir)) return c.text("forbidden", 403);
     const type = MIME[extname(file)] ?? "application/octet-stream";
     try {
-      return new Response(await readFile3(file), { headers: { "content-type": type } });
+      return new Response(await readFile4(file), { headers: { "content-type": type } });
     } catch {
       try {
-        const html = await readFile3(join6(editorDir, "index.html"));
+        const html = await readFile4(join7(editorDir, "index.html"));
         return new Response(html, { headers: { "content-type": "text/html; charset=utf-8" } });
       } catch {
         return c.text("Editor UI not found (run the justjson build first).", 404);