Rails Page Builder

English | فارسی

A visual drag-and-drop page builder for Ruby on Rails applications, designed to simplify view development for developers without extensive frontend experience. Similar to Elementor or WPBakery, but built specifically for Rails.

• 🎨 Visual Page Builder: Intuitive drag-and-drop interface
• 🌍 Multi-language Support: Built-in support for English, Persian (Farsi), Arabic, and Hebrew
• ↔️ RTL Support: Full right-to-left text support for RTL languages
• 📱 Responsive Design: Mobile-friendly design with device preview
• 🔧 Configurable: Easy configuration through Rails initializers
• 📦 Custom Blocks: Add your own custom content blocks
• 🎯 Rails Integration: Seamless integration with Rails applications
• 🔌 Plugin System: Extensible plugin architecture
• 📊 Analytics: Built-in analytics and reporting features
• 🔒 Security: Permission-based access control

Add this line to your application's Gemfile:

gem 'rails-page-builder'

And then execute:

bundle install

Or install it yourself as:

gem install rails-page-builder

After installing the gem, run the install generator:

rails generate rails_page_builder:install

This will:

• Create the pages migration
• Generate controller, views, and model files
• Add the engine route to your application
• Create an initializer for configuration

Run the migration:

rails db:migrate

Configure the page builder in config/initializers/rails_page_builder.rb:

Rails::Page::Builder.configure do |config|
  # Set default language
  config.default_language = :en  # :en, :fa, :ar, :he
  
  # Supported languages
  config.supported_languages = [:en, :fa, :ar, :he]
  
  # Enable plugins
  config.enable_plugins = true
  
  # Enable analytics
  config.enable_analytics = true
end

1. Access the builder: Visit /rails_page_builder in your Rails application
2. Create pages: Use the visual interface to build pages
3. Save and publish: Save your pages and integrate them into your Rails views

In your Rails views:

<!-- Render a page builder editor -->
<%= rails_page_builder_editor(language: :fa) %>

<!-- Render saved page content -->
<%= rails_page_builder_content(@page) %>

Add custom blocks through configuration:

Rails::Page::Builder.configure do |config|
  config.custom_blocks = [
    {
      id: 'custom-hero',
      label: 'Hero Section',
      content: '<div class="hero">Hero Content</div>',
      category: 'Layout',
      icon: '🎯'
    }
  ]
end

The gem automatically detects RTL languages and adjusts the interface accordingly:

# Supported languages with RTL detection
languages = {
  en: { name: 'English', rtl: false },
  fa: { name: 'فارسی', rtl: true },
  ar: { name: 'العربية', rtl: true },
  he: { name: 'עברית', rtl: true }
}

# Register a plugin
Rails::Page::Builder::PluginSystem.register_plugin('my-plugin', {
  name: 'My Custom Plugin',
  version: '1.0.0',
  assets: ['my-plugin.js', 'my-plugin.css']
})

# Track page events
Rails::Page::Builder::Analytics.track_event(:page_view, {
  page_id: @page.id,
  user_id: current_user.id
})

To test the gem locally:

# Clone the repository
git clone https://github.com/hadivarp/rails-page-builder.git
cd rails-page-builder

# Install dependencies
bundle install

# Run the demo server
./start_demo.sh

# Visit http://localhost:4567/interactive

The gem is available as open source under the terms of the MIT License.

Bug reports and pull requests are welcome on GitHub at https://github.com/hadivarp/rails-page-builder.

سازنده صفحه بصری کشیدن و رها کردن برای اپلیکیشن‌های Ruby on Rails، طراحی شده برای ساده‌سازی توسعه view برای توسعه‌دهندگانی که تجربه گسترده‌ای در frontend ندارند. شبیه به Elementor یا WPBakery، اما مخصوص Rails ساخته شده است.

• 🎨 سازنده صفحه بصری: رابط کاربری بصری کشیدن و رها کردن
• 🌍 پشتیبانی چند زبانه: پشتیبانی داخلی از انگلیسی، فارسی، عربی و عبری
• ↔️ پشتیبانی RTL: پشتیبانی کامل از متن راست به چپ برای زبان‌های RTL
• 📱 طراحی ریسپانسیو: طراحی موبایل-فرندلی با پیش‌نمایش دستگاه
• 🔧 قابل پیکربندی: پیکربندی آسان از طریق initializer های Rails
• 📦 بلوک‌های سفارشی: اضافه کردن بلوک‌های محتوای سفارشی
• 🎯 یکپارچگی Rails: یکپارچگی بدون درز با اپلیکیشن‌های Rails
• 🔌 سیستم پلاگین: معماری پلاگین قابل گسترش
• 📊 آنالیتیکس: ویژگی‌های آنالیتیکس و گزارش‌گیری داخلی
• 🔒 امنیت: کنترل دسترسی مبتنی بر مجوز

