Coder Social home page Coder Social logo

rack-dev-mark's Introduction

rack-dev-mark

Gem Version Download Dependency Status Build Status Coverage Status Code Climate

Differentiate development environment from production. You can choose themes to differentiate the page.

The running sample is available.

You can also try this gem on Heroku.

Deploy

Screenshot

screenshot development

On Development Env

screenshot development

On Production Env

screenshot production

Installation

Add the rack-dev-mark gem to your Gemfile.

gem "rack-dev-mark"

And run bundle install.

For Rack App

require 'rack/dev-mark'
use Rack::DevMark::Middleware
run MyApp

Middleman

Add the settings in config.rb.

require 'rack/dev-mark'
Rack::DevMark.env = "Your Env"
use Rack::DevMark::Middleware

For Rails App

In config/environments/development.rb

Rails.application.configure do
  config.rack_dev_mark.enable = true
end

Or In config/application.rb

module MyApp
  class Application < Rails::Application
    config.rack_dev_mark.enable = !Rails.env.production?
  end
end

Or Alternatively, use generator

bundle exec rails g rack:dev-mark:install

The middleware sets title and github_fork_ribbon themes as default.

Exclude Multiple Environments in Rails

Show the dev mark except env1, env2, env3.

In config/application.rb

module MyApp
  class Application < Rails::Application
    config.rack_dev_mark.enable = !%w(env1 env2 env3).include?(Rails.env)
  end
end

Rails on Heroku

Since Heroku uses production env for staging. You can't use the settings above. However, the gem provide an easier way to set it up on Heroku. Just set the environment variable on the environment in which you want to show the mark.

heroku config:set RACK_DEV_MARK_ENV=staging

That's it!

Custom Rack Middleware Order

rack-dev-mark should be inserted before ActionDispatch::ShowExceptions becase we want to show the dev mark on the error pages as well. However, it does not work well if it's inserted by incorrect order with some other rack middlewares. So, it provides the setting of inserted place.

module MyApp
  class Application < Rails::Application
    config.rack_dev_mark.insert_before SomeOtherMiddleware
  end
end

config.rack_dev_mark.insert_after is also available to insert rack-dev-mark after a middleware.

Here is the compatibility list which many people often ask.

Custom env string

Set the custom env string maually.

module MyApp
  class Application < Rails::Application
    config.rack_dev_mark.env = 'foo'
  end
end

Temporarily disable the dev mark

skip_rack_dev_mark controller helper works like around_filter.

class FooController < ApplicationController
  skip_rack_dev_mark only: [:iframe]

  def index
    # Do something
  end

  def iframe
    # Do something
  end
end

In this case, only index action will insert the dev mark.

I18n Support

Get i18n string with rack_dev_mark locale strings.

e.g. In config/locale/rack_dev_mark.ja.yml

ja:
  rack_dev_mark:
    development: '開発中'
    staging: 'ステージング'

Then, you will get translated string on the pages!

Custom Theme

Although the default themes are title and github_fork_ribbon, you can create your own themes inheriting Rack::DevMark::Theme::Base.

require 'rack/dev-mark/theme/base'

class NewTheme < Rack::DevMark::Theme::Base
  def insert_into(html, env, params = {})
    # Do something for your theme
    html
  end
end

class AnotherTheme < Rack::DevMark::Theme::Base
  def insert_into(html, env, params = {})
    # Do something for your theme
    html
  end
end

Then, insert them in your app.

For Rack App

use Rack::DevMark::Middleware, [NewTheme.new, AnotherTheme.new]

For Rails App

In config/application.rb

module MyApp
  class Application < Rails::Application
    config.rack_dev_mark.theme = [NewTheme.new, AnotherTheme.new]
  end
end

You can add any combination of themes. See more about themes.

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Copyright

Copyright (c) 2014 Daisuke Taniwaki. See LICENSE for details.

rack-dev-mark's People

Contributors

chefstevep avatar dnrce avatar dtaniwaki avatar elia avatar fursich avatar jmblog avatar nari avatar ogidow avatar pcraston avatar peterdavehello avatar sekit avatar tsukasaoishi avatar willnet avatar y-asahi-dev avatar znz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

rack-dev-mark's Issues

Hide ribbon when print

When I printed out page with left-bottom ribbon in development environment, ribbon is middle of page 2.
How about hiding ribbon in css of @media print?

Reduce disk space usage by ignoring the screenshots in misc/

When installed, this gem takes 2.7MB. The main reason for this is that the misc/ directory is included, which pulls in animated gifs and pictures of the usage.

