create-momentum-app 0.1.4 → 0.1.6

package/index.cjs

@@ -95,7 +95,7 @@ const pool = (dbAdapter as PostgresAdapterWithRaw).getPool();` : "",
     dbPackage: database === "postgres" ? '"pg": "^8.18.0"' : '"better-sqlite3": "^12.6.0"',
     dbDevPackage: database === "postgres" ? "" : '"@types/better-sqlite3": "^7.6.13",',
     envDbVar: database === "postgres" ? "DATABASE_URL=postgresql://postgres:postgres@localhost:5432/momentum" : "DATABASE_PATH=./data/momentum.db",
-    defaultPort: flavor === "angular" ? "4000" : "4200",
+    defaultPort: "4200",
     externalDependencies: database === "postgres" ? '"pg", "pg-native"' : '"better-sqlite3"'
   };
   console.log();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-momentum-app",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Create a new Momentum CMS application",
   "license": "MIT",
   "author": "Momentum CMS Contributors",

package/templates/analog/package.json.tmpl

@@ -6,7 +6,8 @@
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
-		"start": "node dist/analog/server/index.mjs"
+		"start": "node dist/analog/server/index.mjs",
+		"generate-types": "tsx node_modules/@momentumcms/core/generators/types/generator.cjs src/momentum.config.ts src/types/momentum.generated.ts"
 	},
 	"dependencies": {
 		"@analogjs/platform": "^2.2.3",
@@ -50,6 +51,7 @@
 		"vite": "^7.0.0",
 		"tailwindcss": "^3.4.19",
 		"postcss": "^8.5.6",
-		"autoprefixer": "^10.4.24"
+		"autoprefixer": "^10.4.24",
+		"tsx": "^4.0.0"
 	}
 }

package/templates/angular/package.json.tmpl

@@ -6,7 +6,8 @@
 		"dev": "ng serve",
 		"build": "ng build",
 		"start": "node dist/{{projectName}}/server/server.mjs",
-		"lint": "ng lint"
+		"lint": "ng lint",
+		"generate-types": "tsx node_modules/@momentumcms/core/generators/types/generator.cjs src/momentum.config.ts src/types/momentum.generated.ts"
 	},
 	"dependencies": {
 		"@angular/animations": "^21.1.0",
@@ -52,6 +53,7 @@
 		"autoprefixer": "^10.4.21",
 		"postcss": "^8.5.4",
 		"tailwindcss": "^3.4.17",
+		"tsx": "^4.0.0",
 		"typescript": "~5.9.2"
 	}
 }

package/templates/angular/src/app/app.routes.server.ts

@@ -1,9 +1,8 @@
 import { RenderMode, ServerRoute } from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
-	// All routes use server-side rendering
-	{
-		path: '**',
-		renderMode: RenderMode.Server,
-	},
+	// Admin routes render client-side — guards need to run without SSR hydration conflict
+	{ path: 'admin/**', renderMode: RenderMode.Client },
+	// All other routes use server-side rendering
+	{ path: '**', renderMode: RenderMode.Server },
 ];

package/templates/angular/src/app/app.routes.ts

@@ -3,7 +3,10 @@ import { momentumAdminRoutes } from '@momentumcms/admin';
 import { Posts } from '../collections/posts';
 
 export const routes: Route[] = [
-	{ path: '', redirectTo: '/admin', pathMatch: 'full' },
+	{
+		path: '',
+		loadComponent: () => import('./pages/welcome').then((m) => m.WelcomePage),
+	},
 	...momentumAdminRoutes({
 		basePath: '/admin',
 		collections: [Posts],

package/templates/angular/src/app/pages/welcome.ts

@@ -0,0 +1,99 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+	selector: 'mcms-welcome-page',
+	imports: [RouterLink],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'flex min-h-screen flex-col bg-background text-foreground',
+	},
+	template: `
+		<header class="border-b border-border px-6 py-4">
+			<div class="mx-auto flex max-w-4xl items-center justify-between">
+				<h1 class="text-xl font-bold tracking-tight">Momentum CMS</h1>
+				<a
+					routerLink="/admin"
+					class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+				>
+					Go to Admin
+				</a>
+			</div>
+		</header>
+
+		<main class="flex-1 px-6 py-12">
+			<div class="mx-auto max-w-4xl space-y-12">
+				<section class="space-y-4 text-center">
+					<h2 class="text-4xl font-bold tracking-tight">Welcome to Momentum CMS</h2>
+					<p class="mx-auto max-w-2xl text-lg text-muted-foreground">
+						Your Angular-powered headless CMS is ready. Define collections in TypeScript, get an
+						auto-generated Admin UI, REST API, and database schema.
+					</p>
+				</section>
+
+				<section class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+					<div class="rounded-lg border border-border bg-card p-6 shadow-sm">
+						<h3 class="mb-2 text-lg font-semibold text-card-foreground">1. Create Admin Account</h3>
+						<p class="mb-4 text-sm text-muted-foreground">
+							Head to the admin panel to create your first admin account and start managing content.
+						</p>
+						<a routerLink="/admin" class="text-sm font-medium text-primary hover:underline">
+							Open Admin Panel &rarr;
+						</a>
+					</div>
+
+					<div class="rounded-lg border border-border bg-card p-6 shadow-sm">
+						<h3 class="mb-2 text-lg font-semibold text-card-foreground">2. Define Collections</h3>
+						<p class="mb-4 text-sm text-muted-foreground">
+							Edit <code class="rounded bg-muted px-1.5 py-0.5 text-xs">src/collections/</code> to
+							define your content types with fields, hooks, and access control.
+						</p>
+						<code class="block rounded bg-muted px-3 py-2 text-xs text-muted-foreground">
+							text('title', &#123; required: true &#125;)
+						</code>
+					</div>
+
+					<div class="rounded-lg border border-border bg-card p-6 shadow-sm">
+						<h3 class="mb-2 text-lg font-semibold text-card-foreground">3. Generate Types</h3>
+						<p class="mb-4 text-sm text-muted-foreground">
+							Run the type generator to create TypeScript interfaces from your collection
+							definitions.
+						</p>
+						<code class="block rounded bg-muted px-3 py-2 text-xs text-muted-foreground">
+							npm run generate-types
+						</code>
+					</div>
+				</section>
+
+				<section class="rounded-lg border border-border bg-card p-6 shadow-sm">
+					<h3 class="mb-3 text-lg font-semibold text-card-foreground">Quick Reference</h3>
+					<div class="grid gap-3 sm:grid-cols-2">
+						<div>
+							<p class="text-sm font-medium text-card-foreground">Dev Server</p>
+							<code class="text-sm text-muted-foreground">npm run dev</code>
+						</div>
+						<div>
+							<p class="text-sm font-medium text-card-foreground">Production Build</p>
+							<code class="text-sm text-muted-foreground">npm run build</code>
+						</div>
+						<div>
+							<p class="text-sm font-medium text-card-foreground">Config File</p>
+							<code class="text-sm text-muted-foreground">src/momentum.config.ts</code>
+						</div>
+						<div>
+							<p class="text-sm font-medium text-card-foreground">REST API</p>
+							<code class="text-sm text-muted-foreground">/api/collections/:slug</code>
+						</div>
+					</div>
+				</section>
+			</div>
+		</main>
+
+		<footer class="border-t border-border px-6 py-4">
+			<p class="mx-auto max-w-4xl text-center text-sm text-muted-foreground">
+				Powered by Momentum CMS &mdash; Built with Angular, Drizzle ORM, and Better Auth
+			</p>
+		</footer>
+	`,
+})
+export class WelcomePage {}

package/templates/angular/src/index.html.tmpl

@@ -8,6 +8,13 @@
 		<link rel="icon" type="image/x-icon" href="favicon.ico" />
 	</head>
 	<body>
+		<script>
+			try {
+				var t = localStorage.getItem('mcms-theme');
+				if (t === 'dark' || ((!t || t === 'system') && matchMedia('(prefers-color-scheme:dark)').matches))
+					document.documentElement.classList.add('dark');
+			} catch (e) {}
+		</script>
 		<app-root></app-root>
 	</body>
 </html>