chore: update and cleanup packages

egilsster · Sep 11, 2023 · ccbedcf · ccbedcf
1 parent 832b65f
commit ccbedcf
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 48 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
+}
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Egill Sveinbjörnsson</title>

diff --git a/package.json b/package.json
@@ -13,37 +13,32 @@
     "build": "vite build",
     "serve": "vite preview",
     "lint": "eslint .",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "bun run lint -- --fix",
     "format:write": "prettier --write \"./**\"",
     "format:check": "prettier --check \"./**\"",
-    "types:check": "tsc --noEmit",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d dist"
+    "types:check": "tsc --noEmit"
   },
   "dependencies": {
     "date-fns": "2.30.0"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "2.4.2",
-    "@tsconfig/svelte": "5.0.0",
-    "@typescript-eslint/eslint-plugin": "5.61.0",
-    "@typescript-eslint/parser": "5.61.0",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.44.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-import-resolver-typescript": "3.5.5",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-svelte": "2.32.2",
-    "gh-pages": "5.0.0",
-    "postcss": "8.4.25",
-    "prettier": "2.8.8",
-    "prettier-plugin-svelte": "2.10.1",
-    "svelte": "4.0.5",
+    "@sveltejs/vite-plugin-svelte": "2.4.5",
+    "@tsconfig/svelte": "5.0.2",
+    "@typescript-eslint/eslint-plugin": "6.6.0",
+    "@typescript-eslint/parser": "6.6.0",
+    "autoprefixer": "10.4.15",
+    "eslint": "8.49.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-svelte": "2.33.1",
+    "postcss": "8.4.29",
+    "prettier": "3.0.3",
+    "prettier-plugin-svelte": "3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "svelte": "4.2.0",
     "svelte-preprocess": "5.0.4",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.1.6",
-    "vite": "4.4.2"
+    "tailwindcss": "3.3.3",
+    "typescript": "5.2.2",
+    "vite": "4.4.9"
   }
 }
diff --git a/src/Page.svelte b/src/Page.svelte
@@ -17,13 +17,13 @@
   const { work, education, skills } = data;
 </script>
 
-<main class="bg-[#f5f5f5] dark:bg-gray-800 pb-1 thin-scroll">
+<main class="thin-scroll bg-[#f5f5f5] pb-1 dark:bg-gray-800">
   <LightSwitch on:click={toggleTheme} value={darkMode} />
 
   <article
-    class="flex flex-col h-[500px] items-center border-t-8 border-gray-800 dark:border-gray-200 sm:text-xl bg-[#e7eaea] dark:bg-gray-900 dark:text-gray-200"
+    class="flex h-[500px] flex-col items-center border-t-8 border-gray-800 bg-[#e7eaea] dark:border-gray-200 dark:bg-gray-900 dark:text-gray-200 sm:text-xl"
   >
-    <section class="flex flex-row justify-center lg:w-2/5 p-2 h-1/2">
+    <section class="flex h-1/2 flex-row justify-center p-2 lg:w-2/5">
       <div class="space-y-14">
         <p class="font-bold">
           Hæ, ég heiti Egill &mdash; I build frontend architecture and tools as
@@ -37,7 +37,7 @@
         </p>
 
         <p
-          class="pt-4 text-right text-sm md:text-md sm:text-base font-extralight"
+          class="md:text-md pt-4 text-right text-sm font-extralight sm:text-base"
         >
           <b class="font-bold">Contact me:</b>
           <a href="mailto:[email protected]"
@@ -48,10 +48,10 @@
     </section>
   </article>
 
-  <section class="container md:mx-auto lg:w-3/5 px-3 dark:text-gray-200">
+  <section class="container px-3 dark:text-gray-200 md:mx-auto lg:w-3/5">
     <div>
       <h2
-        class="md:text-2xl font-semibold my-6 border-b border-black dark:border-gray-200"
+        class="my-6 border-b border-black font-semibold dark:border-gray-200 md:text-2xl"
       >
         Experience
       </h2>
@@ -72,7 +72,7 @@
 
     <div>
       <h2
-        class="md:text-2xl font-semibold my-6 border-b border-black dark:border-gray-200"
+        class="my-6 border-b border-black font-semibold dark:border-gray-200 md:text-2xl"
       >
         Education
       </h2>
