Rubber Ring - simple content editable CMS
About
This CMS helps you build editable pages fast. You define which content
(text, image, attachment, ...) should be editable for your users.
Limitation, that only developer sets what page parts are editable is good for
keeping the design intact. It is basically backend for saving contenteditable content.
When done editing, only static assets will be published to production server
where you only need a web server like Apache or Nginx.
Named by The Smiths song.
Benefits over other content editable CMSes
- optimized for developers and quick setup
- simple to use for customers. They should not be able to break design (a lot)
- customer doesn't need application server and/or database. Only plain web server for static HTML serving will do
This CMS is not good for
sites, where editor wants to create new pages and control each part of every page, change fonts and text style
Software prerequisites
- Ruby 2
- Rails 4
- sqlite3
- imagemagick
- wget
Versions
Use gem 'rubber_ring', '~> 0.1.2' if you don't want to run multiple processes. Instead you will need to publish each
change of any page separately.
Use gem 'rubber_ring', '~> 1.0.0' if you can have two or more processes of web server. In this version whole site
will be built in one step.
Browser support
Firefox, Chrome and Safari.
Setup
Dependencies
To install imagemagick and sqlite3 on Ubuntu
sudo apt-get install imagemagick
sudo apt-get install libsqlite3-dev
Setting up a new project
Add this to your Gemfile
gem 'rubber_ring'
Create and migrate database
rake rubber_ring:install:migrations
rake db:create db:migrate
Update development.rb to enable build for development mode. This will disable rails to add body=1 to every asset link.
config.assets.debug = falseGenerate config files
rails generate rubber_ring:install
This will generate
1. app/config/publish.yml
2. app/config/initializers/rubber_ring.rb
3. app/views/layouts/rubber_ring/layout.html.erb
4. app/assets/javascripts/application.js
5. public/.htaccess
- Set your production server name and path. You will need SSH access and your public key on server. If you tend to use Rubber Ring as part of web application, or you don't want/need to publish only static HTML files, you can ignore this file.
- Set admin password and application type in
app/config/initializers/rubber_ring.rb. -
app/views/layouts/rubber_ring/layout.html.erbis here for you to override it, so you have complete control over your markup. - This is copied because default Rails
application.jsincludesjquerywhich is already included for you by Rubber Ring (avoiding clashes). - Apaches access config. Including rules so you can access all published pages. It will
look for
.htmlfiles first and enter sub directories later. Example: we have page with route/enand/en/example. When published,en.htmlanden/example.htmlwill be generated and synced with production server. To serve them both we need this.htaccessfile.
Run
Static pages or Rails application?
If you only want to use Rubber Ring to generate static pages, leave
RubberRing.static_only = true inside app/config/initializers/rubber_ring.rb intact.
This will leave you with options to preview and publish html pages and other
assets to production server. Otherwise set
this option to false.
Usage
As an editor I want to easily edit content on my site
Login at URL /rubber_ring with password which was set by developer in the install stage.
Just edit content inside green boxes. Developer sets what content is editable/repeatable/link/multi line...
For changing images click on Image manager in the upper menu.
Drag and drop the image(s) you need to drop zone. After uploading the
image(s) you can drag and drop them on the image you wanted to change.
Image will be automatically re-sized to the size that was set by developer/designer.
Preview
The easiest way to preview your current work is to log out or even better, open it in a new browser where you are not logged in.
Build and publish your pages
Build & Publish option in the menu will first output entire page to public/build directory. Publish will upload/copy whole site to your production server, set in publish.yml file.
As a developer I want to quickly setup editable pages
Rails generator for new pages
rails generate rubber_ring:page home action1 action2
This will create files and new routes to routes.rb file
create app/controllers/home_controller.rb
create app/views/home/action1.html.erb
create app/views/home/action2.html.erb
route get 'home/action1'
route get 'home/action2'
Rubber Ring helpers
CMS fields are made of tag, key and @page which holds content for all the page keys/value pairs.
Examples
<%= editable_field(:h1, {key: 'header'}, @page) do %>
I'm editable content in one line.
<% end %>
<%= editable_field(:div, {key: 'first_content', class: 'multi-line'}, @page) do %>
I'm editable content in
multi lines...
<% end %>
<%= editable_link({class: 'rubber_ring_attachment', key: 'attachment-link', href: '/link-to-something'}, @page) do %>
Link to PDF
<% end %>
<%= editable_image({key: 'header_image', src: image_path('baws.jpg'), height: '360'}, @page) %>Templates
Allows you to set up repeating and sortable templates. Example
<% template([
{template: 'article', tclass: 'article', element: 'article'},
{template: 'blog_post', tclass: 'blog', element: 'div'}
],
{key: 'template_key', wrap_element: 'div', wrap_class: 'templates'}, @page)
%>This means, that you need to create new view for each template in
app/views/templates/. Example
app/views/templates/_article.html.erb
Convention
...
{template: 'article', ...
...
means that you need a view, saved in a file
app/views/templates/_article.html.erb
Inside templates you can use all other helpers. BUT, you need to
assemble your key correctly or otherwise you will be overwriting your own content.
You can use key_prefix, which is assembled the way which will help you to prevent key overwites. Example:
<%= editable_field(:h2, {key: "#{key_prefix}_title"}, @page) do %>
Article Title
<% end %>Helper options
Each helper needs to specify unique key. These are holding values in the database.
Also each helper needs to include @page object as their last parameter.
This object holds all the editable content of the page in a hash data structure.
reserved key(s) - don't use them
page_title
helper arguments for all editable fields
-
keykey to hold the value (must be unique) -
classhtml class attribute (optional)- class value with
multi-linewill enable editing in multi lines
- class value with
-
idhtml id attribute (optional) -
@pageobject for holding page content
specific arguments for each field
-
editable_image-
srcimage source attribute -
widthimage width -
heightimage height
-
-
editable_field- no specific arguments
-
editable_link-
hrefspecifies link to page / file - if you set or add a class called
rubber_ring_attachmenttoeditable_linkyou can drop new attachments to it
-
Assets (stylesheets and javascripts)
You can use, like in any other Rails application,
sprockets directives
to include assets to your app.
Please don't use //= require jquery and //= require jquery-ui
in your application.js file, because rubber ring is already including jquery
which you can reuse in your pages as well.
Philosophy
- user should not be able to break design
- you can not build robust system without limitations
- system may stretch only to certain point until it breaks. Like a rubber ring!
Inspired by (aka ideas stolen from)
This project uses MIT-LICENSE. Copyright 2013 Žiga Vidic