nextjs-studio 0.4.0 → 1.0.1

package/README.md

@@ -4,6 +4,8 @@ A Git-based, local-first CMS for Next.js projects.
 
 Content lives in your repository as plain files. No database, no backend, no sync service. Editing happens through a standalone local server. Everything resolves at build time.
 
+![image](screenshot.png)
+
 ## Features
 
 - **Content Collections** — folders inside `/contents` become collections automatically
@@ -12,7 +14,7 @@ Content lives in your repository as plain files. No database, no backend, no syn
 - **JSON Form Editor** — auto-generated forms for JSON objects with nested field support
 - **Schema Validation** — Zod-based validation with field-level type definitions
 - **Media Library** — per-collection media folders, upload via drag & drop, paste, toolbar, or slash commands
-- **Import Scripts** — run data import and sync scripts directly from the CMS UI
+- **Sync Scripts** — run data import and sync scripts directly from the CMS UI
 - **File Watching** — live updates via chokidar and WebSocket
 
 ## Quick start

package/dist/bin/nextjs-studio.js

@@ -1,15 +1,17 @@
 #!/usr/bin/env node
 
 // src/bin/nextjs-studio.ts
-import { existsSync } from "fs";
+import { existsSync as existsSync2 } from "fs";
 import fs2 from "fs/promises";
-import path2 from "path";
+import path3 from "path";
+import { createRequire } from "module";
 import { spawn } from "child_process";
 import { Command } from "commander";
 
 // src/shared/constants.ts
 var CONTENTS_DIR = "contents";
 var CLI_PORT = 3030;
+var CONFIG_FILENAMES = ["studio.config.ts", "studio.config.js", "studio.config.mjs"];
 var SUPPORTED_EXTENSIONS = [".mdx", ".json"];
 var COLLECTION_ORDER_FILE = "collection.json";
 var IMAGE_MIME_TYPES = [
@@ -31,8 +33,9 @@ var AUDIO_MIME_TYPES = [
 ];
 var MEDIA_MIME_TYPES = [...IMAGE_MIME_TYPES, ...VIDEO_MIME_TYPES, ...AUDIO_MIME_TYPES];
 
-// src/cli/adapters/fs-adapter.ts
+// src/core/fs-adapter.ts
 import fs from "fs/promises";
+import fsSync from "fs";
 import path from "path";
 var FsAdapter = class {
   basePath;
@@ -127,6 +130,33 @@ var FsAdapter = class {
   normalizeSlug(relativePath, ext) {
     return relativePath.replace(ext, "").split(path.sep).join("/");
   }
+  readFileSync(filePath) {
+    return fsSync.readFileSync(this.resolve(filePath), "utf-8");
+  }
+  existsSync(filePath) {
+    return fsSync.existsSync(this.resolve(filePath));
+  }
+  listFilesSync(dirPath, extensions) {
+    const fullPath = this.resolve(dirPath);
+    const filterExts = extensions ?? SUPPORTED_EXTENSIONS;
+    let entries;
+    try {
+      entries = fsSync.readdirSync(fullPath, { withFileTypes: true });
+    } catch {
+      return [];
+    }
+    return entries.filter((entry) => entry.isFile() && filterExts.some((ext) => entry.name.endsWith(ext))).map((entry) => this.join(dirPath, entry.name));
+  }
+  listDirectoriesSync(dirPath) {
+    const fullPath = this.resolve(dirPath);
+    let entries;
+    try {
+      entries = fsSync.readdirSync(fullPath, { withFileTypes: true });
+    } catch {
+      return [];
+    }
+    return entries.filter((entry) => entry.isDirectory()).map((entry) => this.join(dirPath, entry.name));
+  }
 };
 
 // src/core/indexer.ts
@@ -134,9 +164,49 @@ import slugify from "@sindresorhus/slugify";
 
 // src/core/parsers/parser-mdx.ts
 import matter from "gray-matter";
-function parseMdx(content) {
-  const { data, content: body } = matter(content);
-  return { data, body: body.trim() };
+
+// src/core/frontmatter-binder.ts
+var TOKEN_REGEX = /\{frontmatter\.([a-zA-Z0-9_.]+)\}/g;
+function bindFrontmatter(body, data) {
+  return body.replace(TOKEN_REGEX, (_match, path4) => {
+    const value = resolvePath(data, path4);
+    if (value === void 0 || value === null) return _match;
+    if (typeof value === "object") return JSON.stringify(value);
+    return String(value);
+  });
+}
+function resolvePath(obj, path4) {
+  const keys = path4.split(".");
+  let current = obj;
+  for (const key of keys) {
+    if (typeof current !== "object" || current === null) return void 0;
+    current = current[key];
+  }
+  return current;
+}
+
+// src/core/parsers/parser-mdx.ts
+function normalizeDates(data) {
+  const result = {};
+  for (const [key, value] of Object.entries(data)) {
+    if (value instanceof Date) {
+      result[key] = value.toISOString().split("T")[0];
+    } else if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      result[key] = normalizeDates(value);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function parseMdx(content, options) {
+  const { data: rawData, content: body } = matter(content);
+  const data = normalizeDates(rawData);
+  const trimmed = body.trim();
+  return {
+    data,
+    body: options?.bindTokens ? bindFrontmatter(trimmed, data) : trimmed
+  };
 }
 
 // src/core/parsers/parser-json.ts
@@ -163,6 +233,7 @@ var RE_ISO_DATETIME = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}(:\d{2}(\.\d+)?)?(Z|[+-]
 var RE_EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var RE_URL = /^https?:\/\/.+/;
 var LONG_TEXT_THRESHOLD = 200;
+var RICH_TEXT_FIELD_NAMES = ["description", "descriptions", "text", "content"];
 function isISODate(value) {
   return RE_ISO_DATE.test(value);
 }
@@ -180,6 +251,7 @@ function inferStringField(name, strings) {
   if (strings.every(isUrl)) return { name, type: "url" };
   if (strings.every(isISODateTime)) return { name, type: "date", includeTime: true };
   if (strings.every(isISODate)) return { name, type: "date" };
+  if (RICH_TEXT_FIELD_NAMES.includes(name.toLowerCase())) return { name, type: "long-text" };
   const isLong = strings.some((s) => s.length > LONG_TEXT_THRESHOLD || s.includes("\n"));
   return { name, type: isLong ? "long-text" : "text" };
 }
@@ -223,6 +295,21 @@ function inferSchema(entries, collectionName) {
   return { collection: collectionName, fields: inferFields(rows) };
 }
 
+// src/core/locale-parser.ts
+var LOCALE_REGEX = /\.([a-z]{2}(?:-[A-Z]{2})?)\.mdx$/;
+function parseLocaleFromFilename(filename) {
+  const match = LOCALE_REGEX.exec(filename);
+  return match?.[1];
+}
+function stripLocaleFromSlug(slug, locale) {
+  if (!locale) return slug;
+  const dotSuffix = `.${locale}`;
+  if (slug.endsWith(dotSuffix)) return slug.slice(0, -dotSuffix.length);
+  const dashSuffix = `-${locale}`;
+  if (slug.endsWith(dashSuffix)) return slug.slice(0, -dashSuffix.length);
+  return slug;
+}
+
 // src/core/indexer.ts
 var ContentIndex = class {
   entries = /* @__PURE__ */ new Map();
@@ -241,6 +328,16 @@ var ContentIndex = class {
       await this.indexCollection(dirName, collectionName, collectionConfig?.schema);
     }
   }
+  buildSync(config) {
+    this.clear();
+    const dirs = this.fs.listDirectoriesSync(".");
+    for (const dir of dirs) {
+      const dirName = this.fs.basename(dir);
+      const collectionName = slugify(dirName);
+      const collectionConfig = config?.collections?.[collectionName];
+      this.indexCollectionSync(dirName, collectionName, collectionConfig?.schema);
+    }
+  }
   getCollection(name) {
     return this.entries.get(name) ?? [];
   }
@@ -251,6 +348,35 @@ var ContentIndex = class {
     this.entries.clear();
     this.collections.clear();
   }
+  updateEntry(collectionName, entry) {
+    const entries = this.entries.get(collectionName) ?? [];
+    const idx = entries.findIndex((e) => e.slug === entry.slug);
+    if (idx >= 0) {
+      entries[idx] = entry;
+    } else {
+      entries.push(entry);
+    }
+    this.entries.set(collectionName, entries);
+    this.updateCollectionMeta(collectionName);
+  }
+  removeEntry(collectionName, slug) {
+    const entries = this.entries.get(collectionName);
+    if (!entries) return;
+    const filtered = entries.filter((e) => e.slug !== slug);
+    this.entries.set(collectionName, filtered);
+    this.updateCollectionMeta(collectionName);
+  }
+  updateCollectionMeta(collectionName) {
+    const col = this.collections.get(collectionName);
+    const entries = this.entries.get(collectionName) ?? [];
+    if (col) {
+      this.collections.set(collectionName, {
+        ...col,
+        count: entries.length,
+        type: this.detectCollectionType(entries)
+      });
+    }
+  }
   async indexCollection(dirName, collectionName, manualSchema) {
     const entries = [];
     await this.scanDir(dirName, collectionName, dirName, entries);
@@ -269,6 +395,24 @@ var ContentIndex = class {
       schema
     });
   }
+  indexCollectionSync(dirName, collectionName, manualSchema) {
+    const entries = [];
+    this.scanDirSync(dirName, collectionName, dirName, entries);
+    const orderPath = this.fs.join(dirName, COLLECTION_ORDER_FILE);
+    const ordering = this.readOrderingSync(orderPath);
+    if (ordering) {
+      this.applyOrdering(entries, ordering);
+    }
+    const schema = manualSchema ?? inferSchema(entries, collectionName);
+    this.entries.set(collectionName, entries);
+    this.collections.set(collectionName, {
+      name: collectionName,
+      type: this.detectCollectionType(entries),
+      count: entries.length,
+      basePath: dirName,
+      schema
+    });
+  }
   async scanDir(dirName, collectionName, dirPath, entries) {
     const subDirs = await this.fs.listDirectories(dirPath);
     for (const subDir of subDirs) {
@@ -283,20 +427,43 @@ var ContentIndex = class {
       const relativePath = this.fs.relative(dirName, filePath);
       const slug = this.fs.normalizeSlug(relativePath, ext).split("/").map((segment) => slugify(segment)).join("/");
       if (ext === ".mdx") {
-        entries.push(this.buildMdxEntry(collectionName, slug, content));
+        entries.push(this.buildMdxEntry(collectionName, slug, fileName, content));
       } else if (ext === ".json") {
         entries.push(...this.buildJsonEntries(collectionName, slug, content));
       }
     }
   }
-  buildMdxEntry(collectionName, slug, content) {
+  scanDirSync(dirName, collectionName, dirPath, entries) {
+    const subDirs = this.fs.listDirectoriesSync(dirPath);
+    for (const subDir of subDirs) {
+      this.scanDirSync(dirName, collectionName, subDir, entries);
+    }
+    const files = this.fs.listFilesSync(dirPath);
+    for (const filePath of files) {
+      const fileName = this.fs.basename(filePath);
+      if (fileName === COLLECTION_ORDER_FILE) continue;
+      const ext = this.fs.extname(fileName);
+      const content = this.fs.readFileSync(filePath);
+      const relativePath = this.fs.relative(dirName, filePath);
+      const slug = this.fs.normalizeSlug(relativePath, ext).split("/").map((segment) => slugify(segment)).join("/");
+      if (ext === ".mdx") {
+        entries.push(this.buildMdxEntry(collectionName, slug, fileName, content));
+      } else if (ext === ".json") {
+        entries.push(...this.buildJsonEntries(collectionName, slug, content));
+      }
+    }
+  }
+  buildMdxEntry(collectionName, slug, fileName, content) {
     const parsed = parseMdx(content);
+    const locale = parseLocaleFromFilename(fileName);
+    const normalizedSlug = stripLocaleFromSlug(slug, locale);
     return {
       collection: collectionName,
-      slug,
-      path: `/${collectionName}/${slug}`,
+      slug: normalizedSlug,
+      path: `/${collectionName}/${normalizedSlug}`,
       body: parsed.body,
-      data: parsed.data
+      data: parsed.data,
+      ...locale ? { locale } : {}
     };
   }
   buildJsonEntries(collectionName, slug, content) {
@@ -325,6 +492,17 @@ var ContentIndex = class {
     }
     return null;
   }
+  readOrderingSync(orderPath) {
+    if (!this.fs.existsSync(orderPath)) return null;
+    try {
+      const content = this.fs.readFileSync(orderPath);
+      const parsed = JSON.parse(content);
+      if (Array.isArray(parsed)) return parsed;
+    } catch (error) {
+      console.warn(`[Nextjs Studio] Failed to parse ordering file: ${orderPath}`, error);
+    }
+    return null;
+  }
   applyOrdering(entries, ordering) {
     const orderMap = new Map(ordering.map((slug, index) => [slug, index]));
     entries.sort((a, b) => {
@@ -444,20 +622,58 @@ function generateCollectionTypes(schemas) {
   ].join("\n");
   const interfaces = schemas.map(generateInterfaceForSchema).join("\n\n");
   const collectionRegistry = [
-    "// Augment the nextjs-studio module so queryCollection() is fully typed.",
+    "// Augment both entry points so queryCollection() is fully typed regardless of import path.",
     "declare module 'nextjs-studio' {",
     "  interface CollectionTypeMap {",
     schemas.map((schema) => `    ${JSON.stringify(schema.collection)}: ${toPascalCase(schema.collection)}Entry;`).join("\n"),
     "  }",
+    "}",
+    "declare module 'nextjs-studio/server' {",
+    "  interface CollectionTypeMap {",
+    schemas.map((schema) => `    ${JSON.stringify(schema.collection)}: ${toPascalCase(schema.collection)}Entry;`).join("\n"),
+    "  }",
     "}"
   ].join("\n");
   return [banner, interfaces, collectionRegistry].join("\n\n") + "\n";
 }
 
+// src/core/config-loader.ts
+import { existsSync } from "fs";
+import path2 from "path";
+import { pathToFileURL } from "url";
+function resolveConfigPath(projectRoot) {
+  for (const filename of CONFIG_FILENAMES) {
+    const fullPath = path2.resolve(projectRoot, filename);
+    if (existsSync(fullPath)) return fullPath;
+  }
+  return void 0;
+}
+async function loadStudioConfig(projectRoot) {
+  const configPath2 = resolveConfigPath(projectRoot);
+  if (!configPath2) return {};
+  return loadConfigFromPath(configPath2);
+}
+async function loadConfigFromPath(configPath2) {
+  try {
+    const fileUrl = pathToFileURL(configPath2).href;
+    const mod = await import(
+      /* webpackIgnore: true */
+      fileUrl
+    );
+    const config = mod.default ?? mod.config ?? mod;
+    if (typeof config !== "object" || config === null || Array.isArray(config)) {
+      return {};
+    }
+    return config;
+  } catch {
+    return {};
+  }
+}
+
 // package.json
 var package_default = {
   name: "nextjs-studio",
-  version: "0.4.0",
+  version: "1.0.0",
   description: "A Git-based, local-first CMS for Next.js projects",
   keywords: [
     "nextjs",
@@ -480,22 +696,43 @@ var package_default = {
     ".": {
       types: "./dist/core/index.d.ts",
       import: "./dist/core/index.js"
+    },
+    "./server": {
+      types: "./dist/core/server.d.ts",
+      import: "./dist/core/server.js"
     }
   },
   main: "./dist/core/index.js",
   types: "./dist/core/index.d.ts",
-  bin: {
-    "nextjs-studio": "dist/bin/nextjs-studio.js"
-  },
+  bin: "dist/bin/nextjs-studio.js",
   files: [
-    "dist",
+    "dist/bin",
+    "dist/core",
+    "dist/*.d.ts",
+    "dist/cli/ui/package.json",
+    "dist/cli/ui/next.config.js",
+    "dist/cli/ui/.next/static",
+    "dist/cli/ui/.next/server",
+    "dist/cli/ui/.next/BUILD_ID",
+    "dist/cli/ui/.next/app-path-routes-manifest.json",
+    "dist/cli/ui/.next/build-manifest.json",
+    "dist/cli/ui/.next/export-marker.json",
+    "dist/cli/ui/.next/images-manifest.json",
+    "dist/cli/ui/.next/next-minimal-server.js.nft.json",
+    "dist/cli/ui/.next/next-server.js.nft.json",
+    "dist/cli/ui/.next/package.json",
+    "dist/cli/ui/.next/prerender-manifest.json",
+    "dist/cli/ui/.next/react-loadable-manifest.json",
+    "dist/cli/ui/.next/required-server-files.js",
+    "dist/cli/ui/.next/required-server-files.json",
+    "dist/cli/ui/.next/routes-manifest.json",
     "README.md",
     "LICENSE"
   ],
   scripts: {
     dev: "tsx src/bin/nextjs-studio.ts --dir example/contents",
     "studio:dev": "cross-env STUDIO_CONTENTS_DIR=example/contents next dev --port 3030 --webpack src/cli/ui",
-    "studio:build": "next build --webpack src/cli/ui",
+    "studio:build": `next build --webpack src/cli/ui && node -e "const fs=require('fs');fs.copyFileSync('src/cli/ui/package.json','dist/cli/ui/package.json');fs.writeFileSync('dist/cli/ui/next.config.js','module.exports={distDir:\\'.next\\'};')"`,
     build: "tsup && yarn studio:build",
     lint: "eslint src/",
     "type-check": "tsc --noEmit",
@@ -553,6 +790,11 @@ var package_default = {
     commander: "^14.0.3",
     "gray-matter": "^4.0.3",
     "lodash-es": "^4.17.23"
+  },
+  peerDependencies: {
+    next: "^16.0.0",
+    react: "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 };
 
@@ -560,14 +802,15 @@ var package_default = {
 var { version } = package_default;
 var program = new Command().name("Nextjs Studio").description("Local-first CMS for Next.js projects").version(version).option("-d, --dir <path>", "Path to contents directory", CONTENTS_DIR).option("-p, --port <number>", "Port to run the studio on", String(CLI_PORT)).option("--generate-types", "Generate TypeScript types for content collections").parse();
 var opts = program.opts();
-var contentsDir = path2.resolve(opts.dir);
+var contentsDir = path3.resolve(opts.dir);
 var port = Number(opts.port);
 async function runGenerateTypes(sourceDir) {
-  const outDir = path2.resolve(".studio");
-  const outFile = path2.join(outDir, "studio.d.ts");
+  const outDir = path3.resolve(".studio");
+  const outFile = path3.join(outDir, "studio.d.ts");
   console.log(`Generating types from ${sourceDir}...`);
+  const config = await loadStudioConfig(process.cwd());
   const fsAdapter = new FsAdapter(sourceDir);
-  const index = await loadContent(fsAdapter);
+  const index = await loadContent(fsAdapter, config);
   const schemas = index.getCollections().flatMap((c) => c.schema ? [c.schema] : []);
   const code = generateCollectionTypes(schemas);
   await fs2.mkdir(outDir, { recursive: true });
@@ -575,13 +818,19 @@ async function runGenerateTypes(sourceDir) {
   console.log(`Types written to ${outFile}`);
 }
 function resolveServerProcess(uiDir2, serverPort, env) {
-  const standaloneServer = path2.resolve(uiDir2, ".next/standalone/src/cli/ui/server.js");
-  if (existsSync(standaloneServer)) {
-    return spawn("node", [standaloneServer], { stdio: "inherit", env });
+  const buildId = path3.resolve(uiDir2, ".next/BUILD_ID");
+  if (existsSync2(buildId)) {
+    const require2 = createRequire(import.meta.url);
+    const nextBin = require2.resolve("next/dist/bin/next");
+    return spawn("node", [nextBin, "start", "--port", String(serverPort)], {
+      cwd: uiDir2,
+      stdio: "inherit",
+      env
+    });
   }
-  const uiPackageJson = path2.resolve(uiDir2, "package.json");
-  if (existsSync(uiPackageJson)) {
-    const nextBin = path2.resolve(uiDir2, "../../../node_modules/next/dist/bin/next");
+  const uiPackageJson = path3.resolve(uiDir2, "package.json");
+  if (existsSync2(uiPackageJson)) {
+    const nextBin = path3.resolve(uiDir2, "../../../node_modules/next/dist/bin/next");
     return spawn("node", [nextBin, "dev", "--port", String(serverPort), "--webpack"], {
       cwd: uiDir2,
       stdio: "inherit",
@@ -599,8 +848,16 @@ if (opts.generateTypes) {
   await runGenerateTypes(contentsDir);
   process.exit(0);
 }
-var uiDir = path2.resolve(import.meta.dirname, "../cli/ui");
-var serverEnv = { ...process.env, STUDIO_CONTENTS_DIR: contentsDir, PORT: String(port), HOSTNAME: "0.0.0.0" };
+var uiDir = path3.resolve(import.meta.dirname, "../cli/ui");
+var configPath = resolveConfigPath(process.cwd());
+var serverEnv = {
+  ...process.env,
+  STUDIO_CONTENTS_DIR: contentsDir,
+  STUDIO_PROJECT_DIR: process.cwd(),
+  PORT: String(port),
+  HOSTNAME: "0.0.0.0",
+  ...configPath ? { STUDIO_CONFIG_PATH: configPath } : {}
+};
 var serverProcess = resolveServerProcess(uiDir, port, serverEnv);
 if (!serverProcess) {
   console.error("Error: Studio UI server not found.");