litecms 0.1.1 → 0.2.0

package/README.md

@@ -202,7 +202,20 @@ export default function AdminLayout({
 }
 ```
 
-### 5. Create Admin Page
+### 5. Create Admin Index Page (Landing)
+
+```typescript
+// app/admin/page.tsx
+import { CmsAdminLanding } from 'litecms/admin';
+import { extractLandingProps } from 'litecms/admin/config';
+import { cmsConfig } from '../cms/config';
+
+export default function AdminIndexPage() {
+    return <CmsAdminLanding {...extractLandingProps(cmsConfig)} />;
+}
+```
+
+### 6. Create Admin Page Editor
 
 ```typescript
 // app/admin/[slug]/page.tsx
@@ -231,7 +244,7 @@ export function generateStaticParams() {
 }
 ```
 
-### 6. Set Up Storage API Routes (Optional)
+### 7. Set Up Storage API Routes (Optional)
 
 For image uploads, create API routes:
 
@@ -463,6 +476,50 @@ if (data) {
 }
 ```
 
+#### `createLanguageRoutes(deps, NextResponse?)`
+
+Create GET and POST handlers for the admin language preference API route.
+
+```typescript
+import { createLanguageRoutes } from 'litecms/server';
+
+export const { GET, POST } = createLanguageRoutes({
+    getUserId: async () => {
+        // Return current user ID or null if not authenticated
+        const session = await auth.api.getSession({ headers: await headers() });
+        return session?.user?.id ?? null;
+    },
+    getUserSettings: async (userId) => {
+        // Return user's settings or null
+        const user = await db.query.user.findFirst({ where: eq(users.id, userId) });
+        return user?.settings ?? null;
+    },
+    updateUserSettings: async (userId, settings) => {
+        // Save settings to database
+        await db.update(users).set({ settings }).where(eq(users.id, userId));
+    },
+}, NextResponse); // Optional: pass NextResponse for proper typing
+```
+
+**Types:**
+
+```typescript
+type CmsLanguage = 'en' | 'de';
+
+type UserLanguageSettings = {
+    language?: CmsLanguage;
+};
+
+type LanguageRoutesDeps = {
+    /** Get the current authenticated user's ID. Return null if not authenticated. */
+    getUserId: () => Promise<string | null>;
+    /** Get the user's current settings. Return null if user not found. */
+    getUserSettings: (userId: string) => Promise<UserLanguageSettings | null>;
+    /** Update the user's settings. */
+    updateUserSettings: (userId: string, settings: UserLanguageSettings) => Promise<void>;
+};
+```
+
 ---
 
 ### Admin (`litecms/admin` and `litecms/admin/config`)
@@ -553,12 +610,15 @@ definePage({
 Extract serializable props from CMS config for use in components.
 
 ```typescript
-import { extractLayoutProps, extractPageProps } from 'litecms/admin/config';
+import { extractLayoutProps, extractPageProps, extractLandingProps } from 'litecms/admin/config';
 
 // In layout
 <CmsAdminLayout {...extractLayoutProps(cmsConfig)} />
 
-// In page
+// In landing page (/admin)
+<CmsAdminLanding {...extractLandingProps(cmsConfig)} />
+
+// In page editor (/admin/[slug])
 const props = await extractPageProps(cmsConfig, slug);
 <CmsAdminPage {...props} />
 ```
@@ -603,6 +663,671 @@ import { CmsAdminPage } from 'litecms/admin';
 />
 ```
 
+#### `CmsAdminLanding`
+
+Admin landing page / dashboard component that displays module cards.
+
+```tsx
+import { CmsAdminLanding } from 'litecms/admin';
+import { extractLandingProps } from 'litecms/admin/config';
+import { cmsConfig } from '@/cms/config';
+
+export default function AdminIndexPage() {
+    return <CmsAdminLanding {...extractLandingProps(cmsConfig)} />;
+}
+```
+
+By default, only the **Website Content** module is shown (links to the first configured page editor).
+
+You can add additional modules using the `modules` prop:
+
+```tsx
+import { CmsAdminLanding, CmsModuleIcons } from 'litecms/admin';
+import { extractLandingProps } from 'litecms/admin/config';
+import { cmsConfig } from '@/cms/config';
+
+export default function AdminIndexPage() {
+    return (
+        <CmsAdminLanding
+            {...extractLandingProps(cmsConfig)}
+            modules={[
+                {
+                    id: 'blog',
+                    title: 'Blog',
+                    description: 'Write and manage blog posts',
+                    icon: CmsModuleIcons.blog,
+                    href: '/admin/blog',
+                },
+                {
+                    id: 'email',
+                    title: 'Email',
+                    description: 'Manage email templates',
+                    icon: CmsModuleIcons.email,
+                    disabled: true,
+                    badge: 'Coming soon',
+                },
+            ]}
+        />
+    );
+}
+```
+
+**Types:**
+
+```typescript
+type CmsAdminModule = {
+    /** Unique module identifier */
+    id: string;
+    /** Module title */
+    title: string;
+    /** Module description */
+    description: string;
+    /** Icon element to display */
+    icon: React.ReactNode;
+    /** Link to the module's admin page */
+    href?: string;
+    /** Whether the module is disabled/coming soon */
+    disabled?: boolean;
+    /** Badge text (e.g., "Coming soon") */
+    badge?: string;
+};
+```
+
+**Available Icons:**
+
+```tsx
+import { CmsModuleIcons } from 'litecms/admin';
+
+// Pre-built icons for common modules:
+CmsModuleIcons.pages     // Document/pages icon
+CmsModuleIcons.blog      // Newspaper/blog icon
+CmsModuleIcons.email     // Envelope icon
+CmsModuleIcons.analytics // Bar chart icon
+```
+
+---
+
+### Admin Language (i18n)
+
+litecms includes built-in support for switching the admin panel language between English and German. The language preference is stored per-user in your database and defaults to the browser language.
+
+#### 1. Add Settings Column to User Table
+
+Add a `settings` JSONB column to your user table:
+
+```typescript
+// app/db/auth-schema.ts
+import { pgTable, text, timestamp, boolean, jsonb } from "drizzle-orm/pg-core";
+
+export type UserSettings = {
+    language?: "en" | "de";
+};
+
+export const user = pgTable("user", {
+    id: text("id").primaryKey(),
+    name: text("name").notNull(),
+    email: text("email").notNull().unique(),
+    emailVerified: boolean("email_verified").notNull().default(false),
+    image: text("image"),
+    createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
+    updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
+    settings: jsonb("settings").$type<UserSettings>(),
+});
+```
+
+Then generate and run the migration:
+
+```bash
+bun run db:generate
+bun run db:migrate
+```
+
+#### 2. Create Language API Route
+
+Create an API route that handles reading and saving the language preference:
+
+```typescript
+// app/api/admin/language/route.ts
+import { NextResponse } from 'next/server';
+import { headers } from 'next/headers';
+import { eq } from 'drizzle-orm';
+import { createLanguageRoutes } from 'litecms/server';
+import { auth } from '@/app/lib/auth';
+import { db } from '@/app/db';
+import { user } from '@/app/db/auth-schema';
+import type { UserSettings } from '@/app/db/auth-schema';
+
+export const { GET, POST } = createLanguageRoutes({
+    getUserId: async () => {
+        const session = await auth.api.getSession({ headers: await headers() });
+        return session?.user?.id ?? null;
+    },
+    getUserSettings: async (userId) => {
+        const userData = await db.query.user.findFirst({
+            where: eq(user.id, userId),
+            columns: { settings: true },
+        });
+        return (userData?.settings as UserSettings | null) ?? null;
+    },
+    updateUserSettings: async (userId, settings) => {
+        await db.update(user)
+            .set({ settings, updatedAt: new Date() })
+            .where(eq(user.id, userId));
+    },
+}, NextResponse);
+```
+
+#### 3. That's It!
+
+The `CmsAdminLayout` automatically includes the language selector in the sidebar footer. When users change the language:
+
+- The UI updates immediately
+- The preference is saved to the database
+- On page reload, the saved preference is restored
+- If no preference is saved, the browser language is used as default
+
+#### Language Components and Hooks
+
+You can also use the language system in your own components:
+
+```tsx
+import { 
+    useCmsLanguage,           // Hook to access language context (throws if no provider)
+    useCmsLanguageOptional,   // Hook that returns null if no provider
+    CmsLanguageSelector,      // The language dropdown component
+    detectBrowserLanguage,    // Utility to detect browser language
+    type CmsLanguage,         // Type: 'en' | 'de'
+} from 'litecms/admin';
+
+function MyComponent() {
+    const { language, setLanguage, t } = useCmsLanguage();
+    
+    return (
+        <div>
+            <p>Current language: {language}</p>
+            <p>{t('save')}</p> {/* Translated string */}
+            <button onClick={() => setLanguage('de')}>Switch to German</button>
+        </div>
+    );
+}
+```
+
+#### Available Translation Keys
+
+| Key | English | German |
+|-----|---------|--------|
+| `viewSite` | View site | Seite ansehen |
+| `signOut` | Sign out | Abmelden |
+| `language` | Language | Sprache |
+| `dashboard` | Dashboard | Dashboard |
+| `pages` | Pages | Seiten |
+| `cmsNotConfigured` | CMS not configured | CMS nicht konfiguriert |
+| `modulePages` | Website Content | Website-Inhalte |
+| `modulePagesDesc` | Edit pages, text, and images... | Seiten, Texte und Bilder... |
+| `moduleEmail` | Email | E-Mail |
+| `moduleAnalytics` | Analytics | Statistiken |
+| `comingSoon` | Coming soon | Demnächst |
+| `save` | Save | Speichern |
+| `saving` | Saving... | Speichern... |
+| `reset` | Reset | Zurücksetzen |
+| `changesSaved` | Changes saved successfully. | Änderungen erfolgreich gespeichert. |
+| `savedSuccessfully` | Saved successfully! | Erfolgreich gespeichert! |
+| `saveChanges` | Save changes | Änderungen speichern |
+| `selectImage` | Select Image | Bild auswählen |
+| `replace` | Replace | Ersetzen |
+| `remove` | Remove | Entfernen |
+| `library` | Library | Bibliothek |
+| `loading` | Loading... | Laden... |
+| `noImagesYet` | No images yet | Noch keine Bilder |
+| `cancel` | Cancel | Abbrechen |
+| `select` | Select | Auswählen |
+| `moduleBlog` | Blog | Blog |
+| `moduleBlogDesc` | Write and manage blog posts | Blogbeiträge schreiben und verwalten |
+| `blogPosts` | Blog Posts | Blogbeiträge |
+| `blogNewPost` | New Post | Neuer Beitrag |
+| `blogDraft` | Draft | Entwurf |
+| `blogPublished` | Published | Veröffentlicht |
+| `blogSaveDraft` | Save Draft | Entwurf speichern |
+| `blogPublish` | Publish | Veröffentlichen |
+| `blogUnpublish` | Unpublish | Zurückziehen |
+| `blogDelete` | Delete | Löschen |
+| `blogPreview` | Preview | Vorschau |
+| `blogEditor` | Editor | Editor |
+
+---
+
+### Blog Module (Optional)
+
+litecms includes an optional blog module for writing and managing blog posts with Markdown support. The blog is entirely opt-in — it only appears if you explicitly configure it.
+
+#### Features
+
+- **Split-view editor**: Markdown editor with live GFM (GitHub Flavored Markdown) preview
+- **Draft/Published workflow**: Save drafts, publish when ready, unpublish if needed
+- **Post metadata**: Title, slug, excerpt, cover image, tags, author
+- **Translation support**: All UI strings available in English and German
+
+#### 1. Add Blog Posts Database Table
+
+Add the blog posts table to your Drizzle schema:
+
+```typescript
+// app/db/schema.ts
+import { pgTable, text, timestamp, jsonb } from "drizzle-orm/pg-core";
+
+export type BlogPostStatus = "draft" | "published";
+
+export const blogPosts = pgTable("blog_posts", {
+    id: text("id").primaryKey(),
+    slug: text("slug").notNull().unique(),
+    title: text("title").notNull(),
+    excerpt: text("excerpt"),
+    coverImage: text("cover_image"),
+    content: text("content").notNull(), // Markdown content
+    tags: jsonb("tags").$type<string[]>().default([]),
+    authorName: text("author_name").notNull(),
+    status: text("status").$type<BlogPostStatus>().notNull().default("draft"),
+    publishedAt: timestamp("published_at", { withTimezone: true }),
+    createdAt: timestamp("created_at", { withTimezone: true })
+        .notNull()
+        .defaultNow(),
+    updatedAt: timestamp("updated_at", { withTimezone: true })
+        .notNull()
+        .defaultNow(),
+});
+
+export type BlogPost = typeof blogPosts.$inferSelect;
+export type NewBlogPost = typeof blogPosts.$inferInsert;
+```
+
+Generate and run the migration:
+
+```bash
+bun drizzle-kit generate
+bun drizzle-kit migrate
+```
+
+#### 2. Create Blog API Routes
+
+Create the API routes for managing blog posts:
+
+```typescript
+// app/api/admin/blog/posts/route.ts
+import { createBlogPostsRoutes } from 'litecms/server';
+import { auth } from '@/app/lib/auth';
+import { db } from '@/app/db';
+import { blogPosts } from '@/app/db/schema';
+import { headers } from 'next/headers';
+import { desc, eq } from 'drizzle-orm';
+
+export const { GET, POST } = createBlogPostsRoutes({
+    checkAuth: async () => {
+        const session = await auth.api.getSession({ headers: await headers() });
+        return !!session?.user;
+    },
+    getPosts: async (filter) => {
+        const posts = await db.query.blogPosts.findMany({
+            where: filter?.status ? eq(blogPosts.status, filter.status) : undefined,
+            orderBy: [desc(blogPosts.createdAt)],
+        });
+        return posts.map(p => ({
+            ...p,
+            excerpt: p.excerpt ?? undefined,
+            coverImage: p.coverImage ?? undefined,
+            tags: (p.tags as string[]) ?? [],
+        }));
+    },
+    createPost: async (post) => {
+        const [created] = await db.insert(blogPosts).values({
+            id: post.id,
+            slug: post.slug,
+            title: post.title,
+            excerpt: post.excerpt ?? null,
+            coverImage: post.coverImage ?? null,
+            content: post.content,
+            tags: post.tags ?? [],
+            authorName: post.authorName,
+            status: post.status ?? 'draft',
+            publishedAt: post.status === 'published' ? new Date() : null,
+        }).returning();
+        return {
+            ...created,
+            excerpt: created.excerpt ?? undefined,
+            coverImage: created.coverImage ?? undefined,
+            tags: (created.tags as string[]) ?? [],
+        };
+    },
+    slugExists: async (slug) => {
+        const existing = await db.query.blogPosts.findFirst({
+            where: eq(blogPosts.slug, slug),
+            columns: { id: true },
+        });
+        return !!existing;
+    },
+});
+```
+
+```typescript
+// app/api/admin/blog/posts/[id]/route.ts
+import { createBlogPostRoutes } from 'litecms/server';
+import { auth } from '@/app/lib/auth';
+import { db } from '@/app/db';
+import { blogPosts } from '@/app/db/schema';
+import { headers } from 'next/headers';
+import { eq, and, ne } from 'drizzle-orm';
+
+export const { GET, PATCH, DELETE } = createBlogPostRoutes({
+    checkAuth: async () => {
+        const session = await auth.api.getSession({ headers: await headers() });
+        return !!session?.user;
+    },
+    getPost: async (id) => {
+        const post = await db.query.blogPosts.findFirst({
+            where: eq(blogPosts.id, id),
+        });
+        if (!post) return null;
+        return {
+            ...post,
+            excerpt: post.excerpt ?? undefined,
+            coverImage: post.coverImage ?? undefined,
+            tags: (post.tags as string[]) ?? [],
+        };
+    },
+    updatePost: async (id, data) => {
+        const current = await db.query.blogPosts.findFirst({
+            where: eq(blogPosts.id, id),
+            columns: { status: true, publishedAt: true },
+        });
+
+        const updateData: Record<string, unknown> = {
+            ...data,
+            updatedAt: new Date(),
+        };
+
+        // Set publishedAt when publishing for the first time
+        if (data.status === 'published' && current?.status !== 'published') {
+            updateData.publishedAt = new Date();
+        }
+
+        // Clear publishedAt when unpublishing
+        if (data.status === 'draft' && current?.status === 'published') {
+            updateData.publishedAt = null;
+        }
+
+        const [updated] = await db.update(blogPosts)
+            .set(updateData)
+            .where(eq(blogPosts.id, id))
+            .returning();
+
+        return {
+            ...updated,
+            excerpt: updated.excerpt ?? undefined,
+            coverImage: updated.coverImage ?? undefined,
+            tags: (updated.tags as string[]) ?? [],
+        };
+    },
+    deletePost: async (id) => {
+        await db.delete(blogPosts).where(eq(blogPosts.id, id));
+    },
+    slugExistsExcluding: async (slug, excludeId) => {
+        const existing = await db.query.blogPosts.findFirst({
+            where: and(eq(blogPosts.slug, slug), ne(blogPosts.id, excludeId)),
+            columns: { id: true },
+        });
+        return !!existing;
+    },
+});
+```
+
+#### 3. Create Blog Admin Page
+
+```typescript
+// app/admin/blog/page.tsx
+import { CmsBlogAdmin } from 'litecms/admin';
+
+export default function AdminBlogPage() {
+    return (
+        <CmsBlogAdmin
+            postsEndpoint="/api/admin/blog/posts"
+            defaultAuthorName="Admin"
+            storage={{
+                uploadEndpoint: '/api/storage/upload',
+            }}
+        />
+    );
+}
+```
+
+The `storage` prop enables image uploads via drag-and-drop or the toolbar button. Without it, users can still insert images by entering URLs manually.
+
+#### 4. Add Blog Module to Admin Landing
+
+```typescript
+// app/admin/page.tsx
+import { CmsAdminLanding, CmsModuleIcons } from 'litecms/admin';
+import { extractLandingProps } from 'litecms/admin/config';
+import { cmsConfig } from '../cms/config';
+
+export default function AdminIndexPage() {
+    return (
+        <CmsAdminLanding
+            {...extractLandingProps(cmsConfig)}
+            modules={[
+                {
+                    id: 'blog',
+                    title: 'Blog',
+                    description: 'Write and manage blog posts',
+                    icon: CmsModuleIcons.blog,
+                    href: '/admin/blog',
+                },
+            ]}
+        />
+    );
+}
+```
+
+#### 5. Create Public Blog Pages (Optional)
+
+Display published blog posts on your site. Use your site's layout (navigation/footer) so the blog matches the rest of the app:
+
+```typescript
+// app/blog/page.tsx
+import { db } from '@/app/db';
+import { blogPosts } from '@/app/db/schema';
+import { desc, eq } from 'drizzle-orm';
+import Link from 'next/link';
+import { Navigation } from '@/app/components/Navigation';
+import { getNavigation, getSiteSettings } from '@/app/admin/actions';
+
+export const revalidate = 60; // Revalidate every 60 seconds
+
+export default async function BlogPage() {
+    const [posts, siteSettings, navigation] = await Promise.all([
+        db.query.blogPosts.findMany({
+            where: eq(blogPosts.status, 'published'),
+            orderBy: [desc(blogPosts.publishedAt)],
+        }),
+        getSiteSettings(),
+        getNavigation(),
+    ]);
+
+    return (
+        <div className="min-h-screen bg-white">
+            <Navigation
+                siteName={siteSettings.siteName}
+                links={navigation.navLinks}
+                linksHierarchical={navigation.navLinksHierarchical}
+            />
+
+            <main className="max-w-4xl mx-auto px-4 py-16">
+                <h1 className="text-4xl font-bold mb-8">Blog</h1>
+                {posts.map((post) => (
+                    <article key={post.id} className="mb-8 pb-8 border-b">
+                        <Link href={`/blog/${post.slug}`}>
+                            <h2 className="text-2xl font-semibold hover:text-gray-600">
+                                {post.title}
+                            </h2>
+                        </Link>
+                        <div className="text-sm text-gray-500 mt-2">
+                            {post.authorName} · {post.publishedAt?.toLocaleDateString()}
+                        </div>
+                        {post.excerpt && (
+                            <p className="mt-3 text-gray-600">{post.excerpt}</p>
+                        )}
+                    </article>
+                ))}
+            </main>
+
+            <footer className="py-16 border-t">
+                <div className="max-w-5xl mx-auto px-6">
+                    <div className="flex flex-col md:flex-row items-center justify-between gap-8">
+                        <p className="text-xs tracking-widest text-gray-400">
+                            © {new Date().getFullYear()} {siteSettings.siteName}
+                        </p>
+                        <nav className="flex items-center gap-12">
+                            {navigation.footerLinks.map((link) => (
+                                <Link
+                                    key={link.href}
+                                    href={link.href}
+                                    className="text-xs tracking-widest text-gray-400 hover:text-gray-900 transition-colors duration-300"
+                                >
+                                    {link.label}
+                                </Link>
+                            ))}
+                        </nav>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+}
+```
+
+```typescript
+// app/blog/[slug]/page.tsx
+import { db } from '@/app/db';
+import { blogPosts } from '@/app/db/schema';
+import { eq, and } from 'drizzle-orm';
+import { notFound } from 'next/navigation';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Navigation } from '@/app/components/Navigation';
+import { getNavigation, getSiteSettings } from '@/app/admin/actions';
+
+export const revalidate = 60;
+
+type Props = {
+    params: Promise<{ slug: string }>;
+};
+
+export default async function BlogPostPage({ params }: Props) {
+    const { slug } = await params;
+    const [post, siteSettings, navigation] = await Promise.all([
+        db.query.blogPosts.findFirst({
+            where: and(eq(blogPosts.slug, slug), eq(blogPosts.status, 'published')),
+        }),
+        getSiteSettings(),
+        getNavigation(),
+    ]);
+
+    if (!post) notFound();
+
+    return (
+        <div className="min-h-screen bg-white">
+            <Navigation
+                siteName={siteSettings.siteName}
+                links={navigation.navLinks}
+                linksHierarchical={navigation.navLinksHierarchical}
+            />
+
+            <article className="max-w-3xl mx-auto px-4 py-16">
+                <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
+                <div className="text-sm text-gray-500 mb-8">
+                    {post.authorName} · {post.publishedAt?.toLocaleDateString()}
+                </div>
+                <div className="prose prose-lg max-w-none">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        {post.content}
+                    </ReactMarkdown>
+                </div>
+            </article>
+
+            <footer className="py-16 border-t">
+                <div className="max-w-5xl mx-auto px-6">
+                    <div className="flex flex-col md:flex-row items-center justify-between gap-8">
+                        <p className="text-xs tracking-widest text-gray-400">
+                            © {new Date().getFullYear()} {siteSettings.siteName}
+                        </p>
+                        <nav className="flex items-center gap-12">
+                            {navigation.footerLinks.map((link) => (
+                                <Link
+                                    key={link.href}
+                                    href={link.href}
+                                    className="text-xs tracking-widest text-gray-400 hover:text-gray-900 transition-colors duration-300"
+                                >
+                                    {link.label}
+                                </Link>
+                            ))}
+                        </nav>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+}
+```
+
+Install the markdown dependencies in your app:
+
+```bash
+bun add react-markdown remark-gfm
+```
+
+**Navigation note:** the blog is optional, so the main navigation only shows a Blog link if you add it in your app. If you use a CMS-driven nav builder, add `/blog` there, or add a simple rule (e.g., show Blog once a post exists).
+
+#### API Reference
+
+**`CmsBlogAdmin`** — Client component for the blog admin interface.
+
+```tsx
+<CmsBlogAdmin
+    postsEndpoint="/api/admin/blog/posts"  // API endpoint for posts
+    defaultAuthorName="Admin"               // Default author for new posts
+    storage={{                              // Optional: for image uploads
+        uploadEndpoint: '/api/storage/upload',
+    }}
+/>
+```
+
+**Features:**
+- **Markdown toolbar**: Bold, italic, headings, lists, quotes, code, links, and images
+- **Image insertion**: Click the image button to upload or enter a URL
+- **Drag-and-drop**: Drag images directly into the content area to upload and insert
+- **Live preview**: GFM (GitHub Flavored Markdown) preview with tables, strikethrough, and task lists
+
+**`createBlogPostsRoutes(deps)`** — Create GET and POST handlers for the posts collection.
+
+```typescript
+type BlogPostsRoutesDeps = {
+    checkAuth: () => Promise<boolean>;
+    getPosts: (filter?: { status?: 'draft' | 'published' }) => Promise<BlogPostData[]>;
+    createPost: (post: CreateBlogPostInput) => Promise<BlogPostData>;
+    slugExists: (slug: string) => Promise<boolean>;
+};
+```
+
+**`createBlogPostRoutes(deps)`** — Create GET, PATCH, and DELETE handlers for single posts.
+
+```typescript
+type BlogPostRoutesDeps = {
+    checkAuth: () => Promise<boolean>;
+    getPost: (id: string) => Promise<BlogPostData | null>;
+    updatePost: (id: string, data: UpdateBlogPostInput) => Promise<BlogPostData>;
+    deletePost: (id: string) => Promise<void>;
+    slugExistsExcluding: (slug: string, excludeId: string) => Promise<boolean>;
+};
+```
+
 ---
 
 ### Components (`litecms/components`)
@@ -1350,10 +2075,20 @@ app/
 ├── admin/
 │   ├── [slug]/
 │   │   └── page.tsx          # Dynamic admin pages
+│   ├── blog/
+│   │   └── page.tsx          # Blog admin (optional)
 │   ├── actions.ts            # Server actions with Drizzle
 │   ├── layout.tsx            # Protected layout with Better Auth
-│   └── page.tsx              # Admin index/redirect
+│   └── page.tsx              # Admin landing/dashboard
 ├── api/
+│   ├── admin/
+│   │   ├── blog/
+│   │   │   └── posts/
+│   │   │       ├── [id]/
+│   │   │       │   └── route.ts  # Single post API (optional)
+│   │   │       └── route.ts      # Posts collection API (optional)
+│   │   └── language/
+│   │       └── route.ts      # Language preference API
 │   ├── auth/
 │   │   └── [...all]/
 │   │       └── route.ts      # Better Auth handler
@@ -1362,13 +2097,17 @@ app/
 │       │   └── route.ts      # Protected upload
 │       └── list/
 │           └── route.ts      # Protected list
+├── blog/
+│   ├── [slug]/
+│   │   └── page.tsx          # Single post page (optional)
+│   └── page.tsx              # Blog overview (optional)
 ├── cms/
 │   ├── config.ts             # CMS configuration
 │   └── schema.ts             # Zod schemas
 ├── db/
-│   ├── auth-schema.ts        # Better Auth tables
+│   ├── auth-schema.ts        # Better Auth tables (with settings column)
 │   ├── index.ts              # Drizzle client
-│   └── schema.ts             # CMS tables
+│   └── schema.ts             # CMS tables (+ blog_posts)
 ├── lib/
 │   ├── auth.ts               # Better Auth server
 │   ├── auth-client.ts        # Better Auth client