@bagelink/blox 1.5.15 → 1.5.20

package/README.md

@@ -22,7 +22,111 @@ pnpm add @bagelink/blox
 yarn add @bagelink/blox
 ```
 
-## Quick Start
+# @bagelink/blox
+
+Blox is a Vue 3 library for building drag-and-drop page builders and managing static data for web applications. It provides a complete solution for creating external preview systems and rendering dynamic page content.
+
+## Features
+
+- 🎨 **Page Builder Integration** - Full support for drag-and-drop page building
+- 📄 **Static Page Management** - Manage JSON-based static page data
+- 🔌 **Component Registry** - Flexible component registration system
+- 📡 **Communication System** - Built-in messaging for builder-preview communication
+- 🎯 **Type-Safe** - Full TypeScript support
+- 🖼️ **Base Components** - Pre-built components (Button, Text, Image, etc.)
+- 📱 **Responsive** - Mobile and desktop support
+
+## Installation
+
+```bash
+npm install @bagelink/blox vue-router
+# or
+pnpm add @bagelink/blox vue-router
+# or
+yarn add @bagelink/blox vue-router
+```
+
+## Quick Start (Recommended)
+
+The simplest way to set up Blox in your Vue application:
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import { createBlox, ButtonConfig, TextConfig, TitleConfig } from '@bagelink/blox'
+import '@bagelink/blox/dist/blox.css'
+
+import App from './App.vue'
+
+const app = createApp(App)
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    // Your app routes
+  ],
+})
+
+// Create and configure Blox
+const blox = createBlox()
+blox
+  .registerComponents([ButtonConfig, TextConfig, TitleConfig])
+  .registerRoutes(router)
+
+app.use(blox)
+app.use(router)
+app.mount('#app')
+```
+
+That's it! Preview routes are now available at:
+- `/blox/preview/:pageId?` - External preview with editor communication
+- `/blox/render/:pageId?` - Static page rendering
+
+### With Custom Components
+
+```typescript
+import { createBlox, createComponentConfig, ButtonConfig } from '@bagelink/blox'
+import MyHeroSection from './components/MyHeroSection.vue'
+
+const MyHeroConfig = createComponentConfig({
+  id: 'MyHero',
+  label: 'Hero Section',
+  icon: 'hero_section',
+  component: MyHeroSection,
+  content: [
+    {
+      type: 'text',
+      key: 'title',
+      label: 'Hero Title',
+      defaultValue: 'Welcome!',
+    },
+  ],
+})
+
+const blox = createBlox()
+blox
+  .registerComponents([ButtonConfig, MyHeroConfig])
+  .registerRoutes(router)
+
+app.use(blox)
+```
+
+### Available Built-in Component Configs
+
+Import these configs to register built-in components:
+
+- `ButtonConfig` - Customizable button/link
+- `TextConfig` - Rich text content
+- `TitleConfig` - Heading with optional subtitle
+- `ImageConfig` - Responsive image
+- `SpacerConfig` - Vertical spacing
+- `ContainerConfig` - Content container with max-width
+
+For more examples, see [SETUP_EXAMPLE.md](./SETUP_EXAMPLE.md).
+
+---
+
+## Alternative Setup (Legacy)
 
 ### 1. Register Base Components