feat: site links and fix the canonical (#73)

* Update meta tags and canonical link * Add currentPageLocale variable to improve localization handling * Add title attributes to anchor tags in Header and Footer components
Michael-Liendo · Jan 24, 2024 · 0fdcab3 · 0fdcab3
1 parent 4c08494
commit 0fdcab3
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 12 deletions.
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -13,6 +13,7 @@
   <div class="flex justify-center">
     <small
       ><a
+        title="Source code"
         class="underline"
         href="https://github.com/Michael-Liendo/michaelliendo.com"
         >Source code</a

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -79,26 +79,42 @@
       class="hidden sm:flex text-xl items-center sm:space-x-10 md:space-x-16 px-10 py-2 bg-[#f5f5f5] dark:bg-slate-900 border border-black dark:border-white rounded-full"
     >
       <li>
-        <a href="{baseLocaleUrl}/">{$LL.LAYOUT.NAV.HOME()}</a>
+        <a title="Go to the main page" href="{baseLocaleUrl}/"
+          >{$LL.LAYOUT.NAV.HOME()}</a
+        >
       </li>
       <li>
-        <a href="{baseLocaleUrl}/notes">{$LL.LAYOUT.NAV.NOTES()}</a>
+        <a title="Read about Michael's notes" href="{baseLocaleUrl}/notes"
+          >{$LL.LAYOUT.NAV.NOTES()}</a
+        >
       </li>
       <li>
-        <a href="{baseLocaleUrl}/projects">{$LL.LAYOUT.NAV.PROJECTS()}</a>
+        <a title="View Michael's Projects" href="{baseLocaleUrl}/projects"
+          >{$LL.LAYOUT.NAV.PROJECTS()}</a
+        >
       </li>
     </ul>
     <ul
       class="text-xl flex sm:hidden items-center space-x-6 px-5 py-2 bg-[#f5f5f5] dark:bg-slate-900 border border-black dark:border-white rounded-full"
       aria-label="Main navigation"
     >
-      <li><a href="{baseLocaleUrl}/" aria-label="Home"><Home /></a></li>
       <li>
-        <a href="{baseLocaleUrl}/notes" aria-label="Notes"><Notebook /></a>
+        <a title="Go to the main page" href="{baseLocaleUrl}/" aria-label="Home"
+          ><Home /></a
+        >
+      </li>
+      <li>
+        <a
+          title="Read about Michael's notes"
+          href="{baseLocaleUrl}/notes"
+          aria-label="Notes"><Notebook /></a
+        >
       </li>
       <li>
-        <a href="{baseLocaleUrl}/projects" aria-label="Projects"
-          ><PodiumGold /></a
+        <a
+          title="View Michael's Projects"
+          href="{baseLocaleUrl}/projects"
+          aria-label="Projects"><PodiumGold /></a
         >
       </li>
     </ul>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -8,10 +8,7 @@
 <svelte:head>
   <meta name="theme-color" content="#3bd6cf" />
 
-  <link
-    rel="canonical"
-    href={`https://michaelliendo.com/${$page.data.locale}`}
-  />
+  <link rel="canonical" href={`https://michaelliendo.com/`} />
 
   <meta name="author" content="Michael Liendo" />
   <meta name="publisher" content="Michael Liendo" />

diff --git a/src/routes/[[lang=lang]]/+page.svelte b/src/routes/[[lang=lang]]/+page.svelte
@@ -2,15 +2,16 @@
   import Calendar from '~icons/mdi/calendar-month';
   import LL, { locale } from '$i18n/i18n-svelte';
   import SocialMedia from '$lib/components/SocialMedia.svelte';
+  import { baseLocale, locales } from '$i18n/i18n-util';
 
   import type { Note } from '$lib/services/Notion/Notes/notes';
-  import { baseLocale } from '$i18n/i18n-util';
 
   export let data: {
     notes: Note[];
   };
 
   const baseLocaleUrl = $locale === baseLocale ? '' : `/${$locale}`;
+  const currentPageLocale = $locale;
 
   let title = 'Michael Liendo | Software Developer';
   let description =
@@ -61,6 +62,22 @@
   <meta name="twitter:description" content={description} />
   <meta name="twitter:creator" content="@MichaelMLiendo" />
   <meta name="twitter:image:src" content={avatarUrl} />
+
+  {#each locales as locale}
+    {#if locale !== baseLocale && currentPageLocale !== locale}
+      <link
+        rel="alternate"
+        hreflang={locale}
+        href={`https://michaelliendo.com/${locale}`}
+      />
+    {:else if locale === baseLocale && currentPageLocale !== locale}
+      <link
+        rel="alternate"
+        hreflang={locale}
+        href={`https://michaelliendo.com/`}
+      />
+    {/if}
+  {/each}
 </svelte:head>
 <section
   id="about"
@@ -122,6 +139,7 @@
     {#each data.notes as note, index}
       {#if index === 0}
         <a
+          title="Read more about {note.title}"
           href={`${baseLocaleUrl}/notes/${note.slug}`}
           class="rounded-2xl flex flex-col justify-between w-full h-full bg-[#f5f5f5] dark:bg-slate-900 xl:col-span-2 xl:row-span-2"
           itemprop="blogPost"
@@ -182,6 +200,7 @@
       {/if}
       {#if index === 1 || index === 4}
         <a
+          title="Read more about {note.title}"
           href={`${baseLocaleUrl}/notes/${note.slug}`}
           class="rounded-2xl flex flex-col justify-between w-full h-full px-5 py-4 bg-[#f5f5f5] dark:bg-slate-900 xl:col-span-2"
           itemprop="blogPost"
@@ -228,6 +247,7 @@
       {/if}
       {#if index === 2 || index === 3}
         <a
+          title="Read more about {note.title}"
           href={`${baseLocaleUrl}/notes/${note.slug}`}
           class="block md:flex rounded-2xl w-full h-full bg-[#f5f5f5] dark:bg-slate-900 xl:col-span-4"
           itemprop="blogPost"