@@ -90,7 +90,7 @@
 
     <div>
       <h2
-        class="md:text-2xl font-semibold my-6 border-b border-gray-900 dark:border-gray-200"
+        class="my-6 border-b border-gray-900 font-semibold dark:border-gray-200 md:text-2xl"
       >
         Skills
       </h2>

diff --git a/src/components/EducationItem.svelte b/src/components/EducationItem.svelte
@@ -12,9 +12,9 @@
 
 <Section>
   <header class="flex items-center">
-    <div class="mr-4 dark:bg-gray-200 rounded-sm border border-gray-400/25 p-2">
+    <div class="mr-4 rounded-sm border border-gray-400/25 p-2 dark:bg-gray-200">
       <img
-        class="self-start align-middle object-contain h-12 md:w-14"
+        class="h-12 self-start object-contain align-middle md:w-14"
         src={`img/${imageName}`}
         alt={`Logo for ${institution}`}
       />
@@ -27,7 +27,7 @@
       </p>
       <p>
         {area}
-        <time class="text-gray-500 dark:text-gray-400 text-xs pl-2"
+        <time class="pl-2 text-xs text-gray-500 dark:text-gray-400"
           >{formatDate(startDate)} - {formatDate(endDate)}</time
         >
       </p>

diff --git a/src/components/LightSwitch.svelte b/src/components/LightSwitch.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <button
-  class="fixed right-0 mt-3 mr-1 w-8 h-8 border-blue-200 bg-blue-200 dark:bg-gray-800 dark:border-gray-800 rounded-full border border-1 disable-dbl-tap-zoom focus:outline-none"
+  class="border-1 disable-dbl-tap-zoom fixed right-0 mr-1 mt-3 h-8 w-8 rounded-full border border-blue-200 bg-blue-200 focus:outline-none dark:border-gray-800 dark:bg-gray-800"
   on:click
 >
   {#if value}

diff --git a/src/components/Section.svelte b/src/components/Section.svelte
@@ -1,4 +1,4 @@
-<article class="flex pb-4 pt-2 my-1 border-b-2 last:border-b-0">
+<article class="my-1 flex border-b-2 pb-4 pt-2 last:border-b-0">
   <section class="space-y-4">
     <slot />
   </section>

diff --git a/src/components/SkillItem.svelte b/src/components/SkillItem.svelte
@@ -16,7 +16,7 @@
     <ul class="list-none font-extralight">
       {#each keywords as keyword}
         <li
-          class="text-md inline-block rounded-sm m-0.5 px-1.5 py-0.5 bg-gray-900 text-white
+          class="text-md m-0.5 inline-block rounded-sm bg-gray-900 px-1.5 py-0.5 text-white
            dark:bg-slate-200 dark:text-gray-900"
         >
           <a href={`https://www.google.com/search?q=${keyword}`} target="_blank"

diff --git a/src/components/WorkItem.svelte b/src/components/WorkItem.svelte
@@ -14,9 +14,9 @@
 
 <Section>
   <header class="flex items-center">
-    <div class="mr-4 dark:bg-gray-200 rounded-sm border border-gray-400/25 p-2">
+    <div class="mr-4 rounded-sm border border-gray-400/25 p-2 dark:bg-gray-200">
       <img
-        class="self-start align-middle h-7"
+        class="h-7 self-start align-middle"
         src={`img/${imageName}`}
         alt={`Logo for ${company}`}
       />
@@ -27,20 +27,20 @@
         {position},
         <a href={website} target="_blank">{company}</a>
       </p>
-      <time class="text-gray-500 dark:text-gray-400 text-xs align-top"
+      <time class="align-top text-xs text-gray-500 dark:text-gray-400"
         >{formatDate(startDate)} - {formatDate(endDate)} ({getTimeRange(
           startDate,
-          endDate
+          endDate,
         )})
       </time>
     </div>
   </header>
 
   <div>
-    <p class="font-light text-justify">{summary}</p>
+    <p class="text-justify font-light">{summary}</p>
 
     {#if highlights.length > 0}
-      <ul class="list-disc list-outside px-4 my-4">
+      <ul class="my-4 list-outside list-disc px-4">
         {#each highlights as highlight}
           <li class="font-light">{highlight}</li>
         {/each}