chore: update packages

package.json

@@ -1,6 +1,6 @@
 {
   "name": "personal-website",
-  "version": "2.20.0",
+  "version": "2.20.2",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -12,11 +12,11 @@
     "prepare": "husky install"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/cli": "^18.4.4",
+    "@commitlint/config-conventional": "^18.4.4",
     "@playwright/test": "^1.40.1",
     "@sveltejs/adapter-netlify": "^3.0.1",
-    "@sveltejs/kit": "^2.0.6",
+    "@sveltejs/kit": "^2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.16",
@@ -25,16 +25,16 @@
     "eslint-plugin-svelte": "^2.35.1",
     "husky": "^8.0.1",
     "mdsvex": "^0.11.0",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.2",
     "prettier-plugin-svelte": "^3.1.2",
-    "prettier-plugin-tailwindcss": "^0.5.9",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "prism-themes": "^1.9.0",
-    "sharp": "^0.33.1",
+    "sharp": "^0.33.2",
     "svelte": "^4.2.8",
-    "svelte-check": "^3.6.2",
-    "tailwindcss": "^3.4.0",
-    "vite": "^5.0.0",
-    "vite-imagetools": "^6.2.8"
+    "svelte-check": "^3.6.3",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.0.11",
+    "vite-imagetools": "^6.2.9"
   },
   "type": "module"
 }

src/lib/Footer.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <footer
-  class="flex w-full flex-col items-center justify-center bg-space-white pb-8 pt-10 lg:pt-16 dark:bg-space-grey"
+  class="flex w-full flex-col items-center justify-center bg-space-white pb-8 pt-10 dark:bg-space-grey lg:pt-16"
 >
   <p class="text-neutral-800 dark:text-neutral-100">
     © 2016-{year} Made with ❤️ by Antonio Rossi

src/lib/Header.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <header
-  class="flex flex-row items-center justify-between bg-space-white px-5 pb-1 pt-8 md:pb-20 dark:bg-space-grey"
+  class="flex flex-row items-center justify-between bg-space-white px-5 pb-1 pt-8 dark:bg-space-grey md:pb-20"
 >
   <div class="flex items-center">
     <a class="flex items-center text-neutral-800 no-underline dark:text-neutral-100" href="/">

src/lib/blog/_post.svelte

@@ -31,7 +31,7 @@
 <div
   in:fade={{ duration: 150, delay: 100 }}
   out:fade={{ duration: 150 }}
-  class="prose font-Roboto font-normal tracking-wide text-neutral-900 lg:prose-xl dark:prose-invert prose-a:text-teal-400 prose-code:bg-neutral-200 prose-code:text-neutral-700 prose-pre:min-w-full prose-pre:max-w-xs prose-pre:whitespace-pre-wrap prose-pre:bg-neutral-200 prose-pre:text-left prose-pre:text-neutral-700 md:prose-pre:max-w-full dark:text-neutral-100 dark:prose-code:bg-neutral-800 dark:prose-code:text-neutral-100 dark:prose-pre:bg-neutral-800 dark:prose-pre:text-neutral-100"
+  class="prose font-Roboto font-normal tracking-wide text-neutral-900 dark:prose-invert lg:prose-xl prose-a:text-teal-400 prose-code:bg-neutral-200 prose-code:text-neutral-700 prose-pre:min-w-full prose-pre:max-w-xs prose-pre:whitespace-pre-wrap prose-pre:bg-neutral-200 prose-pre:text-left prose-pre:text-neutral-700 dark:text-neutral-100 dark:prose-code:bg-neutral-800 dark:prose-code:text-neutral-100 dark:prose-pre:bg-neutral-800 dark:prose-pre:text-neutral-100 md:prose-pre:max-w-full"
 >
   <div class="mt-10 flex flex-row items-center justify-between md:mt-0">
     <a class="inline-block font-Poppins !text-white no-underline" href={`/blog`}>

src/lib/components/blog/BlogListItem.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <a
-  class="mt-5 flex w-full items-center justify-between overflow-hidden rounded-md bg-white p-4 text-left font-Poppins shadow-md transition duration-300 ease-in-out hover:scale-105 md:w-full dark:bg-neutral-900"
+  class="mt-5 flex w-full items-center justify-between overflow-hidden rounded-md bg-white p-4 text-left font-Poppins shadow-md transition duration-300 ease-in-out hover:scale-105 dark:bg-neutral-900 md:w-full"
   href={`/blog/${post.slug}`}
 >
   <div>

src/lib/index/Contacts.svelte

@@ -9,13 +9,13 @@
 <div class="flex flex-col flex-wrap items-center justify-center bg-space-white dark:bg-space-grey">
   <div class="flex">
     <h2
-      class="m-0 from-darkFromColor via-darkViaColor1 via-darkViaColor2 to-lightToColor text-center font-Cormorant text-[2.5rem] leading-standard bg-gradient-271 md:text-5xl dark:from-darkFromColor dark:via-darkViaColor1 dark:via-darkViaColor2 dark:to-darkToColor"
+      class="m-0 from-darkFromColor via-darkViaColor1 via-darkViaColor2 to-lightToColor text-center font-Cormorant text-[2.5rem] leading-standard bg-gradient-271 dark:from-darkFromColor dark:via-darkViaColor1 dark:via-darkViaColor2 dark:to-darkToColor md:text-5xl"
     >
       I'm always up for a chat.
     </h2>
   </div>
   <div
-    class="mt-5 text-center font-Poppins text-2xl font-light leading-extraRelaxed text-neutral-800 md:text-3xl dark:text-neutral-100"
+    class="mt-5 text-center font-Poppins text-2xl font-light leading-extraRelaxed text-neutral-800 dark:text-neutral-100 md:text-3xl"
   >
     <p>
       Pop me an email at{" "}

src/lib/index/Hero.svelte

@@ -8,7 +8,7 @@
       <h1 class="flex flex-nowrap items-center">
         <span>
           <span
-            class="m-0 from-darkFromColor via-darkViaColor1 via-lightViaColor2 to-lightToColor font-Cormorant text-6xl leading-standard bg-gradient-271 md:text-8xl dark:from-darkFromColor dark:via-darkViaColor1 dark:via-darkViaColor2 dark:to-darkToColor"
+            class="m-0 from-darkFromColor via-darkViaColor1 via-lightViaColor2 to-lightToColor font-Cormorant text-6xl leading-standard bg-gradient-271 dark:from-darkFromColor dark:via-darkViaColor1 dark:via-darkViaColor2 dark:to-darkToColor md:text-8xl"
             >Hi, I&apos;m Antonio</span
           >
           <span class="ml-1 text-5xl md:hidden lg:ml-5 lg:inline">👋</span>

src/lib/index/Quote.svelte

@@ -2,7 +2,7 @@
   <div
     class="flex max-w-2xl flex-col items-center rounded-lg bg-almost-white p-5 shadow dark:bg-light-space-grey"
   >
-    <h2 class="text-center font-Cormorant text-xl text-grey-800 md:text-2xl dark:text-neutral-100">
+    <h2 class="text-center font-Cormorant text-xl text-grey-800 dark:text-neutral-100 md:text-2xl">
       “A quiet secluded life in the countryside, with the possibility of being useful to people to
       whom it is easy to do good, and who are not accustomed to have it done to them; then work
       which one hopes may be of some use; then rest, nature, books, music, love for one's neighbor —

src/routes/+error.svelte

@@ -13,10 +13,10 @@
 </svelte:head>
 <div class="flex flex-col items-center justify-center">
   <div class="mb-5 mt-10 text-4xl md:mb-10 md:text-5xl">😱</div>
-  <h1 class="mb-3 text-center text-3xl text-neutral-800 md:text-4xl dark:text-neutral-100">
+  <h1 class="mb-3 text-center text-3xl text-neutral-800 dark:text-neutral-100 md:text-4xl">
     Oops, Something weird happened
   </h1>
-  <h2 class="mb-3 text-center text-2xl text-neutral-800 md:text-3xl dark:text-neutral-100">
+  <h2 class="mb-3 text-center text-2xl text-neutral-800 dark:text-neutral-100 md:text-3xl">
     If you were looking for a blog post, I recently made some changes on the structure of the
     website.
   </h2>

src/routes/+layout.svelte

@@ -47,7 +47,7 @@
   <main
     in:fade={{ duration: 150, delay: 100 }}
     out:fade={{ duration: 150 }}
-    class="m-auto flex min-h-[calc(100vh-210px)] max-w-screen-xl2 flex-col items-center bg-space-white px-4 md:px-22 lg:px-36 dark:bg-space-grey"
+    class="m-auto flex min-h-[calc(100vh-210px)] max-w-screen-xl2 flex-col items-center bg-space-white px-4 dark:bg-space-grey md:px-22 lg:px-36"
   >
     <div>
       <slot />

src/routes/about/+page.svelte

@@ -34,13 +34,13 @@
 </script>
 
 <h1
-  class="title-text m-0 pb-5 pt-10 font-Cormorant text-5xl text-neutral-800 md:pt-0 dark:text-neutral-100"
+  class="title-text m-0 pb-5 pt-10 font-Cormorant text-5xl text-neutral-800 dark:text-neutral-100 md:pt-0"
 >
   About me
 </h1>
 
 <div
