From 529af55002c84fdf2a3659f1f6d6207ead6c1ce0 Mon Sep 17 00:00:00 2001 From: cialloo Date: Sun, 26 Oct 2025 14:13:51 +0800 Subject: [PATCH] chore: remove outdated README.md for blog module --- src/blog/README.md | 148 --------------------------------------------- 1 file changed, 148 deletions(-) delete mode 100644 src/blog/README.md diff --git a/src/blog/README.md b/src/blog/README.md deleted file mode 100644 index df9c87c..0000000 --- a/src/blog/README.md +++ /dev/null @@ -1,148 +0,0 @@ -# Blog Module - -This module contains all the blog-related functionality for creating and managing blog posts. - -## Features - -### ✍️ Rich Text Editor -- Custom Lexical-based editor with full formatting support -- Markdown shortcuts -- Image upload with progress tracking -- Hashtags and mentions -- Tables, lists, code blocks, and more - -### 📷 Image Upload -- Direct upload to S3 using presigned URLs -- Real-time upload progress indicator -- Error handling with user notifications -- Automatic image key storage for reference - -### 📝 Post Creation -- Title and cover image -- Rich text content editing -- Draft and publish workflow -- Validation before submission - -## Structure - -``` -src/blog/ -├── BlogEditor.tsx # Main editor component -├── api.ts # API functions for blog operations -├── types.ts # TypeScript type definitions -├── index.ts # Module exports -├── nodes/ # Custom Lexical nodes -│ ├── ImageNode.tsx # Image node with upload support -│ ├── ImageComponent.tsx # Image component with progress UI -│ ├── ImageResizer.tsx # Image resizing functionality -│ └── MentionNode.ts # Mention node -├── plugins/ # Lexical editor plugins -│ ├── ImagesPlugin.tsx # Image insertion plugin -│ ├── DragDropPastePlugin.tsx # Image upload on drag/drop -│ ├── ToolbarPlugin.tsx # Editor toolbar -│ ├── MarkdownShortcutPlugin.tsx # Markdown shortcuts -│ ├── HashtagPlugin.tsx # Hashtag support -│ └── MentionsPlugin.tsx # Mentions support -├── styles/ # Editor styles -│ ├── editor.css -│ └── toolbar.css -├── themes/ # Editor themes -│ └── EditorTheme.ts -├── ui/ # UI components -│ ├── DropdownColorPicker.tsx -│ └── DropdownColorPicker.css -└── utils/ # Utility functions - └── exportImport.ts -``` - -## Usage - -### Creating a New Post - -```tsx -import { CreatePost } from './pages/CreatePost'; - -// The CreatePost component provides a complete UI for: -// 1. Entering post title -// 2. Uploading cover image -// 3. Writing content with rich text editor -// 4. Publishing the post -``` - -### Using the Blog Editor - -```tsx -import { BlogEditor } from './blog'; - -function MyComponent() { - return ; -} -``` - -### API Functions - -```typescript -import { uploadImage, createBlogPost } from './blog/api'; - -// Upload an image -const { fileKey, url } = await uploadImage(file, (progress) => { - console.log(`Upload progress: ${progress}%`); -}); - -// Create a blog post -const { postId } = await createBlogPost(title, content, coverImageKey); -``` - -## Image Upload Flow - -1. **User Action**: User drops/pastes image or uploads cover image -2. **Preview**: Image preview shown immediately with local data URL -3. **Get Upload URL**: Request presigned URL from backend API -4. **Upload to S3**: Upload file directly to S3 with progress tracking -5. **Get Download URL**: Request presigned download URL -6. **Update Node**: Update image node with final URL and fileKey -7. **Notifications**: Show success/error messages to user - -## API Endpoints - -### File Upload -``` -POST /api/blog/file/upload -Body: { fileName: string } -Response: { url: string, fileKey: string, expireAt: number } -``` - -### File Download -``` -POST /api/blog/file/download -Body: { fileKey: string } -Response: { url: string, expireAt: number } -``` - -### Create Post -``` -POST /api/blog/post/create -Body: { title: string, content: string, coverImageKey: string } -Response: { postId: string } -``` - -## Features to Implement - -- [ ] List all blog posts -- [ ] View single blog post -- [ ] Edit blog post -- [ ] Delete blog post -- [ ] Add tags/categories -- [ ] Comments system -- [ ] Like/reaction system -- [ ] Search functionality -- [ ] Pagination -- [ ] Draft management -- [ ] Scheduled publishing - -## Notes - -- All images are stored with their S3 file keys in the editor state -- Upload progress is tracked in real-time and displayed to users -- Error handling includes both API errors and upload failures -- The editor state can be exported/imported for draft saving