Magic Ball

Sinatra Exstatic Assets

Helpers for your JS, CSS and anything static

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.

stylesheet_tag

The code:

stylesheet_tag "/css/screen.css"

Output:

<link charset="utf-8" href="/css/screen.css?ts=1367612251" media="screen" rel="stylesheet" />

Also known as:

  • css_tag
  • 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>

Also known as:

  • javascript_include_tag
  • js_tag
  • script_tag

image_tag

The code:

image_tag "http://farm3.staticflickr.com/2474/3609420787_f7fc0e53c7.jpg", width: "500", height: "375", alt: "Magic Ball"

Output:

<img alt="Magic Ball" height="375" src="http://farm3.staticflickr.com/2474/3609420787_f7fc0e53c7.jpg" width="500" />

Also known as:

  • img_tag
  • img

favicon_tag

The code:

favicon_tag

Output:

<link href="/favicon.ico" rel="icon" />