Merge pull request #14 from BradNut/development

Update dependencies and svelte-img

package.json

@@ -15,20 +15,20 @@
 		"site:update": "pnpm update -i -L"
 	},
 	"devDependencies": {
-		"@iconify-icons/material-symbols": "^1.2.51",
+		"@iconify-icons/material-symbols": "^1.2.56",
 		"@iconify-icons/mdi": "^1.2.47",
 		"@iconify-icons/radix-icons": "^1.2.9",
-		"@iconify-icons/simple-icons": "^1.2.63",
+		"@iconify-icons/simple-icons": "^1.2.70",
 		"@leveluptuts/svelte-side-menu": "^1.0.5",
 		"@leveluptuts/svelte-toy": "^2.0.3",
 		"@playwright/test": "^1.36.2",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/adapter-vercel": "^1.0.6",
-		"@sveltejs/kit": "^1.22.4",
+		"@sveltejs/kit": "^1.25.1",
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
 		"@typescript-eslint/parser": "^5.62.0",
-		"@zerodevx/svelte-img": "^1.2.11",
+		"@zerodevx/svelte-img": "^2.1.0",
-		"autoprefixer": "^10.4.14",
+		"autoprefixer": "^10.4.16",
 		"eslint": "^8.45.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte": "^2.32.2",
@@ -36,7 +36,7 @@
 		"just-intersect": "^4.3.0",
 		"mdsvex": "^0.10.6",
 		"mdsvex-relative-images": "^1.0.3",
-		"postcss": "^8.4.27",
+		"postcss": "^8.4.30",
 		"postcss-import": "^15.1.0",
 		"postcss-load-config": "^4.0.1",
 		"postcss-preset-env": "^8.5.1",
@@ -44,22 +44,22 @@
 		"prettier-plugin-svelte": "^2.10.1",
 		"sass": "^1.65.1",
 		"scrape-it": "^5.3.2",
-		"sharp": "^0.32.4",
+		"sharp": "^0.32.6",
-		"svelte": "^4.1.2",
+		"svelte": "^4.2.1",
 		"svelte-check": "^3.4.6",
 		"svelte-lazy-loader": "^1.0.0",
 		"svelte-preprocess": "^5.0.4",
-		"tslib": "^2.6.1",
+		"tslib": "^2.6.2",
-		"typescript": "^5.1.6",
+		"typescript": "^5.2.2",
 		"vanilla-lazyload": "^17.8.4",
 		"vite": "^4.4.9",
-		"vite-imagetools": "^5.0.7",
+		"vite-imagetools": "^5.0.8",
 		"vitest": "^0.25.3"
 	},
 	"type": "module",
 	"dependencies": {
 		"@melt-ui/svelte": "^0.19.1",
-		"@types/nprogress": "^0.2.0",
+		"@types/nprogress": "^0.2.1",
 		"ioredis": "^5.3.2",
 		"nprogress": "^0.2.0"
 	}

src/lib/components/LazyImage.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Img from '@zerodevx/svelte-img';
+	import type { ExternalImageSource } from '../types/album';
+
+	export let clazz = "";
+	export let src: Record<string, any> | ExternalImageSource[] | undefined;
+	export let alt: string;
+	export let style = "";
+	export let loading: "lazy" | "eager" = "lazy";
+
+	let ref: any;
+	let loaded: boolean;
+
+	onMount(() => {
+		if (ref.complete)	{
+			loaded = true;
+		}
+	})
+</script>
+
+<div class="wrap">
+	<Img class={clazz} {style} {src} {alt} {loading} bind:ref on:load={() => (loaded = true)} />
+	<div class="blur" class:loaded />
+</div>

src/lib/components/Portfolio.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import Img from '@zerodevx/svelte-img';
+	import LazyImage from './LazyImage.svelte';
 
 	export let name: string;
 	export let src: Record<string, any>;
 	export let alt: string;
-	export let style: string;
+	export let style = "";
 	export let loading: "lazy" | "eager" = "lazy";
 </script>
 
 <div class="portfolio">
 	<div class="portfolio-picture">
 		<h2>{name}</h2>
-		<Img class="portfolio-image better-blur" {style} {src} {alt} {loading} />
+		<LazyImage {style} {src} {alt} {loading} />
 		<slot name="portfolio-links" />
 	</div>
 	<div class="portfolio-details">
