added custom error templates, and fun error testing routes

This commit is contained in:
Adam Piontek 2021-04-07 10:24:29 -04:00
parent a102579df2
commit a9c12d326f
12 changed files with 149 additions and 1 deletions

BIN
assets/raw/404_unicorn.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 335 KiB

BIN
assets/raw/50x_unicorn.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

View File

@ -8,7 +8,7 @@ use Mix.Config
# with webpack to recompile .js and .css sources.
config :home73k, Home73kWeb.Endpoint,
http: [port: 4000],
debug_errors: true,
debug_errors: false,
code_reloader: true,
check_origin: false,
watchers: [

View File

@ -16,4 +16,29 @@ defmodule Home73kWeb.HomeController do
def folio(conn, _params) do
render(conn, "folio.html", page_title: "Folio")
end
@valid_codes [400..418, 421..426, 428..429, 500..508]
|> Enum.map(&Enum.to_list/1)
|> Enum.concat()
|> Enum.concat([431, 451, 510, 511])
def err(conn, params) do
code = Map.get(params, "code", "404") |> err_code_as_int()
code = code in @valid_codes && code || 404
conn
|> put_status(code)
|> put_layout(false)
|> put_root_layout(false)
|> put_view(Home73kWeb.ErrorView)
|> render("#{code}.html")
end
defp err_code_as_int(code) do
try do
String.to_integer(code)
rescue
_ -> 404
end
end
end

View File

@ -28,6 +28,8 @@ defmodule Home73kWeb.Router do
get "/about", HomeController, :about
get "/resume", HomeController, :resume
get "/folio", HomeController, :folio
get "/err", HomeController, :err
get "/err/:code", HomeController, :err
# Blog
live "/blog", BlogLive, :index

View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title><%= @conn.status %> <%= Plug.Conn.Status.reason_phrase(@conn.status) %> \ 73k</title>
<meta name="description" content="HTTP error <%= @conn.status %>, <%= Plug.Conn.Status.reason_phrase(@conn.status) %>, from 73k.us">
<meta name="author" content="Adam Piontek"/>
<link rel="me" href="mailto:adam@73k.us"/>
<link rel="me" href="sms:+16462341697"/>
<link rel="authorization_endpoint" href="https://indieauth.com/auth"/>
<link rel="apple-touch-icon" sizes="180x180" href="<%= Routes.static_path(@conn, "/apple-touch-icon.png") %>">
<link rel="icon" type="image/png" sizes="32x32" href="<%= Routes.static_path(@conn, "/favicon-32x32.png") %>">
<link rel="icon" type="image/png" sizes="16x16" href="<%= Routes.static_path(@conn, "/favicon-16x16.png") %>">
<link rel="manifest" href="<%= Routes.static_path(@conn, "/site.webmanifest") %>">
<link rel="mask-icon" href="<%= Routes.static_path(@conn, "/safari-pinned-tab.svg") %>" color="#78868a">
<meta name="apple-mobile-web-app-title" content="73k">
<meta name="application-name" content="73k">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.ico">
<link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<style type="text/css">
body {
background: url(<%= Routes.static_path(@conn, "/images/err_view/40x_rainbow.jpg") %>);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<main class="container-fluid h-100 d-flex flex-column justify-content-center align-items-center text-light">
<img src="<%= Routes.static_path(@conn, "/images/err_view/40x_unicorn-300.png") %>" class="img-fluid mb-3" alt="UNICORN">
<h2 class="fs-2 mb-0">Oh no! Problem!</h2>
<p class="lead"><%= @conn.status %> &bull; <%= Plug.Conn.Status.reason_phrase(@conn.status) %></p>
<%= link to: Routes.home_path(@conn, :index), class: "border-0 text-light text-center mb-3", title: "Home" do %>
<p class="m-0 p-0">Click home to get back to safety!</p>
<%= icon_div @conn, "mdi-home", [class: "icon"], [ style: "width: 100px; height: 100px;"] %>
<% end %>
<p style="font-size: 10px;">
(Unicorn image <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferrer" target="_blank">Creative Commons 4.0 BY-NC</a>
via <a href="http://pngimg.com/download/24891" rel="noreferrer" target="_blank">pngimg.com</a>)
</p>
</main>
</body>
</html>

View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title><%= @conn.status %> <%= Plug.Conn.Status.reason_phrase(@conn.status) %> \ 73k</title>
<meta name="description" content="HTTP error <%= @conn.status %>, <%= Plug.Conn.Status.reason_phrase(@conn.status) %>, from 73k.us">
<meta name="author" content="Adam Piontek"/>
<link rel="me" href="mailto:adam@73k.us"/>
<link rel="me" href="sms:+16462341697"/>
<link rel="authorization_endpoint" href="https://indieauth.com/auth"/>
<link rel="apple-touch-icon" sizes="180x180" href="<%= Routes.static_path(@conn, "/apple-touch-icon.png") %>">
<link rel="icon" type="image/png" sizes="32x32" href="<%= Routes.static_path(@conn, "/favicon-32x32.png") %>">
<link rel="icon" type="image/png" sizes="16x16" href="<%= Routes.static_path(@conn, "/favicon-16x16.png") %>">
<link rel="manifest" href="<%= Routes.static_path(@conn, "/site.webmanifest") %>">
<link rel="mask-icon" href="<%= Routes.static_path(@conn, "/safari-pinned-tab.svg") %>" color="#78868a">
<meta name="apple-mobile-web-app-title" content="73k">
<meta name="application-name" content="73k">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.ico">
<link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<style type="text/css">
body {
background: url(<%= Routes.static_path(@conn, "/images/err_view/50x_rainbow.jpg") %>);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<main class="container-fluid h-100 d-flex flex-column justify-content-center align-items-center text-light">
<img src="<%= Routes.static_path(@conn, "/images/err_view/50x_unicorn-300.png") %>" class="img-fluid mb-3" alt="UNICORN">
<h2 class="fs-2 mb-0">K̷z̴z̶t̸.̶ ̷E̷r̷r̶o̸r̸!̶</h2>
<p class="lead"><%= @conn.status %> &bull; <%= Plug.Conn.Status.reason_phrase(@conn.status) %></p>
<%= link to: Routes.home_path(@conn, :index), class: "border-0 text-light text-center mb-3", title: "Home" do %>
<p class="m-0 p-0">Click home to get back to safety!</p>
<%= icon_div @conn, "mdi-home", [class: "icon"], [ style: "width: 100px; height: 100px;"] %>
<% end %>
<p style="font-size: 10px;">
(Unicorn image <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferrer" target="_blank">Creative Commons 4.0 BY-NC</a>
via <a href="http://pngimg.com/download/24891" rel="noreferrer" target="_blank">pngimg.com</a>)
</p>
</main>
</body>
</html>

View File

@ -13,4 +13,7 @@ defmodule Home73kWeb.ErrorView do
def template_not_found(template, _assigns) do
Phoenix.Controller.status_message_from_template(template)
end
def render("4" <> _rest, assigns), do: render("e40x.html", assigns)
def render("5" <> _rest, assigns), do: render("e50x.html", assigns)
end