chore: remove outdated README.md for blog module
This commit is contained in:
@@ -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 <BlogEditor />;
|
||||
}
|
||||
```
|
||||
|
||||
### 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
|
||||
Reference in New Issue
Block a user