Merge pull request #5817 from jhass/generated_error_pages

Generate error pages on assets:precompile

.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

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

app/views/errors/error_422.haml

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

app/views/errors/error_500.haml

@@ -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. :(

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

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

lib/tasks/assets.rake

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

lib/tasks/tests.rake

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

public/404.css

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

public/404.html

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

public/422.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>

public/500.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>