From bcc0cf7f4aa6cc99401ee6f2ee7eab16bd71e1c1 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Wed, 27 Sep 2023 17:40:49 +1300 Subject: [PATCH] Update svelte-img, fix breaking changes, create lazy image component for ease of use, add blurring classes, and add Bandcamp to blur. --- package.json | 2 +- pnpm-lock.yaml | 47 +++--------------------- src/lib/components/LazyImage.svelte | 25 +++++++++++++ src/lib/components/Portfolio.svelte | 14 ++----- src/lib/components/bandcamp/index.svelte | 27 +++++++++++--- src/lib/types/album.ts | 6 +-- src/routes/about/+page.svelte | 17 +++++---- src/routes/portfolio/+page.svelte | 10 ++--- src/routes/uses/+page.svelte | 7 ++-- src/styles/global.pcss | 18 ++++++++- vite.config.ts | 8 ++-- 11 files changed, 97 insertions(+), 84 deletions(-) create mode 100644 src/lib/components/LazyImage.svelte diff --git a/package.json b/package.json index b16cd97..d02dda7 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "@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.16", "eslint": "^8.45.0", "eslint-config-prettier": "^8.8.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6bc92d3..85a02ba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,8 +56,8 @@ devDependencies: specifier: ^5.62.0 version: 5.62.0(eslint@8.45.0)(typescript@5.2.2) '@zerodevx/svelte-img': - specifier: ^1.2.11 - version: 1.2.11(svelte@4.2.1) + specifier: ^2.1.0 + version: 2.1.0(svelte@4.2.1) autoprefixer: specifier: ^10.4.16 version: 10.4.16(postcss@8.4.30) @@ -1465,14 +1465,13 @@ packages: - supports-color dev: true - /@zerodevx/svelte-img@1.2.11(svelte@4.2.1): - resolution: {integrity: sha512-LEjs8AjofvE2JxRPGTT/nvoFf10MqpXpylZ/Prs3vSN11FEavxRkBsCNZdsqcV9GMEkrk5LFfpxSteix/NHgtQ==} + /@zerodevx/svelte-img@2.1.0(svelte@4.2.1): + resolution: {integrity: sha512-ktOcv5svIm8qQQ7sBnSST1zaA5mJpTp+MbzaMeDNBEw4hulwzSD0VRPtq/pvYsjacA1OAw+JIN/qmBl7doh7HA==} peerDependencies: svelte: ^3.55.1 || ^4.0.0 dependencies: - imagetools-core: 3.3.1 svelte: 4.2.1 - vite-imagetools: 4.0.18 + vite-imagetools: 5.0.8 transitivePeerDependencies: - rollup dev: true @@ -2861,13 +2860,6 @@ packages: engines: {node: '>= 4'} dev: true - /imagetools-core@3.3.1: - resolution: {integrity: sha512-xllF2GDRg0SXCQQRxBAtE6N9dPAttc+ro+QDLnRmVSE5lH5clQxD2Al4XluirXj0T7lIH5VbetFmBLowW6ps+w==} - engines: {node: '>=12.0.0'} - dependencies: - sharp: 0.31.3 - dev: true - /imagetools-core@4.0.5: resolution: {integrity: sha512-sNRVfUwkUcsVWNn5inTHDXWzpPRWPWbSgGkuQmlsFCWXAR2+K5R5vG5tC3Qs4LeJaMugKB8hGVm6rvZjFHQrUw==} engines: {node: '>=12.0.0'} @@ -3336,10 +3328,6 @@ packages: semver: 7.5.4 dev: true - /node-addon-api@5.1.0: - resolution: {integrity: sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==} - dev: true - /node-addon-api@6.1.0: resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==} dev: true @@ -4316,21 +4304,6 @@ packages: resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==} dev: true - /sharp@0.31.3: - resolution: {integrity: sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg==} - engines: {node: '>=14.15.0'} - requiresBuild: true - dependencies: - color: 4.2.3 - detect-libc: 2.0.2 - node-addon-api: 5.1.0 - prebuild-install: 7.1.1 - semver: 7.5.4 - simple-get: 4.0.1 - tar-fs: 2.1.1 - tunnel-agent: 0.6.0 - dev: true - /sharp@0.32.6: resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==} engines: {node: '>=14.15.0'} @@ -4926,16 +4899,6 @@ packages: unist-util-stringify-position: 2.0.3 dev: true - /vite-imagetools@4.0.18: - resolution: {integrity: sha512-PpvOy7eDQadfuJNarwPU9X8nK0AjtRsyxhfMjqg/wrAyssNgeaZWMGlWQK/U3YhV9+wpdV5Mep8FZvGa31IY1Q==} - engines: {node: '>=12.0.0'} - dependencies: - '@rollup/pluginutils': 5.0.2 - imagetools-core: 3.3.1 - transitivePeerDependencies: - - rollup - dev: true - /vite-imagetools@5.0.8: resolution: {integrity: sha512-oFNfc58iLz1lHFsIKQy+wp0RNcZjiaDeHYTexYowpf4RYx9tZ97eWEcw8lQ1jDT8AnOso6XZi5iGjLNAeTR9Tw==} engines: {node: '>=12.0.0'} diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte new file mode 100644 index 0000000..d48e021 --- /dev/null +++ b/src/lib/components/LazyImage.svelte @@ -0,0 +1,25 @@ + + +
+ (loaded = true)} /> +
+
\ No newline at end of file diff --git a/src/lib/components/Portfolio.svelte b/src/lib/components/Portfolio.svelte index 81bf47c..92459c7 100644 --- a/src/lib/components/Portfolio.svelte +++ b/src/lib/components/Portfolio.svelte @@ -1,17 +1,17 @@

