fix: Use consts for meta page titles

kiosion · Oct 2, 2023 · 6bf56eb · 6bf56eb
1 parent 26565b7
commit 6bf56eb
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 54 deletions.
diff --git 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
@@ -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
@@ -86,28 +86,6 @@ const translate = readable<(key: string, params?: Record<string, unknown>) => 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>(_linkTo, (set) =>
   currentLang.subscribe(() => set(_linkTo))
 );

diff --git 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
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
+  import { pageTitle } from '$helpers/navigation';
   import { linkTo, t } from '$i18n';
 
   import ArrowButton from '$components/controls/arrow-button.svelte';
@@ -11,23 +12,22 @@
 
   export let data;
 
-  $: pageTitle = `kio.dev | ${$t('Home')}`;
   $: description = $t('A bit about me, my work, and what I do');
 </script>
 
 <svelte:head>
-  <title>{pageTitle}</title>
-  <meta itemprop="name" content={pageTitle} />
+  <title>{$pageTitle}</title>
+  <meta itemprop="name" content={$pageTitle} />
   <meta itemprop="description" content={description} />
   <meta name="description" content={description} />
   <meta name="keywords" content="about, index, homepage, home, kio.dev, kio, kiosion" />
   <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content={$page.url.href} />
-  <meta property="og:title" content={pageTitle} />
+  <meta property="og:title" content={$pageTitle} />
   <meta property="og:description" content={description} />
   <meta property="twitter:url" content={$page.url.href} />
-  <meta property="twitter:title" content={pageTitle} />
+  <meta property="twitter:title" content={$pageTitle} />
   <meta property="twitter:description" content={description} />
 </svelte:head>
 

diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { sortDocumentsByYear } from '$lib/helpers/date';
-  import { t } from '$lib/helpers/i18n';
+  import { sortDocumentsByYear } from '$helpers/date';
+  import { t } from '$helpers/i18n';
+  import { pageTitle } from '$helpers/navigation';
 
   import EmptyContent from '$components/empty-content.svelte';
   import ContentWrapper from '$components/layouts/content-wrapper.svelte';
@@ -12,20 +13,19 @@
   const sortedPosts = data.posts?.length ? sortDocumentsByYear(data.posts) : [];
 
   $: ({ posts } = data);
-  $: pageTitle = `kio.dev | ${$t('Blog')}`;
   $: description = $t('Thoughts about tech, design, and development');
 </script>
 
 <svelte:head>
-  <title>{pageTitle}</title>
-  <meta itemprop="name" content={pageTitle} />
+  <title>{$pageTitle}</title>
+  <meta itemprop="name" content={$pageTitle} />
   <meta itemprop="description" content={description} />
   <meta name="description" content={description} />
   <meta name="keywords" content="blog, posts, blog posts, kio.dev, kio, kiosion" />
   <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content={$page?.url?.href} />
-  <meta property="og:title" content={pageTitle} />
+  <meta property="og:title" content={$pageTitle} />
   <meta property="og:description" content={description} />
   <meta property="twitter:url" content={$page?.url?.href} />
   <meta property="twitter:title" content="kio.dev | blog" />

diff --git 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);
 </script>
 
 <svelte:head>
-  <title>{pageTitle}</title>
-  <meta itemprop="name" content={pageTitle} />
+  <title>{$pageTitle}</title>
+  <meta itemprop="name" content={$pageTitle} />
   <meta itemprop="description" content={description} />
   <meta name="description" content={description} />
   <meta name="keywords" content="About, kio.dev, kio, kiosion" />
   <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content={$page.url.href} />
-  <meta property="og:title" content={pageTitle} />
+  <meta property="og:title" content={$pageTitle} />
   <meta property="og:description" content={description} />
   <meta property="twitter:url" content={$page.url.href} />
-  <meta property="twitter:title" content={pageTitle} />
+  <meta property="twitter:title" content={$pageTitle} />
   <meta property="twitter:description" content={description} />
 </svelte:head>
 

diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
+  import { pageTitle } from '$helpers/navigation';
   import { t } from '$i18n';
   import { sortDocumentsByYear } from '$lib/helpers/date';
 
@@ -12,26 +13,25 @@
 
   const sortedProjects = data.projects?.length ? sortDocumentsByYear(data.projects) : [];
 
-  $: pageTitle = `kio.dev | ${$t('My work')}`;
   $: description = $t(
     'A collection of my work, open-source contributions, and personal projects'
   );
   $: ({ about, projects } = data);
 </script>
 
 <svelte:head>
-  <title>{pageTitle}</title>
-  <meta itemprop="name" content={pageTitle} />
+  <title>{$pageTitle}</title>
+  <meta itemprop="name" content={$pageTitle} />
   <meta itemprop="description" content={description} />
   <meta name="description" content={description} />
   <meta name="keywords" content="work, experience, projects, kio.dev, kio, kiosion" />
   <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content={$page?.url?.href} />
-  <meta property="og:title" content={pageTitle} />
+  <meta property="og:title" content={$pageTitle} />
   <meta property="og:description" content={description} />
   <meta property="twitter:url" content={$page?.url?.href} />
-  <meta property="twitter:title" content={pageTitle} />
+  <meta property="twitter:title" content={$pageTitle} />
   <meta property="twitter:description" content={description} />
 </svelte:head>