Skip to content

GitLab

D
diaspora
Commit e7d0a978 authored by Jonne Haß's avatar Jonne Haß
Browse files
Options

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
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 145 deletions
.gitignore
View file @ e7d0a978
......@@ -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
......
app/assets/stylesheets/error_pages.scss
View file @ e7d0a978
......@@ -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;
}
}
app/views/errors/error_404.haml 0 → 100644
View file @ e7d0a978
- 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?
app/views/errors/error_422.haml 0 → 100644
View file @ e7d0a978
- 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.
app/views/errors/error_500.haml 0 → 100644
View file @ e7d0a978
- 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. :(
app/views/layouts/application.mobile.haml
View file @ e7d0a978
......@@ -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)
......
app/views/layouts/error_page.haml 0 → 100644
View file @ e7d0a978
!!!
%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
lib/tasks/assets.rake 0 → 100644
View file @ e7d0a978
# 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
lib/tasks/tests.rake
View file @ e7d0a978
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
......
public/404.css deleted 100644 → 0
View file @ 2eaa5a4d
@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;
}
public/404.html deleted 100644 → 0
View file @ 2eaa5a4d
<!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>
public/422.html deleted 100644 → 0
View file @ 2eaa5a4d
<!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>
public/500.html deleted 100644 → 0
View file @ 2eaa5a4d
<!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