@123resume/react-blog-system 1.0.0

package/README.md

@@ -0,0 +1,324 @@
+# @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.

package/dist/index.d.mts

@@ -0,0 +1,66 @@
+/**
+ * Blog System Types
+ */
+interface BlogPost {
+    id: string;
+    title: string;
+    excerpt: string;
+    category: string;
+    readTime: string;
+    date: string;
+    gradient: string;
+    iconColor: string;
+    image?: string;
+    content: string;
+    language?: string;
+    published?: boolean;
+    scheduledPublishAt?: string;
+    authorId?: string;
+    createdAt?: string;
+    updatedAt?: string;
+}
+interface BlogConfig {
+    apiBaseUrl: string;
+    getAuthToken?: () => string | null;
+    onError?: (error: Error) => void;
+    watermark?: {
+        enabled: boolean;
+        text?: string;
+        icon?: React.ComponentType<{
+            className?: string;
+        }>;
+    };
+    routes?: {
+        blog?: string;
+        editor?: string;
+        management?: string;
+        post?: (id: string) => string;
+    };
+    supportedLanguages?: string[];
+    defaultLanguage?: string;
+}
+interface BlogClient {
+    getAll: (language?: string, includeDrafts?: boolean) => Promise<BlogPost[]>;
+    getById: (id: string, language?: string) => Promise<BlogPost>;
+    create: (post: BlogPost) => Promise<BlogPost>;
+    update: (id: string, post: Partial<BlogPost>, language?: string) => Promise<BlogPost>;
+    delete: (id: string, language?: string) => Promise<void>;
+}
+
+/**
+ * Blog API Client
+ * Configurable client for blog post operations
+ */
+
+/**
+ * Create a blog client with the given configuration
+ */
+declare const createBlogClient: (config: BlogConfig) => BlogClient;
+
+/**
+ * Simple Markdown Renderer
+ * Converts markdown-like text to React elements
+ */
+declare const renderMarkdown: (content: string) => JSX.Element[];
+
+export { type BlogClient, type BlogConfig, type BlogPost, createBlogClient, renderMarkdown };

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Blog System Types
+ */
+interface BlogPost {
+    id: string;
+    title: string;
+    excerpt: string;
+    category: string;
+    readTime: string;
+    date: string;
+    gradient: string;
+    iconColor: string;
+    image?: string;
+    content: string;
+    language?: string;
+    published?: boolean;
+    scheduledPublishAt?: string;
+    authorId?: string;
+    createdAt?: string;
+    updatedAt?: string;
+}
+interface BlogConfig {
+    apiBaseUrl: string;
+    getAuthToken?: () => string | null;
+    onError?: (error: Error) => void;
+    watermark?: {
+        enabled: boolean;
+        text?: string;
+        icon?: React.ComponentType<{
+            className?: string;
+        }>;
+    };
+    routes?: {
+        blog?: string;
+        editor?: string;
+        management?: string;
+        post?: (id: string) => string;
+    };
+    supportedLanguages?: string[];
+    defaultLanguage?: string;
+}
+interface BlogClient {
+    getAll: (language?: string, includeDrafts?: boolean) => Promise<BlogPost[]>;
+    getById: (id: string, language?: string) => Promise<BlogPost>;
+    create: (post: BlogPost) => Promise<BlogPost>;
+    update: (id: string, post: Partial<BlogPost>, language?: string) => Promise<BlogPost>;
+    delete: (id: string, language?: string) => Promise<void>;
+}
+
+/**
+ * Blog API Client
+ * Configurable client for blog post operations
+ */
+
+/**
+ * Create a blog client with the given configuration
+ */
+declare const createBlogClient: (config: BlogConfig) => BlogClient;
+
+/**
+ * Simple Markdown Renderer
+ * Converts markdown-like text to React elements
+ */
+declare const renderMarkdown: (content: string) => JSX.Element[];
+
+export { type BlogClient, type BlogConfig, type BlogPost, createBlogClient, renderMarkdown };

package/dist/index.js

