From 12a331593cde67606a67eba54315426e87150e1c Mon Sep 17 00:00:00 2001
From: Michael Liendo <michael.m.liendo.r@gmail.com>
Date: Fri, 19 Jan 2024 01:19:57 -0400
Subject: [PATCH] chore: optimization (#69)

* Update header navigation links

* Update dark mode button title

* Refactor Header component styles and add dark mode support

* Update image dimensions in Entry and +page components

* Add lazy loading to avatar image

* Add lazy loading for images

* Update package.json version to 5.0.1
---
 package.json                          |  2 +-
 src/lib/components/Entry.svelte       |  4 ++--
 src/lib/components/Header.svelte      | 25 +++++++++++++++----------
 src/routes/[[lang=lang]]/+page.svelte |  8 +++++++-
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 1a367c7..a6bcae8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "michaelliendo.com",
-	"version": "5.0.0",
+	"version": "5.0.1",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
diff --git a/src/lib/components/Entry.svelte b/src/lib/components/Entry.svelte
index 90f2ef5..bddf931 100644
--- a/src/lib/components/Entry.svelte
+++ b/src/lib/components/Entry.svelte
@@ -27,10 +27,10 @@
 
 <li class="mb-4 md:mb-0 last-of-type:mb-0">
   <a href="{baseLocaleUrl}/notes/{slug}">
-    <figure class="rounded-md mb-10 h-[200px]">
+    <figure class="rounded-md mb-4">
       <img
         alt={title}
-        class="rounded-md"
+        class="rounded-md object-cover h-[220px]"
         src={previewImageUrl}
         width="350"
         height="100"
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 949fbee..73cab05 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -10,9 +10,9 @@
   import LL, { locale, setLocale } from '$i18n/i18n-svelte';
   import { page } from '$app/stores';
   import { replaceLocaleInUrl } from '$lib/utils/locale';
+  import { baseLocale } from '$i18n/i18n-util';
 
   import type { Locales } from '$i18n/i18n-types';
-  import { baseLocale } from '$i18n/i18n-util';
 
   const baseLocaleUrl = $locale === baseLocale ? '' : `/${$locale}`;
 
@@ -86,18 +86,23 @@
     </ul>
     <ul
       class="text-xl flex sm:hidden items-center space-x-6 px-5 py-2 bg-white dark:bg-black border border-black dark:border-white rounded-full"
+      aria-label="Main navigation"
     >
-      <li><a href="{baseLocaleUrl}/"><Home /></a></li>
-      <li><a href="{baseLocaleUrl}/notes"><Notebook /></a></li>
+      <li><a href="{baseLocaleUrl}/" aria-label="Home"><Home /></a></li>
       <li>
-        <a href="{baseLocaleUrl}/projects"><PodiumGold /></a>
+        <a href="{baseLocaleUrl}/notes" aria-label="Notes"><Notebook /></a>
+      </li>
+      <li>
+        <a href="{baseLocaleUrl}/projects" aria-label="Projects"
+          ><PodiumGold /></a
+        >
       </li>
     </ul>
   </nav>
   <div class="flex sm:space-x-4 items-center">
     <button
-      class="mr-2"
-      title="Change website into dark o white mode"
+      class="mr-2 p-4 rounded-full"
+      title="Change website into dark or white mode"
       on:click={toggleDarkMode}
     >
       {#if useDarkMode}
@@ -106,10 +111,10 @@
         <Moon />
       {/if}
     </button>
-    <div class="flex justify-center items-center space-x-4">
-      <figure class="h-6 w-6">
+    <div class="flex justify-center items-center space-x-6">
+      <figure class="h-8 w-8">
         <button
-          class="h-6 w-6"
+          class="h-8 w-8 rounded-full"
           on:click={toggleLanguageMenu}
           aria-label="Toggle language menu"
           title="Toggle language menu"
@@ -119,7 +124,7 @@
         {#if isLangMenuOpen}
           <div class="relative z-20">
             <ul
-              class="absolute right-0 flex flex-col space-y-2 p-2 shadow-xl border-1 border-gray-400 dark:border-gray-900 bg-white dark:bg-slate-800 rounded-lg"
+              class="absolute right-0 flex flex-col space-y-2 p-4 shadow-xl border-1 border-gray-400 dark:border-gray-900 bg-white dark:bg-slate-800 rounded-lg"
             >
               <li class="lang-opt">
                 <button
diff --git a/src/routes/[[lang=lang]]/+page.svelte b/src/routes/[[lang=lang]]/+page.svelte
index 7d5906f..d2dbe7c 100644
--- a/src/routes/[[lang=lang]]/+page.svelte
+++ b/src/routes/[[lang=lang]]/+page.svelte
@@ -96,6 +96,7 @@
     <figure itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
       <img
         src={avatarUrl}
+        loading="lazy"
         alt="Michael Liendo Avatar"
         width="384"
         height="384"
@@ -104,7 +105,6 @@
       />
     </figure>
   </div>
-  <!--  -->
   <div
     class="gradient absolute bottom-40 left-0 w-1/5 h-1/3 -z-20 bg-[rgba(102,199,216,0.47)] dark:bg-[rgba(65,153,211,0.3)] -rotate-12"
   ></div>
@@ -133,6 +133,9 @@
               src={note.cover}
               class="rounded-t-2xl"
               alt={note.title}
+              loading="lazy"
+              height="200px"
+              width="100%"
               itemprop="image"
             />
             <figcaption class="px-5">
@@ -233,6 +236,9 @@
           <img
             src={note.cover}
             alt={note.title}
+            height="200px"
+            width="100%"
+            loading="lazy"
             class="md:w-2/5 object-cover rounded-l-2xl"
             itemprop="image"
           />