{"_id":"@123resume/react-blog-system","_rev":"6-79c474ae9f8050bd86128c0a67f82670","name":"@123resume/react-blog-system","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@123resume/react-blog-system","version":"1.0.0","keywords":["react","blog","cms","multi-language","i18n","content-management","blog-editor","markdown"],"author":{"name":"123Resume"},"license":"MIT","_id":"@123resume/react-blog-system@1.0.0","maintainers":[{"name":"123resume","email":"etaghvaei0098@gmail.com"}],"dist":{"shasum":"54f8c587a8767c16ba0dbd2987c77614337258a1","tarball":"https://registry.npmjs.org/@123resume/react-blog-system/-/react-blog-system-1.0.0.tgz","fileCount":6,"integrity":"sha512-PdOstKeBIWRutOr+raLBfxLhFapZOjr0+pHLiPXzyRwXrrZ50+iXcpSHE0kAlOb1HKmIt8Am6aCry6aoM2csFA==","signatures":[{"sig":"MEYCIQChxKKWviHoBlTi7wYvq6moygKrhZJ3nJSngUe/Un0CTQIhAPZWnpGxfxxaOg+IntzparTXP5Xh3dntAdU/xdH2NWYm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27068},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"bbbcc759dde6eee262d13e471ea65ddee6f43b5a","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts --format cjs,esm --dts","prepublishOnly":"npm run build"},"_npmUser":{"name":"123resume","email":"etaghvaei0098@gmail.com"},"_npmVersion":"8.19.4","description":"A complete, multi-language blog system for React applications with editor, management, and display components","directories":{},"_nodeVersion":"16.20.2","dependencies":{"lucide-react":"^0.263.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-blog-system_1.0.0_1766673368830_0.990813008076405","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@123resume/react-blog-system","version":"1.0.1","keywords":["react","blog","cms","multi-language","i18n","content-management","blog-editor","markdown"],"author":{"name":"123Resume"},"license":"MIT","_id":"@123resume/react-blog-system@1.0.1","maintainers":[{"name":"123resume","email":"etaghvaei0098@gmail.com"}],"dist":{"shasum":"4e4b143d99038b872327c76265b16b6b99bde18b","tarball":"https://registry.npmjs.org/@123resume/react-blog-system/-/react-blog-system-1.0.1.tgz","fileCount":6,"integrity":"sha512-gj9qGRQ/VZ8MJDyl9tsvI76wXIruFksOVGHm6/iSuOQ1zD+pUt49o+vg8kQ/mHoJoBT0UA8P1kWHUFXh22JA1A==","signatures":[{"sig":"MEUCIQCbGHoVd9XGmBqvZqrVQJmvuJcjlC+U7hnyBTA6U9BBOwIgFZ+mXRgOYBAD7GqCzTvwY7VTNHUwEyecO8illUM5rlI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27067},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"bbbcc759dde6eee262d13e471ea65ddee6f43b5a","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts --format cjs,esm --dts","prepublishOnly":"npm run build"},"_npmUser":{"name":"123resume","email":"etaghvaei0098@gmail.com"},"_npmVersion":"8.19.4","description":"A complete, multi-language blog system for React applications with editor, management, and display components","directories":{},"_nodeVersion":"16.20.2","dependencies":{"lucide-react":"^0.263.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-blog-system_1.0.1_1766680667195_0.8758979921640966","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@123resume/react-blog-system","version":"1.0.2","keywords":["react","blog","cms","multi-language","i18n","content-management","blog-editor","markdown"],"author":{"name":"123Resume"},"license":"MIT","_id":"@123resume/react-blog-system@1.0.2","maintainers":[{"name":"123resume","email":"etaghvaei0098@gmail.com"}],"dist":{"shasum":"f8d8af1e106725a037fa29fecb21b0c9d54c91e1","tarball":"https://registry.npmjs.org/@123resume/react-blog-system/-/react-blog-system-1.0.2.tgz","fileCount":6,"integrity":"sha512-Dt2ZUAmN4zqm1YXUirapTNZQfeF8I4GLDS3RmtpnuM9r3Ew4X9T04c3sTIBwKDixbXmudNWfSgcYMJmOqu9GfA==","signatures":[{"sig":"MEUCIAz9zQJu1FCmKfRUjN4CP5wUvmy6mQap7CdH2f36wBGIAiEA5cMOlT0Rn3VRA46K1GkF8neb9esxs0HyONGkdhDSqbc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27067},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"bbbcc759dde6eee262d13e471ea65ddee6f43b5a","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts --format cjs,esm --dts","prepublishOnly":"npm run build"},"_npmUser":{"name":"123resume","email":"etaghvaei0098@gmail.com"},"_npmVersion":"8.19.4","description":"A complete, multi-language blog system for React applications with editor, management, and display components","directories":{},"_nodeVersion":"16.20.2","dependencies":{"lucide-react":"^0.263.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-blog-system_1.0.2_1766680732300_0.28916612194762537","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@123resume/react-blog-system","version":"1.0.3","keywords":["react","blog","cms","multi-language","i18n","content-management","blog-editor","markdown"],"author":{"name":"123Resume"},"license":"MIT","_id":"@123resume/react-blog-system@1.0.3","maintainers":[{"name":"123resume","email":"etaghvaei0098@gmail.com"}],"dist":{"shasum":"4d69f68ab7dd0e1fff8d628c6e660d1dd9d54275","tarball":"https://registry.npmjs.org/@123resume/react-blog-system/-/react-blog-system-1.0.3.tgz","fileCount":6,"integrity":"sha512-9FunilnA+iFd53Rool+RnHlw1rodWKYua0o/k0jsv63scyvfDvxtm/tMnvIBx/cLk3QYlmHwX/v5GERW8CJ2rg==","signatures":[{"sig":"MEUCIQCV4LD889Ow3SVfLEiOOJyelo2kZCQ8G3verXlQaZnpGAIgAtxPIfo+vHB4zjjIU6+9Ghi+TH0FCkvx42135vf6k+Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27067},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"bbbcc759dde6eee262d13e471ea65ddee6f43b5a","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts --format cjs,esm --dts","prepublishOnly":"npm run build"},"_npmUser":{"name":"123resume","email":"etaghvaei0098@gmail.com"},"_npmVersion":"8.19.4","description":"A complete, multi-language blog system for React applications with editor, management, and display components","directories":{},"_nodeVersion":"16.20.2","dependencies":{"lucide-react":"^0.263.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-blog-system_1.0.3_1766680796594_0.4314553164009214","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@123resume/react-blog-system","version":"1.0.4","keywords":["react","blog","cms","multi-language","i18n","content-management","blog-editor","markdown"],"author":{"name":"123Resume"},"license":"MIT","_id":"@123resume/react-blog-system@1.0.4","maintainers":[{"name":"123resume","email":"etaghvaei0098@gmail.com"}],"dist":{"shasum":"449a09488aaa5864f0f8160a609b8df672985532","tarball":"https://registry.npmjs.org/@123resume/react-blog-system/-/react-blog-system-1.0.4.tgz","fileCount":6,"integrity":"sha512-Jpi6niaSIOROtXf+BxORnrjWqekeUfAMYOcl1ncivJCLRHZ7lEWyzUabZtzd6qOQUu83QEvcm2DyzrWEn0EgDw==","signatures":[{"sig":"MEUCIG78Lc6yWBL0GeuUKBLAvvQT7OfPCPACXSP2rWWDGlg6AiEA3CGPZjj1z8lpa1XWQact+AWUuo3YFXYVPGHNhK5Y+Dk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27064},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"bbbcc759dde6eee262d13e471ea65ddee6f43b5a","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","build":"tsup src/index.ts --format cjs,esm --dts","prepublishOnly":"npm run build"},"_npmUser":{"name":"123resume","email":"etaghvaei0098@gmail.com"},"_npmVersion":"8.19.4","description":"A complete, multi-language blog system for React applications with editor, management, and display components","directories":{},"_nodeVersion":"16.20.2","dependencies":{"lucide-react":"^0.263.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-blog-system_1.0.4_1766680899301_0.32382825318522945","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@123resume/react-blog-system","version":"1.0.5","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.mjs","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":{"name":"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"},"gitHead":"bbbcc759dde6eee262d13e471ea65ddee6f43b5a","_id":"@123resume/react-blog-system@1.0.5","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-9ZJfMGTdY/hNqJI7s4Jqc8jX4zYO33WRK2M7XPZ0rxYKGXHjyL0xyAa52KM2+wNebwA/FDw+FeRUDjkEwLHssw==","shasum":"53cdf5e786a1d644a686173f3561708c0ad65db9","tarball":"https://registry.npmjs.org/@123resume/react-blog-system/-/react-blog-system-1.0.5.tgz","fileCount":6,"unpackedSize":28072,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCwEm0obKF3M+hxogdnd9k4A97Dql+aGPQ2weExHAZXJwIgB5VaqqnsSpoW4OqN5ILdwNEkhG+id0x4Z5iK1pjT/Mg="}]},"_npmUser":{"name":"123resume","email":"etaghvaei0098@gmail.com"},"directories":{},"maintainers":[{"name":"123resume","email":"etaghvaei0098@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-blog-system_1.0.5_1766936874668_0.6142397666966111"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-25T14:36:08.747Z","modified":"2025-12-28T15:47:55.020Z","1.0.0":"2025-12-25T14:36:08.976Z","1.0.1":"2025-12-25T16:37:47.337Z","1.0.2":"2025-12-25T16:38:52.441Z","1.0.3":"2025-12-25T16:39:56.738Z","1.0.4":"2025-12-25T16:41:39.460Z","1.0.5":"2025-12-28T15:47:54.807Z"},"author":{"name":"123Resume"},"license":"MIT","keywords":["react","blog","cms","multi-language","i18n","content-management","blog-editor","markdown"],"description":"A complete, multi-language blog system for React applications with editor, management, and display components","maintainers":[{"name":"123resume","email":"etaghvaei0098@gmail.com"}],"readme":"# @123resume/react-blog-system\n\nA React blog system with multi-language support, content management, and scheduled publishing.\n\n## Features\n\n- Multi-language support for creating and managing posts in different languages\n- Markdown-based editor with live preview\n- Scheduled publishing with date and time support\n- Draft management and publishing workflow\n- Customizable styling with gradient backgrounds and cover images\n- Image watermarking support\n- Authentication integration\n- Responsive design\n- TypeScript support\n\n## Installation\n\n```bash\nnpm install @123resume/react-blog-system\n```\n\n## Quick Start\n\n### Configure the API Client\n\n```typescript\nimport { createBlogClient } from \"@123resume/react-blog-system\";\n\nconst blogClient = createBlogClient({\n  apiBaseUrl: \"https://api.example.com/api\",\n  getAuthToken: () => localStorage.getItem(\"authToken\"),\n  defaultLanguage: \"en\",\n  supportedLanguages: [\"en\", \"de\"],\n  watermark: {\n    enabled: true,\n    text: \"My Blog\",\n    icon: FileText,\n  },\n});\n```\n\n### Basic Usage\n\n```tsx\nimport { Blog, BlogPost } from \"@123resume/react-blog-system\";\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\n\nfunction App() {\n  return (\n    <BrowserRouter>\n      <Routes>\n        <Route path=\"/blog\" element={<Blog client={blogClient} />} />\n        <Route path=\"/blog/:id\" element={<BlogPost client={blogClient} />} />\n      </Routes>\n    </BrowserRouter>\n  );\n}\n```\n\n## Multi-Language Support\n\nThe library supports creating separate versions of the same post in different languages. Each language version uses the same post ID but different language codes.\n\n### Creating Posts in Multiple Languages\n\n```typescript\n// English version\nawait blogClient.create({\n  id: \"my-post\",\n  title: \"My Blog Post\",\n  excerpt: \"This is a great post\",\n  content: \"...\",\n  language: \"en\",\n  // ... other fields\n});\n\n// German version (same ID, different language)\nawait blogClient.create({\n  id: \"my-post\",\n  title: \"Mein Blog-Post\",\n  excerpt: \"Das ist ein großartiger Post\",\n  content: \"...\",\n  language: \"de\",\n  // ... other fields\n});\n```\n\n### Fetching Posts by Language\n\n```typescript\n// Get English posts\nconst englishPosts = await blogClient.getAll(\"en\");\n\n// Get German posts\nconst germanPosts = await blogClient.getAll(\"de\");\n\n// Get all posts including drafts (for authenticated users)\nconst allPosts = await blogClient.getAll(\"en\", true);\n```\n\n### Language-Aware Components\n\nComponents automatically handle language detection based on your application's language context:\n\n```tsx\nimport { useLanguage } from \"@123resume/react-blog-system\";\n\nfunction BlogPage() {\n  const { language } = useLanguage();\n  const posts = await blogClient.getAll(language);\n\n  return <BlogList posts={posts} />;\n}\n```\n\n## Blog Editor\n\n### Basic Usage\n\n```tsx\nimport { BlogEditor } from \"@123resume/react-blog-system\";\n\nfunction CreatePost() {\n  return (\n    <BlogEditor\n      client={blogClient}\n      onSave={(post) => console.log(\"Saved:\", post)}\n      onPublish={(post) => console.log(\"Published:\", post)}\n    />\n  );\n}\n```\n\n### Editing Existing Posts\n\n```tsx\n<BlogEditor client={blogClient} postId=\"existing-post-id\" language=\"en\" />\n```\n\n### Editor Features\n\n- Auto-generated URL slugs from post titles\n- Markdown editor with live preview\n- Image upload with watermark support\n- Scheduled publishing with date and time picker\n- Draft management\n- Language selection\n- Category and metadata management\n\n## Configuration\n\n### Watermark\n\n```typescript\nconst blogClient = createBlogClient({\n  apiBaseUrl: \"https://api.example.com/api\",\n  watermark: {\n    enabled: true,\n    text: \"My Brand\",\n    icon: CustomIcon,\n  },\n});\n```\n\n### Routes\n\n```typescript\nconst blogClient = createBlogClient({\n  apiBaseUrl: \"https://api.example.com/api\",\n  routes: {\n    blog: \"/blog\",\n    editor: \"/blog-editor\",\n    management: \"/blog-management\",\n    post: (id) => `/blog/${id}`,\n  },\n});\n```\n\n### Styling\n\nThe library uses Tailwind CSS classes. Customize by:\n\n1. Overriding CSS classes in your application\n2. Using CSS variables for theming\n3. Wrapping components with custom styled containers\n\n## Backend API Requirements\n\nYour backend must implement the blog API contract. See [BACKEND_API.md](./BACKEND_API.md) for endpoint specifications.\n\n### Required Endpoints\n\n- `GET /api/blog-posts/` - List posts\n- `GET /api/blog-posts/:id/` - Get post by ID\n- `POST /api/blog-posts/` - Create post (authenticated)\n- `PUT /api/blog-posts/:id/` - Update post (authenticated)\n- `DELETE /api/blog-posts/:id/` - Delete post (authenticated)\n\nAll endpoints support a `language` query parameter for multi-language support.\n\n## API Reference\n\n### `createBlogClient(config: BlogConfig): BlogClient`\n\nCreates a configured blog API client.\n\n**Parameters:**\n\n- `config.apiBaseUrl` (string, required) - Base URL for your API\n- `config.getAuthToken` (function, optional) - Function that returns auth token\n- `config.onError` (function, optional) - Error handler callback\n- `config.watermark` (object, optional) - Watermark configuration\n- `config.routes` (object, optional) - Route configuration\n- `config.supportedLanguages` (string[], optional) - Supported language codes\n- `config.defaultLanguage` (string, optional) - Default language code\n\n### `BlogClient`\n\n#### `getAll(language?: string, includeDrafts?: boolean): Promise<BlogPost[]>`\n\nGet all blog posts for a language.\n\n#### `getById(id: string, language?: string): Promise<BlogPost>`\n\nGet a specific blog post.\n\n#### `create(post: BlogPost): Promise<BlogPost>`\n\nCreate a new blog post.\n\n#### `update(id: string, post: Partial<BlogPost>, language?: string): Promise<BlogPost>`\n\nUpdate an existing blog post.\n\n#### `delete(id: string, language?: string): Promise<void>`\n\nDelete a blog post.\n\n## Use Cases\n\n### Multi-Language Blog\n\nCreate separate versions of your blog in English and German:\n\n```typescript\n// English version\nawait blogClient.create({\n  id: \"welcome\",\n  title: \"Welcome to Our Blog\",\n  language: \"en\",\n  // ...\n});\n\n// German version\nawait blogClient.create({\n  id: \"welcome\",\n  title: \"Willkommen in unserem Blog\",\n  language: \"de\",\n  // ...\n});\n```\n\n### Scheduled Publishing\n\nSchedule posts to publish automatically:\n\n```typescript\nawait blogClient.create({\n  id: \"announcement\",\n  title: \"Big Announcement\",\n  published: false,\n  scheduledPublishAt: \"2025-12-25T10:00:00Z\",\n  // ...\n});\n```\n\n### Draft Workflow\n\nSave drafts and publish when ready:\n\n```typescript\n// Save as draft\nawait blogClient.create({\n  id: \"draft-post\",\n  title: \"Work in Progress\",\n  published: false,\n  // ...\n});\n\n// Publish later\nawait blogClient.update(\"draft-post\", {\n  published: true,\n});\n```\n\n## Development\n\n### Building\n\n```bash\nnpm run build\n```\n\n### Development Mode\n\n```bash\nnpm run dev\n```\n\n## Examples\n\nSee the [examples](./examples/) directory for complete usage examples:\n\n- [basic-usage.tsx](./examples/basic-usage.tsx) - Basic setup and usage\n- [multi-language.tsx](./examples/multi-language.tsx) - Multi-language examples\n\n## License\n\nMIT\n\n## Support\n\nFor issues and questions, open an issue on GitHub.\n","readmeFilename":"README.md"}