Commit e7d0a978 authored by Jonne Haß's avatar Jonne Haß

Generate error pages on assets:precompile

This allows us to reuse any CSS we have, unify
their look and unify their look with the regular
page design.

This works by instantiating ActionView and rendering
templates in a rake task.

Inspired by the errgent gem.
parent 2eaa5a4d
......@@ -34,6 +34,9 @@ spec/fixtures/*.y*ml
spec/fixtures/*.fixture.*
coverage/
xml_locales/
public/404.html
public/422.html
public/500.html
# Sprites
app/assets/images/branding-*.png
......
......@@ -23,3 +23,85 @@
position: absolute;
left: 0; right: 0;
}
#error_404 {
width: 100%;
height: 100%;
position: fixed;
bottom:0px;
margin: 0px;
font-family: Roboto, Helvetica, Arial, sans-serif;
text-align: center;
text-shadow: 0 1px 0 #fff;
color: #666;
background: image-url("peeping-tom.png") no-repeat bottom;
#big-number {
font-family: Roboto-BoldCondensed, Helvetica, Arial, sans-serif;
font-size: 250px;
text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
color: #ddd;
}
a {
text-decoration : none;
color : rgb(42,156,235);
}
a:hover {
text-decoration : underline;
}
.transparent {
filter: alpha(opacity=80);
opacity: 0.8;
}
}
#error_422 {
background-color: #fff;
color: #666;
text-align: center;
font-family: arial, sans-serif;
div.dialog {
width: 25em;
padding: 0 4em;
margin: 4em auto 0 auto;
border: 1px solid #ccc;
border-right-color: #999;
border-bottom-color: #999;
}
h1 {
font-size: 100%;
color: #f00;
line-height: 1.5em;
}
}
#error_500 {
text-align: center;
background-color: rgb(252,252,252);
color: #444;
font-family: 'helvetica neue', 'helvetica', 'arial', sans-serif;
margin: 0;
padding: 1em;
header {
height: 100px;
background-color: #333;
position:relative;
}
#diaspora_logo {
position: relative;
margin-top: 50px;
}
h1 {
font-size: 100%;
color: #444;
line-height: 1.5em;
}
}
- content_for(:page_title) do
The page you were looking for doesn't exist (404)
#big-number.transparent
404
%p
These are not the kittens you're looking for. Move along.
%p
%a{href: "javascript:history.back()"}
Go Back?
- content_for(:page_title) do
The change you wanted was rejected (422)
.dialog
%h1
The change you wanted was rejected.
%p
Maybe you tried to change something you didn't have access to.
- content_for(:page_title) do
We're sorry, but something went wrong (500)
%header
= image_tag "branding/white2x.png", id: "diaspora_logo"
%h1
500: Internal server error.
%h3
Our bad! Sorry about that. :(
......@@ -20,9 +20,9 @@
%meta{'http-equiv' => "cleartype", :content => 'on'}/
/ Home screen icon (sized for retina displays)
%link{:rel => 'apple-touch-icon', :href => '/apple-touch-icon.png'}
%link{rel: "apple-touch-icon", href: image_path("apple-touch-icon.png")}
/ For Nokia devices
%link{:rel => 'shortcut icon', :href => '/apple-touch-icon.png'}
%link{rel: "shortcut icon", href: image_path("apple-touch-icon.png")}
/ iOS mobile web app indicator
/ NOTE(we will enable these once we don't have to rely on back/forward buttons anymore)
......
!!!
%html
%head
%title= page_title yield(:page_title)
%link{rel: "shortcut icon", href: image_path("favicon.png")}
%link{rel: "apple-touch-icon", href: image_path("apple-touch-icon.png")}
= stylesheet_link_tag :error_pages, media: "all"
= yield(:head)
%body{id: "error_#{@code}"}
= yield
# Inspired by https://github.com/route/errgent/blob/master/lib/errgent/renderer.rb
class ErrorPageRenderer
def initialize options={}
@codes = options.fetch :codes, [404, 500]
@output = options.fetch :output, "public/%s.html"
@vars = options.fetch :vars, {}
@template = options.fetch :template, "errors/error_%s"
@layout = options.fetch :layout, "layouts/error_page"
end
def render
@codes.each do |code|
view = build_action_view
view.assign @vars.merge(code: code)
path = Rails.root.join(@output % code)
File.write path, view.render(template: @template % code, layout: @layout)
end
end
def helpers(&block)
@helpers = block
end
private
def build_action_view
paths = ::ActionController::Base.view_paths
::ActionView::Base.new(paths).tap do |view|
view.class_eval do
include Rails.application.helpers
include Rails.application.routes.url_helpers
end
view.assets_manifest = build_manifest(Rails.application)
view.class_eval(&@helpers) if @helpers
end
end
# Internal API from the sprocket-rails railtie, if somebody finds a way to
# call it, please replace it. Might need to be updated on sprocket-rails
# updates.
def build_manifest(app)
config = app.config
path = File.join(config.paths['public'].first, config.assets.prefix)
Sprockets::Manifest.new(app.assets, path, config.assets.manifest)
end
end
namespace :assets do
desc "Generate error pages"
task :generate_error_pages do
renderer = ErrorPageRenderer.new codes: [404, 422, 500]
renderer.render
end
# Augment precompile with error page generation
task :precompile do
Rake::Task['assets:generate_error_pages'].invoke
end
end
namespace :ci do
namespace :travis do
task prepare_db: %w(db:create db:test:load)
task prepare: %w(prepare_db assets:generate_error_pages)
desc "Run everyhting except cucumber"
task :other => [ :prepare_db, "tests:generate_fixtures", :spec, "jasmine:ci" ]
task other: %w(prepare tests:generate_fixtures spec jasmine:ci)
desc "Run cucumber"
task :cucumber => [ :prepare_db, "rake:cucumber" ]
task cucumber: %w(prepare rake:cucumber)
desc "Prepare db"
task :prepare_db => [ "db:create", "db:test:load"]
end
end
......
@font-face {
font-family:Roboto;
src: local("Roboto-Regular.ttf")
}
@font-face {
font-family:Roboto-BoldCondensed;
src: local("Roboto-BoldCondensed.ttf")
}
html {
background: url("bgpattern.png") #ebebeb;
text-align: center;
}
body {
width: 100%;
height: 100%;
position: fixed;
bottom:0px;
margin: 0px;
font-family: Roboto, Helvetica, Arial, sans-serif;
text-align: center;
text-shadow: 0 1px 0 #fff;
color: #666;
background: url("peeping-tom.png") no-repeat bottom;
}
#big-number {
font-family: Roboto-BoldCondensed, Helvetica, Arial, sans-serif;
font-size: 250px;
text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
color: #ddd;
}
a {
text-decoration : none;
color : rgb(42,156,235);
}
a:hover {
text-decoration : underline;
}
.transparent {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
-webkit-opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<title>The page you were looking for doesn't exist (404)</title>
<link href="/favicon.ico" rel="shortcut icon">
<link href="/404.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- This file lives in public/404.html -->
<div id="big-number" class="transparent">404</div>
<p>These are not the kittens you're looking for. Move along.</p>
<p><a href="javascript:history.back()">Go Back?</a></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>The change you wanted was rejected (422)</title>
<style type="text/css">
body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
div.dialog {
width: 25em;
padding: 0 4em;
margin: 4em auto 0 auto;
border: 1px solid #ccc;
border-right-color: #999;
border-bottom-color: #999;
}
h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
</style>
</head>
<body>
<!-- This file lives in public/422.html -->
<div class="dialog">
<h1>The change you wanted was rejected.</h1>
<p>Maybe you tried to change something you didn't have access to.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>We're sorry, but something went wrong (500)</title>
<style type="text/css">
body {
text-align: center;
background-color: rgb(252,252,252);
color: #444;
font-family: 'helvetica neue', 'helvetica', 'arial', sans-serif;
margin: 0;
padding: 1em;
}
header {
height: 100px;
background-color: #333;
position:relative;
}
#diaspora_logo {
position: relative;
margin-top: 50px;
}
h1 {
font-size: 100%;
color: #444;
line-height: 1.5em;
}
</style>
</head>
<body>
<!-- This file lives in public/500.html -->
<header>
<img id="diaspora_logo" src="/assets/branding/white2x.png"/>
</header>
<h1>
500: Internal server error.
</h1>
<h3>
Our bad! Sorry about that. :(
</h3>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment