create-momentum-app 0.2.0 → 0.4.0

package/index.cjs

@@ -284,6 +284,19 @@ The database is automatically created on first run - no setup required.`
       shell: true
     });
     console.log();
+    console.log(import_picocolors.default.dim("Generating types and admin config..."));
+    try {
+      (0, import_node_child_process.execFileSync)("npm", ["run", "generate"], {
+        cwd: projectDir,
+        stdio: "inherit",
+        shell: true
+      });
+      console.log(import_picocolors.default.green("\u2713 Types and admin config generated"));
+      console.log();
+    } catch {
+      console.log(import_picocolors.default.yellow("\u26A0\uFE0F  Code generation failed. Run `npm run generate` manually."));
+      console.log();
+    }
   }
   console.log(import_picocolors.default.green(import_picocolors.default.bold("Done!")));
   console.log();

package/package.json

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

package/templates/analog/package.json.tmpl

@@ -7,7 +7,11 @@
 		"dev": "vite",
 		"build": "vite build",
 		"start": "node dist/analog/server/index.mjs",
-		"generate": "tsx node_modules/@momentumcms/core/generators/generator.cjs src/momentum.config.ts --types src/generated/momentum.types.ts --config src/generated/momentum.config.ts"
+		"generate": "tsx node_modules/@momentumcms/core/src/generators/generator.cjs src/momentum.config.ts --types src/generated/momentum.types.ts --config src/generated/momentum.config.ts",
+		"migrate:generate": "tsx node_modules/@momentumcms/migrations/src/cli/generate.cjs src/momentum.config.ts",
+		"migrate:run": "tsx node_modules/@momentumcms/migrations/src/cli/run.cjs src/momentum.config.ts",
+		"migrate:status": "tsx node_modules/@momentumcms/migrations/src/cli/status.cjs src/momentum.config.ts",
+		"migrate:rollback": "tsx node_modules/@momentumcms/migrations/src/cli/rollback.cjs src/momentum.config.ts"
 	},
 	"dependencies": {
 		"@analogjs/platform": "^2.2.3",
@@ -29,7 +33,9 @@
 		"@momentumcms/admin": "^{{packageVersion}}",
 		"@momentumcms/storage": "^{{packageVersion}}",
 		"@momentumcms/logger": "^{{packageVersion}}",
+		"@momentumcms/migrations": "^{{packageVersion}}",
 		"@momentumcms/plugins-core": "^{{packageVersion}}",
+		"@momentumcms/plugins-seo": "^{{packageVersion}}",
 		"@ng-icons/core": "^33.0.0",
 		"@ng-icons/heroicons": "^33.0.0",
 		"@tiptap/core": "^3.0.0",

package/templates/analog/src/app/app.config.ts

@@ -8,6 +8,7 @@ import {
 	provideMomentumFieldRenderers,
 } from '@momentumcms/admin';
 import { adminConfig } from '../generated/momentum.config';
+import { providePostBlocks } from './pages/post-block-providers';
 
 const adminRoutes = momentumAdminRoutes(adminConfig);
 
@@ -21,5 +22,6 @@ export const appConfig: ApplicationConfig = {
 		),
 		provideClientHydration(withEventReplay()),
 		provideMomentumFieldRenderers(),
+		...providePostBlocks(),
 	],
 };

package/templates/analog/src/app/pages/(home).page.ts

@@ -0,0 +1,151 @@
+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>
+				<nav class="flex items-center gap-4">
+					<a
+						routerLink="/posts"
+						class="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+					>
+						Posts
+					</a>
+					<a
+						href="https://github.com/DonaldMurillo/momentum-cms"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+					>
+						GitHub
+					</a>
+					<a
+						href="https://github.com/DonaldMurillo/momentum-cms/tree/main/docs"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+					>
+						Docs
+					</a>
+					<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>
+				</nav>
+			</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
+						</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-6">
+			<div
+				class="mx-auto flex max-w-4xl flex-col items-center gap-4 sm:flex-row sm:justify-between"
+			>
+				<p class="text-sm text-muted-foreground">
+					Powered by Momentum CMS &mdash; Built with Angular, Drizzle ORM, and Better Auth
+				</p>
+				<nav class="flex items-center gap-4">
+					<a
+						routerLink="/posts"
+						class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+					>
+						Posts
+					</a>
+					<a
+						href="https://github.com/DonaldMurillo/momentum-cms"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+					>
+						GitHub
+					</a>
+					<a
+						href="https://github.com/DonaldMurillo/momentum-cms/tree/main/docs"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+					>
+						Documentation
+					</a>
+				</nav>
+			</div>
+		</footer>
+	`,
+})
+export default class WelcomePage {}

package/templates/analog/src/app/pages/blocks/hero-block.component.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+	selector: 'app-hero-block',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block',
+		'[attr.data-testid]': '"block-hero"',
+	},
+	template: `
+		<section class="bg-primary text-primary-foreground py-12 px-4 md:py-20 md:px-8 text-center">
+			<div class="mx-auto max-w-4xl">
+				<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4" data-testid="hero-heading">
+					{{ heading() }}
+				</h1>
+				@if (subheading()) {
+					<p class="text-lg md:text-xl text-primary-foreground mb-8" data-testid="hero-subheading">
+						{{ subheading() }}
+					</p>
+				}
+				@if (ctaText()) {
+					<a
+						class="inline-block bg-primary-foreground text-primary font-semibold px-6 py-3 rounded-lg hover:bg-primary-foreground/90 transition-colors"
+						[href]="ctaLink() || '#'"
+						data-testid="hero-cta"
+					>
+						{{ ctaText() }}
+					</a>
+				}
+			</div>
+		</section>
+	`,
+})
+export class HeroBlockComponent {
+	readonly data = input.required<Record<string, unknown>>();
+
+	readonly heading = computed((): string => String(this.data()['heading'] ?? ''));
+	readonly subheading = computed((): string => String(this.data()['subheading'] ?? ''));
+	readonly ctaText = computed((): string => String(this.data()['ctaText'] ?? ''));
+	readonly ctaLink = computed((): string => String(this.data()['ctaLink'] ?? ''));
+}

package/templates/analog/src/app/pages/blocks/image-text-block.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+	selector: 'app-image-text-block',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block',
+		'[attr.data-testid]': '"block-imageText"',
+	},
+	template: `
+		<section class="py-8 px-4 md:py-16 md:px-8">
+			<div
+				class="mx-auto max-w-6xl flex flex-col gap-8 md:gap-12 items-center"
+				[class.md:flex-row]="!reversed()"
+				[class.md:flex-row-reverse]="reversed()"
+			>
+				<!-- Image -->
+				<div class="w-full md:w-1/2" data-testid="image-text-image">
+					@if (imageUrl()) {
+						<img
+							[src]="imageUrl()"
+							[alt]="imageAlt() || heading()"
+							class="w-full h-auto rounded-lg object-cover bg-muted"
+						/>
+					} @else {
+						<div class="w-full aspect-video rounded-lg bg-muted flex items-center justify-center">
+							<span class="text-muted-foreground text-sm">No image</span>
+						</div>
+					}
+				</div>
+
+				<!-- Text -->
+				<div class="w-full md:w-1/2">
+					<h2
+						class="text-2xl md:text-3xl font-bold text-foreground mb-4"
+						data-testid="image-text-heading"
+					>
+						{{ heading() }}
+					</h2>
+					<p class="text-lg text-muted-foreground leading-relaxed" data-testid="image-text-body">
+						{{ body() }}
+					</p>
+				</div>
+			</div>
+		</section>
+	`,
+})
+export class ImageTextBlockComponent {
+	readonly data = input.required<Record<string, unknown>>();
+
+	readonly heading = computed((): string => String(this.data()['heading'] ?? ''));
+	readonly body = computed((): string => String(this.data()['body'] ?? ''));
+	readonly imageUrl = computed((): string => String(this.data()['imageUrl'] ?? ''));
+	readonly imageAlt = computed((): string => String(this.data()['imageAlt'] ?? ''));
+	readonly reversed = computed((): boolean => this.data()['imagePosition'] === 'right');
+}

package/templates/analog/src/app/pages/blocks/text-block.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+	selector: 'app-text-block',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block',
+		'[attr.data-testid]': '"block-textBlock"',
+	},
+	template: `
+		<section class="py-8 px-4 md:py-12 md:px-8 max-w-3xl mx-auto">
+			@if (heading()) {
+				<h2 class="text-2xl font-bold text-foreground mb-4" data-testid="text-heading">
+					{{ heading() }}
+				</h2>
+			}
+			<p class="text-lg text-muted-foreground leading-relaxed" data-testid="text-body">
+				{{ body() }}
+			</p>
+		</section>
+	`,
+})
+export class TextBlockComponent {
+	readonly data = input.required<Record<string, unknown>>();
+
+	readonly heading = computed((): string => String(this.data()['heading'] ?? ''));
+	readonly body = computed((): string => String(this.data()['body'] ?? ''));
+}

package/templates/analog/src/app/pages/post-block-providers.ts

@@ -0,0 +1,17 @@
+import type { Provider } from '@angular/core';
+import { provideBlockComponents } from '@momentumcms/ui';
+import { HeroBlockComponent } from './blocks/hero-block.component';
+import { TextBlockComponent } from './blocks/text-block.component';
+import { ImageTextBlockComponent } from './blocks/image-text-block.component';
+
+/**
+ * Provide all post block components for the block renderer.
+ * Add to the app's root providers.
+ */
+export function providePostBlocks(): Provider[] {
+	return provideBlockComponents({
+		hero: HeroBlockComponent,
+		textBlock: TextBlockComponent,
+		imageText: ImageTextBlockComponent,
+	});
+}

package/templates/analog/src/app/pages/post-detail.resolver.ts

@@ -0,0 +1,31 @@
+import type { ResolveFn } from '@angular/router';
+import { injectMomentumAPI, type FindResult } from '@momentumcms/admin';
+
+/**
+ * Resolver for the post detail route.
+ *
+ * Fetches the post by slug before the component renders. This ensures:
+ * - SSR renders the full post content (not just "Loading...")
+ * - The admin preview iframe (with scripts disabled) shows the real post
+ */
+export const postDetailResolver: ResolveFn<FindResult<Record<string, unknown>>> = (route) => {
+	const api = injectMomentumAPI();
+	const slug = typeof route.params['slug'] === 'string' ? route.params['slug'] : undefined;
+
+	if (!slug) {
+		return {
+			docs: [],
+			totalDocs: 0,
+			page: 1,
+			totalPages: 0,
+			limit: 1,
+			hasNextPage: false,
+			hasPrevPage: false,
+		};
+	}
+
+	return api.collection('posts').find({
+		where: { slug: { equals: slug } },
+		limit: 1,
+	});
+};

package/templates/analog/src/app/pages/posts/[slug].page.ts

@@ -0,0 +1,145 @@
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs';
+import { injectMomentumAPI, type FindResult } from '@momentumcms/admin';
+import { BlockRendererComponent } from '@momentumcms/ui';
+import type { RouteMeta } from '@analogjs/router';
+import { postDetailResolver } from '../post-detail.resolver';
+
+export const routeMeta: RouteMeta = {
+	resolve: { postData: postDetailResolver },
+};
+
+interface PostDetail {
+	id: string;
+	title: string;
+	blocks: Array<Record<string, unknown>>;
+}
+
+@Component({
+	selector: 'app-post-detail',
+	imports: [RouterLink, BlockRendererComponent],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-8 md:py-12',
+	},
+	template: `
+		<a
+			routerLink="/posts"
+			class="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-6 transition-colors"
+			data-testid="post-back-link"
+		>
+			&larr; Back to Posts
+		</a>
+
+		@if (loading()) {
+			<p class="text-muted-foreground" data-testid="post-loading">Loading post...</p>
+		} @else if (error()) {
+			<div class="text-center py-12" data-testid="post-error">
+				<h1 class="text-2xl font-bold text-foreground mb-2">Post not found</h1>
+				<p class="text-muted-foreground">The post you are looking for does not exist.</p>
+			</div>
+		} @else if (post(); as p) {
+			<article data-testid="post-detail">
+				<h1
+					class="text-3xl md:text-4xl font-bold text-foreground mb-6"
+					data-testid="post-detail-title"
+				>
+					{{ p.title }}
+				</h1>
+
+				<div data-testid="post-blocks">
+					<mcms-block-renderer [blocks]="p.blocks" />
+				</div>
+			</article>
+		}
+	`,
+})
+export default class PostDetailComponent {
+	private readonly route = inject(ActivatedRoute);
+	private readonly api = injectMomentumAPI();
+	private readonly titleService = inject(Title);
+	private readonly metaService = inject(Meta);
+
+	readonly post = signal<PostDetail | null>(null);
+	readonly loading = signal(true);
+	readonly error = signal(false);
+
+	readonly blocks = computed((): Array<Record<string, unknown>> => this.post()?.blocks ?? []);
+
+	/**
+	 * Resolved post data from the route resolver (SSR-safe).
+	 */
+	private readonly resolvedPost = toSignal(
+		this.route.data.pipe(
+			map((data): Record<string, unknown> | null => {
+				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- route resolver returns FindResult
+				const result = data['postData'] as FindResult<Record<string, unknown>> | undefined;
+				if (!result || !result.docs[0]) return null;
+				return result.docs[0];
+			}),
+		),
+	);
+
+	constructor() {
+		const resolvedDoc = this.resolvedPost();
+
+		if (resolvedDoc) {
+			this.populateFromDoc(resolvedDoc);
+		} else {
+			const slug: unknown = this.route.snapshot.params['slug'];
+			if (typeof slug === 'string') {
+				void this.loadPost(slug);
+			} else {
+				this.loading.set(false);
+				this.error.set(true);
+			}
+		}
+	}
+
+	private populateFromDoc(doc: Record<string, unknown>): void {
+		const title = String(doc['title'] ?? '');
+		const rawBlocks = doc['pageContent'];
+		const blockList = Array.isArray(rawBlocks)
+			? // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- blocks from API are Record arrays
+				(rawBlocks as Array<Record<string, unknown>>)
+			: [];
+
+		this.post.set({
+			id: String(doc['id'] ?? ''),
+			title,
+			blocks: blockList,
+		});
+
+		this.titleService.setTitle(`${title} | Momentum CMS`);
+		this.metaService.updateTag({
+			name: 'description',
+			content: `Read "${title}" on Momentum CMS.`,
+		});
+		this.metaService.updateTag({ property: 'og:title', content: title });
+		this.metaService.updateTag({ property: 'og:type', content: 'article' });
+		this.loading.set(false);
+	}
+
+	private async loadPost(slug: string): Promise<void> {
+		try {
+			const result = await this.api
+				.collection<Record<string, unknown>>('posts')
+				.find({ where: { slug: { equals: slug } }, limit: 1 });
+
+			const doc = result.docs[0];
+			if (!doc) {
+				this.error.set(true);
+				this.loading.set(false);
+				return;
+			}
+
+			this.populateFromDoc(doc);
+		} catch {
+			this.error.set(true);
+			this.loading.set(false);
+		}
+	}
+}

package/templates/analog/src/app/pages/posts.page.ts

