@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

npm install @123resume/react-blog-system

Quick Start

Configure the API Client

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

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

// 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

// 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:

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

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

<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

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

Routes

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 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:

// 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:

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

Draft Workflow

Save drafts and publish when ready:

// 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

npm run build

Development Mode

npm run dev

Examples

See the examples directory for complete usage examples:

• basic-usage.tsx - Basic setup and usage
• multi-language.tsx - Multi-language examples

License

MIT

Support

For issues and questions, open an issue on GitHub.