README.md in revelry_content-0.0.1.2 vs README.md in revelry_content-1.0.0

- old
+ new

@@ -1,132 +1,69 @@ -RevelryContent +Revelry::Content === -RevelryContent is a gem for managing admin-editable content within Rails applications. +Revelry::Content is a gem for managing admin-editable content within Rails and React applications. # Installation -Either install from a rails template: +Add it to your gemfile: -```shell -rails new APPNAME -m https://raw.githubusercontent.com/revelrylabs/revelry_content/master/template.rb -``` - -Or add it to your gemfile: - ```ruby +gem 'revelry_core' gem 'revelry_content' ``` and install it: ```shell bundle -rails g revelry_content:install +rails g revelry:core:install +rails g revelry:content:install ``` # Configuration The installer makes an initializer in `config/initializer.rb`. You can edit it -to customize authenticiation, authorization or javascript export settings. +to customize authentication, authorization or javascript export settings. ## Configuring file uploads -RevelryContent uses [carrierwave](https://github.com/carrierwaveuploader/carrierwave) to store image uploads. You'll want to configure carrierwave appropriately for your app. +Revelry::Content uses [carrierwave](https://github.com/carrierwaveuploader/carrierwave) to store image uploads. You'll want to configure carrierwave appropriately for your app. -# Use in ERB Templates +# Using with React -RevelryContent provides helpers for setting up edit controls: - -### Adding the RevelryContent menus and edit mode button - -Add the `revelry_content/contents/menus` partial to the page to place the edit button and top bar on the page. The top bar will be invisible unless we are in edit mode. - -```erb -<%= render 'revelry_content/contents/menus' %> -``` - -### Editable text - -```erb -<%= revelry_content_text('home.title', default: 'Hello, World!') %> -``` - -`lookup` is a lookup hash of the available content. If you have included `RevelryContent::WithRevelryContent` in your controller, `@revelry_content_contents` is the default lookup with all content. - -In this case `'home.headline'` is the content key of the content, which is just a unique string for each piece of changeable content. - -The `default` param is what is shown if know one has set any content yet. -(Think brand-new sites.) - -### Editable images - -Editable images work in a similar manner to editable text: - -```erb -<%= revelry_content_image('home.image', default: 'http://placehold.it/200x200') %> -``` - -Here, `home.image` is the content key for the image to display, and `default` provides a placeholder image URL. - -# Using in JavaScript (including React) - -## Making content available to JavaScript - -You can configure RevelryContent to export all of your content into javascript. - -```ruby -RevelryContent.configure do |config| - config.js_export = true -end -``` - -Then run the export task: - -```shell -rake revelry_content:export_js -``` - -And include the exported js in your application.js: - -```javascript -//= require revelry_content/content -``` - -and access it like this: - -```javascript -RevelryContent.Content.home.headline -``` - -The JavaScript export will automatically update whenever content is updated. - ## Adding Editable Sections with React -RevelryContent is built on React, so you can also directly invoke the React components: +Revelry::Content is built on React, so you can also directly invoke the React +components: ```coffeescript -<RevelryContent.EditableText canEdit={ true } content={ RevelryContent.Content.home.headline } /> +<Rev.Content.EditableText canEdit={true} contentKey="home.headline" /> ``` or ```coffeescript -<RevelryContent.EditableImage canEdit={ true } content={ RevelryContent.Content.home.image } /> +<Rev.Content.EditableImage canEdit={true} contentKey="home.image" /> ``` [More details are availble here](https://github.com/revelrylabs/revelry_content/blob/master/react-components.md) +There component will present ONLY the content (with no editor chrome) if out of +edit mode, and can be clicked to edit in edit mode (see below). -## Adding the top bar and buttons with React +## Adding the admin controls +For admin users, you can present edit buttons and an edit mode top bar to allow +entry to edit mode and provide feedback during editing: + ```coffeescript -<RevelryContent.TopBar /> +<Rev.Content.TopBar /> ``` and ```coffeescript -<RevelryContent.EditModeButton /> +<Rev.Content.EditModeButton /> ``` These do not require any props.