use homepage as default page

This commit is contained in:
vcoppe
2024-07-08 15:46:00 +02:00
parent b38ff26a64
commit 5ed0e75427
10 changed files with 273 additions and 283 deletions

View File

@@ -2,7 +2,7 @@
import { Button } from '$lib/components/ui/button';
import LanguageSelect from '$lib/components/LanguageSelect.svelte';
import Logo from '$lib/components/Logo.svelte';
import { AtSign, BookOpenText, Heart, Info, Map } from 'lucide-svelte';
import { AtSign, BookOpenText, Heart, Home, Map } from 'lucide-svelte';
import { _ } from 'svelte-i18n';
</script>
@@ -24,14 +24,14 @@
<div class="grow max-w-2xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
<div class="flex flex-col items-start gap-1">
<span class="font-semibold">{$_('homepage.website')}</span>
<Button variant="link" class="h-6 px-0 text-muted-foreground" href="./about">
<Home size="16" class="mr-1" />
{$_('homepage.home')}
</Button>
<Button variant="link" class="h-6 px-0 text-muted-foreground" href="./">
<Map size="16" class="mr-1" />
{$_('homepage.app')}
</Button>
<Button variant="link" class="h-6 px-0 text-muted-foreground" href="./about">
<Info size="16" class="mr-1" />
{$_('menu.about')}
</Button>
<Button variant="link" class="h-6 px-0 text-muted-foreground" href="./documentation">
<BookOpenText size="16" class="mr-1" />
{$_('homepage.documentation')}

View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import * as Select from '$lib/components/ui/select';
import { languages } from '$lib/languages';
import { getURLForLanguage, languages } from '$lib/languages';
import { Languages } from 'lucide-svelte';
import { _, locale } from 'svelte-i18n';
@@ -16,21 +16,6 @@
label: languages[$locale]
};
}
function getURLForLanguage(lang?: string): string {
let currentPath = window.location.pathname;
let currentPathArray = currentPath.split('/');
if (currentPathArray.length > 1 && languages.hasOwnProperty(currentPathArray[1])) {
currentPathArray.splice(1, 1);
}
if (lang !== undefined && lang !== 'en') {
currentPathArray.splice(1, 0, lang);
}
return currentPathArray.join('/');
}
</script>
<Select.Root bind:selected onSelectedChange={(s) => goto(getURLForLanguage(s?.value))}>

View File

@@ -72,9 +72,7 @@
import Export from '$lib/components/Export.svelte';
import { mode, setMode, systemPrefersMode } from 'mode-watcher';
import { _, locale } from 'svelte-i18n';
import { languages } from '$lib/languages';
import { goto } from '$app/navigation';
import { base } from '$app/paths';
import { getURLForLanguage, languages } from '$lib/languages';
const {
distanceUnits,
@@ -125,8 +123,10 @@
<div
class="w-fit flex flex-row items-center justify-center p-1 bg-background rounded-b-md md:rounded-md pointer-events-auto shadow-md"
>
<Logo class="h-5 mt-0.5 mx-2 md:hidden" iconOnly={true} />
<Logo class="h-5 mt-0.5 mx-2 hidden md:block" />
<a href="./" target="_blank">
<Logo class="h-5 mt-0.5 mx-2 md:hidden" iconOnly={true} />
<Logo class="h-5 mt-0.5 mx-2 hidden md:block" />
</a>
<Menubar.Root class="border-none h-fit p-0">
<Menubar.Menu>
<Menubar.Trigger>
@@ -362,16 +362,11 @@
{$_('menu.language')}
</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.RadioGroup
bind:value={$locale}
onValueChange={(value) => {
if (value) {
goto(base + '/' + (value === 'en' ? '' : value));
}
}}
>
<Menubar.RadioGroup bind:value={$locale}>
{#each Object.entries(languages) as [code, name]}
<Menubar.RadioItem value={code}>{name}</Menubar.RadioItem>
<a href={getURLForLanguage(code)}>
<Menubar.RadioItem value={code}>{name}</Menubar.RadioItem>
</a>
{/each}
</Menubar.RadioGroup>
</Menubar.SubContent>
@@ -420,20 +415,20 @@
<div class="h-fit flex flex-row items-center ml-1 gap-1">
<Button
variant="ghost"
href="./about"
href="./documentation"
target="_blank"
class="cursor-default h-fit rounded-sm"
class="cursor-default h-fit rounded-sm px-3 py-0.5"
>
<Info size="18" class="md:hidden" />
<span class="hidden md:block">
{$_('menu.about')}
{$_('menu.help')}
</span>
</Button>
<Button
variant="ghost"
href="https://ko-fi.com/gpxstudio"
target="_blank"
class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support"
class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support px-3 py-0.5"
>
<HeartHandshake size="18" class="md:hidden" />
<span class="hidden md:flex flex-row items-center">
@@ -574,10 +569,4 @@
@apply px-3;
@apply py-0.5;
}
div :global(a) {
@apply hover:bg-accent;
@apply px-3;
@apply py-0.5;
}
</style>

View File

@@ -2,7 +2,7 @@
import Logo from '$lib/components/Logo.svelte';
import { Button } from '$lib/components/ui/button';
import ModeSwitch from '$lib/components/ModeSwitch.svelte';
import { BookOpenText, Info, Map } from 'lucide-svelte';
import { BookOpenText, Home, Map } from 'lucide-svelte';
import { _ } from 'svelte-i18n';
</script>
@@ -13,13 +13,13 @@
<Logo class="h-7 hidden sm:block" />
</a>
<Button variant="link" class="text-base px-0" href="./">
<Home size="18" class="mr-1.5" />
{$_('homepage.home')}
</Button>
<Button variant="link" class="text-base px-0" href="./app">
<Map size="18" class="mr-1.5" />
{$_('homepage.app')}
</Button>
<Button variant="link" class="text-base px-0" href="./about">
<Info size="18" class="mr-1.5" />
{$_('menu.about')}
</Button>
<Button variant="link" class="text-base px-0" href="./documentation">
<BookOpenText size="18" class="mr-1.5" />
{$_('homepage.documentation')}

View File

@@ -1,3 +1,18 @@
export const languages: Record<string, string> = {
'en': 'English',
};
};
export function getURLForLanguage(lang?: string): string {
let currentPath = window.location.pathname;
let currentPathArray = currentPath.split('/');
if (currentPathArray.length > 1 && languages.hasOwnProperty(currentPathArray[1])) {
currentPathArray.splice(1, 1);
}
if (lang !== undefined && lang !== 'en') {
currentPathArray.splice(1, 0, lang);
}
return currentPathArray.join('/');
}