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.
Start by installing:
gem 'sinatra-exstatic-assets'
Then require it in your Sinatra app.
require 'sinatra/exstatic_assets'
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}
The code:
stylesheet_tag "/css/screen.css"
Output:
<%= Rack::Utils.escape_html( stylesheet_tag "/css/screen.css") %>The code:
javascript_tag "http://code.jquery.com/jquery-1.9.1.min.js"
Output:
<%= Rack::Utils.escape_html( javascript_tag "http://code.jquery.com/jquery-1.9.1.min.js") %>The code:
javascript_tag "/js/helpers.js"
Output:
<%= Rack::Utils.escape_html( javascript_tag "/js/helpers.js" ) %>The code:
image_tag "http://farm1.staticflickr.com/10/12470738_fc0212bf8c.jpg", width: "500", height: "375", alt: "Greased Lightning"
Output:
<%= Rack::Utils.escape_html( image_tag "http://farm1.staticflickr.com/10/12470738_fc0212bf8c.jpg", width: "500", height: "375", alt: "Greased Lightning" ) %>The code:
image_tag "/images/turnip.jpg", width: "500", height: "375", alt: "Turnip"
Output:
<%= Rack::Utils.escape_html( image_tag "/images/turnip.jpg", width: "500", height: "375", alt: "Turnip" ) %>The code:
favicon_tag
Output:
<%= Rack::Utils.escape_html( favicon_tag ) %>