Pages and sections

Para comes with a flexible pages system that allows you to create pages structures that are easily customizable. The idea is to allow admin users to build pages by assembling sections. As the app developer, you only need to implement sections classes, design them and they will be available to create pages.

Creating the models

First, create a page model with a title field, with the name of your choice, we'll use Page here :

rails g model page title

Then include the Para::Page::Model module in your model

class Page
  include Para::Page::Model
end

For this example, we'll create two page section types : a text sections and an image section.
We need the para:page:section generator, that takes the name of the section as the first argument, then the name of the fields to create for the section.

Note that all fields are store_accessors on a JSONB field, so typing will be implicit.

First we create the text section, with a simple content field :

rails g para:page:section text content

Then we create the image section, that will use paperclip to handle an image :

rails g para:page:section image file_file_name file_content_type file_file_size file_update_at

We now go to the PageSection::Image class, and add the has_attached_file :file macro to handle the image file with paperclip.

Note : You can perfectly combine images and texts in one section, the sections structure is completely free and the examples here are simple.

Admin

Now, create a simple CRUD component to manage your pages :

# in config/components.rb
# ...
component :pages, :crud
# ...

Now you need to generate the form for your Page model, and add the sections that you want to make available :

= form.input :sections, as: :nested_many, subclasses: [PageSection::Text, PageSection::Image]

Now you can add as many sections from the form as you need to create your page.

To customize the fields for your sections, juste generate their _fields partial with the following command :

rails g para:nested_fields page_section/text
rails g para:nested_fields page_section/image

Front

The frontend part is completely up to you, but plays really well with a simple collection rendering approach.

You can load your page, and render its #sections, the subclasses structure will handle the rest by rendering a different partial for each subclass :

# In a `pages/show.html.haml` file
= render @page.sections

The partials called for our two text and image sections will be respectively : app/views/page_sections/texts/_text.html.haml and app/views/page_sections/images/_image.html.haml.