Tolaria

Tolaria is a content management system (CMS) framework for Ruby on Rails. It greatly speeds up the necessary—but repetitive—task of creating useful admin panels, forms, and model workflows for site authors.

Features

• Fully responsive (and we think it's beautiful too!)
• A complete email-based authentication system is included, and there are no passwords to manage.
• Automatically builds navigation and admin routes for you.
• Automatically creates simple index screens, show screens, and text search tools, which you can expand.
• Includes a handful of advanced form fields, notably a fullscreen Markdown editor and searchable select/tag lists.
• Assists in providing inline help and documentation to your editors.
• No magic DSL. Work directly in ERB on all admin views.
• Compartmentalized from the rest of the Rails application, and does not rely on the behavior of to_param.
• Easily overridable on a case-by-case basis.
• Designed for use on Heroku, in containers, and on websites with TLS.
• Modest dependencies.
• Compatible with Rails 6, 5 and Rails 4.2.

Browser Support

Tolaria supports IE10+, Edge, Safari, Chrome, Firefox, iOS, and Chrome for Android. Note that these are the browsers your site editors will need, not the general site audience, which can differ.

Getting Started

Add Tolaria to your project's Gemfile:

# If you are running Rails 6, use Tolaria 3
gem "tolaria", "~> 3.0"

# If you are running Rails 5, use Tolaria 2
gem "tolaria", "~> 2.0"

# If you are running Rails 4.2, use Tolaria 1.2
gem "tolaria", "~> 1.2"

Then update your bundle with bundle update

Now run the installation generator. This will create an initializer for Tolaria plus a migration to set up an administrators table. Migrate your database.

$ rails generate tolaria:install
$ rake db:migrate

Review all of the settings in config/initializers/tolaria.rb.

Run this Rake command to create your first administrator account:

$ rake admin:create

Now you'll need to add Tolaria's route drawing to the top of your routes.rb file like so:

Rails.application.routes.draw do
  Tolaria.draw_routes(self)
  # Your other routes below here
end

ActionMailer

Tolaria needs to be able to dispatch email. You'll need to configure ActionMailer to use an appropriate mail service. Here's an example using Mailgun on Heroku:

# config/initializers/action_mailer.rb

ActionMailer::Base.perform_deliveries = true
ActionMailer::Base.delivery_method = :smtp

ActionMailer::Base.smtp_settings = {
  port: ENV.fetch("MAILGUN_SMTP_PORT"),
  address: ENV.fetch("MAILGUN_SMTP_SERVER"),
  user_name: ENV.fetch("MAILGUN_SMTP_LOGIN"),
  password: ENV.fetch("MAILGUN_SMTP_PASSWORD"),
  domain: "example.org",
  authentication: :login,
  enable_starttls_auto: true,
}

Now start your Rails server and go to /admin to log in!

Adding Administrator Accounts

You can add administrators from the command line using a Rake task. This is particularly useful for creating the very first one.

# Add an administrator interactively
$ rake admin:create

# Or you can provide environment variables
$ rake admin:create NAME="Evon Gnashblade" EMAIL="[email protected]" ORGANIZATION="BLTC"

If you are already logged in to Tolaria, you can also simply visit /admin/administrators to create a new account using the CMS interface.

Passcode Authentication

Tolaria authenticates editors via email, using a one-time passcode. When an editor wants to sign in, they must type a passcode dispatched to their email address. Passcodes are invalidated after use.

You can configure Tolaria's passcode paranoia in the initializer you installed above.

Managing a Model

Inside your ActiveRecord definition for your model, call manage_with_tolaria, passing configuration in the using Hash. Refer to the documentation for all of the options.

The icon system uses Font Awesome, and you'll need to pass one of the icon names for the icon key.

Important: you'll need to provide the options to pass to params.permit here for the admin system. Your form won't work without it!

class BlogPost < ActiveRecord::Base
  manage_with_tolaria using: {
    icon: "file-o",
    category: "Settings",
    priority: 5,
    permit_params: [
      :title,
      :body,
      :author_id,
    ]
  }
end

Customizing Indexes

By default, Tolaria will build a simple index screen for each model. You'll likely want to replace it for complicated models, or to allow administrators to sort the columns.

If your model was BlogPost, you'll need to create a file in your project at: app/views/admin/blog_posts/_index.html.erb.

See the TableHelper documentation for more information.

<% # app/views/admin/blog_posts/_index.html.erb %>

<%= index_table do %>
  <thead>
    <tr>
      <%= index_th :id %>
      <%= index_th :title %>
      <%= index_th "Author", sort: false %>
      <%= actions_th %>
    </tr>
  </thead>
  <tbody>
    <% @resources.each do |blog_post| %>
      <tr>
        <%= index_td blog_post, :id %>
        <%= index_td blog_post, :title %>
        <%= index_td blog_post, blog_post.author.name, image:blog_post.author.portrait_uri %>
        <%= actions_td blog_post %>
      </tr>
    <% end %>
  </tbody>
<% end %>

Customizing The Inspect Screen

Tolaria provides a very basic show/inspect screen for models. You'll want to provide your own for complex models.

If your model was BlogPost, you'll need to create a file in your project at: app/views/admin/blog_posts/_show.html.erb.

See the TableHelper documentation for more information.

<% # app/views/admin/blog_posts/_show.html.erb %>

<%= show_table do %>

  <thead>
    <%= show_thead_tr %>
  </thead>
  <tbody>
    <%= show_tr :title %>
    <%= show_tr "Author", @resource.author.name %>
    <%= show_tr :body %>
  </tbody>

<% end %>

Adding Model Forms

Tolaria does not build editing forms for you, but it attempts to help speed up your work by providing a wrapper.

If your model was BlogPost, you'll need to create a file in your project at app/views/admin/blog_posts/_form.html.erb. You'll provide the form code that would appear inside the form_for block, excluding the submit buttons. The builder variable is f.

<% # app/views/admin/blog_posts/_form.html.erb %>

<%= f.label :title %>
<%= f.text_field :title, placeholder:"Post title" %>
<%= f.hint "The title of this post. A good title is both summarizing and enticing, much like a newspaper headline." %>

<%= f.label :author_id, "Author" %>
<%= f.searchable_select :author_id, Author.all, :id, :name, include_blank:false %>
<%= f.hint "Select the person who wrote this post." %>

<%= f.label :body %>
<%= f.markdown_composer :body %>
<%= f.hint "The body of this post. You can use Markdown!"

Has-many Nested Forms

If you want to provide an interface for a has_many + accepts_nested_attributes_for relationship, you can use the has_many helper. The UI allows slating persisted objects for removal when the form is saved.

Important: You need to include f.has_many_header to create the form headers and turn on or off the destruction controls with allow_destroy.

<%= f.has_many :footnotes do |f| %>

  <%= f.has_many_header allow_destroy:true %>

  <%= f.label :description %>
  <%= f.text_field :description %>
  <%= f.hint "The name or other description of this reference" %>

  <%= f.label :url, "URL" %>
  <%= f.text_field :url, class:"monospace" %>
  <%= f.hint "A full URL to the source or reference material" %>

<% end %>

Don't forget that you also need to change permit_params so that you include your nested attributes:

class BlogPost < ActiveRecord::Base
  manage_with_tolaria using: {
    icon: "file-o",
    category: "Settings",
    priority: 5,
    permit_params: [
      :title,
      :body,
      :author_id,
      :footnotes_attributes: [
        :id,
        :_destroy,
        :url,
        :description,
      ]
    ]
  }
end

Customizing The Search Form

By default, Tolaria provides a single search field that searches over all of the text or character columns of a model. You can expand the search tool to include other facets.

Important: This system uses the Ransack gem, which you'll need to familiarize yourself with.

If your model was BlogPost, you'll need to create a file in your project at app/views/admin/blog_posts/_search.html.erb. You'll provide the form code that would appear inside the search_form_for block, excluding the submit buttons. The builder variable is f.

<% # app/views/admin/blog_posts/_search.html.erb %>

<%= f.label :title_cont, "Title contains" %>
<%= f.search_field :title_cont, placeholder:"Anything" %>

<%= f.label :author_name_cont, "Author is" %>
<%= f.searchable_select :author_name_cont, Author.all, :name, :name, prompt:"Any author" %>

<%= f.label :body_cont, "Body contains" %>
<%= f.search_field :body_cont, placeholder:"Anything" %>

Provided Form Fields

You can use all of the Rails-provided fields on your forms, but Tolaria also comes with a set of advanced, JavaScript-backed fields. Make sure to review the documentation for the form builder to get all the details.

Markdown Composer

The markdown_composer helper will generate a very fancy Markdown editor, which includes text snippet tools and a fullscreen mode with live previewing.

Important: You cannot use this field properly if you do not set up Tolaria.config.markdown_renderer. Without it, the live preview will only use simple_format!

<%= f.label :body %>
<%= f.markdown_composer :body %>
<%= f.hint "The body of this post. You can use Markdown!" %>

Searchable Select

The searchable_select helper displays a Chosen select field that authors can filter by typing.

<%= f.label :title, "Topics" %>
<%= f.searchable_select :topic_ids, Topic.order("label ASC"), :id, :label, multiple:true %>
<%= f.hint "Select each topic that applies to this blog post" %>

Image Association Select

The image_association_select helper displays a searchable_select that provides an instant preview of the currently selected model as an image.

<%= f.label :featured_image_id, "Featured Image" %>
<%= f.image_association_select :featured_image_id, Image.order("title ASC"), :id, :title, :preview_uri %>
<%= f.hint "Select a featured image for this blog post." %>

Timestamp Field

The timestamp_field helper displays a text field that validates a provided timestamp and recovers to a template if blanked.

<%= f.label :published_at, "Publishing Date" %>
<%= f.timestamp_field :published_at %>
<%= f.hint "The date this post should be published." %>

Slug Field

The slug_field helper allows you to show the parameterized value of a field in a given pattern preview.

<%= f.label :title %>
<%= f.slug_field :title, placeholder:"Post title", pattern:"/blog/255-*" %>
<%= f.hint "The title of this post." %>

Swatch Field

The swatch_field helper validates and displays a given hexadecimal color.

<%= f.label :color %>
<%= f.swatch_field :color, placeholder:"#CC0000" %>
<%= f.hint "Choose a background color for this campaign">

Image Field

The image_field helper displays a button that makes uploading an image a little more pleasant than a regular file_field.

<%= f.label :portrait %>
<%= f.image_field :portrait, preview_url:@resource.portrait.url(:preview) %>
<%= f.hint "Attach a portrait of this author, at least 600×600 pixels in size. The subject should be centered." %>

Attachment Field

The attachment_field helper displays a button that makes uploading an arbirary file a little more pleasant than a regular file_field.

<%= f.label :portrait %>
<%= f.attachment_field :portrait %>
<%= f.hint "Attach a portrait of this author, at least 600×600 pixels in size. The subject should be centered." %>

Field Clusters (Checkboxes and 2+ Selects)

Tolaria includes a wrapper for grouped form elements, <div class="field-cluster">. You should use this wrapper if:

• You need to run two or more small select controls together (like for date_select). The wrapper styles the selects to snuggle closely.
• You want to use a naked checkbox control or a set of checkboxes (check_box and collection_checkboxes)

<%= f.label :published_at, "Publishing Date" %>
<div class="field-cluster"><%= f.date_select :published_at %></div>
<%= f.hint "The date this post should be published." %>

<%= f.label :title, "Topics" %>
<div class="field-cluster"><%= f.collection_check_boxes :topic_ids, Topic.order("label ASC"), :id, :label %></div>
<%= f.hint "Choose each topic that applies to this blog post" %>

Hints

Inline help is useful for reminding administrators about what should be provided for each field. Use f.hint to present a hint for a field.

Extra Classes

Tolaria includes a few CSS classes that are designed for simple inputs, selects, and textareas:

• Add a class of monospace to an element to make it use a system monospace font. Useful for fields that accept URLs and other computer-interpreted values.
• Add a class of short to an element to constrain it visually to 300px. Useful for fields that only need very few characters of input.

Customizing the Menu

When you call manage_with_tolaria, you can provide a category and a priority like below. Items in the same category will be grouped together in the navigation menu. Items are sorted priority ascending in their group.

class BlogPost < ActiveRecord::Base
  manage_with_tolaria using:{
    category: "Prose",
    priority: 5,
  }
end

If you want to re-order the groups, you need to set an array of menu titles ahead of time in Tolaria.config.menu_categories:

# config/initializers/tolaria.rb
Tolaria.configure do |config|
  config.menu_categories = [
    "Prose",
    "Animals",
    "Settings",
  ]
end

Adding Documentation Links

You can provide documentation links in the interface header by appending to Tolaria.config.help_links. Add hashes to the array, with these keys:

To render a Markdown file, provide a :title, the URL fragment :slug, and a :markdown_file path to your Markdown document. The system will automatically draw a route to this view for you and present your file, using the renderer configured in Tolaria.config.markdown_renderer.

To link to an arbitrary route or URL, provide a :title and a :link_to. Examples below:

# config/initializers/tolaria.rb

Tolaria.configure do |config|

  config.help_links << {
   title: "Markdown Reference"
   slug: "markdown-reference",
   markdown_file: "/path/to/your/file.md"
  }

  config.help_links << {
   title: "Style Guide"
   link_to: "http://example.org/styleguide"
  }

end

Patching a Controller

Tolaria dynamically creates controllers for managed models, named as you would expect. If you want to replace or add to controller functionality, create the file in your parent application and patch away:

If your model was BlogPost, you should create app/controllers/admin/blog_posts_controller.rb

# app/controllers/admin/blog_posts_controller.rb
class Admin::BlogPostsController < Tolaria::ResourceController
  def another_method
     # do stuff
     # render a template
  end
end

You might want to check out what we've done in the base ResourceController file so that you know what you're patching. If you override any of the existing methods, you're on your own to handle everything correctly.

Adding Your Own Styles or JavaScript

If you want to add additional Sass or JavaScript to the admin system, you can create these files and then append to them as you need. Make sure that you import the base styles and JavaScript so you inherit what's already been done.

app/assets/stylesheets/admin/admin.scss:

@import "admin/base";
// Your code goes here

app/assets/javascripts/admin/admin.js:

//= require admin/base
// Your code goes here

Testing and Running the Demo Server

Tolaria comes with a test suite and a demo server that the test suite exercises.

To run tests, first clone the repo or your fork of it:

$ git clone -o github [email protected]:threespot/tolaria.git
$ cd tolaria

Install the development dependencies:

$ bundle install

Now in the project root, you have several rake tasks available:

$ rake test         # Run the tests
$ rake admin:create # Create an admin in the demo development database
$ rake console      # Start a Rails console with Tolaria loaded
$ rake server       # Start a Rails Webrick server with Tolaria and some example models loaded

Miscellaneous Technical Details

• Tolaria is not designed for use on a production site without TLS/HTTPS configured. You must protect Tolaria sessions and cookies with TLS. Do not allow users to connect to your administrator panel over plain HTTP.
• If you are using Content-Security-Policy, you will need to add https://secure.gravatar.com to the allowed image sources in order to display administrator avatars. All other assets bundled with Tolaria are served by the Rails asset pipeline.
• The constant and module name Admin is reserved for Tolaria's use. If you add to this namespace, be sure you are not colliding with a Tolaria-provided constant.
• The route space /admin/**/* is reserved for Tolaria's use. If you add routes here, be sure you are not colliding with a Tolaria-generated route.

License

Tolaria is free software, and may be redistributed under the terms of the MIT license. If Tolaria works great for your project, we'd love to hear about it!

Thanks

Our work stands on the shoulders of giants, and we're very thankful to the many people that made Tolaria possible either by publishing code we used, or by being an inspiration for this project.

• The ActiveAdmin team
• The jQuery Foundation
• Jeremy Ashkenas
• The Harvest Team
• Font Awesome and Dave Gandy

About Threespot

Threespot is a design and development agency from Washington, DC. We work for organizations that we believe are making a positive change in the world. Find out more about us, our projects or hire us!