Michael-Liendo · Michael-Liendo · Jan 19, 2024 · Jan 17, 2024 · Jan 17, 2024 · Jan 17, 2024
diff --git a/.typesafe-i18n.json b/.typesafe-i18n.json
@@ -0,0 +1,3 @@
+{
+  "baseLocale": "es"
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "michaelliendo.com",
-	"version": "4.1.1",
+	"version": "5.0.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

diff --git a/src/app.html b/src/app.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div class="text-black dark:text-white" style="display: contents">%sveltekit.body%</div>
-	</body>
+<html lang="%lang%">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div class="text-black dark:text-white" style="display: contents">
+      %sveltekit.body%
+    </div>
+  </body>
 </html>
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -1,7 +1,7 @@
 import { initAcceptLanguageHeaderDetector } from 'typesafe-i18n/detectors';
 
 import { loadAllLocales } from '$i18n/i18n-util.sync';
-import { detectLocale, i18n, isLocale } from '$i18n/i18n-util';
+import { baseLocale, detectLocale, i18n, isLocale } from '$i18n/i18n-util';
 
 import type { Handle, RequestEvent } from '@sveltejs/kit';
 import type { Locales } from '$i18n/i18n-types';
@@ -13,18 +13,8 @@ export const handle: Handle = async ({ event, resolve }) => {
   // read language slug
   const [, lang] = event.url.pathname.split('/');
 
-  // redirect to base locale if no locale slug was found
-  if (!lang) {
-    const locale = getPreferredLocale(event);
-
-    return new Response(null, {
-      status: 302,
-      headers: { Location: `/${locale}` },
-    });
-  }
-
   // if slug is not a locale, use base locale (e.g. api endpoints)
-  const locale = isLocale(lang) ? (lang as Locales) : getPreferredLocale(event);
+  const locale = isLocale(lang) ? (lang as Locales) : baseLocale;
   const LL = L[locale];
 
   // bind locale and translation functions to current request

diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts
@@ -8,12 +8,12 @@ const en = {
       PROJECTS: 'Projects',
     },
     FOOTER: {
-      COPYRIGHT: 'Made with ❤️ by Michael Liendo © {year:number}',
+      COPYRIGHT: 'Made with ❤️ by Michael Liendo © {startYear:number} - {year:number}',
     },
   },
   HOMEPAGE: {
     HI: `Hi I'm {name:string} {surname:string},`,
-    ABOUT: `I'm a Software Developer focused on Svelte and TypeScript with a passion for Web Development. I enjoy working on challenging projects and value collaboration and problem-solving.`,
+    ABOUT: `I'm a <strong>Software Developer</strong> focused on Svelte and TypeScript with a passion for Web Development. I enjoy working on challenging projects, value collaboration and problem-solving.`,
     LATEST_NOTES: 'Latest Notes',
   },
 } satisfies BaseTranslation;

diff --git a/src/i18n/es/index.ts b/src/i18n/es/index.ts
@@ -8,13 +8,13 @@ const es = {
       PROJECTS: 'Proyectos',
     },
     FOOTER: {
-      COPYRIGHT: 'Hecho con ❤️ por Michael Liendo © {year:number}',
+      COPYRIGHT: 'Hecho con ❤️ por Michael Liendo © {startYear:number} - {year:number}',
     },
   },
   HOMEPAGE: {
     HI: 'Hola soy {name:string} {surname:string},',
     ABOUT:
-      'Soy un Desarrollador de Software enfocado en Svelte y TypeScript apasionado por el Desarrollo Web. Disfruto trabajar en proyectos desafiantes y valoro la colaboración y la resolución de problemas.',
+      'Soy un <strong>Desarrollador de Software</strong> enfocado en Svelte y TypeScript apasionado por el Desarrollo Web. Disfruto trabajar en proyectos desafiantes, valoro la colaboración y la resolución de problemas.',
     LATEST_NOTES: 'Últimas notas',
   },
 } satisfies BaseTranslation;

diff --git a/src/i18n/i18n-types.ts b/src/i18n/i18n-types.ts
@@ -3,7 +3,7 @@
 import type { BaseTranslation as BaseTranslationType, LocalizedString, RequiredParams } from 'typesafe-i18n'
 
 export type BaseTranslation = BaseTranslationType
-export type BaseLocale = 'en'
+export type BaseLocale = 'es'
 
 export type Locales =
 	| 'en'