{name}

- +
@@ -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; diff --git a/src/lib/components/bandcamp/index.svelte b/src/lib/components/bandcamp/index.svelte index b239fb3..3d74348 100644 --- a/src/lib/components/bandcamp/index.svelte +++ b/src/lib/components/bandcamp/index.svelte @@ -1,6 +1,7 @@ @@ -28,7 +43,7 @@ href={album.url} rel="noreferrer" > - {`Album + Other fun things about me…

- Currently living in Seattle after a long road trip! + Currently traveling around the world!

- Clip art of the Seattle space needle -

Seattle Space Needle

+ +

Traveling around

Bringing these two cats, Turnip and Taco, along for the ride.

- Turnip Cat +

Turnip Turnip

- Taco Cat +

Taco 🌮

diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte index 2d57beb..a4c5fe0 100644 --- a/src/routes/portfolio/+page.svelte +++ b/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 weddingWebsite from "$lib/assets/images/Wedding_Website.png?run"; - import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?run'; - import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?run"; + import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?as=run"; + import weddingWebsite from "$lib/assets/images/Wedding_Website.png?as=run"; + import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?as=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'; diff --git a/src/routes/uses/+page.svelte b/src/routes/uses/+page.svelte index 3d734d8..8abcf68 100644 --- a/src/routes/uses/+page.svelte +++ b/src/routes/uses/+page.svelte @@ -1,11 +1,12 @@ @@ -18,7 +19,7 @@

- Clean desk with Samsung monitor and Ducky Keyboard +
diff --git a/src/styles/global.pcss b/src/styles/global.pcss index 12fb178..03ce6e4 100644 --- a/src/styles/global.pcss +++ b/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; +} diff --git a/vite.config.ts b/vite.config.ts index 342a935..4cf40fc 100644 --- a/vite.config.ts +++ b/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 - defaultDirectives: () => - new URLSearchParams('?width=300;480;640;1024;1920&format=avif;webp;jpg&lqip=64') + // Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP (Now as:run) + profiles: { + run: new URLSearchParams('?w=300;480;640;1024;1920&format=avif;webp;jpg&as=run:64') + } }) ], test: {