mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Update svelte-img, fix breaking changes, create lazy image component for ease of use, add blurring classes, and add Bandcamp to blur.
This commit is contained in:
parent
62b2e2c120
commit
bcc0cf7f4a
11 changed files with 97 additions and 84 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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'}
|
||||
|
|
|
|||
25
src/lib/components/LazyImage.svelte
Normal file
25
src/lib/components/LazyImage.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
{ 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 }
|
||||
]
|
||||
album.src = {
|
||||
img: { src: `${album.artwork}`, w: 230, h: 230 },
|
||||
sources: {
|
||||
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
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export type Album = {
|
|||
|
||||
export type ExternalImageSource = {
|
||||
format: string;
|
||||
src: string;
|
||||
width: number;
|
||||
height?: number;
|
||||
img: string;
|
||||
w: number;
|
||||
h?: number;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 tortie_derp from '$lib/assets/images/tortie_derp.jpg?run';
|
||||
import orange_derp from '$lib/assets/images/orange_derp.jpg?run';
|
||||
import LazyImage from '$root/lib/components/LazyImage.svelte';
|
||||
import adventure from '$lib/assets/images/adventure.png?as=run:0';
|
||||
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…</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" />
|
||||
<p class="center">Seattle Space Needle</p>
|
||||
<LazyImage src={adventure} alt="Clip art of the car traveling in the forest" />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue