Fuji

Do not use. This has been replaced by fuji.js

Fuji is a ruby gem for rendering and styling Heroku's global header and nav.

Its only dependencies are Sass and Compass, so you can use it with Rails or Sinatra.

Add fuji to your application's Gemfile:

gem 'fuji'

And render a section by calling render and passing it the Rack::Request object, and any required options.

The Heroku header renders the default Heroku navgation, including checking whether a user is logged in or logged out.

<%= Fuji::Header.render request %>

The custom header allows you to specify a set of links to render instead of the default Heroku navigation. This header will make use of any information about the user's state.

<%= Fuji::CustomHeader.render request, [Fuji::Link.new("My Link", "http://example.com")] %>

You can set global Fuji config options that affect all rendered sections.

When using Rails, you can specify Fuji's config in your application's environment configuration:

config.fuji_options = {logo_text: "heroku", logo_subtext: "dashboard"}

Fuji.options = {logo_text: "heroku", logo_subtext: "dashboard"}

• logo_text: The text output first in the logo (default: "heroku")

• logo_subtext: Text output second in the logo e.g. 'dashboard' or 'add-ons' (default: "")

• logo_url: URL linked to from the logo (default: "https://www.heroku.com")

• map: Optional hash containing keys :from and :to which substitutes URLs in navigation with the specified :to string. For example:

  # development.rb
  config.fuji_options = {map: {from: "https://www.heroku.com", to: "http://localhost:5000"}}

  Will modify all links to www.heroku.com to point to localhost:5000, including correctly tracking active page state on an app running locally.

Style it up by importing the fuji partial into your Sass/SCSS stylesheet:

// Override the defaults as desired:
$fuji-foreground-color: #8B8BB2
$fuji-background-color: transparent
$fuji-max-width: 1032px
$fuji-horizontal-padding: 12px
$fuji-vertical-padding: 2em
$fuji-logo-text-color: $fuji-foreground-color
$fuji-logo-subtext-color: rgba($fuji-foreground-color, 0.6)
$fuji-link-color-inactive: #7C76B8
$fuji-link-color-active: #1B1B24
$fuji-link-background-color-inactive: transparent
$fuji-link-background-color-active: $fuji-link-color-inactive
$fuji-base-font-size: inherit
$fuji-logo-font-size: 1.71em
$fuji-border-radius: 3px

@import "fuji"

See CONTRIBUTING.md.

MIT. Go nuts. See LICENSE.