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