feat: image placeholder data into Image

src/lib/components/Image.svelte

@@ -6,29 +6,34 @@
 
 	interface ImageSrc {
 		img: string;
+		w?: number;
+		h?: number;
 		webp?: Srcset[];
 		jpeg?: Srcset[];
 		png?: Srcset[];
 		failback: string;
 		alt: string;
+		placeholder?: string;
 	}
 	export let src: ImageSrc;
-
 	export let style: string;
 
+	if (src.placeholder) {
+		style = `${style} background: url(${src.placeholder}) no-repeat center/cover;`;
+	}
+
 	const handleImgError = (e: Event) => {
 		if (e.type !== 'error') {
 			return;
 		}
 
 		// failback
 		src = {
+			...src,
 			img: src.failback,
 			webp: [],
 			jpeg: [],
-			png: [],
-			alt: src.alt,
-			failback: src.failback
+			png: []
 		};
 	};
 </script>
@@ -43,5 +48,31 @@
 	{#if src.png}
 		<source srcset={src.png.map((s) => `${s.src} ${s.w}w`).join(', ')} type="image/png" />
 	{/if}
-	<img {style} src={src.img} alt={src.alt} on:error={handleImgError} loading="lazy" />
+	<img
+		width={src.w}
+		height={src.h}
+		{style}
+		src={src.img}
+		alt={src.alt}
+		class="blur-animation"
+		on:error={handleImgError}
+		loading="lazy"
+	/>
 </picture>
+
+<style>
+	.blur-animation {
+		animation: 0.8s ease-in normal show;
+	}
+
+	@keyframes show {
+		from {
+			filter: blur(10px);
+			opacity: 0;
+		}
+		to {
+			filter: blur(0px);
+			opacity: 1;
+		}
+	}
+</style>

src/lib/image-utils.ts

@@ -0,0 +1 @@
+// TBD

src/lib/index.ts

@@ -1 +1 @@
-// place files you want to import through the `$lib` alias in this folder.
+export * from './image-utils';

src/lib/server/blog-store.service.ts

@@ -35,6 +35,38 @@ export class BlogStoreService {
 				})
 			}));
 
+		// fetch imagePlaceholderUrl
+		for (const blog of blogs) {
+			if (blog.image) {
+				// PoC
+				// TODO: config
+				const optimazerPrefix = 'https://nostr-image-optimizer.ocknamo.com/image/';
+
+				const res = await fetch(
+					`${optimazerPrefix}width=200,quality=40,format=webp/${blog.image}`,
+					{ headers: { 'User-Agent': 'Mozilla/5.0' } }
+				); // dummy user-agent
+
+				console.info(`Requested to: ${res.url}`);
+
+				if (!res.ok) {
+					console.warn(`${res.status}: ${res.statusText}`);
+
+					continue;
+				}
+
+				const blob = await res.blob();
+
+				const buffer = Buffer.from(await blob.arrayBuffer());
+				const base64 = buffer.toString('base64');
+
+				// Base64文字列を使ってData URLsを作成する
+				const base64DataURL = base64 ? `data:image/webp;base64,${base64}` : undefined;
+
+				Object.assign(blog, { imagePlaceholderUrl: base64DataURL });
+			}
+		}
+
 		this.blogs = blogs;
 
 		console.info('BlogStoreService: end fetch.');

src/lib/types.ts

@@ -4,6 +4,7 @@ export interface Blog extends NostrEventExt {
 	title: string;
 	summary: string;
 	image: string;
+	imagePlaceholderUrl?: string;
 	hashTags: string[];
 	identifier: string;
 	naddress: string;

src/routes/blog/[slug]/+page.server.ts

@@ -2,7 +2,7 @@ import { error } from '@sveltejs/kit';
 
 import { blogStore } from '$lib/server/blog-store.service';
 
-export function load({ params }: { params: { slug: string } }) {
+export async function load({ params }: { params: { slug: string } }) {
 	const blogs = blogStore.blogs;
 
 	const blog = blogs.find((b) => b.id === params.slug);

src/routes/blog/[slug]/+page.svelte

@@ -6,9 +6,11 @@
 	export let data;
 
 	// PoC
+	// TODO: set from config
 	const optimazerPrefix = 'https://nostr-image-optimizer.ocknamo.com/image/';
 
 	let src = {
+		w: 800,
 		img: `${optimazerPrefix}width=1600,quality=70,format=webp/${data.blog.image}`,
 		webp: [
 			{ src: `${optimazerPrefix}width=1600,quality=50,format=webp/${data.blog.image}`, w: 1600 },
@@ -19,7 +21,8 @@
 			{ src: `${optimazerPrefix}width=800,quality=50,format=jpeg/${data.blog.image}`, w: 800 }
 		],
 		failback: data.blog.image,
-		alt: 'blog top'
+		alt: 'blog top',
+		placeholder: data.blog.imagePlaceholderUrl
 	};
 </script>