blog-management

doitsu2014's avatarfrom doitsu2014

Manage blog posts including creating, editing, viewing, and troubleshooting blog-related features. Use when working with blog posts, articles, post forms, rich text editor, tags, thumbnails, or publishing workflows.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 4, 2026
[Developer Tools]

When & Why to Use This Skill

The Blog Management skill is a comprehensive toolkit designed for AI agents to efficiently handle the full lifecycle of blog content and its underlying technical infrastructure. It streamlines tasks ranging from creating and editing posts using the Quill rich text editor to managing complex metadata like tags, thumbnails, and publishing workflows. By providing direct access to domain models, API configurations, and React UI components, it enables seamless debugging, feature enhancement, and content orchestration within an administrative environment.

Use Cases

  • Automated Content Publishing: Streamline the process of creating, formatting, and publishing new blog articles with integrated tag and thumbnail management.
  • Technical Troubleshooting: Quickly identify and resolve issues within the blog form, rich text editor plugins, or API integration layers using established debugging patterns.
  • Feature Enhancement: Efficiently implement new blog post fields, modify UI components like MultiChipInput, or update TypeScript domain models to meet evolving requirements.
  • Data Integrity Management: Ensure robust updates and prevent data loss by correctly handling optimistic locking (rowVersion) and form validation states during concurrent edits.
nameblog-management
descriptionManage blog posts including creating, editing, viewing, and troubleshooting blog-related features. Use when working with blog posts, articles, post forms, rich text editor, tags, thumbnails, or publishing workflows.

Blog Management

Overview

This skill helps you work with blog post management features in the admin_side application. It includes creating new posts, editing existing posts, managing tags, handling thumbnails, and working with the Quill rich text editor.

Key Files and Components

Blog Pages

  • src/app/admin/blogs/page.tsx - Blog listing page
  • src/app/admin/blogs/create/page.tsx - Create new blog page
  • src/app/admin/blogs/edit/page.tsx - Edit existing blog page
  • src/app/admin/blogs/blog-form.tsx - Main blog form component
  • src/app/admin/components/inputs/rich-text-editor/ - Quill editor components
  • src/app/admin/components/inputs/multi-chip-input.tsx - Tag input component
  • src/app/admin/components/inputs/thumbnail-input.tsx - Image upload component

Domain Models

  • src/domains/post.ts - Blog post model and types
  • src/domains/tag.ts - Tag model and types

Common Tasks

Working with Blog Posts

When creating or editing blog posts:

  1. Read the blog form to understand the current structure:

    Read src/app/admin/blogs/blog-form.tsx

  2. Check the post domain model for data structure:

    Read src/domains/post.ts

  3. Review API integration in src/config/api.config.ts

Blog Post Fields

A blog post typically includes:

  • title: Post title
  • previewContent: Short preview/excerpt
  • content: Full HTML content from Quill editor
  • thumbnailPaths: Array of image URLs
  • published: Boolean status (draft/published)
  • postTags: Array of tags with name and color
  • categoryId: Selected category ID
  • rowVersion: For optimistic locking

Rich Text Editor

The project uses Quill 2.0 with plugins:

  • quill-html-edit-button
  • quill-resize-image
  • quill-table-better
  • quill-toggle-fullscreen-button
  • highlight.js for code syntax

When working with the editor:

  1. Check RichTextEditorWrapper component for setup
  2. Verify plugin initialization
  3. Test content saving and loading

Tag Management

Tags use the MultiChipInput component with:

  • Random color assignment
  • Add/remove functionality
  • Label-based storage

Thumbnail Management

Images are handled by ThumbnailsInput:

  • Accepts image uploads
  • Returns array of paths
  • Displays preview thumbnails

API Endpoints

Blog posts use REST API endpoints:

  • GET /posts - List all posts
  • GET /posts/:id - Get single post
  • POST /posts - Create new post
  • PUT /posts/:id - Update existing post
  • DELETE /posts/:id - Delete post

All endpoints require Bearer token authentication via authenticatedFetch.

Best Practices

  1. Always validate data before submission
  2. Handle loading states with appropriate UI feedback
  3. Preserve rowVersion for optimistic locking on updates
  4. Test rich text content for proper HTML rendering
  5. Check authentication before API calls
  6. Handle errors gracefully with user-friendly messages
  7. Use TypeScript types from domain models

Debugging Tips

If you encounter issues:

  1. Check browser console for API errors
  2. Verify authentication token is valid
  3. Check network tab for failed requests
  4. Validate form data matches API expectations
  5. Test Quill editor initialization
  6. Verify image upload paths are correct

Example Workflow

When implementing a new blog feature:

  1. Read relevant domain model
  2. Review existing blog-form.tsx implementation
  3. Check API configuration
  4. Test with existing data
  5. Implement changes following established patterns
  6. Validate with TypeScript
  7. Test in development server