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.

.gitignore

@@ -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

@@ -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

+- 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

+- 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

+- 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

@@ -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

+!!!
+%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

+# 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

 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

-@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

-<!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

-<!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

-<!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>