Merge pull request #5 from emdash-cms/feat/create-emdash-ux

feat(create-emdash): improve CLI branding and UX

.changeset/create-emdash-ux.md

@@ -0,0 +1,5 @@
+---
+"create-emdash": patch
+---
+
+Improve create-emdash CLI experience: add the EmDash branded banner, let users pick their package manager (auto-detects the one that invoked it), and ask whether to install dependencies with a spinner showing progress.

packages/create-emdash/src/index.ts

@@ -18,6 +18,17 @@ const PROJECT_NAME_PATTERN = /^[a-z0-9-]+$/;
 
 const GITHUB_REPO = "emdash-cms/templates";
 
+type PackageManager = "pnpm" | "npm" | "yarn" | "bun";
+
+/** Detect which package manager invoked us, or fall back to npm */
+function detectPackageManager(): PackageManager {
+	const agent = process.env.npm_config_user_agent ?? "";
+	if (agent.startsWith("pnpm")) return "pnpm";
+	if (agent.startsWith("yarn")) return "yarn";
+	if (agent.startsWith("bun")) return "bun";
+	return "npm";
+}
+
 type Platform = "node" | "cloudflare";
 
 interface TemplateConfig {
@@ -95,7 +106,8 @@ function selectOptions<K extends string>(
 async function main() {
 	console.clear();
 
-	p.intro(`${pc.bgCyan(pc.black(" create-emdash "))}`);
+	console.log(`\n  ${pc.bold(pc.cyan("— E M D A S H —"))}\n`);
+	p.intro("Create a new EmDash project");
 
 	const projectName = await p.text({
 		message: "Project name?",
@@ -132,16 +144,16 @@ async function main() {
 	const platform = await p.select<Platform>({
 		message: "Where will you deploy?",
 		options: [
-			{
-				value: "node",
-				label: "Node.js",
-				hint: "SQLite + local file storage",
-			},
 			{
 				value: "cloudflare",
 				label: "Cloudflare Workers",
 				hint: "D1 + R2",
 			},
+			{
+				value: "node",
+				label: "Node.js",
+				hint: "SQLite + local file storage",
+			},
 		],
 		initialValue: "node",
 	});
@@ -175,6 +187,38 @@ async function main() {
 			? NODE_TEMPLATES[templateKey as NodeTemplate]
 			: CLOUDFLARE_TEMPLATES[templateKey as CloudflareTemplate];
 
+	// Step 3: pick package manager
+	const detectedPm = detectPackageManager();
+	const pm = await p.select<PackageManager>({
+		message: "Which package manager?",
+		options: [
+			{ value: "pnpm", label: "pnpm" },
+			{ value: "npm", label: "npm" },
+			{ value: "yarn", label: "yarn" },
+			{ value: "bun", label: "bun" },
+		],
+		initialValue: detectedPm,
+	});
+
+	if (p.isCancel(pm)) {
+		p.cancel("Operation cancelled.");
+		process.exit(0);
+	}
+
+	// Step 4: install dependencies?
+	const shouldInstall = await p.confirm({
+		message: "Install dependencies?",
+		initialValue: true,
+	});
+
+	if (p.isCancel(shouldInstall)) {
+		p.cancel("Operation cancelled.");
+		process.exit(0);
+	}
+
+	const installCmd = `${pm} install`;
+	const runCmd = (script: string) => (pm === "npm" ? `npm run ${script}` : `${pm} ${script}`);
+
 	const s = p.spinner();
 	s.start("Creating project...");
 
@@ -204,19 +248,25 @@ async function main() {
 
 		s.stop("Project created!");
 
-		s.start("Installing dependencies...");
+		if (shouldInstall) {
+			s.start(`Installing dependencies with ${pc.cyan(pm)}...`);
 			try {
-			execSync("pnpm install", {
+				execSync(installCmd, {
 					cwd: projectDir,
 					stdio: "ignore",
 				});
 				s.stop("Dependencies installed!");
 			} catch {
 				s.stop("Failed to install dependencies");
-			p.log.warn(`Run ${pc.cyan(`cd ${projectName} && pnpm install`)} manually`);
+				p.log.warn(`Run ${pc.cyan(`cd ${projectName} && ${installCmd}`)} manually`);
+			}
 		}
 
-		p.note(`cd ${projectName}\npnpm run bootstrap\npnpm run dev`, "Next steps");
+		const steps = [`cd ${projectName}`];
+		if (!shouldInstall) steps.push(installCmd);
+		steps.push(runCmd("bootstrap"), runCmd("dev"));
+
+		p.note(steps.join("\n"), "Next steps");
 
 		p.outro(`${pc.green("Done!")} Your EmDash project is ready at ${pc.cyan(projectName)}`);
 	} catch (error) {

packages/plugins/ai-moderation/package.json

@@ -39,5 +39,10 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {},
-  "optionalDependencies": {}
+	"optionalDependencies": {},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/ai-moderation"
+	}
 }

packages/plugins/api-test/package.json

@@ -28,5 +28,10 @@
 	},
 	"dependencies": {},
 	"devDependencies": {},
-  "optionalDependencies": {}
+	"optionalDependencies": {},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/api-test"
+	}
 }

packages/plugins/atproto/package.json

@@ -32,5 +32,10 @@
 	"scripts": {
 		"test": "vitest run",
 		"typecheck": "tsgo --noEmit"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/atproto"
 	}
 }

packages/plugins/audit-log/package.json

@@ -29,5 +29,10 @@
 	"scripts": {
 		"typecheck": "tsgo --noEmit"
 	},
-  "optionalDependencies": {}
+	"optionalDependencies": {},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/audit-log"
+	}
 }

packages/plugins/color/package.json

@@ -30,5 +30,10 @@
 	},
 	"scripts": {
 		"typecheck": "tsgo --noEmit"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/color"
 	}
 }

packages/plugins/embeds/package.json

@@ -33,5 +33,10 @@
 	},
 	"scripts": {
 		"typecheck": "tsgo --noEmit"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/embeds"
 	}
 }

packages/plugins/forms/package.json

@@ -36,5 +36,10 @@
 	},
 	"scripts": {
 		"typecheck": "tsgo --noEmit"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/forms"
 	}
 }

packages/plugins/marketplace-test/package.json

@@ -35,5 +35,10 @@
 	"devDependencies": {
 		"tsdown": "catalog:",
 		"typescript": "catalog:"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/marketplace-test"
 	}
 }

packages/plugins/sandboxed-test/package.json

@@ -37,5 +37,10 @@
 		"typescript": "catalog:"
 	},
 	"peerDependencies": {},
-  "optionalDependencies": {}
+	"optionalDependencies": {},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/sandboxed-test"
+	}
 }

packages/plugins/webhook-notifier/package.json

@@ -29,5 +29,10 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {},
-  "optionalDependencies": {}
+	"optionalDependencies": {},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/emdash-cms/emdash.git",
+		"directory": "packages/plugins/webhook-notifier"
+	}
 }