<%= title %>
<%= content %>
Content.
' } - article: { title: 'Another title', content: 'More content.
' } ``` With these three files in place and having installed pieces on your system (`gem install pieces`) you can run: ``` pieces server ``` Now visit [http://localhost:8080](http://localhost:8080) to see your site! If you change your `config/pieces.yml` or views they will be reflected on the site. ## Use as styleguide for rails Firstly, ensure you have added Pieces to your `Gemfile`: ``` ruby gem 'pieces' ``` Next you need to initialize your application to use Pieces: ``` bundle bundle exec rails g pieces:rails:install ``` Edit your `config/pieces.yml` to demo some of your components. Now boot up rails: ``` bundle exec rails s ``` And then visit [http://localhost:3000/styleguide](http://localhost:3000/styleguide) **Do you use vagrant?** If you do you should update Pieces::Rails in your `config/routes.rb` as follows: ``` ruby mount Pieces::Rails.new(force_polling: true).mount, at: '/styleguide' unless Rails.env.production? ``` This will tell `listen`, the gem that watches for changes, to poll your app for changes. This is required for vagrant! ## Create new static site To create a new static site with Pieces: ``` gem install pieces pieces init hello_world ``` This will install `config/pieces.yml`, a layout and example header and footer into `hello_world/` for you. Once you've built the components and routes for your site all you have to do is run: ``` pieces build ``` Your site will be built into `build/` directory. You can then use these HTML files for your site. Whilst developing you won't want to keep running `pieces build`. Pieces comes with a server inbuilt that reloads everytime you make a change. To run it: ``` pieces server ``` Now visit [http://localhost:8080](http://localhost:8080) in your browser. ## Configuration Using configuration found in `config/pieces.yml` Pieces' will compile your modular components ala BEM (or whatever you prefer) into a static HTML site. At the top level of your `pieces.yml` you define your output files, or "routes". The following example will build both `index.html` and `about.html`. ``` yml index: _pieces: - intro: { title: 'Welcome to my site' } about: _pieces: - intro: { title: 'About me' } ``` Both `index.html` and `about.html` make use of a piece called "intro". This piece will be found in either `app/views/intro.html.*`, `app/views/intro/intro.html.*` or `app/views/application/intro.html.*`. The `*` can be any format supported by [tilt](https://github.com/rtomayko/tilt). You can generate your HTML into directories quite easily: ``` yml portfolio/a-client: _pieces: - carousel: {} - case_study: {} portfolio/another-client: _pieces: - carousel: {} - case_study: {} ``` Likewise you can structure your components in directories: ``` yml about: _pieces: - header: {} - copy/intro: {} - galleries/photo: {} - footer: {} ``` "copy/intro" and "galleries/photo" will be found in `app/views/copy/intro.html.*` and `app/views/galleries/photo.html.*` respectively. You can place your content in a layout quite easily with nested pieces. ``` yml about: _pieces: - layouts/pieces: _pieces: - header: {} - copy/intro: {} - galleries/photo: {} - footer: {} ``` The child pieces will be rendered in order and passed into the parent "layouts/application" piece as `yield`. If you had `app/views/layouts/pieces.html.erb` then you can call yield like so: ``` erb <%= yield %> ``` ## More Examples - [Original example][original] using .erb and .mustache (liek wtf!) - [Boilerplate example][boilerplate] used by `pieces init` - [Rails example][rails] using Pieces as a styleguide [original]: https://github.com/drpheltright/pieces/tree/master/examples/original [boilerplate]: https://github.com/drpheltright/pieces/tree/master/examples/boilerplate [rails]: https://github.com/drpheltright/pieces/tree/master/examples/rails ## Contributing 1. Fork it ( https://github.com/drpheltright/pieces/fork ) 2. Create your feature branch (`git checkout -b my-new-feature`) 3. Commit your changes (`git commit -am 'Add some feature'`) 4. Push to the branch (`git push origin my-new-feature`) 5. Create a new Pull Request ## Author Luke Morton (again)