create-ncblock 0.0.32 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-ncblock",
-	"version": "0.0.32",
+	"version": "0.0.33",
 	"description": "Create a Notion custom view block project.",
 	"type": "module",
 	"bin": {

package/scripts/utils/templates.ts

@@ -190,6 +190,27 @@ function copyDirectoryContents(
 	}
 }
 
+function applyTemplateReplacements(
+	contents: string,
+	replacements: Record<string, string>,
+): string {
+	let replaced = contents
+	for (const [placeholder, value] of Object.entries(replacements)) {
+		replaced = replaced.replaceAll(placeholder, value)
+	}
+	return replaced
+}
+
+function writeRenderedFile(args: {
+	sourcePath: string
+	targetPath: string
+	replacements: Record<string, string>
+}) {
+	const { sourcePath, targetPath, replacements } = args
+	const contents = readFileSync(sourcePath, "utf-8")
+	writeFileSync(targetPath, applyTemplateReplacements(contents, replacements))
+}
+
 export function scaffoldTemplate({
 	root,
 	templateDir,
@@ -198,6 +219,12 @@ export function scaffoldTemplate({
 	overwrite = false,
 	sdkDep,
 }: ScaffoldTemplateOptions) {
+	const replacements = { "{{name}}": name }
+	const appEntrySource = resolve(templateDir, "src/index.tsx")
+	const appEntryTarget = resolve(dest, "src/index.tsx")
+	const shouldRenderAppEntry =
+		existsSync(appEntrySource) && (overwrite || !existsSync(appEntryTarget))
+
 	copyDirectoryContents(templateDir, dest, {
 		overwrite,
 		// README.md and package.json are rendered below with the app name and
@@ -209,6 +236,14 @@ export function scaffoldTemplate({
 		]),
 	})
 
+	if (shouldRenderAppEntry) {
+		writeRenderedFile({
+			sourcePath: appEntrySource,
+			targetPath: appEntryTarget,
+			replacements,
+		})
+	}
+
 	// Scaffolded projects are standalone, not workspace members. If the user
 	// scaffolds inside an existing pnpm workspace (e.g. this repo), pnpm walks
 	// up, finds the workspace root, and the install ends up partial. A local
@@ -221,15 +256,21 @@ export function scaffoldTemplate({
 
 	const readmeTarget = resolve(dest, "README.md")
 	if (overwrite || !existsSync(readmeTarget)) {
-		const readme = readFileSync(resolve(templateDir, "README.md"), "utf-8")
-		writeFileSync(readmeTarget, readme.replace(/\{\{name\}\}/g, name))
+		writeRenderedFile({
+			sourcePath: resolve(templateDir, "README.md"),
+			targetPath: readmeTarget,
+			replacements,
+		})
 	}
 
 	const agentsTarget = resolve(dest, "AGENTS.md")
 	if (overwrite || !existsSync(agentsTarget)) {
 		const agentsSource = resolve(root, "scripts/scaffold-assets/AGENTS.md")
-		const agents = readFileSync(agentsSource, "utf-8")
-		writeFileSync(agentsTarget, agents.replace(/\{\{name\}\}/g, name))
+		writeRenderedFile({
+			sourcePath: agentsSource,
+			targetPath: agentsTarget,
+			replacements,
+		})
 	}
 
 	const pkgPath = resolve(dest, "package.json")

package/sdk-version.json

@@ -1 +1 @@
-{"version":"0.0.30"}
+{"version":"0.0.31"}

package/templates/empty/src/index.css

@@ -0,0 +1,33 @@
+:root {
+	color-scheme: light dark;
+	--background: #ffffff;
+	--foreground: #1f1f1f;
+	--muted: #5f5e5b;
+	--border: #e6e6e6;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background: #191919;
+		--foreground: #f1f1ef;
+		--muted: #b7b6b2;
+		--border: #3f3f3c;
+	}
+}
+
+body {
+	background: var(--background);
+}
+
+main {
+	box-sizing: border-box;
+	padding: 8px 24px;
+	border: 1px solid var(--border);
+	border-radius: 12px;
+	color: var(--foreground);
+	background: var(--background);
+}
+
+p {
+	color: var(--muted);
+}

package/templates/empty/src/index.tsx

@@ -1,8 +1,16 @@
 import { NotionCustomBlock } from "ncblock"
 import ReactDOM from "react-dom/client"
+import "./index.css"
 
 function App() {
-	return <h1>Edit me in index.tsx</h1>
+	return (
+		<main>
+			<h3>{"{{name}}"}</h3>
+			<p>
+				Edit <code>src/index.tsx</code> and then deploy using <code>ntn</code>
+			</p>
+		</main>
+	)
 }
 
 ReactDOM.createRoot(document.getElementById("root")!).render(