Would there be any objections to me excluding everything in misc/ with the gemspec file? Currently it just adds everything with git ls-files.

Unable to get ribbon to appear in non-development environments

I am using a Rails 4.1.4 application. When I follow the Heroku-based instructions and set up the RACK_MARK_DEV environment variable, I am unable to get the ribbon to appear in non-development enrivonments.

When I check the headers, I do see that X-Rack-Dev-Mark-Env is set:
X-Rack-Dev-Mark-Env:staging

However, I can't get the ribbon to appear in staging environments either on Heroku or locally on my development machine. Are there other factors I can use to troubleshoot the issue? We run our application in several environments, and this tool would have a lot of value for us.

How can we add a custom Tag named instead of environment name?

I am using your gem. The title is only based on the environment. Can we set a custom title?

I try config.rack_dev_mark.custom_theme = [Rack::DevMark::Theme::Tag.new(attribute: 'hello')]
then

environments/development.rb:51:in `block in <top (required)>': uninitialized constant Rack::DevMark::Theme::Tag (NameError)

Exclude dev-mark from Rails redirects

On Rails, redirect_to sets the response body to:

<html><body>You are being <a href="http://url">redirected</a>.</body></html>

along with a redirect status.

Rails provides this as a response_body by default: https://github.com/rails/rails/blob/4ba1376c608cc797c80402a73568744b1c855f67/actionpack/lib/action_controller/metal/redirecting.rb#L76

Using rack-dev-mark, this gets expanded to the following:

<html><body><style>/* Left will inherit from right (so we don't need to duplicate code) */
.github-fork-ribbon {
  /* The right and left classes determine the side we attach our banner to */
  position: absolute;

  /* Add a bit of padding to give some substance outside the "stitching" */
  padding: 2px 0;

  /* Set the base colour */
  background-color: #a00;

  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));

  /* Add a drop shadow */
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);

  /* Set the font */
  font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;

  z-index: 9999;
  pointer-events: auto;

  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.github-fork-ribbon:hover {
  opacity: 0.2;
}

.github-fork-ribbon.red {
  background-color: #a00;
}

.github-fork-ribbon.green {
  background-color: #090;
}

.github-fork-ribbon.black {
  background-color: #333;
}

.github-fork-ribbon.orange {
  background-color: #f80;
}

.github-fork-ribbon .github-fork-ribbon-text,
.github-fork-ribbon .github-fork-ribbon-text:hover {
  /* Set the text properties */
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  text-align: center;
  cursor: pointer;

  /* Set the geometry. If you fiddle with these you'll also need
     to tweak the top and right values in .github-fork-ribbon. */
  width: 200px;
  line-height: 20px;

  /* Set the layout properties */
  display: inline-block;
  padding: 2px 0;

  /* Add "stitching" effect */
  border-width: 1px 0;
  border-style: dotted;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.github-fork-ribbon-wrapper {
  width: 150px;
  height: 150px;
  position: absolute;
  overflow: hidden;
  top: 0;
  z-index: 9999;
  pointer-events: none;
}

.github-fork-ribbon-wrapper.fixed {
  position: fixed;
}

.github-fork-ribbon-wrapper.left {
  left: 0;
}

.github-fork-ribbon-wrapper.right {
  right: 0;
}

.github-fork-ribbon-wrapper.left-bottom {
  position: fixed;
  top: inherit;
  bottom: 0;
  left: 0;
}

.github-fork-ribbon-wrapper.right-bottom {
  position: fixed;
  top: inherit;
  bottom: 0;
  right: 0;
}

.github-fork-ribbon-wrapper.right .github-fork-ribbon {
  top: 42px;
  right: -43px;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.github-fork-ribbon-wrapper.left .github-fork-ribbon {
  top: 42px;
  left: -43px;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
  top: 80px;
  left: -43px;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
  top: 80px;
  right: -43px;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
</style>
<!--[if lt IE 9]>
<style>/* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and
 * http://www.useragentman.com/IETransformsTranslator */

 .github-fork-ribbon {
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
}

.github-fork-ribbon-wrapper.right .github-fork-ribbon {
  /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
  top: -22px;
  right: -62px;

  /* IE8+ */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
  /* IE6 and 7 */
  filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.7071067811865474,
    M12=-0.7071067811865477,
    M21=0.7071067811865477,
    M22=0.7071067811865474,
    SizingMethod='auto expand'
  );
}

.github-fork-ribbon-wrapper.left .github-fork-ribbon {
  top: -22px;
  left: -22px;

  /* IE8+ */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
  /* IE6 and 7 */
  filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.7071067811865483,
    M12=0.7071067811865467,
    M21=-0.7071067811865467,
    M22=0.7071067811865483,
    SizingMethod='auto expand'
  );
}

.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
  /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
  top: 12px;
  left: -22px;


  /* IE8+ */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
  /* IE6 and 7 */
/*  filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.7071067811865474,
    M12=-0.7071067811865477,
    M21=0.7071067811865477,
    M22=0.7071067811865474,
    SizingMethod='auto expand'
  );
*/}

.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
  top: 12px;
  right: -62px;

  /* IE8+ */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
  /* IE6 and 7 */
  filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.7071067811865483,
    M12=0.7071067811865467,
    M21=-0.7071067811865467,
    M22=0.7071067811865483,
    SizingMethod='auto expand'
  );
}
</style>
<![endif]-->
<div class="github-fork-ribbon-wrapper left" onClick="this.style.display='none'" title=""><div class="github-fork-ribbon red"><span class="github-fork-ribbon-text">development</span></div></div>You are being <a href="http://url">redirected</a>.</body></html>

This takes the redirect body from ~80 B to about 7 KB.

Without having to explicitly use skip_rack_dev_mark everywhere, is it possible to exclude redirects from the dev-mark automatically?

skip_rack_dev_mark doesn't work for me

I have tried to use skip_rack_dev_mark filter to ignore the ribbin new filter like this:

skip_rack_dev_mark only: [:new]

I used:

  • rack-dev-mark-0.7.3.gem
  • rails 4.1.4

I also debuged in the action, the flag of Rack::DevMark.tmp_disabled was already set to true.

And I also found the description about this in README is not correct.
I recken it should be:
skip_rack_dev_mark except: [:index]

Duplicate Github Fork Ribbon

I don't have the time to look into this myself right now, but it's noteworthy that the Github Fork Ribbon theme with position: fixed duplicates the ribbon. One is scrolling out, the other one is fixed.

(As a side note, you might want to modify the themes readme subtitle from "github-fork-ribbon" to "github_fork_ribbon" since the symbol must be :github_fork_ribbon to actually work.)

New Relic causes error

I installed new_relic in dev mode, and this happened. Goes away when I remove new_relic and/or dev_mark

Puma caught this error: undefined method `bytesize' for #<Rack::DevMark::Middleware:0x007fd5e78621e8> (NoMethodError)
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/rack-dev-mark-0.7.4/lib/rack/dev-mark/middleware.rb:36:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/railties-5.0.0.beta4/lib/rails/rack/logger.rb:36:in `call_app'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/railties-5.0.0.beta4/lib/rails/rack/logger.rb:24:in `block in call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/activesupport-5.0.0.beta4/lib/active_support/tagged_logging.rb:70:in `block in tagged'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/activesupport-5.0.0.beta4/lib/active_support/tagged_logging.rb:26:in `tagged'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/activesupport-5.0.0.beta4/lib/active_support/tagged_logging.rb:70:in `tagged'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/railties-5.0.0.beta4/lib/rails/rack/logger.rb:24:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/actionpack-5.0.0.beta4/lib/action_dispatch/middleware/request_id.rb:24:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/rack-2.0.0.alpha/lib/rack/method_override.rb:22:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/rack-2.0.0.alpha/lib/rack/runtime.rb:22:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/activesupport-5.0.0.beta4/lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/actionpack-5.0.0.beta4/lib/action_dispatch/middleware/executor.rb:12:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/actionpack-5.0.0.beta4/lib/action_dispatch/middleware/static.rb:136:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/rack-2.0.0.alpha/lib/rack/sendfile.rb:111:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/rack-cors-0.4.0/lib/rack/cors.rb:80:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/railties-5.0.0.beta4/lib/rails/engine.rb:522:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/newrelic_rpm-3.15.2.317/lib/new_relic/agent/instrumentation/middleware_tracing.rb:96:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/puma-3.4.0/lib/puma/configuration.rb:224:in `call'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/puma-3.4.0/lib/puma/server.rb:569:in `handle_request'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/puma-3.4.0/lib/puma/server.rb:406:in `process_client'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/puma-3.4.0/lib/puma/server.rb:271:in `block in run'
/Users/rexmadden/.rvm/gems/ruby-2.3.0@the_sting/gems/puma-3.4.0/lib/puma/thread_pool.rb:114:in `block in spawn_thread'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.