Chameleon

Blog System

Blog and content management system

Blog System

Chameleon includes a complete blog system with admin management interface and public display pages.

Overview

The blog system provides content management capabilities for creating, editing, and publishing blog posts. Admins can manage posts through the admin interface, while visitors can view posts on the public blog pages. The system supports Markdown content, multi-language posts, and SEO optimization.

Admin Interface

Access Blog Management

  1. Sign in as admin
  2. Go to /admin/posts
  3. View all blog posts
  4. Create, edit, or delete posts

Create New Post

  1. Click Add Post button
  2. Fill in post details:
    • Title: Post title
    • Description: Post summary
    • Content: Markdown content
    • Slug: URL-friendly identifier
    • Language: English or Chinese
    • Status: Draft or Published
  3. Click Save

Edit Existing Post

  1. Find the post in the list
  2. Click Edit button
  3. Modify content as needed
  4. Save changes

Public Blog Pages

Blog List Page

Location: /posts

Features:

  • Display all published posts
  • Pagination support
  • Search functionality
  • Language filtering

Individual Post Page

Location: /posts/[slug]

Features:

  • Full post content
  • Markdown rendering
  • SEO meta tags
  • Social sharing

Usage

Creating Blog Posts

// Admin interface at /admin/posts/add
const newPost = {
  title: "My Blog Post",
  description: "Post summary",
  content: "# Hello World\n\nThis is my blog post content.",
  slug: "my-blog-post",
  language: "en",
  status: "published"
};

Displaying Posts

// src/app/[locale]/(default)/posts/page.tsx
import { getPosts } from "@/models/post";

export default async function BlogPage() {
  const posts = await getPosts({ status: "published" });
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.uuid}>
          <h2>{post.title}</h2>
          <p>{post.description}</p>
          <Link href={`/posts/${post.slug}`}>
            Read More
          </Link>
        </article>
      ))}
    </div>
  );
}

Markdown Content

Posts support full Markdown syntax:

# Heading 1
## Heading 2

**Bold text** and *italic text*

- List item 1
- List item 2

[Link text](https://example.com)

```code block```

> Blockquote

File Locations

  • src/app/[locale]/(admin)/admin/posts/page.tsx - Admin post list
  • src/app/[locale]/(admin)/admin/posts/add/page.tsx - Create new post
  • src/app/[locale]/(admin)/admin/posts/[uuid]/edit/page.tsx - Edit post
  • src/app/[locale]/(default)/posts/page.tsx - Public blog list
  • src/app/[locale]/(default)/posts/[slug]/page.tsx - Individual post page
  • src/models/post.ts - Post data model
  • src/services/post.ts - Post business logic

Common Tasks

Publish a Post

  1. Create post in admin interface
  2. Set status to "Published"
  3. Save post
  4. Post appears on /posts page

Update Post Content

  1. Go to /admin/posts
  2. Find the post
  3. Click Edit
  4. Modify content
  5. Save changes

Delete a Post

  1. Go to /admin/posts
  2. Find the post
  3. Click delete button
  4. Confirm deletion

SEO Optimization

Posts automatically include:

  • Meta title and description
  • OpenGraph tags
  • Twitter Card tags
  • Structured data

Troubleshooting

Post not appearing

Problem: Published post not showing on blog page

Solution:

  1. Check post status is "Published"
  2. Verify post language matches site language
  3. Clear cache and refresh page
  4. Check database for post record

Markdown not rendering

Problem: Post content shows raw Markdown

Solution:

  1. Ensure Markdown renderer is properly configured
  2. Check for syntax errors in Markdown
  3. Verify content field contains valid Markdown
  4. Test with simple Markdown first

Admin access denied

Problem: Can't access /admin/posts

Solution:

  1. Verify you're signed in as admin
  2. Check your email is in ADMIN_EMAILS
  3. Clear browser cache and retry
  4. Check admin layout permissions

Next Steps