feat: placeholder color

ocknamo · Jun 14, 2024 · f172adb · f172adb
1 parent 82b5c80
commit f172adb
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 43 deletions.
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
@@ -1,21 +1,6 @@
 <script lang="ts">
-	interface Srcset {
-		src: string;
-		w: number;
-	}
+	import type { ImageSrc } from './Image.type';
 
-	interface ImageSrc {
-		img: string;
-		w?: number;
-		h?: number;
-		webp?: Srcset[];
-		jpeg?: Srcset[];
-		png?: Srcset[];
-		failback: string;
-		alt: string;
-		placeholder?: string;
-		blur?: boolean;
-	}
 	export let src: ImageSrc;
 
 	// Set default value
@@ -24,9 +9,13 @@
 	export let style: string;
 
 	let loadStatus: 'loading' | 'loaded' = 'loading';
+	let imageWrapperStyle = '';
 
 	if (src.placeholder) {
-		style = `${style} background: url(${src.placeholder}) no-repeat center/cover;`;
+		style = src.placeholder.dataUri
+			? `${style} background: url(${src.placeholder.dataUri}) no-repeat center/cover;`
+			: style;
+		imageWrapperStyle = src.placeholder.color ? `background-color: ${src.placeholder.color}` : '';
 	}
 
 	const handleImgError = (e: Event) => {
@@ -49,34 +38,36 @@
 	};
 </script>
 
-<picture>
-	{#if src.webp}
-		<source srcset={src.webp.map((s) => `${s.src} ${s.w}w`).join(', ')} type="image/webp" />
-	{/if}
-	{#if src.jpeg}
-		<source srcset={src.jpeg.map((s) => `${s.src} ${s.w}w`).join(', ')} type="image/jpeg" />
-	{/if}
-	{#if src.png}
-		<source srcset={src.png.map((s) => `${s.src} ${s.w}w`).join(', ')} type="image/png" />
-	{/if}
-	<img
-		width={src.w}
-		height={src.h}
-		{style}
-		class={src.blur ? `image-blur-${loadStatus}` : ''}
-		src={src.img}
-		alt={src.alt}
-		on:error={handleImgError}
-		on:load={handleLoaded}
-		loading="lazy"
-	/>
-</picture>
+<div class="picture-wrapper" style={imageWrapperStyle}>
+	<picture>
+		{#if src.webp}
+			<source srcset={src.webp.map((s) => `${s.src} ${s.w}w`).join(', ')} type="image/webp" />
+		{/if}
+		{#if src.jpeg}
+			<source srcset={src.jpeg.map((s) => `${s.src} ${s.w}w`).join(', ')} type="image/jpeg" />
+		{/if}
+		{#if src.png}
+			<source srcset={src.png.map((s) => `${s.src} ${s.w}w`).join(', ')} type="image/png" />
+		{/if}
+		<img
+			width={src.w}
+			height={src.h}
+			{style}
+			class={src.blur ? `image-blur-${loadStatus}` : ''}
+			src={src.img}
+			alt={src.alt}
+			on:error={handleImgError}
+			on:load={handleLoaded}
+			loading="lazy"
+		/>
+	</picture>
+</div>
 
 <style>
 	.image-blur-loading {
 		animation:
-			0.8s linear 0s normal waiting,
-			0.4s ease-in 0.8s normal show;
+			0.5s linear 0s normal waiting,
+			0.4s ease-in 0.5s normal show;
 	}
 
 	.image-blur-loaded {
@@ -103,4 +94,13 @@
 			opacity: 1;
 		}
 	}
+
+	.picture-wrapper {
+		width: fit-content;
+		height: fit-content;
+	}
+
+	img {
+		display: block;
+	}
 </style>
diff --git a/src/lib/components/Image.type.ts b/src/lib/components/Image.type.ts
@@ -0,0 +1,20 @@
+export interface Srcset {
+	src: string;
+	w: number;
+}
+
+export interface ImageSrc {
+	img: string;
+	w?: number;
+	h?: number;
+	webp?: Srcset[];
+	jpeg?: Srcset[];
+	png?: Srcset[];
+	failback: string;
+	alt: string;
+	placeholder?: {
+		dataUri?: string;
+		color?: string;
+	};
+	blur?: boolean;
+}
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
@@ -2,14 +2,15 @@
 	import SvelteMarkdown from 'svelte-markdown';
 	import { browser } from '$app/environment';
 	import Image from '$lib/components/Image.svelte';
+	import type { ImageSrc } from '$lib/components/Image.type.js';
 
 	export let data;
 
 	// PoC
 	// TODO: set from config
 	const optimazerPrefix = 'https://nostr-image-optimizer.ocknamo.com/image/';
 
-	let src = {
+	let src: ImageSrc = {
 		w: 800,
 		img: `${optimazerPrefix}width=1600,quality=70,format=webp/${data.blog.image}`,
 		webp: [
@@ -22,7 +23,7 @@
 		],
 		failback: data.blog.image,
 		alt: 'blog top',
-		placeholder: data.blog.imagePlaceholderUrl,
+		placeholder: { dataUri: data.blog.imagePlaceholderUrl, color: 'black' },
 		blur: true
 	};
 </script>