Usage
Note that there is a Main App and an App2. This is to demonstrate that you can give links relative to the app, but if they are mounted with an extra prefix (using Rack#map, for example) the helper will respect that and produce the right href attribute.
Installation and loading
Start by installing:
gem 'sinatra-exstatic-assets'
Then require it in your Sinatra app.
require 'sinatra/exstatic_assets'
The helpers
Use these helpers in your views.
To add an attribute to a helper, pass it as an option, e.g. width: "500"
Sometimes, you won't want the script tag (e.g. "/app2") prepended to the url, like in the case of a favicon. In that case you can pass in url_options: {script_tag: false} to the helper, e.g. favicon_tag url_options: {script_tag: false}
stylesheet_tag
The code:
stylesheet_tag "/css/screen.css"
Output:
<link charset="utf-8" href="/app2/css/screen.css?ts=1367612251" media="screen" rel="stylesheet" />javascript_tag
The code:
javascript_tag "http://code.jquery.com/jquery-1.9.1.min.js"
Output:
<script charset="utf-8" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>The code:
javascript_tag "/js/helpers.js"
Output:
<script charset="utf-8" src="/app2/js/helpers.js?ts=1367612251"></script>image_tag
The code:
image_tag "http://farm1.staticflickr.com/10/12470738_fc0212bf8c.jpg", width: "500", height: "375", alt: "Greased Lightning"
Output:
<img alt="Greased Lightning" height="375" src="http://farm1.staticflickr.com/10/12470738_fc0212bf8c.jpg" width="500" />The code:
image_tag "/images/turnip.jpg", width: "500", height: "375", alt: "Turnip"
Output:
<img alt="Turnip" height="375" src="/app2/images/turnip.jpg?ts=1367612251" width="500" />favicon_tag
The code:
favicon_tag
Output:
<link href="/favicon.ico" rel="icon" />