Add Todo button to homepage when examples are included

Add project creation time display in success message

apps/cli/src/helpers/examples-setup.ts

@@ -48,6 +48,7 @@ async function setupTodoExample(
 		}
 
 		await updateHeaderWithTodoLink(projectDir, auth);
+		await addTodoButtonToHomepage(projectDir);
 	}
 }
 
@@ -128,3 +129,28 @@ async function updateRouterIndex(projectDir: string): Promise<void> {
 		await fs.writeFile(routerFile, routerContent);
 	}
 }
+
+async function addTodoButtonToHomepage(projectDir: string): Promise<void> {
+	const indexPath = path.join(
+		projectDir,
+		"packages/client/src/routes/index.tsx",
+	);
+
+	if (await fs.pathExists(indexPath)) {
+		let indexContent = await fs.readFile(indexPath, "utf8");
+
+		indexContent = indexContent.replace(
+			/<div id="buttons"><\/div>/,
+			`<div id="buttons" className="mt-4 flex flex-col gap-4 sm:flex-row sm:items-center">
+        <Button asChild>
+          <Link to="/todos" className="flex items-center">
+            View Todo Demo
+            <ArrowRight className="ml-1 h-4 w-4" />
+          </Link>
+        </Button>
+      </div>`,
+		);
+
+		await fs.writeFile(indexPath, indexContent);
+	}
+}

apps/cli/src/index.ts

@@ -19,6 +19,8 @@ process.on("SIGINT", () => {
 const program = new Command();
 
 async function main() {
+	const startTime = Date.now();
+
 	program
 		.name("create-better-t-stack")
 		.description("Create a new Better-T Stack project")
@@ -169,7 +171,12 @@ async function main() {
 			),
 		);
 
-		outro(pc.magenta("Project created successfully!"));
+		const elapsedTimeInSeconds = ((Date.now() - startTime) / 1000).toFixed(2);
+		outro(
+			pc.magenta(
+				`Project created successfully in ${pc.bold(elapsedTimeInSeconds)} seconds!`,
+			),
+		);
 	} catch (error) {
 		s.stop(pc.red("Failed"));
 		if (error instanceof Error) {

apps/cli/src/prompts/config-prompts.ts

@@ -50,7 +50,8 @@ export async function gatherConfig(
 					? getTursoSetupChoice(flags.turso)
 					: Promise.resolve(false),
 			addons: () => getAddonsChoice(flags.addons),
-			examples: () => getExamplesChoice(flags.examples),
+			examples: ({ results }) =>
+				getExamplesChoice(flags.examples, results.database),
 			git: () => getGitChoice(flags.git),
 			packageManager: () => getPackageManagerChoice(flags.packageManager),
 			noInstall: () => getNoInstallChoice(flags.noInstall),

apps/cli/src/prompts/examples.ts

@@ -1,13 +1,16 @@
 import { cancel, isCancel, multiselect } from "@clack/prompts";
 import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
-import type { ProjectExamples } from "../types";
+import type { ProjectDatabase, ProjectExamples } from "../types";
 
 export async function getExamplesChoice(
 	examples?: ProjectExamples[],
+	database?: ProjectDatabase,
 ): Promise<ProjectExamples[]> {
 	if (examples !== undefined) return examples;
 
+	if (database === "none") return [];
+
 	const response = await multiselect<ProjectExamples>({
 		message: "Which examples would you like to include?",
 		options: [