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.
This commit is contained in:
Jonne Haß
parent
2eaa5a4d3b
commit
e7d0a978ba
19 changed files with 193 additions and 145 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -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
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
app/views/errors/error_404.haml
Normal file
10
app/views/errors/error_404.haml
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
- 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?
|
||||
8
app/views/errors/error_422.haml
Normal file
8
app/views/errors/error_422.haml
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
- 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.
|
||||
10
app/views/errors/error_500.haml
Normal file
10
app/views/errors/error_500.haml
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
- 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)
|
||||
|
|
|
|||
14
app/views/layouts/error_page.haml
Normal file
14
app/views/layouts/error_page.haml
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
!!!
|
||||
%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
|
||||
59
lib/tasks/assets.rake
Normal file
59
lib/tasks/assets.rake
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
# 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
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!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>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Loading…
Reference in a new issue