From f8c0961416843c9f0d3e5ff16fdf50b31257ce68 Mon Sep 17 00:00:00 2001 From: shri Date: Sat, 24 May 2025 19:47:23 +0530 Subject: [PATCH 1/5] feat: custom 404 not found page for invalid routes --- .../components/not_found_component.ex | 233 ++++++++++++++++++ lib/algora_web/controllers/error_html.ex | 5 + 2 files changed, 238 insertions(+) create mode 100644 lib/algora_web/components/not_found_component.ex diff --git a/lib/algora_web/components/not_found_component.ex b/lib/algora_web/components/not_found_component.ex new file mode 100644 index 000000000..744d464c6 --- /dev/null +++ b/lib/algora_web/components/not_found_component.ex @@ -0,0 +1,233 @@ +defmodule AlgoraWeb.Component.NotFoundComponent do + @moduledoc false + use AlgoraWeb.Component + + @doc "Renders a minimal modern 404 page like Next.js with black background" + def not_found(assigns) do + ~H""" + + + + + + 404 - Page Not Found + + + +
+
+
+
+
+
+
+ +
+
404
+

This page could not be found

+

+ Sorry, the page you're looking for doesn't exist or has been moved. +

+ + ← + Go back home + +
+ + + """ + end +end diff --git a/lib/algora_web/controllers/error_html.ex b/lib/algora_web/controllers/error_html.ex index eed5d0158..0997ff622 100644 --- a/lib/algora_web/controllers/error_html.ex +++ b/lib/algora_web/controllers/error_html.ex @@ -1,5 +1,6 @@ defmodule AlgoraWeb.ErrorHTML do use AlgoraWeb, :html + alias AlgoraWeb.Component.NotFoundComponent # If you want to customize your error pages, # uncomment the embed_templates/1 call below @@ -10,6 +11,10 @@ defmodule AlgoraWeb.ErrorHTML do # # embed_templates "error_html/*" + def render("404.html", assigns) do + NotFoundComponent.not_found(assigns) + end + # The default is to render a plain text page based on # the template name. For example, "404.html" becomes # "Not Found". From 4fec213ad777752007f45195b067bc2651cc742d Mon Sep 17 00:00:00 2001 From: zafer Date: Tue, 17 Jun 2025 11:34:35 +0300 Subject: [PATCH 2/5] fix: update 404 error message --- test/algora_web/controllers/error_html_test.exs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/algora_web/controllers/error_html_test.exs b/test/algora_web/controllers/error_html_test.exs index cb349cd01..de705a195 100644 --- a/test/algora_web/controllers/error_html_test.exs +++ b/test/algora_web/controllers/error_html_test.exs @@ -5,7 +5,7 @@ defmodule AlgoraWeb.ErrorHTMLTest do import Phoenix.Template test "renders 404.html" do - assert render_to_string(AlgoraWeb.ErrorHTML, "404", "html", []) == "Not Found" + assert render_to_string(AlgoraWeb.ErrorHTML, "404", "html", []) =~ "could not be found" end test "renders 500.html" do From b96517142b417c611f6db44e260a22c139523f96 Mon Sep 17 00:00:00 2001 From: zafer Date: Tue, 17 Jun 2025 11:42:46 +0300 Subject: [PATCH 3/5] minor changes & reformat --- .../components/not_found_component.ex | 438 +++++++++--------- 1 file changed, 224 insertions(+), 214 deletions(-) diff --git a/lib/algora_web/components/not_found_component.ex b/lib/algora_web/components/not_found_component.ex index 744d464c6..77f742db6 100644 --- a/lib/algora_web/components/not_found_component.ex +++ b/lib/algora_web/components/not_found_component.ex @@ -2,231 +2,241 @@ defmodule AlgoraWeb.Component.NotFoundComponent do @moduledoc false use AlgoraWeb.Component - @doc "Renders a minimal modern 404 page like Next.js with black background" def not_found(assigns) do ~H""" - - - + + + 404 - Page Not Found - - + +
-
-
-
-
-
+
+
+
+
+
- +
-
404
-

This page could not be found

-

- Sorry, the page you're looking for doesn't exist or has been moved. -

- - ← - Go back home - +
404
+

This page could not be found

+

+ Sorry, the page you're looking for doesn't exist or has been moved. +

+ + + + + Go back home +
- + """ end From d0741d23b983f2e28f40d5ac942f5737e91898fe Mon Sep 17 00:00:00 2001 From: zafer Date: Tue, 17 Jun 2025 11:47:22 +0300 Subject: [PATCH 4/5] change link from anchor tag to a LV link --- lib/algora_web/components/not_found_component.ex | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/algora_web/components/not_found_component.ex b/lib/algora_web/components/not_found_component.ex index 77f742db6..ccb931286 100644 --- a/lib/algora_web/components/not_found_component.ex +++ b/lib/algora_web/components/not_found_component.ex @@ -219,7 +219,7 @@ defmodule AlgoraWeb.Component.NotFoundComponent do

Sorry, the page you're looking for doesn't exist or has been moved.

- + <.link navigate="/" class="home-button"> Go back home - + From 0582eae8c1d88474b22bd71c77e93188f78a1e67 Mon Sep 17 00:00:00 2001 From: zafer Date: Tue, 17 Jun 2025 11:52:27 +0300 Subject: [PATCH 5/5] replace NotFoundComponent with a heex template --- .../components/not_found_component.ex | 243 ------------------ lib/algora_web/controllers/error_html.ex | 17 +- .../controllers/error_html/404.html.heex | 234 +++++++++++++++++ 3 files changed, 235 insertions(+), 259 deletions(-) delete mode 100644 lib/algora_web/components/not_found_component.ex create mode 100644 lib/algora_web/controllers/error_html/404.html.heex diff --git a/lib/algora_web/components/not_found_component.ex b/lib/algora_web/components/not_found_component.ex deleted file mode 100644 index ccb931286..000000000 --- a/lib/algora_web/components/not_found_component.ex +++ /dev/null @@ -1,243 +0,0 @@ -defmodule AlgoraWeb.Component.NotFoundComponent do - @moduledoc false - use AlgoraWeb.Component - - def not_found(assigns) do - ~H""" - - - - - - 404 - Page Not Found - - - -
-
-
-
-
-
-
- -
-
404
-

This page could not be found

-

- Sorry, the page you're looking for doesn't exist or has been moved. -

- <.link navigate="/" class="home-button"> - - - - Go back home - -
- - - """ - end -end diff --git a/lib/algora_web/controllers/error_html.ex b/lib/algora_web/controllers/error_html.ex index 0997ff622..4741651b5 100644 --- a/lib/algora_web/controllers/error_html.ex +++ b/lib/algora_web/controllers/error_html.ex @@ -1,23 +1,8 @@ defmodule AlgoraWeb.ErrorHTML do use AlgoraWeb, :html - alias AlgoraWeb.Component.NotFoundComponent - # If you want to customize your error pages, - # uncomment the embed_templates/1 call below - # and add pages to the error directory: - # - # * lib/algora_web/controllers/error_html/404.html.heex - # * lib/algora_web/controllers/error_html/500.html.heex - # - # embed_templates "error_html/*" + embed_templates "error_html/*" - def render("404.html", assigns) do - NotFoundComponent.not_found(assigns) - end - - # 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 diff --git a/lib/algora_web/controllers/error_html/404.html.heex b/lib/algora_web/controllers/error_html/404.html.heex new file mode 100644 index 000000000..61ae7a0fa --- /dev/null +++ b/lib/algora_web/controllers/error_html/404.html.heex @@ -0,0 +1,234 @@ + + + + + + 404 - Page Not Found + + + +
+
+
+
+
+
+
+ +
+
404
+

This page could not be found

+

+ Sorry, the page you're looking for doesn't exist or has been moved. +

+ <.link navigate="/" class="home-button"> + + + + Go back home + +
+ +