@@ -0,0 +1,241 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  createBlogClient: () => createBlogClient,
+  renderMarkdown: () => renderMarkdown
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/api/blogClient.ts
+var camelToSnake = (str) => {
+  return str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+};
+var camelToSnakeObject = (obj) => {
+  if (Array.isArray(obj)) {
+    return obj.map(camelToSnakeObject);
+  } else if (obj !== null && typeof obj === "object") {
+    const newObj = {};
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        const snakeKey = camelToSnake(key);
+        newObj[snakeKey] = camelToSnakeObject(obj[key]);
+      }
+    }
+    return newObj;
+  }
+  return obj;
+};
+var snakeToCamel = (str) => {
+  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+};
+var snakeToCamelObject = (obj) => {
+  if (Array.isArray(obj)) {
+    return obj.map(snakeToCamelObject);
+  } else if (obj !== null && typeof obj === "object") {
+    const newObj = {};
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        const camelKey = snakeToCamel(key);
+        newObj[camelKey] = snakeToCamelObject(obj[key]);
+      }
+    }
+    return newObj;
+  }
+  return obj;
+};
+var createBlogClient = (config) => {
+  const createHeaders = (requireAuth = false) => {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (requireAuth && config.getAuthToken) {
+      const token = config.getAuthToken();
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`;
+      }
+    }
+    return headers;
+  };
+  const handleError = (error) => {
+    if (config.onError) {
+      config.onError(error);
+    } else {
+      console.error("Blog API Error:", error);
+    }
+    throw error;
+  };
+  return {
+    /**
+     * Get all published blog posts for a language
+     */
+    getAll: async (language = config.defaultLanguage || "en", includeDrafts = false) => {
+      try {
+        const url = `${config.apiBaseUrl}/blog-posts/?language=${language}${includeDrafts ? "&include_drafts=true" : ""}`;
+        const response = await fetch(url, {
+          method: "GET",
+          headers: createHeaders(includeDrafts)
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || "Failed to fetch blog posts");
+        }
+        const data = await response.json();
+        return snakeToCamelObject(data);
+      } catch (error) {
+        return handleError(error);
+      }
+    },
+    /**
+     * Get a specific blog post by ID
+     */
+    getById: async (id, language = config.defaultLanguage || "en") => {
+      try {
+        const response = await fetch(`${config.apiBaseUrl}/blog-posts/${id}/?language=${language}`, {
+          method: "GET",
+          headers: createHeaders(false)
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || "Failed to fetch blog post");
+        }
+        const data = await response.json();
+        return snakeToCamelObject(data);
+      } catch (error) {
+        return handleError(error);
+      }
+    },
+    /**
+     * Create a new blog post
+     */
+    create: async (post) => {
+      try {
+        const snakeCaseData = camelToSnakeObject(post);
+        const response = await fetch(`${config.apiBaseUrl}/blog-posts/`, {
+          method: "POST",
+          headers: createHeaders(true),
+          body: JSON.stringify(snakeCaseData)
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || error.message || "Failed to create blog post");
+        }
+        const data = await response.json();
+        return snakeToCamelObject(data);
+      } catch (error) {
+        return handleError(error);
+      }
+    },
+    /**
+     * Update an existing blog post
+     */
+    update: async (id, post, language = config.defaultLanguage || "en") => {
+      try {
+        const snakeCaseData = camelToSnakeObject(post);
+        const response = await fetch(`${config.apiBaseUrl}/blog-posts/${id}/?language=${language}`, {
+          method: "PUT",
+          headers: createHeaders(true),
+          body: JSON.stringify(snakeCaseData)
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || error.message || "Failed to update blog post");
+        }
+        const data = await response.json();
+        return snakeToCamelObject(data);
+      } catch (error) {
+        return handleError(error);
+      }
+    },
+    /**
+     * Delete a blog post
+     */
+    delete: async (id, language = config.defaultLanguage || "en") => {
+      try {
+        const response = await fetch(`${config.apiBaseUrl}/blog-posts/${id}/?language=${language}`, {
+          method: "DELETE",
+          headers: createHeaders(true)
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || "Failed to delete blog post");
+        }
+      } catch (error) {
+        return handleError(error);
+      }
+    }
+  };
+};
+
+// src/utils/markdownRenderer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var renderMarkdown = (content) => {
+  const lines = content.trim().split("\n");
+  const elements = [];
+  let listItems = [];
+  const flushList = () => {
+    if (listItems.length > 0) {
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "list-disc list-inside space-y-2 text-muted-foreground mb-6 ml-4", children: listItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "leading-relaxed", children: item }, i)) }, `list-${elements.length}`)
+      );
+      listItems = [];
+    }
+  };
+  lines.forEach((line, index) => {
+    const trimmed = line.trim();
+    if (trimmed.startsWith("## ")) {
+      flushList();
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-2xl sm:text-3xl font-bold text-foreground mt-10 mb-4", children: trimmed.replace("## ", "") }, index)
+      );
+    } else if (trimmed.startsWith("### ")) {
+      flushList();
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xl sm:text-2xl font-semibold text-foreground mt-8 mb-3", children: trimmed.replace("### ", "") }, index)
+      );
+    } else if (trimmed.startsWith("- ")) {
+      listItems.push(trimmed.replace("- ", ""));
+    } else if (trimmed.startsWith("**") && trimmed.endsWith("**")) {
+      flushList();
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-semibold text-foreground mb-2", children: trimmed.replace(/\*\*/g, "") }, index)
+      );
+    } else if (trimmed.length > 0) {
+      flushList();
+      const parts = trimmed.split(/(\*\*[^*]+\*\*)/g);
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground leading-relaxed mb-4", children: parts.map((part, i) => {
+          if (part.startsWith("**") && part.endsWith("**")) {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { className: "text-foreground font-semibold", children: part.replace(/\*\*/g, "") }, i);
+          }
+          return part;
+        }) }, index)
+      );
+    }
+  });
+  flushList();
+  return elements;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createBlogClient,
+  renderMarkdown
+});

package/dist/index.mjs

@@ -0,0 +1,213 @@
+// src/api/blogClient.ts
+var camelToSnake = (str) => {
+  return str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+};
+var camelToSnakeObject = (obj) => {
+  if (Array.isArray(obj)) {
+    return obj.map(camelToSnakeObject);
+  } else if (obj !== null && typeof obj === "object") {
+    const newObj = {};
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        const snakeKey = camelToSnake(key);
+        newObj[snakeKey] = camelToSnakeObject(obj[key]);
+      }
+    }
+    return newObj;
+  }
+  return obj;
+};
+var snakeToCamel = (str) => {
+  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+};
+var snakeToCamelObject = (obj) => {
+  if (Array.isArray(obj)) {
+    return obj.map(snakeToCamelObject);
+  } else if (obj !== null && typeof obj === "object") {
+    const newObj = {};
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        const camelKey = snakeToCamel(key);
+        newObj[camelKey] = snakeToCamelObject(obj[key]);
+      }
+    }
+    return newObj;
+  }
+  return obj;
+};
+var createBlogClient = (config) => {
+  const createHeaders = (requireAuth = false) => {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (requireAuth && config.getAuthToken) {
+      const token = config.getAuthToken();
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`;
+      }
+    }
+    return headers;
+  };
+  const handleError = (error) => {
+    if (config.onError) {
+      config.onError(error);
+    } else {
+      console.error("Blog API Error:", error);
+    }
+    throw error;
+  };
+  return {
+    /**
+     * Get all published blog posts for a language
+     */
+    getAll: async (language = config.defaultLanguage || "en", includeDrafts = false) => {
+      try {
+        const url = `${config.apiBaseUrl}/blog-posts/?language=${language}${includeDrafts ? "&include_drafts=true" : ""}`;
+        const response = await fetch(url, {
+          method: "GET",
+          headers: createHeaders(includeDrafts)
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || "Failed to fetch blog posts");
+        }
+        const data = await response.json();
+        return snakeToCamelObject(data);
+      } catch (error) {
+        return handleError(error);
+      }
+    },
+    /**
+     * Get a specific blog post by ID
+     */
+    getById: async (id, language = config.defaultLanguage || "en") => {
+      try {
+        const response = await fetch(`${config.apiBaseUrl}/blog-posts/${id}/?language=${language}`, {
+          method: "GET",
+          headers: createHeaders(false)
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || "Failed to fetch blog post");
+        }
+        const data = await response.json();
+        return snakeToCamelObject(data);
+      } catch (error) {
+        return handleError(error);
+      }
+    },
+    /**
+     * Create a new blog post
+     */
+    create: async (post) => {
+      try {
+        const snakeCaseData = camelToSnakeObject(post);
+        const response = await fetch(`${config.apiBaseUrl}/blog-posts/`, {
+          method: "POST",
+          headers: createHeaders(true),
+          body: JSON.stringify(snakeCaseData)
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || error.message || "Failed to create blog post");
+        }
+        const data = await response.json();
+        return snakeToCamelObject(data);
+      } catch (error) {
+        return handleError(error);
+      }
+    },
+    /**
+     * Update an existing blog post
+     */
+    update: async (id, post, language = config.defaultLanguage || "en") => {
+      try {
+        const snakeCaseData = camelToSnakeObject(post);
+        const response = await fetch(`${config.apiBaseUrl}/blog-posts/${id}/?language=${language}`, {
+          method: "PUT",
+          headers: createHeaders(true),
+          body: JSON.stringify(snakeCaseData)
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || error.message || "Failed to update blog post");
+        }
+        const data = await response.json();
+        return snakeToCamelObject(data);
+      } catch (error) {
+        return handleError(error);
+      }
+    },
+    /**
+     * Delete a blog post
+     */
+    delete: async (id, language = config.defaultLanguage || "en") => {
+      try {
+        const response = await fetch(`${config.apiBaseUrl}/blog-posts/${id}/?language=${language}`, {
+          method: "DELETE",
+          headers: createHeaders(true)
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          throw new Error(error.error || "Failed to delete blog post");
+        }
+      } catch (error) {
+        return handleError(error);
+      }
+    }
+  };
+};
+
+// src/utils/markdownRenderer.tsx
+import { jsx } from "react/jsx-runtime";
+var renderMarkdown = (content) => {
+  const lines = content.trim().split("\n");
+  const elements = [];
+  let listItems = [];
+  const flushList = () => {
+    if (listItems.length > 0) {
+      elements.push(
+        /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside space-y-2 text-muted-foreground mb-6 ml-4", children: listItems.map((item, i) => /* @__PURE__ */ jsx("li", { className: "leading-relaxed", children: item }, i)) }, `list-${elements.length}`)
+      );
+      listItems = [];
+    }
+  };
+  lines.forEach((line, index) => {
+    const trimmed = line.trim();
+    if (trimmed.startsWith("## ")) {
+      flushList();
+      elements.push(
+        /* @__PURE__ */ jsx("h2", { className: "text-2xl sm:text-3xl font-bold text-foreground mt-10 mb-4", children: trimmed.replace("## ", "") }, index)
+      );
+    } else if (trimmed.startsWith("### ")) {
+      flushList();
+      elements.push(
+        /* @__PURE__ */ jsx("h3", { className: "text-xl sm:text-2xl font-semibold text-foreground mt-8 mb-3", children: trimmed.replace("### ", "") }, index)
+      );
+    } else if (trimmed.startsWith("- ")) {
+      listItems.push(trimmed.replace("- ", ""));
+    } else if (trimmed.startsWith("**") && trimmed.endsWith("**")) {
+      flushList();
+      elements.push(
+        /* @__PURE__ */ jsx("p", { className: "font-semibold text-foreground mb-2", children: trimmed.replace(/\*\*/g, "") }, index)
+      );
+    } else if (trimmed.length > 0) {
+      flushList();
+      const parts = trimmed.split(/(\*\*[^*]+\*\*)/g);
+      elements.push(
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground leading-relaxed mb-4", children: parts.map((part, i) => {
+          if (part.startsWith("**") && part.endsWith("**")) {
+            return /* @__PURE__ */ jsx("strong", { className: "text-foreground font-semibold", children: part.replace(/\*\*/g, "") }, i);
+          }
+          return part;
+        }) }, index)
+      );
+    }
+  });
+  flushList();
+  return elements;
+};
+export {
+  createBlogClient,
+  renderMarkdown
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@123resume/react-blog-system",
+  "version": "1.0.0",
+  "description": "A complete, multi-language blog system for React applications with editor, management, and display components",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.esm.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "blog",
+    "cms",
+    "multi-language",
+    "i18n",
+    "content-management",
+    "blog-editor",
+    "markdown"
+  ],
+  "author": "123Resume",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.263.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}
+