@@ -17,39 +17,40 @@ type RootTranslation = {
 	LAYOUT: {
 		NAV: {
 			/**
-			 * Home
+			 * Inicio
 			 */
 			HOME: string
 			/**
-			 * Notes
+			 * Notas
 			 */
 			NOTES: string
 			/**
-			 * Projects
+			 * Proyectos
 			 */
 			PROJECTS: string
 		}
 		FOOTER: {
 			/**
-			 * Made with ❤️ by Michael Liendo © {year}
+			 * Hecho con ❤️ por Michael Liendo © {startYear} - {year}
+			 * @param {number} startYear
 			 * @param {number} year
 			 */
-			COPYRIGHT: RequiredParams<'year'>
+			COPYRIGHT: RequiredParams<'startYear' | 'year'>
 		}
 	}
 	HOMEPAGE: {
 		/**
-		 * Hi I'm {name} {surname},
+		 * Hola soy {name} {surname},
 		 * @param {string} name
 		 * @param {string} surname
 		 */
 		HI: RequiredParams<'name' | 'surname'>
 		/**
-		 * I'm a Software Developer focused on Svelte and TypeScript with a passion for Web Development. I enjoy working on challenging projects and value collaboration and problem-solving.
+		 * Soy un <strong>Desarrollador de Software</strong> enfocado en Svelte y TypeScript apasionado por el Desarrollo Web. Disfruto trabajar en proyectos desafiantes, valoro la colaboración y la resolución de problemas.
 		 */
 		ABOUT: string
 		/**
-		 * Latest Notes
+		 * Últimas notas
 		 */
 		LATEST_NOTES: string
 	}
@@ -59,36 +60,36 @@ export type TranslationFunctions = {
 	LAYOUT: {
 		NAV: {
 			/**
-			 * Home
+			 * Inicio
 			 */
 			HOME: () => LocalizedString
 			/**
-			 * Notes
+			 * Notas
 			 */
 			NOTES: () => LocalizedString
 			/**
-			 * Projects
+			 * Proyectos
 			 */
 			PROJECTS: () => LocalizedString
 		}
 		FOOTER: {
 			/**
-			 * Made with ❤️ by Michael Liendo © {year}
+			 * Hecho con ❤️ por Michael Liendo © {startYear} - {year}
 			 */
-			COPYRIGHT: (arg: { year: number }) => LocalizedString
+			COPYRIGHT: (arg: { startYear: number, year: number }) => LocalizedString
 		}
 	}
 	HOMEPAGE: {
 		/**
-		 * Hi I'm {name} {surname},
+		 * Hola soy {name} {surname},
 		 */
 		HI: (arg: { name: string, surname: string }) => LocalizedString
 		/**
-		 * I'm a Software Developer focused on Svelte and TypeScript with a passion for Web Development. I enjoy working on challenging projects and value collaboration and problem-solving.
+		 * Soy un <strong>Desarrollador de Software</strong> enfocado en Svelte y TypeScript apasionado por el Desarrollo Web. Disfruto trabajar en proyectos desafiantes, valoro la colaboración y la resolución de problemas.
 		 */
 		ABOUT: () => LocalizedString
 		/**
-		 * Latest Notes
+		 * Últimas notas
 		 */
 		LATEST_NOTES: () => LocalizedString
 	}

diff --git a/src/i18n/i18n-util.ts b/src/i18n/i18n-util.ts
@@ -8,7 +8,7 @@ import { detectLocale as detectLocaleFn } from 'typesafe-i18n/detectors'
 import { initExtendDictionary } from 'typesafe-i18n/utils'
 import type { Formatters, Locales, Translations, TranslationFunctions } from './i18n-types'
 
-export const baseLocale: Locales = 'en'
+export const baseLocale: Locales = 'es'
 
 export const locales: Locales[] = [
 	'en',

diff --git a/src/lib/components/Entry.svelte b/src/lib/components/Entry.svelte
@@ -1,57 +1,73 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import type { MultiSelectEntity } from '$lib/utils/Notion/Notes/types';
-	import Calendar from '~icons/mdi/calendar-month';
+  import { page } from '$app/stores';
+  import { locale } from '$i18n/i18n-svelte';
+  import Calendar from '~icons/mdi/calendar-month';
+  import { baseLocale } from '$i18n/i18n-util';
 
-	export let title = '';
-	export let description = '';
-	export let publishDate: Date;
-	export let tags: MultiSelectEntity[] = [];
-	export let slug = '';
-	export let previewImageUrl: string | null = '';
+  import type { MultiSelectEntity } from '$lib/services/Notion/Notes/notes';
 
-	let formattedDate = new Date(publishDate).toLocaleDateString(`${$page.data.locale}-us`, {
-		month: 'long',
-		day: '2-digit',
-		year: 'numeric'
-	});
+  export let title = '';
+  export let description = '';
+  export let publishDate: Date;
+  export let tags: MultiSelectEntity[] = [];
+  export let slug = '';
+  export let previewImageUrl: string | null = '';
+
+  const baseLocaleUrl = $locale === baseLocale ? '' : `/${$locale}`;
+
+  let formattedDate = new Date(publishDate).toLocaleDateString(
+    `${$page.data.locale}-us`,
+    {
+      month: 'long',
+      day: '2-digit',
+      year: 'numeric',
+    }
+  );
 </script>
 
 <li class="mb-4 md:mb-0 last-of-type:mb-0">
-	<a href="/{$page.params.lang}/notes/{slug}">
-		<figure class="rounded overflow-hidden pb-4 flex justify-center items-center h-[150px]">
-			<img alt={title} src={previewImageUrl} width="350" height="100" />
-		</figure>
-		<header>
-			<h1 class="text-xl py-4 font-extrabold cursor-pointer hover:text-link hover:underline">
-				{title}
-			</h1>
-		</header>
-		<main class="pb-4">
-			<p>{description}</p>
-		</main>
-		<footer class="flex flex-col">
-			<div class="flex mb-2">
-				<span class="flex items-center mr-2">
-					<figure class="mr-2">
-						<Calendar class="text-gray-800 dark:text-white h-4 w-4" />
-					</figure>
-					<time class="text-sm mr-2" datetime={publishDate.toString()}>{formattedDate}</time>
-				</span>
-			</div>
-			<ul class="flex flex-wrap">
-				{#each tags as tag}
-					<li
-						class="text-sm mr-2 mb-2 bg-light-background dark:bg-dark-background rounded py-1 px-2"
-					>
-						<span
-							class="inline-block mr-1 rounded-full h-2 w-2"
-							style="background-color: {tag.color};"
-						/>
-						{tag.name}
-					</li>
-				{/each}
-			</ul>
-		</footer>
-	</a>
+  <a href="{baseLocaleUrl}/notes/{slug}">
+    <figure class="rounded-md mb-10 h-[200px]">
+      <img
+        alt={title}
+        class="rounded-md"
+        src={previewImageUrl}
+        width="350"
+        height="100"
+      />
+    </figure>
+    <header>
+      <h1 class="text-xl font-extrabold hover:text-link hover:underline">
+        {title}
+      </h1>
+    </header>
+    <main class="pb-4">
+      <p>{description}</p>
+    </main>
+    <footer class="flex flex-col">
+      <div class="flex mb-2">
+        <span class="flex items-center mr-2">
+          <figure class="mr-2">
+            <Calendar class="text-gray-800 dark:text-white h-4 w-4" />
+          </figure>
+          <time class="text-sm mr-2" datetime={publishDate.toString()}
+            >{formattedDate}</time
+          >
+        </span>
+      </div>
+      <ul class="flex flex-wrap">
+        {#each tags as tag}
+          <li
+            class="text-sm mr-2 mb-2 bg-light-background dark:bg-dark-background rounded py-1 px-2"
+          >
+            <span
+              class="inline-block mr-1 rounded-full h-2 w-2"
+              style="background-color: {tag.color};"
+            />
+            {tag.name}
+          </li>
+        {/each}
+      </ul>
+    </footer>
+  </a>
 </li>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -1,13 +1,22 @@
 <script lang="ts">
-	import LL from '$i18n/i18n-svelte';
+  import LL from '$i18n/i18n-svelte';
 
-	const currentYear = new Date().getFullYear();
+  const currentYear = new Date().getFullYear();
 </script>
 
-<footer class="w-full px-4 flex items-center justify-center">
-	<div class="h-[70px] flex items-center justify-center">
-		<small>
-			{$LL.LAYOUT.FOOTER.COPYRIGHT({ year: currentYear })}
-		</small>
-	</div>
+<footer class="w-full mt-5 px-4 py-5">
+  <div class=" flex items-center justify-center">
+    <small>
+      {$LL.LAYOUT.FOOTER.COPYRIGHT({ year: currentYear, startYear: 2021 })}
+    </small>
+  </div>
+  <div class="flex justify-center">
+    <small
+      ><a
+        class="underline"
+        href="https://github.com/Michael-Liendo/michaelliendo.com"
+        >Source code</a
+      ></small
+    >
+  </div>
 </footer>