-  class="max-w-prose font-Roboto font-normal leading-relaxed tracking-wide text-neutral-900 lg:prose-xl dark:prose-invert prose-a:text-teal-400 prose-code:bg-neutral-200 prose-code:text-neutral-700 prose-pre:min-w-full prose-pre:max-w-xs prose-pre:whitespace-pre-wrap prose-pre:bg-neutral-200 prose-pre:text-left prose-pre:text-neutral-700 md:prose-pre:max-w-full dark:text-neutral-100 dark:prose-code:bg-neutral-800 dark:prose-code:text-neutral-100 dark:prose-pre:bg-neutral-800 dark:prose-pre:text-neutral-100"
+  class="max-w-prose font-Roboto font-normal leading-relaxed tracking-wide text-neutral-900 dark:prose-invert lg:prose-xl prose-a:text-teal-400 prose-code:bg-neutral-200 prose-code:text-neutral-700 prose-pre:min-w-full prose-pre:max-w-xs prose-pre:whitespace-pre-wrap prose-pre:bg-neutral-200 prose-pre:text-left prose-pre:text-neutral-700 dark:text-neutral-100 dark:prose-code:bg-neutral-800 dark:prose-code:text-neutral-100 dark:prose-pre:bg-neutral-800 dark:prose-pre:text-neutral-100 md:prose-pre:max-w-full"
 >
   <div class="mb-10 bg-clip-content md:float-right md:mb-0">
     <HeroImage classes="rounded-full overflow-hidden md:ml-5" width="300" height="300" />

src/routes/blog/+page.svelte

@@ -12,7 +12,7 @@
   };
 </script>
 
-<div class="w-full text-neutral-800 sm:my-9 dark:text-neutral-100">
+<div class="w-full text-neutral-800 dark:text-neutral-100 sm:my-9">
   <div class="flex items-center md:justify-center">
     <h1 class="m-0 font-Cormorant text-3xl leading-standard">Latest Articles</h1>
   </div>

src/routes/blog/tags/+page.svelte

@@ -3,7 +3,7 @@
   export let data;
 </script>
 
-<div class="w-full text-neutral-800 sm:my-9 dark:text-neutral-100">
+<div class="w-full text-neutral-800 dark:text-neutral-100 sm:my-9">
   <div class="flex flex-col items-center md:justify-center">
     <h1 class="m-0 pl-4 font-Cormorant text-3xl leading-standard">Tags</h1>
     <h2 class="mb-5 mt-4 pl-4 font-Cormorant text-xl leading-standard">

src/routes/blog/tags/[tag]/+page.svelte

@@ -3,7 +3,7 @@
   export let data;
 </script>
 
-<div class="w-full text-neutral-800 sm:my-9 dark:text-neutral-100">
+<div class="w-full text-neutral-800 dark:text-neutral-100 sm:my-9">
   <div class="flex items-center md:justify-center">
     <h1 class="m-0 pl-4 text-center font-Cormorant text-3xl leading-standard">
       This is what I wrote about <span class="capitalize">{data.tag}</span>

tests/blog-list.test.ts

@@ -9,7 +9,7 @@ test.describe("Blog list page", () => {
   test("should show a list of blog articles", async ({ page }) => {
     await page.goto("/blog");
     const posts = await page.$$(
-      'a[class="mt-5 flex w-full items-center justify-between overflow-hidden rounded-md bg-white p-4 text-left font-Poppins shadow-md transition duration-300 ease-in-out hover:scale-105 md:w-full dark:bg-neutral-900"]'
+      'a[class="mt-5 flex w-full items-center justify-between overflow-hidden rounded-md bg-white p-4 text-left font-Poppins shadow-md transition duration-300 ease-in-out hover:scale-105 dark:bg-neutral-900 md:w-full"]'
     );
 
     expect(posts.length).toBeGreaterThan(0);

tests/blog-post.test.ts

@@ -5,7 +5,7 @@ test.describe("Blog page", () => {
     await page.goto("/blog");
 
     const posts = await page.$$(
-      'a[class="mt-5 flex w-full items-center justify-between overflow-hidden rounded-md bg-white p-4 text-left font-Poppins shadow-md transition duration-300 ease-in-out hover:scale-105 md:w-full dark:bg-neutral-900"]'
+      'a[class="mt-5 flex w-full items-center justify-between overflow-hidden rounded-md bg-white p-4 text-left font-Poppins shadow-md transition duration-300 ease-in-out hover:scale-105 dark:bg-neutral-900 md:w-full"]'
     );
     const firstPost = posts[0];