diff --git a/svelte-app/src/components/document/route.svelte b/svelte-app/src/components/document/route.svelte index 3c2e3d34d..e6ef62d83 100644 --- a/svelte-app/src/components/document/route.svelte +++ b/svelte-app/src/components/document/route.svelte @@ -4,6 +4,7 @@ import { page } from '$app/stores'; import scrollTo from '$helpers/scrollTo'; import { t } from '$i18n'; + import { BASE_PAGE_TITLE } from '$lib/consts'; import Content from '$components/document/content/content.svelte'; import ContentWrapper from '$components/layouts/content-wrapper.svelte'; @@ -32,7 +33,7 @@ ) ?.join(', ') + ', ' || ''; $: $page?.url && scrollTo($page.url); - $: pageTitle = `kio.dev${data?.title ? ` | ${data.title}` : ''}`; + $: pageTitle = `${BASE_PAGE_TITLE}${data?.title ? ` | ${data.title}` : ''}`; $: pageDescription = data?.desc ? data.desc.length > 160 ? `${data.desc.slice(0, 160 - 3)}...` diff --git a/svelte-app/src/lib/consts.ts b/svelte-app/src/lib/consts.ts index 764d84dfa..3e5de38ed 100644 --- a/svelte-app/src/lib/consts.ts +++ b/svelte-app/src/lib/consts.ts @@ -8,6 +8,8 @@ export const VALID_DOC_TYPES = ['post', 'project', 'about', 'config'] as const; export const LOCAL_SETTINGS_KEY = 'kio-dev-settings'; +export const BASE_PAGE_TITLE = 'kio.dev'; + interface AppRoute { name: string; path: string; diff --git a/svelte-app/src/lib/helpers/i18n.ts b/svelte-app/src/lib/helpers/i18n.ts index b24f05953..d1983e1f6 100644 --- a/svelte-app/src/lib/helpers/i18n.ts +++ b/svelte-app/src/lib/helpers/i18n.ts @@ -86,28 +86,6 @@ const translate = readable<(key: string, params?: Record) => st } ); -// const _linkTo = (path: string, lang?: string): string => { -// if (path.match(/(?:^(http|https|ftp|ssh)|^[^/].*\.([a-z]{2,6})).*?$/gim)) { -// return path; -// } - -// lang = lang || get(currentLang); - -// if ( -// !lang || -// path.startsWith(`/${lang}/`) || -// (lang === 'en' && !get(page)?.params?.lang) -// ) { -// return path; -// } - -// APP_LANGS.forEach((l) => path.startsWith(`/${l}/`) && (path = path.slice(3))); - -// return APP_LANGS.includes(lang.toLowerCase() as (typeof APP_LANGS)[number]) -// ? `/${lang}${path.startsWith('/') ? path : `/${path}`}` -// : path; -// }; - const addSearchParams = (path: string, params?: URLSearchParams): string => { const search = params?.toString(); @@ -157,13 +135,6 @@ interface LinkTo { (pathname: string, params: URLSearchParams, lang?: string): string; } -// const linkTo = readable<(path: string, lang?: string) => string>(_linkTo, (set) => { -// const unsubscribe = currentLang.subscribe(() => { -// set(_linkTo); -// }); -// return unsubscribe; -// }); - const linkTo = readable(_linkTo, (set) => currentLang.subscribe(() => set(_linkTo)) ); diff --git a/svelte-app/src/lib/helpers/navigation.ts b/svelte-app/src/lib/helpers/navigation.ts index ed81fbc4f..a10535cf8 100644 --- a/svelte-app/src/lib/helpers/navigation.ts +++ b/svelte-app/src/lib/helpers/navigation.ts @@ -1,7 +1,8 @@ -import { get } from 'svelte/store'; +import { derived, get } from 'svelte/store'; -import { isLocalized } from '$i18n'; -import { ROUTE_ORDER } from '$lib/consts'; +import { page } from '$app/stores'; +import { currentLang, isLocalized, t } from '$i18n'; +import { APP_ROUTES, BASE_PAGE_TITLE, ROUTE_ORDER } from '$lib/consts'; let prevPath: string; @@ -13,6 +14,17 @@ ROUTE_ORDER.forEach((route, index) => { }); }); +export const pageTitle = derived([currentLang, page], (_v) => { + const basePathname = get(page)?.url?.pathname ?? '/', + pathname = `/${ + (get(isLocalized) ? basePathname.slice(3) : basePathname.slice(1)).split('/')[0] + }`; + + const route = APP_ROUTES.find((r) => r.path === pathname)?.name; + + return route?.length ? `${BASE_PAGE_TITLE} | ${get(t)(route)}` : BASE_PAGE_TITLE; +}); + export const onNav = (path: string): 'forward' | 'backward' => { if (get(isLocalized) === true && path) { path = `/${path.slice(3)}`; diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte index 4144ecdd5..a9a1c06f4 100644 --- a/svelte-app/src/routes/[[lang=lang]]/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/+page.svelte @@ -1,5 +1,6 @@ - {pageTitle} - + {$pageTitle} + - + - + diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte index 0bb83cf05..bbfa2622a 100644 --- a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte @@ -1,7 +1,8 @@ - {pageTitle} - + {$pageTitle} + - + diff --git a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte index f04697199..1eaf732a9 100644 --- a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte @@ -2,6 +2,7 @@ import { browser } from '$app/environment'; import { invalidate } from '$app/navigation'; import { page } from '$app/stores'; + import { pageTitle } from '$helpers/navigation'; import { t } from '$i18n'; import Divider from '$components/divider.svelte'; @@ -13,24 +14,23 @@ export let data; - $: pageTitle = `kio.dev | ${$t('Meta + Contact')}`; $: description = $t('A peek into my current adventures in tech and beyond'); $: browser && !data.about && invalidate($page.url.pathname); - {pageTitle} - + {$pageTitle} + - + - + diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte index d9c744705..10ba6521c 100644 --- a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte @@ -1,5 +1,6 @@ - {pageTitle} - + {$pageTitle} + - + - +