steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

404 page

Browse Source
This commit is contained in:
vcoppe
2024-07-25 23:32:59 +02:00
parent a7f6e62242
commit e15b2ea76e
5 changed files with 68 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
website/src/locales/en.json
View File

@@ -430,5 +430,6 @@
"code": "Integration code"
},
"webgl2_required": "WebGL 2 is required to display the map.",
"enable_webgl2": "Learn how to enable WebGL 2 in your browser"
"enable_webgl2": "Learn how to enable WebGL 2 in your browser",
"page_not_found": "page not found"
}

33
website/src/routes/+layout.svelte
View File

@@ -1,5 +1,36 @@
<script lang="ts">
import '../app.pcss';
import { ModeWatcher } from 'mode-watcher';
import { isLoading, locale, _ } from 'svelte-i18n';
import { page } from '$app/stores';
import Head from '$lib/components/Head.svelte';
import Nav from '$lib/components/Nav.svelte';
import Footer from '$lib/components/Footer.svelte';
$: if ($page.params.language === '' && $locale !== 'en') {
locale.set('en');
} else if ($page.params.language && $locale !== $page.params.language) {
locale.set($page.params.language.replace('/', ''));
}
const appRoutes = ['/[...language]/app', '/[...language]/embed'];
$: showNavAndFooter = $page.route.id === null || !appRoutes.includes($page.route.id);
</script>
<slot />
<Head />
<ModeWatcher />
<div class="flex flex-col min-h-screen">
{#if !$isLoading}
{#if showNavAndFooter}
<Nav />
{/if}
<main class="grow flex flex-col">
<slot />
</main>
{#if showNavAndFooter}
<Footer />
{/if}
{/if}
</div>

33
website/src/routes/404/+page.svelte Normal file
View File

@@ -0,0 +1,33 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import Logo from '$lib/components/Logo.svelte';
import { getURLForLanguage } from '$lib/utils';
import { Home, Map, BookOpenText } from 'lucide-svelte';
import { _, locale } from 'svelte-i18n';
</script>
<div class="grow px-12 my-12 flex flex-col items-center justify-center gap-6">
<p class="text-7xl font-black">404</p>
<p class="text-xl -mt-6">{$_('page_not_found')}</p>
<Logo class="h-40 my-3 animate-spin" style="animation-duration: 20000ms" iconOnly={true} />
<div class="w-full flex flex-row flex-wrap gap-3 justify-center">
<Button href={getURLForLanguage($locale, '/')} class="text-base w-1/4 min-w-fit rounded-full">
<Home size="18" class="mr-1.5" />
{$_('homepage.home')}
</Button>
<Button
href={getURLForLanguage($locale, '/app')}
class="text-base w-1/4 min-w-fit rounded-full"
>
<Map size="18" class="mr-1.5" />
{$_('homepage.app')}
</Button>
<Button
href={getURLForLanguage($locale, '/help')}
class="text-base w-1/4 min-w-fit rounded-full"
>
<BookOpenText size="18" class="mr-1.5" />
<span>{$_('menu.help')}</span>
</Button>
</div>
</div>

33
website/src/routes/[...language]/+layout.svelte
View File

@@ -1,33 +0,0 @@
<script lang="ts">
import { ModeWatcher } from 'mode-watcher';
import { isLoading, locale, _ } from 'svelte-i18n';
import { page } from '$app/stores';
import Head from '$lib/components/Head.svelte';
import Nav from '$lib/components/Nav.svelte';
import Footer from '$lib/components/Footer.svelte';
$: if ($page.params.language === '' && $locale !== 'en') {
locale.set('en');
} else if ($page.params.language && $locale !== $page.params.language) {
locale.set($page.params.language.replace('/', ''));
}
const appRoutes = ['/[...language]/app', '/[...language]/embed'];
$: showNavAndFooter = $page.route.id === null || !appRoutes.includes($page.route.id);
</script>
<Head />
<ModeWatcher />
{#if !$isLoading}
{#if showNavAndFooter}
<Nav />
{/if}
<main>
<slot />
</main>
{#if showNavAndFooter}
<Footer />
{/if}
{/if}

2
website/svelte.config.js
View File

@@ -15,7 +15,7 @@ const config = {
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: 'index.html',
fallback: '404.html',
precompress: false,
strict: true
}),