npm package: @123resume/react-blog-system
Description: A complete, multi-language blog system for React applications with editor, management, and display components
Author: 123Resume
Latest version: 1.0.5

# @123resume/react-blog-system

A React blog system with multi-language support, content management, and scheduled publishing.

## Features

- Multi-language support for creating and managing posts in different languages
- Markdown-based editor with live preview
- Scheduled publishing with date and time support
- Draft management and publishing workflow
- Customizable styling with gradient backgrounds and cover images
- Image watermarking support
- Authentication integration
- Responsive design
- TypeScript support

## Installation

```bash
npm install @123resume/react-blog-system
```

## Quick Start

### Configure the API Client

```typescript
import { createBlogClient } from "@123resume/react-blog-system";

const blogClient = createBlogClient({
  apiBaseUrl: "https://api.example.com/api",
  getAuthToken: () => localStorage.getItem("authToken"),
  defaultLanguage: "en",
  supportedLanguages: ["en", "de"],
  watermark: {
    enabled: true,
    text: "My Blog",
    icon: FileText,
  },
});
```

### Basic Usage

```tsx
import { Blog, BlogPost } from "@123resume/react-blog-system";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/blog" element={<Blog client={blogClient} />} />
        <Route path="/blog/:id" element={<BlogPost client={blogClient} />} />
      </Routes>
    </BrowserRouter>
  );
}
```

## Multi-Language Support

The library supports creating separate versions of the same post in different languages. Each language version uses the same post ID but different language codes.

### Creating Posts in Multiple Languages

```typescript
// English version
await blogClient.create({
  id: "my-post",
  title: "My Blog Post",
  excerpt: "This is a great post",
  content: "...",
  language: "en",
  // ... other fields
});

// German version (same ID, different language)
await blogClient.create({
  id: "my-post",
  title: "Mein Blog-Post",
  excerpt: "Das ist ein großartiger Post",
  content: "...",
  language: "de",
  // ... other fields
});
```

### Fetching Posts by Language

```typescript
// Get English posts
const englishPosts = await blogClient.getAll("en");

// Get German posts
const germanPosts = await blogClient.getAll("de");

// Get all posts including drafts (for authenticated users)
const allPosts = await blogClient.getAll("en", true);
```

### Language-Aware Components

Components automatically handle language detection based on your application's language context:

```tsx
import { useLanguage } from "@123resume/react-blog-system";

function BlogPage() {
  const { language } = useLanguage();
  const posts = await blogClient.getAll(language);

  return <BlogList posts={posts} />;
}
```

## Blog Editor

### Basic Usage

```tsx
import { BlogEditor } from "@123resume/react-blog-system";

function CreatePost() {
  return (
    <BlogEditor
      client={blogClient}
      onSave={(post) => console.log("Saved:", post)}
      onPublish={(post) => console.log("Published:", post)}
    />
  );
}
```

### Editing Existing Posts

```tsx
<BlogEditor client={blogClient} postId="existing-post-id" language="en" />
```

### Editor Features

- Auto-generated URL slugs from post titles
- Markdown editor with live preview
- Image upload with watermark support
- Scheduled publishing with date and time picker
- Draft management
- Language selection
- Category and metadata management

## Configuration

### Watermark

```typescript
const blogClient = createBlogClient({
  apiBaseUrl: "https://api.example.com/api",
  watermark: {
    enabled: true,
    text: "My Brand",
    icon: CustomIcon,
  },
});
```

### Routes

```typescript
const blogClient = createBlogClient({
  apiBaseUrl: "https://api.example.com/api",
  routes: {
    blog: "/blog",
    editor: "/blog-editor",
    management: "/blog-management",
    post: (id) => `/blog/${id}`,
  },
});
```

### Styling

The library uses Tailwind CSS classes. Customize by:

1. Overriding CSS classes in your application
2. Using CSS variables for theming
3. Wrapping components with custom styled containers

## Backend API Requirements

Your backend must implement the blog API contract. See [BACKEND_API.md](./BACKEND_API.md) for endpoint specifications.

### Required Endpoints

- `GET /api/blog-posts/` - List posts
- `GET /api/blog-posts/:id/` - Get post by ID
- `POST /api/blog-posts/` - Create post (authenticated)
- `PUT /api/blog-posts/:id/` - Update post (authenticated)
- `DELETE /api/blog-posts/:id/` - Delete post (authenticated)

All endpoints support a `language` query parameter for multi-language support.

## API Reference

### `createBlogClient(config: BlogConfig): BlogClient`

Creates a configured blog API client.

**Parameters:**

- `config.apiBaseUrl` (string, required) - Base URL for your API
- `config.getAuthToken` (function, optional) - Function that returns auth token
- `config.onError` (function, optional) - Error handler callback
- `config.watermark` (object, optional) - Watermark configuration
- `config.routes` (object, optional) - Route configuration
- `config.supportedLanguages` (string[], optional) - Supported language codes
- `config.defaultLanguage` (string, optional) - Default language code

### `BlogClient`

#### `getAll(language?: string, includeDrafts?: boolean): Promise<BlogPost[]>`

Get all blog posts for a language.

#### `getById(id: string, language?: string): Promise<BlogPost>`

Get a specific blog post.

#### `create(post: BlogPost): Promise<BlogPost>`

Create a new blog post.

#### `update(id: string, post: Partial<BlogPost>, language?: string): Promise<BlogPost>`

Update an existing blog post.

#### `delete(id: string, language?: string): Promise<void>`

Delete a blog post.

## Use Cases

### Multi-Language Blog

Create separate versions of your blog in English and German:

```typescript
// English version
await blogClient.create({
  id: "welcome",
  title: "Welcome to Our Blog",
  language: "en",
  // ...
});

// German version
await blogClient.create({
  id: "welcome",
  title: "Willkommen in unserem Blog",
  language: "de",
  // ...
});
```

### Scheduled Publishing

Schedule posts to publish automatically:

```typescript
await blogClient.create({
  id: "announcement",
  title: "Big Announcement",
  published: false,
  scheduledPublishAt: "2025-12-25T10:00:00Z",
  // ...
});
```

### Draft Workflow

Save drafts and publish when ready:

```typescript
// Save as draft
await blogClient.create({
  id: "draft-post",
  title: "Work in Progress",
  published: false,
  // ...
});

// Publish later
await blogClient.update("draft-post", {
  published: true,
});
```

## Development

### Building

```bash
npm run build
```

### Development Mode

```bash
npm run dev
```

## Examples

See the [examples](./examples/) directory for complete usage examples:

- [basic-usage.tsx](./examples/basic-usage.tsx) - Basic setup and usage
- [multi-language.tsx](./examples/multi-language.tsx) - Multi-language examples

## License

MIT

## Support

For issues and questions, open an issue on GitHub.