This is a simple brochure site written with sinatra for pebble {code}.

Some of the commands below will not work unless you are part of pebblecode, and have access to the git repo and deployment environments.

1. Install bundler

    gem install bundler
   

2. Install all required gems

    bundle install
   

3. Install grunt to validate JavaScript files by following instructions at http://gruntjs.com/getting-started

4. Install node packages

    npm install
   

5. Start the server

    bundle exec rake server
   

   Go to http://localhost:7100. Note that the console also logs any jshint errors in JavaScript files.

   To change the port number, run

    bundle exec rake server[8888]
   

   If you want run on a local ip address (eg, to test on an external device), run

    bundle exec rake server[7100,true]
   

   where the first parameter is the port number.

   Note that you will need to add the IP address to typekit for fonts to show.

6. Add remote git repositories (for commands to work below)

    bundle exec rake git:add_remotes
   

To autoload the site, this app uses shotgun, but this is wrapped around the rake task, so nothing needs to be done for it to work.

The files you'll be most concerned with are the view files (under /views) and the stylesheet files (under /views/stylesheets).

The view files are written in haml and the stylesheets are written in scss.

The optimized css is in /public/build (see Optimization).

To create a new JavaScript page

1. Create a js file in public/javascripts/app/[page-name].js with the following structure

    define([
      // required modules
    ], function() { // <-- parameters for the modules
      "use strict";
   
      // Code here
   
    });
   

2. Include the js file into the views/[page-name].haml files (note: no need for .js extension)

    - content_for :script_js do
      %script{ :type => "text/javascript" }
        :plain
          require(["main"], function() {
            require(["app/[js-file-name]"]);
          });
   

3. Add the js file into Gruntfile.js under requirejs > compile > options > modules (for optimization)

     {
       name: "app/[js-file-name]",
       exclude: ["main"]
     }
   

Optimized CSS/JavaScript files are automatically generated and pushed to the repo in the bundle exec rake shipit[staging] task, but to do this manually run

grunt build

Optimized files are generated into public/build.

To force the page to use the development js, add dev as a query parameter in the url eg, http://localhost:7770?dev

To force the page to use the production js, add prod as a query parameter in the url (this also overrides dev) eg, http://localhost:7770?prod

Uses rspec for unit tests and casperjs for integration tests (probably remove one of them in future).

To run all tests (rspec + casper)

bundle exec rake test:all[server-url]

where server-url is the development server url to test on

Run tests with

bundle exec guard

Also to run it separately

bundle exec rake spec

To run an individual spec

bundle exec rake spec:run[filename]

# eg,
bundle exec rake spec:run[spec/controllers/application_spec.rb]

The validation spec (spec/integration/validation_spec.rb) is ignored by default, as it makes an external call to validation web services. To run validation specs

bundle exec rake spec:validation

Install casper

brew install casperjs

Run tests

grunt test --url=server-url

where server-url is the development server url to test on

The site is hosted on Heroku.

Development workflow works like this:

• Play around and try new things on sandbox site
• If a feature is something intended for production, develop on a branch and merge into master (or just work off master directly if it is a small change)
• When master is ready to be show to someone else, push to staging site
• When staging is ready for production, push to production site

By default the staging/sandbox sites have a http password.

To disable the password

# For staging
bundle exec rake password:disable[staging]

# For sandbox
bundle exec rake password:disable[sandbox]

To enable the password

bundle exec rake password:enable[environment]

To set the password (also see helpers/http_password.rb for how it works)

bundle exec rake password:set[environment,user,password]

The sandbox site (http://pebblecode-sandbox.herokuapp.com/) is intended to be a temporary site to show particular changes. It is used when you don't intend to push the change to staging or production, but want to show someone else.

To push to the sandbox (assuming you have set up the git remote branch)

bundle exec rake sandbox[branch-name]

This is just an alias for

git push -f sandbox [branch-name]:master

Only needs to be done once, when setting up the heroku site

heroku create pebblecode-sandbox --stack cedar --remote sandbox
heroku config:add RACK_ENV=staging --app pebblecode-sandbox

The staging site (http://pebblecode-staging.herokuapp.com/) is intended as a staging ground for changes before they go into production. It is a place for sanity checks before it goes live.

To deploy the master branch to staging (assuming you have set up the git remote branch)

  bundle exec rake shipit[staging]

Note: If you want to push changes that won't be going into production any time soon, push into the sandbox site instead

Only needs to be done once, when setting up the heroku site

heroku create pebblecode-staging --stack cedar --remote staging
heroku config:add RACK_ENV=staging --app pebblecode-staging

The production site is the live public facing site for all the world to see.

To deploy the master branch to production (assuming you have set up the git remote branch)

bundle exec rake shipit[production]

This merges the master branch to the production branch, pushes to origin, deploys to production, checkouts out the master branch and pushes the code to the public git repo.

After deployment, you should ping search engines if the pages have been updated. The pages are listed in spec/support/path.rb

To do this

1. Generate the changes with

    bundle exec rake sitemap:refresh:no_ping
   

2. Commit and push updates to production

    bundle exec rake shipit[production]
   

3. Ping the search engines

    rake sitemap:ping_search_engines
   

The production branch is also pushed to the public repository: pebblecode.com-site.

This is automatically done when the production deployment task is run, but to do it manually run (assuming you have set up the git remote branch)

    git push public production:master

• Google
• Bing

• Google
• Bing

To turn on/off maintenance mode on heroku

heroku maintenance:on --app [app]
heroku maintenance:off --app [app]

There are 2 tumblr blogs for pebblecode:

• Staging
  • Website: http://pebblecodestaging.tumblr.com/ (password protected)
  • Tumblr customization: http://www.tumblr.com/customize/pebblecodestaging
  • Template: /views/tumblr_template/template-staging.html
• Production
  • Website: http://blog.pebblecode.com/
  • Tumblr customization: http://www.tumblr.com/customize/pebblecode
  • Template: /views/tumblr_template/template.html

The difference between the staging and production templates should only be the referenced urls. Staging should use http://pebblecode-staging.herokuapp.com and production should use http://pebblecode.com.

The process of updating the tumblr blog styles is:

1. Modify the tumblr edit html section for staging until done with changes

2. Copy and paste the changes into /views/tumblr_template/template-staging.html

3. Copy and paste /views/tumblr_template/template-staging.html into the production template /views/tumblr_template/template.html, and update the urls to http://pebblecode.com

4. Update the tumblr edit html section for production

   Also remember to add in the Disqus code, otherwise the comments won't show. Sometimes the disqus code disappears after editing for some strange reason. The Disqus shortcodes are:

   • Staging: pebblecodestaging
   • Production: pebblecodeblog

5. There is also the /views/thoughts.erb file, which is the expanded html version of /views/tumblr_template/template.html (without the tumblr tags). You should edit this file manually, as copying pasting from the tumblr template file won't show it properly.

   This is mainly for testing purposes, so styles can be viewed locally.

6. Remember to push the changes to git, so that others have the updated template. If someone replaces the template on tumblr, there is no version history on tumblr!

The MIT License (MIT)

Copyright (c) 2013 pebble {code}

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.