این خط را به Gemfile اپلیکیشن خود اضافه کنید:

gem 'rails-page-builder'

و سپس اجرا کنید:

bundle install

یا خودتان نصب کنید:

gem install rails-page-builder

پس از نصب gem، generator نصب را اجرا کنید:

rails generate rails_page_builder:install

این کار موارد زیر را انجام می‌دهد:

• ایجاد migration صفحات
• تولید فایل‌های controller، view و model
• اضافه کردن مسیر engine به اپلیکیشن شما
• ایجاد initializer برای پیکربندی

migration را اجرا کنید:

rails db:migrate

سازنده صفحه را در config/initializers/rails_page_builder.rb پیکربندی کنید:

Rails::Page::Builder.configure do |config|
  # تنظیم زبان پیش‌فرض
  config.default_language = :fa  # :en, :fa, :ar, :he
  
  # زبان‌های پشتیبانی شده
  config.supported_languages = [:en, :fa, :ar, :he]
  
  # فعال‌سازی پلاگین‌ها
  config.enable_plugins = true
  
  # فعال‌سازی آنالیتیکس
  config.enable_analytics = true
end

1. دسترسی به سازنده: /rails_page_builder را در اپلیکیشن Rails خود بازدید کنید
2. ایجاد صفحات: از رابط بصری برای ساخت صفحات استفاده کنید
3. ذخیره و انتشار: صفحات خود را ذخیره کنید و در view های Rails خود یکپارچه کنید

در view های Rails خود:

<!-- رندر کردن ویرایشگر سازنده صفحه -->
<%= rails_page_builder_editor(language: :fa) %>

<!-- رندر کردن محتوای صفحه ذخیره شده -->
<%= rails_page_builder_content(@page) %>

بلوک‌های سفارشی را از طریق پیکربندی اضافه کنید:

Rails::Page::Builder.configure do |config|
  config.custom_blocks = [
    {
      id: 'hero-farsi',
      label: 'بخش هیرو',
      content: '<div class="hero">محتوای هیرو</div>',
      category: 'لایه‌بندی',
      icon: '🎯'
    }
  ]
end

gem به طور خودکار زبان‌های RTL را تشخیص می‌دهد و رابط را متناسب تنظیم می‌کند:

# زبان‌های پشتیبانی شده با تشخیص RTL
languages = {
  en: { name: 'English', rtl: false },
  fa: { name: 'فارسی', rtl: true },
  ar: { name: 'العربية', rtl: true },
  he: { name: 'עברית', rtl: true }
}

# ثبت یک پلاگین
Rails::Page::Builder::PluginSystem.register_plugin('my-plugin', {
  name: 'پلاگین سفارشی من',
  version: '1.0.0',
  assets: ['my-plugin.js', 'my-plugin.css']
})

# ردیابی رویدادهای صفحه
Rails::Page::Builder::Analytics.track_event(:page_view, {
  page_id: @page.id,
  user_id: current_user.id
})

برای تست gem به صورت محلی:

# کلون کردن مخزن
git clone https://github.com/hadivarp/rails-page-builder.git
cd rails-page-builder

# نصب وابستگی‌ها
bundle install

# اجرای سرور نمایشی
./start_demo.sh

# بازدید از http://localhost:4567/interactive

این gem تحت شرایط مجوز MIT به عنوان منبع باز در دسترس است.

گزارش باگ و pull request ها در GitHub به آدرس https://github.com/hadivarp/rails-page-builder خوش‌آمد هستند.

Start the demo server to see the page builder in action:

./start_demo.sh

Visit:

• Interactive Builder: http://localhost:4567/interactive
• Dashboard: http://localhost:4567/dashboard
• Persian Showcase: http://localhost:4567/showcase/fa
• English Showcase: http://localhost:4567/showcase/en

# In your controller
class PagesController < ApplicationController
  def show
    @page = Rails::Page::Builder::Page.find(params[:id])
  end
  
  def edit
    @page = Rails::Page::Builder::Page.find(params[:id])
  end
end

<!-- In your view -->
<div class="page-content" dir="<%= @page.rtl? ? 'rtl' : 'ltr' %>">
  <%= rails_page_builder_content(@page) %>
</div>

# Create a new page
page = Rails::Page::Builder::Page.create!(
  title: 'صفحه نمونه',
  language: 'fa',
  content: Rails::Page::Builder::BlockLibrary.build_page([
    { type: 'hero', title: 'عنوان اصلی', content: 'محتوای توضیحی' },
    { type: 'features', items: ['ویژگی ۱', 'ویژگی ۲', 'ویژگی ۳'] }
  ])
)

# Render in different languages
english_content = page.render(language: :en)
persian_content = page.render(language: :fa)