Skip to content

Commit

Permalink
fix: add 404 error page and error handler
Browse files Browse the repository at this point in the history
  • Loading branch information
patrick-zippenfenig committed Nov 28, 2024
1 parent ddbf01d commit b116008
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 0 deletions.
43 changes: 43 additions & 0 deletions src/routes/+error.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<script>
import { page } from '$app/stores';
</script>

<svelte:head>
<title>500 Error | Open-Meteo.com</title>
<link rel="canonical" href="https://open-meteo.com/en/about" />
</svelte:head>

<div
class="px-4 py-5 text-center text-white"
style="
background-image: url('/images/features_background.webp');
background-size: cover;
background-position: center;
height: 500px;
"
>
<svg
style="filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));"
xmlns="http://www.w3.org/2000/svg"
width="96"
height="96"
fill="currentColor"
class="bi bi-cloud-rain mb-4"
viewBox="0 0 16 16"
>
<path
d="M4.158 12.025a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 0 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317zm3 0a.5.5 0 0 1 .316.633l-1 3a.5.5 0 0 1-.948-.316l1-3a.5.5 0 0 1 .632-.317zm3 0a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 0 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317zm3 0a.5.5 0 0 1 .316.633l-1 3a.5.5 0 1 1-.948-.316l1-3a.5.5 0 0 1 .632-.317zm.247-6.998a5.001 5.001 0 0 0-9.499-1.004A3.5 3.5 0 1 0 3.5 11H13a3 3 0 0 0 .405-5.973zM8.5 2a4 4 0 0 1 3.976 3.555.5.5 0 0 0 .5.445H13a2 2 0 0 1 0 4H3.5a2.5 2.5 0 1 1 .605-4.926.5.5 0 0 0 .596-.329A4.002 4.002 0 0 1 8.5 2z"
/>
</svg>
<h1 class="display-5" style="text-shadow: 3px 3px 2px rgba(0, 0, 0, .7);">Error {$page.status}</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4" style="text-shadow: 3px 3px 2px rgba(0, 0, 0, .7);">
Sorry, there was an error: {$page.error?.message}
</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<a href="/" class="btn button btn-primary btn-lg px-4 me-sm-3">Home</a
>
<a href="/en/docs" class="btn btn-outline-light btn-lg px-4">API Documentation</a>
</div>
</div>
</div>
39 changes: 39 additions & 0 deletions src/routes/404/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<svelte:head>
<title>404 Error | Open-Meteo.com</title>
<link rel="canonical" href="https://open-meteo.com/en/about" />
</svelte:head>

<div
class="px-4 py-5 text-center text-white"
style="
background-image: url('/images/features_background.webp');
background-size: cover;
background-position: center;
height: 500px;
"
>
<svg
style="filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));"
xmlns="http://www.w3.org/2000/svg"
width="96"
height="96"
fill="currentColor"
class="bi bi-cloud-rain mb-4"
viewBox="0 0 16 16"
>
<path
d="M4.158 12.025a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 0 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317zm3 0a.5.5 0 0 1 .316.633l-1 3a.5.5 0 0 1-.948-.316l1-3a.5.5 0 0 1 .632-.317zm3 0a.5.5 0 0 1 .316.633l-.5 1.5a.5.5 0 0 1-.948-.316l.5-1.5a.5.5 0 0 1 .632-.317zm3 0a.5.5 0 0 1 .316.633l-1 3a.5.5 0 1 1-.948-.316l1-3a.5.5 0 0 1 .632-.317zm.247-6.998a5.001 5.001 0 0 0-9.499-1.004A3.5 3.5 0 1 0 3.5 11H13a3 3 0 0 0 .405-5.973zM8.5 2a4 4 0 0 1 3.976 3.555.5.5 0 0 0 .5.445H13a2 2 0 0 1 0 4H3.5a2.5 2.5 0 1 1 .605-4.926.5.5 0 0 0 .596-.329A4.002 4.002 0 0 1 8.5 2z"
/>
</svg>
<h1 class="display-5" style="text-shadow: 3px 3px 2px rgba(0, 0, 0, .7);">404: Page Not Found</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4" style="text-shadow: 3px 3px 2px rgba(0, 0, 0, .7);">
Sorry, the page you are looking for does not exist.
</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<a href="/" class="btn button btn-primary btn-lg px-4 me-sm-3">Home</a
>
<a href="/en/docs" class="btn btn-outline-light btn-lg px-4">API Documentation</a>
</div>
</div>
</div>

0 comments on commit b116008

Please sign in to comment.