@@ -0,0 +1,130 @@
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { injectMomentumAPI } from '@momentumcms/admin';
+
+interface PostDisplay {
+	id: string;
+	slug: string;
+	title: string;
+}
+
+@Component({
+	selector: 'app-posts-page',
+	imports: [RouterLink],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 md:py-12',
+	},
+	template: `
+		<h1 class="text-3xl md:text-4xl font-bold text-foreground mb-2" data-testid="posts-title">
+			Posts
+		</h1>
+		<p class="text-lg text-muted-foreground mb-8">Browse the latest posts.</p>
+
+		<!-- Search -->
+		<div class="mb-8">
+			<input
+				type="text"
+				class="w-full md:w-96 px-4 py-2 rounded-lg border border-input bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+				placeholder="Search posts..."
+				[value]="searchQuery()"
+				(input)="onSearchInput($event)"
+				data-testid="posts-search"
+			/>
+		</div>
+
+		<!-- Posts grid -->
+		@if (loading()) {
+			<p class="text-muted-foreground" data-testid="posts-loading">Loading posts...</p>
+		} @else if (error()) {
+			<div class="text-center py-12" data-testid="posts-error">
+				<p class="text-lg font-semibold text-foreground">Something went wrong</p>
+				<p class="text-muted-foreground mt-1">Failed to load posts. Please try again later.</p>
+			</div>
+		} @else if (filteredPosts().length === 0) {
+			<p class="text-muted-foreground" data-testid="posts-empty">No posts found.</p>
+		} @else {
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" data-testid="posts-grid">
+				@for (post of filteredPosts(); track post.id) {
+					<a
+						[routerLink]="['/posts', post.slug]"
+						class="bg-card border border-border rounded-lg overflow-hidden hover:shadow-md transition-shadow block"
+						data-testid="post-card"
+					>
+						<div class="p-6">
+							<h2 class="text-lg font-semibold text-card-foreground mb-2" data-testid="post-title">
+								{{ post.title }}
+							</h2>
+						</div>
+					</a>
+				}
+			</div>
+		}
+	`,
+})
+export default class PostsPageComponent {
+	private readonly api = injectMomentumAPI();
+	private readonly route = inject(ActivatedRoute);
+	private readonly router = inject(Router);
+
+	readonly posts = signal<PostDisplay[]>([]);
+	readonly loading = signal(true);
+	readonly error = signal(false);
+	readonly searchQuery = signal('');
+
+	private readonly titleService = inject(Title);
+	private readonly metaService = inject(Meta);
+
+	readonly filteredPosts = computed((): PostDisplay[] => {
+		const query = this.searchQuery().toLowerCase();
+		if (!query) return this.posts();
+		return this.posts().filter((p) => p.title.toLowerCase().includes(query));
+	});
+
+	constructor() {
+		const params = this.route.snapshot.queryParams;
+		const initialSearch = params['search'];
+		if (typeof initialSearch === 'string' && initialSearch) {
+			this.searchQuery.set(initialSearch);
+		}
+		this.titleService.setTitle('Posts | Momentum CMS');
+		this.metaService.updateTag({
+			name: 'description',
+			content: 'Browse the latest posts from Momentum CMS.',
+		});
+		void this.loadPosts();
+	}
+
+	onSearchInput(event: Event): void {
+		const target = event.target;
+		if (target instanceof HTMLInputElement) {
+			this.searchQuery.set(target.value);
+			void this.router.navigate([], {
+				queryParams: { search: target.value || null },
+				queryParamsHandling: 'merge',
+				replaceUrl: true,
+			});
+		}
+	}
+
+	private async loadPosts(): Promise<void> {
+		try {
+			const result = await this.api
+				.collection<Record<string, unknown>>('posts')
+				.find({ limit: 100, sort: '-createdAt' });
+
+			this.posts.set(
+				result.docs.map((doc) => ({
+					id: String(doc['id'] ?? ''),
+					slug: String(doc['slug'] ?? ''),
+					title: String(doc['title'] ?? ''),
+				})),
+			);
+		} catch {
+			this.error.set(true);
+		} finally {
+			this.loading.set(false);
+		}
+	}
+}