Clean up 404 page

upmaru · Feb 26, 2024 · e981c1c · e981c1c
1 parent 60886a1
commit e981c1c
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 20 deletions.
diff --git a/config/dev.exs b/config/dev.exs
@@ -22,7 +22,7 @@ config :polar, PolarWeb.Endpoint,
   http: [ip: {0, 0, 0, 0}, port: 4000],
   check_origin: false,
   code_reloader: true,
-  debug_errors: true,
+  debug_errors: false,
   secret_key_base: "TzqTbHuNO4m/845kDoNhFVdt2NYb0Ql8IQudyE594mks0WPM6jgK4DiSDrAZQTsJ",
   watchers: [
     esbuild: {Esbuild, :install_and_run, [:polar, ~w(--sourcemap=inline --watch)]},

diff --git a/lib/polar_web/controllers/error_html.ex b/lib/polar_web/controllers/error_html.ex
@@ -8,12 +8,12 @@ defmodule PolarWeb.ErrorHTML do
   #   * lib/polar_web/controllers/error_html/404.html.heex
   #   * lib/polar_web/controllers/error_html/500.html.heex
   #
-  # embed_templates "error_html/*"
+  embed_templates "error_html/*"
 
   # The default is to render a plain text page based on
   # the template name. For example, "404.html" becomes
   # "Not Found".
-  def render(template, _assigns) do
-    Phoenix.Controller.status_message_from_template(template)
-  end
+  # def render(template, _assigns) do
+  #   Phoenix.Controller.status_message_from_template(template)
+  # end
 end
diff --git a/lib/polar_web/controllers/error_html/404.html.heex b/lib/polar_web/controllers/error_html/404.html.heex
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en" class="[scrollbar-gutter:stable]" class="h-full">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png" />
+    <link rel="manifest" href="/images/site.webmanifest" />
+    <link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#0f172a" />
+    <meta name="csrf-token" content={get_csrf_token()} />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <.live_title suffix=" · Polar">
+      <%= "Page Not Found" %>
+    </.live_title>
+    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
+    </script>
+    <%= if domain = System.get_env("PHX_HOST") do %>
+      <script defer data-domain={domain} src="https://plausible.io/js/script.js">
+      </script>
+    <% end %>
+  </head>
+  <body class="h-full bg-slate-950">
+    <div class="mx-auto mt-20 max-w-2xl text-center sm:mt-24">
+      <p class="text-base font-semibold leading-8 text-indigo-400"><%= gettext("404") %></p>
+      <h1 class="mt-4 text-3xl font-bold tracking-tight text-white sm:text-5xl">
+        <%= gettext("This page does not exist") %>
+      </h1>
+      <p class="mt-4 text-base leading-7 text-gray-600 sm:mt-6 sm:text-lg sm:leading-8">
+        <% gettext("Sorry, we couldn’t find the page you’re looking for.") %>
+      </p>
+    </div>
+    <div class="mx-auto mt-16 flow-root max-w-lg sm:mt-20">
+      <h2 class="sr-only"><%= gettext("Check out other pages") %></h2>
+      <ul role="list" class="-mt-6 divide-y divide-gray-900/5 border-b border-gray-900/5">
+        <li class="relative flex gap-x-6 py-6">
+          <div class="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-slate-900/10">
+            <.icon name="hero-home-solid" class="h-6 w-6 text-indigo-400" />
+          </div>
+          <div class="flex-auto">
+            <h3 class="text-sm font-semibold leading-6 text-slate-100">
+              <a href="/">
+                <span class="absolute inset-0" aria-hidden="true"></span> <%= gettext(
+                  "Take me home"
+                ) %>
+              </a>
+            </h3>
+            <p class="mt-2 text-sm leading-6 text-slate-200">
+              <%= gettext("to the place I belong. West Virginia.") %>
+            </p>
+          </div>
+          <div class="flex-none self-center">
+            <.icon name="hero-chevron-right-solid" class="h-5 w-5 text-slate-400" />
+          </div>
+        </li>
+        <li class="relative flex gap-x-6 py-6">
+          <div class="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
+            <.icon name="hero-squares-plus-solid" class="h-6 w-6 text-indigo-400" />
+          </div>
+          <div class="flex-auto">
+            <h3 class="text-sm font-semibold leading-6 text-slate-100">
+              <a href={~p"/dashboard"}>
+                <span class="absolute inset-0" aria-hidden="true"></span> <%= gettext("Dashboard") %>
+              </a>
+            </h3>
+            <p class="mt-2 text-sm leading-6 text-slate-200">
+              <%= gettext("Go back to the dashboard.") %>
+            </p>
+          </div>
+          <div class="flex-none self-center">
+            <.icon name="hero-chevron-right-solid" class="h-5 w-5 text-slate-400" />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </body>
+</html>
diff --git a/lib/polar_web/live/dashboard/space/new_live.ex b/lib/polar_web/live/dashboard/space/new_live.ex
@@ -14,7 +14,7 @@ defmodule PolarWeb.Dashboard.Space.NewLive do
           </h2>
           <p class="mt-1 text-sm leading-6 text-slate-400">
             <%= gettext(
-              "Spaces encapsulate all your tokens, it can represent an organization or just a workspace."
+              "Spaces group all your tokens, it can represent an organization or just a workspace."
             ) %>
           </p>
         </div>

diff --git a/lib/polar_web/live/dashboard/space_live.ex b/lib/polar_web/live/dashboard/space_live.ex
@@ -21,21 +21,12 @@ defmodule PolarWeb.Dashboard.SpaceLive do
   end
 
   def mount(%{"id" => id}, _session, %{assigns: assigns} = socket) do
-    space = Repo.get_by(Space, owner_id: assigns.current_user.id, id: id)
+    space = Repo.get_by!(Space, owner_id: assigns.current_user.id, id: id)
 
-    if space do
-      socket =
-        socket
-        |> assign(:page_title, space.name)
+    socket =
+      socket
+      |> assign(:page_title, space.name)
 
-      {:ok, socket}
-    else
-      socket =
-        socket
-        |> put_flash(:error, gettext("Space not found"))
-        |> push_navigate(to: ~p"/dashboard")
-
-      {:ok, socket}
-    end
+    {:ok, socket}
   end
 end