rework links

This commit is contained in:
vcoppe
2024-07-08 23:22:37 +02:00
parent ad7ff5ddba
commit 04447f4034
7 changed files with 37 additions and 39 deletions

View File

@@ -28,7 +28,7 @@
<Button
variant="link"
class="h-6 px-0 text-muted-foreground"
href={getURLForLanguage('/[...language]', $locale)}
href={getURLForLanguage($locale, '/')}
>
<Home size="16" class="mr-1" />
{$_('homepage.home')}
@@ -36,7 +36,7 @@
<Button
variant="link"
class="h-6 px-0 text-muted-foreground"
href={getURLForLanguage('/[...language]/app', $locale)}
href={getURLForLanguage($locale, '/app')}
>
<Map size="16" class="mr-1" />
{$_('homepage.app')}
@@ -44,7 +44,7 @@
<Button
variant="link"
class="h-6 px-0 text-muted-foreground"
href={getURLForLanguage('/[...language]/help', $locale)}
href={getURLForLanguage($locale, '/help')}
>
<BookOpenText size="16" class="mr-1" />
{$_('menu.help')}

View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { page } from '$app/stores';
import * as Select from '$lib/components/ui/select';
import { languages } from '$lib/languages';
import { getURLForLanguage } from '$lib/utils';
@@ -26,7 +25,7 @@
</Select.Trigger>
<Select.Content>
{#each Object.entries(languages) as [lang, label]}
<a href={getURLForLanguage($page.route.id, lang)}>
<a href={getURLForLanguage(lang)}>
<Select.Item value={lang}>{label}</Select.Item>
</a>
{/each}
@@ -36,7 +35,7 @@
<!-- hidden links for svelte crawling -->
<div class="hidden">
{#each Object.entries(languages) as [lang, label]}
<a href={getURLForLanguage($page.route.id, lang)}>
<a href={getURLForLanguage(lang)}>
{label}
</a>
{/each}

View File

@@ -73,7 +73,6 @@
import { mode, setMode, systemPrefersMode } from 'mode-watcher';
import { _, locale } from 'svelte-i18n';
import { languages } from '$lib/languages';
import { page } from '$app/stores';
import { getURLForLanguage } from '$lib/utils';
const {
@@ -125,7 +124,7 @@
<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"
>
<a href={getURLForLanguage('/[...language]', $locale)} target="_blank">
<a href={getURLForLanguage($locale, '/')} 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>
@@ -366,7 +365,7 @@
<Menubar.SubContent>
<Menubar.RadioGroup bind:value={$locale}>
{#each Object.entries(languages) as [lang, label]}
<a href={getURLForLanguage($page.route.id, lang)}>
<a href={getURLForLanguage(lang)}>
<Menubar.RadioItem value={lang}>{label}</Menubar.RadioItem>
</a>
{/each}
@@ -417,7 +416,7 @@
<div class="h-fit flex flex-row items-center ml-1 gap-1">
<Button
variant="ghost"
href={getURLForLanguage('/[...language]/help', $locale)}
href={getURLForLanguage($locale, '/help')}
target="_blank"
class="cursor-default h-fit rounded-sm px-3 py-0.5"
>

View File

@@ -9,31 +9,19 @@
<nav class="w-full sticky top-0 bg-background z-10">
<div class="mx-6 py-2 flex flex-row items-center border-b gap-4 md:gap-8">
<a href={getURLForLanguage('/[...language]', $locale)} class="shrink-0 translate-y-0.5">
<a href={getURLForLanguage($locale, '/')} class="shrink-0 translate-y-0.5">
<Logo class="h-8 sm:hidden" iconOnly={true} />
<Logo class="h-8 hidden sm:block" />
</a>
<Button
variant="link"
class="text-base px-0"
href={getURLForLanguage('/[...language]', $locale)}
>
<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/')}>
<Home size="18" class="mr-1.5" />
{$_('homepage.home')}
</Button>
<Button
variant="link"
class="text-base px-0"
href={getURLForLanguage('/[...language]/app', $locale)}
>
<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/app')}>
<Map size="18" class="mr-1.5" />
{$_('homepage.app')}
</Button>
<Button
variant="link"
class="text-base px-0"
href={getURLForLanguage('/[...language]/help', $locale)}
>
<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/help')}>
<BookOpenText size="18" class="mr-1.5" />
{$_('menu.help')}
</Button>

View File

@@ -5,6 +5,8 @@ import type { TransitionConfig } from "svelte/transition";
import { get } from "svelte/store";
import { map } from "./stores";
import { base } from "$app/paths";
import { browser } from "$app/environment";
import { languages } from "$lib/languages";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
@@ -92,16 +94,26 @@ export function setCrosshairCursor() {
setCursor('crosshair');
}
export function getURLForLanguage(route: string | null, lang: string | null | undefined): string {
if (route === null) {
return base + '/';
export function getURLForLanguage(lang: string | null | undefined, path?: string): string {
let newPath = path ?? (browser ? window.location.pathname : '');
let languageInPath = newPath.split('/')[1];
if (!languages.hasOwnProperty(languageInPath)) {
languageInPath = 'en';
}
let url = route.replace('[...language]', (lang === null || lang === undefined) ? 'en' : lang).replace('/en', '');
if (url === '') {
return base + '/';
if (languageInPath === 'en') {
if (lang === 'en') {
return `${base}${newPath}`;
} else {
return `${base}/${lang}${newPath}`;
}
} else {
return base + url;
if (lang === 'en') {
newPath = newPath.replace(`/${languageInPath}`, '');
return newPath === '' ? `${base}/` : `${base}${newPath}`;
} else {
newPath = newPath.replace(`/${languageInPath}`, `/${lang}`);
return `${base}${newPath}`;
}
}
}

View File

@@ -46,17 +46,17 @@
{$_('metadata.description')}
</div>
<div class="w-full flex flex-row justify-center gap-3">
<Button href={getURLForLanguage('/[...language]/app', $locale)} class="w-1/3 min-w-fit">
<Button href={getURLForLanguage($locale, '/app')} class="w-1/3 min-w-fit">
<Map size="18" class="mr-1.5" />
{$_('homepage.app')}
</Button>
<Button
variant="secondary"
href={getURLForLanguage('/[...language]/help', $locale)}
href={getURLForLanguage($locale, '/help')}
class="w-1/3 min-w-fit"
>
<BookOpenText size="18" class="mr-1.5" />
<span>{$_('homepage.help')}</span>
<span>{$_('menu.help')}</span>
</Button>
</div>
</div>

View File

@@ -17,7 +17,7 @@
{#each Object.keys(guides) as guide}
<Button
variant="link"
href={getURLForLanguage(`/[...language]/help/${guide}`, $locale)}
href={getURLForLanguage($locale, `/help/${guide}`)}
class="h-6 p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start"
>
<DocsLoader path={`${guide}.svx`} titleOnly={true} />
@@ -25,7 +25,7 @@
{#each guides[guide] as subGuide}
<Button
variant="link"
href={getURLForLanguage(`/[...language]/help/${guide}/${subGuide}`, $locale)}
href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
class="h-6 p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start ml-3"
>
<DocsLoader path={`${guide}/${subGuide}.svx`} titleOnly={true} />