From 186f55c311dcf492b0e13b9feee394d774e5c77e Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Wed, 7 Apr 2021 12:48:37 -0400
Subject: [PATCH] add helper links to external info about errors to custom
 error pages

---
 assets/js/app.js                              |  3 ++-
 lib/home73k_web/templates/error/e40x.html.eex | 10 +++++++++-
 lib/home73k_web/templates/error/e50x.html.eex | 10 +++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 3a2ff03..55f7190 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -6,7 +6,7 @@ import "../css/app.scss";
 // Import icons for sprite-loader
 // navbar brand icon
 import "../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand
-// other:///
+// other:
 import "../node_modules/@mdi/svg/svg/home.svg";
 import "../node_modules/@mdi/svg/svg/information.svg";
 import "../node_modules/@mdi/svg/svg/account.svg";
@@ -17,6 +17,7 @@ import "../node_modules/@mdi/svg/svg/calendar-clock.svg";
 import "../node_modules/@mdi/svg/svg/tag-multiple.svg";
 import "../node_modules/@mdi/svg/svg/rss.svg";
 import "../node_modules/@mdi/svg/svg/account-hard-hat.svg";
+import "../node_modules/@mdi/svg/svg/open-in-new.svg";
 // social
 import "../node_modules/@mdi/svg/svg/linkedin.svg";
 import "../node_modules/@mdi/svg/svg/github.svg";
diff --git a/lib/home73k_web/templates/error/e40x.html.eex b/lib/home73k_web/templates/error/e40x.html.eex
index 4d41a66..7e5f355 100644
--- a/lib/home73k_web/templates/error/e40x.html.eex
+++ b/lib/home73k_web/templates/error/e40x.html.eex
@@ -41,7 +41,15 @@
       <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>
+      <p class="lead mb-0"><%= @conn.status %> &bull; <%= Plug.Conn.Status.reason_phrase(@conn.status) %></p>
+      <div class="mb-3">
+        <span style="font-size: 10px;">[
+          <%= link to: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/#{@conn.status}", rel: "noreferrer", target: "_blank", class: "mb-4", style: "font-size: 10px;" do %>
+            <span>what's it mean? &middot; MDN</span>
+            <%= icon_div @conn, "mdi-open-in-new", [class: "icon"], [style: "height: 10px; width: 10px;"] %>
+          <% end %>
+        ]</span>
+      </div>
 
       <%= 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>
diff --git a/lib/home73k_web/templates/error/e50x.html.eex b/lib/home73k_web/templates/error/e50x.html.eex
index fe660ca..2627829 100644
--- a/lib/home73k_web/templates/error/e50x.html.eex
+++ b/lib/home73k_web/templates/error/e50x.html.eex
@@ -41,7 +41,15 @@
       <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>
+      <p class="lead mb-0"><%= @conn.status %> &bull; <%= Plug.Conn.Status.reason_phrase(@conn.status) %></p>
+      <div class="mb-3">
+        <span style="font-size: 10px;">[
+          <%= link to: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/#{@conn.status}", rel: "noreferrer", target: "_blank", class: "mb-4", style: "font-size: 10px;" do %>
+            <span>what's it mean? &middot; MDN</span>
+            <%= icon_div @conn, "mdi-open-in-new", [class: "icon"], [style: "height: 10px; width: 10px;"] %>
+          <% end %>
+        ]</span>
+      </div>
 
       <%= 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>