Skip to content

feat: add 404 page #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: add 404 page #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2079e26
feat: add page
pedrofp4444 Sep 23, 2025
abf68c4
fix: gitignore and image rendering
pedrofp4444 Sep 28, 2025
c6eac7c
chore: add back navigation
pedrofp4444 Sep 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@ erl_crash.dump
# Ignore package tarball (built via "mix hex.build").
katana-*.tar

# Ignore assets that are produced by build tools.
# Ignore assets that are produced by build tools, taking into consideration our images.
/priv/static/*
!/priv/static/images/

# Ignore digested assets cache.
/priv/static/cache_manifest.json
Expand Down
2 changes: 1 addition & 1 deletion config/dev.exs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ config :katana, KatanaWeb.Endpoint,
http: [ip: {127, 0, 0, 1}, port: 4000],
check_origin: false,
code_reloader: true,
debug_errors: true,
debug_errors: false,
secret_key_base: "Yz7S7zILG5VpjihK8U0LZIcD0wqwDApDxbVm2/rRIevSMEnF/1HLOjeon/WjGMMh",
watchers: [vite: {PhoenixVite.Npm, :run, [:vite, ~w(dev)]}],
static_url: [host: "localhost", port: 5173]
Expand Down
2 changes: 2 additions & 0 deletions lib/katana_web.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,8 @@ defmodule KatanaWeb do
Icon
}

import KatanaWeb.Helpers.UrlHelpers

alias Phoenix.LiveView.JS

# Routes generation with the ~p sigil
Expand Down
2 changes: 1 addition & 1 deletion lib/katana_web/controllers/error_html.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ defmodule KatanaWeb.ErrorHTML do
# * lib/katana_web/controllers/error_html/404.html.heex
# * lib/katana_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
Expand Down
54 changes: 54 additions & 0 deletions lib/katana_web/controllers/error_html/404.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content={get_csrf_token()} />
<.live_title default="Page Not Found" prefix="Katana · ">
{assigns[:page_title]}
</.live_title>
<LiveVue.Reload.vite_assets assets={["/js/app.js", "/css/app.css"]}>
<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>
</LiveVue.Reload.vite_assets>
</head>
<body class="bg-white">
<div class="min-h-screen flex flex-col items-center justify-center bg-white px-6 text-center">
<div class="mb-6">
<img src={~p"/images/logo.svg"} class="w-[90px] h-[90px]" alt="CoderDojo Braga's Logo" />
</div>

<h1 class="text-5xl font-bold tracking-tight text-slate-800">404</h1>
<p class="mt-3 text-lg text-slate-600">
Oops! A página que procuras não existe.
</p>
<p class="mt-1 text-sm text-slate-500">
O link pode estar desatualizado ou a página foi movida.
</p>

<div class="mt-8 flex flex-col sm:flex-row gap-4">
<a
href="#"
onclick="if (document.referrer !== '') { window.history.back(); } else { window.location.href = '/'; } return false;"
class="no-underline"
>
<.vue v-component="Button">
Voltar à página anterior
</.vue>
</a>
</div>

<div class="mt-6 text-xs text-slate-400">
<span>URL:</span>
<code class="block break-all mt-1 bg-slate-100 px-2 py-1 rounded">
{full_url(@conn)}
</code>
</div>

<footer class="mt-10 text-xs text-slate-400">
© {Date.utc_today().year} - CoderDojo Braga
</footer>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions lib/katana_web/helpers/url_helpers.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
defmodule KatanaWeb.Helpers.UrlHelpers do
@doc """
Rebuilds the full URL string based in the information provided by the Plug.conn
"""

def full_url(conn) do
scheme = Atom.to_string(conn.scheme)
host = conn.host

port =
case {conn.scheme, conn.port} do
{:http, 80} -> ""
{:https, 443} -> ""
_ -> ":#{conn.port}"
end

path =
(conn.script_name ++ conn.path_info)
|> Enum.join("/")
|> String.replace(~r{/+}, "/")

query =
case conn.query_string do
"" -> ""
qs -> "?" <> qs
end

"#{scheme}://#{host}#{port}/#{path}#{query}"
end
end
1 change: 1 addition & 0 deletions priv/static/images/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.