@@ -24,14 +24,6 @@
 		border-radius: 3px;
 	}
 
-	:global(img.better-blur)::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		backdrop-filter: blur(20px);
-		pointer-events: none;
-	}
-
 	:global(.portfolio) {
 		display: grid;
 		grid-template-columns: minmax(200px, 500px) auto;

src/lib/components/bandcamp/index.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Img from '@zerodevx/svelte-img';
 	import type { Album } from "$root/lib/types/album";
+	import LazyImage from '../LazyImage.svelte';
 
 
 	export let albums: Album[];
@@ -8,11 +9,25 @@
 		albums?.length > 6 ? albums.slice(0, 6) : albums;
 
 	for (let album of displayAlbums) {
-		album.src = [
+		album.src = {
-			{ format: 'avif', src: `${album.artwork}`, width: 230, height: 230 },
+			img: { src: `${album.artwork}`, w: 230, h: 230 },
-			{ format: 'webp', src: `${album.artwork}`, width: 230, height: 230 },
+			sources: {
-			{ format: 'jpg', src: `${album.artwork}`, width: 230, height: 230 }
+				avif: [
-		]
+					{ src: `${album.artwork}`, w: 230, h: 230 },
+				],
+				webp: [
+					{ src: `${album.artwork}`, w: 230, h: 230 },
+				],
+				jpg: [
+					{ src: `${album.artwork}`, w: 230, h: 230 },
+				]
+			}
+		}
+		// [
+		// 	{ format: 'avif', src: `${album.artwork}`, width: 230, height: 230 },
+		// 	{ format: 'webp', src: `${album.artwork}`, width: 230, height: 230 },
+		// 	{ format: 'jpg', src: `${album.artwork}`, width: 230, height: 230 }
+		// ]
 	}
 </script>
 
@@ -28,7 +43,7 @@
 						href={album.url}
 						rel="noreferrer"
 					>
-						<Img class="album-artwork" src={album.src} alt={`Album art for ${album.title}`} />
+						<LazyImage clazz="album-artwork" src={album.src} alt={`Album art for ${album.title}`} />
 					</a>
 				</figure>
 				<a

src/lib/types/album.ts

@@ -8,7 +8,7 @@ export type Album = {
 
 export type ExternalImageSource = {
 	format: string;
-	src: string;
+	img: string;
-	width: number;
+	w: number;
-	height?: number;
+	h?: number;
 };

src/routes/about/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Img from '@zerodevx/svelte-img';
 	import Graphql from '@iconify-icons/simple-icons/graphql';
-	import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';
+	import Nextdotjs from '@iconify-icons/simple-icons/nextdotjs';
 	import Prisma from '@iconify-icons/simple-icons/prisma';
 	import Gatsby from '@iconify-icons/simple-icons/gatsby';
 	import Docker from '@iconify-icons/simple-icons/docker';
@@ -10,9 +10,10 @@
 	import Svelte from '@iconify-icons/simple-icons/svelte';
 	import TypeScript from '@iconify-icons/simple-icons/typescript';
 	import SEO from "$lib/components/SEO.svelte";
-	import space_needle from '$lib/assets/images/space-needle.png?run';
+	import LazyImage from '$root/lib/components/LazyImage.svelte';
-	import tortie_derp from '$lib/assets/images/tortie_derp.jpg?run';
+	import adventure from '$lib/assets/images/adventure.png?as=run:0';
-	import orange_derp from '$lib/assets/images/orange_derp.jpg?run';
+	import tortie_derp from '$lib/assets/images/tortie_derp.jpg?as=run';
+	import orange_derp from '$lib/assets/images/orange_derp.jpg?as=run';
 	import turnip from '$lib/assets/images/turnip.svg';
 	import Tag from '$root/lib/components/Tag.svelte';
 	import ExternalLink from '$root/lib/components/ExternalLink.svelte';
@@ -255,7 +256,7 @@
 		<h2>Other fun things about me&hellip;</h2>
 		<div style="display: grid;">
 			<p>
-				Currently living in Seattle after a long road trip!
+				Currently traveling around the world!
 			</p>
 			<div
 				style="
@@ -265,19 +266,19 @@
 					justify-content: center;
 				"
 			>
-				<Img class="portfolio-image better-blur" src={space_needle} alt="Clip art of the Seattle space needle" />
+				<LazyImage src={adventure} alt="Clip art of the car traveling in the forest" />
-				<p class="center">Seattle Space Needle</p>
+				<p class="center">Traveling around</p>
 			</div>
 		</div>
 		<div>
 			<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
 			<div class="cat-pics">
 				<figure>
-					<Img class="portfolio-image better-blur" src={tortie_derp} alt="Turnip Cat" />
+					<LazyImage src={tortie_derp} alt="Turnip Cat" />
 					<p class="center">Turnip <img class="icon" src={turnip} width="25px" height="25px" alt="Turnip" /></p>
 				</figure>
 				<figure>
-					<Img class="portfolio-image better-blur" src={orange_derp} alt="Taco Cat" />
+					<LazyImage src={orange_derp} alt="Taco Cat" />
 					<p class="center">Taco 🌮</p>
 				</figure>
 			</div>

src/routes/portfolio/+page.svelte

@@ -3,13 +3,13 @@
 	import GitHub from '@iconify-icons/simple-icons/github';
 	import SEO from '$lib/components/SEO.svelte';
 	import Portfolio from '$lib/components/Portfolio.svelte';
-	import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?run";
+	import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?as=run";
-  import weddingWebsite from "$lib/assets/images/Wedding_Website.png?run";
+  import weddingWebsite from "$lib/assets/images/Wedding_Website.png?as=run";
-	import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?run';
+	import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?as=run';
-	import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?run";
+	import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?as=run";
 	import PersonalWebsiteSvelteKit from "$lib/content/portfolio/personal/personal-website-sveltekit.md";
 	import WeddingWebsite from '$lib/content/portfolio/personal/wedding-website.md';
-	import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md?run';
+	import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md?as=run';
 	import OldWebsite from '$lib/content/portfolio/personal/old-website.md';
 	import ExternalLink from '$lib/components/ExternalLink.svelte';
 

src/routes/uses/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import Img from '@zerodevx/svelte-img';
 	import SEO from "$lib/components/SEO.svelte";
-	import desktop from '$lib/assets/images/Desktop_so_clean.jpg?run';
+	import ExternalLink from '$lib/components/ExternalLink.svelte';
+	import LazyImage from '$lib/components/LazyImage.svelte';
+	import desktop from '$lib/assets/images/Desktop_so_clean.jpg?as=run';
 	import HardwareAccessories from '$lib/content/uses/hardware-accessories.md';
 	import Development from '$lib/content/uses/development.md';
 	import PrivacyHardwareSoftware from '$lib/content/uses/privacy-hardware-software.md';
-	import ExternalLink from '$root/lib/components/ExternalLink.svelte';
 </script>
 
 <SEO title="Uses" />
@@ -18,7 +19,7 @@
 		</p>
 	</div>
 	<div class="uses-image">
-		<Img class="uses-image better-blur" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
+		<LazyImage clazz="uses-image" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
 	</div>
 	<div>
 		<HardwareAccessories />

src/styles/global.pcss

@@ -65,7 +65,7 @@
 	--cardWidthMin: 15rem;
 
 	/* Media Queries - Not yet supported in CSS */
-	/* 
+	/*
       --xsmall: 340px;
       --small: 500px;
       --large: 960px;
@@ -265,3 +265,19 @@ figure {
 .card > *:last-child {
 	margin-bottom: 0;
 }
+
+.blur {
+	position: absolute;
+	inset: 0;
+	backdrop-filter: blur(20px);
+	pointer-events: none;
+}
+
+.wrap {
+	position: relative;
+	overflow: hidden;
+}
+
+.loaded {
+	display: none;
+}

vite.config.ts

@@ -1,16 +1,16 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
 import { imagetools } from '@zerodevx/svelte-img/vite';
-// import { imagetools } from 'vite-imagetools';
 
 const config: UserConfig = {
 	plugins: [
 		sveltekit(),
 		imagetools({
 			// By default, directives are `?width=480;1024;1920&format=avif;webp;jpg`
-			// Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP
+			// Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP (Now as:run)
-			defaultDirectives: () =>
+			profiles: {
-				new URLSearchParams('?width=300;480;640;1024;1920&format=avif;webp;jpg&lqip=64')
+				run: new URLSearchParams('?w=300;480;640;1024;1920&format=avif;webp;jpg&as=run:64')
+			}
 		})
 	],
 	test: {