From 1395c6fead51a26b7ce54138c40ce76a000dfbfd Mon Sep 17 00:00:00 2001
From: ocknamo <s14pes@gmail.com>
Date: Fri, 7 Jun 2024 00:53:08 +0900
Subject: [PATCH] poc: image optimazer

---
 src/routes/blog/[slug]/+page.svelte | 42 ++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 2cc9e02..8c9f1ef 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -1,13 +1,45 @@
 <script lang="ts">
 	import SvelteMarkdown from 'svelte-markdown';
+	import { browser } from '$app/environment';
 
 	export let data;
+
+	// お手製のfailbackのPoC
+	// 雑な実装なので作り込む必要がありそう
+	// widthなどの値も渡したい
+	const optimazerPrefix =
+		'https://nostr-image-optimizer.ocknamo.com/image/width=1600,quality=50,format=';
+
+	let src = {
+		img: `${optimazerPrefix}webp/${data.blog.image}`,
+		webp: [`${optimazerPrefix}webp/${data.blog.image}`],
+		jpeg: [`${optimazerPrefix}jpeg/${data.blog.image}`]
+	};
+
+	const handleImgError = (e: Event) => {
+		if (e.type !== 'error') {
+			return;
+		}
+
+		// failback
+		src = {
+			img: data.blog.image,
+			webp: [data.blog.image],
+			jpeg: [data.blog.image]
+		};
+	};
 </script>
 
 <hgroup>
-	{#if !!data.blog.image}
-		<img class="image" src={data.blog.image} alt="thumbnail" />
-	{/if}
+	<div class="image-wrapper">
+		{#if !!data.blog.image && browser}
+			<picture>
+				<source srcset={src.jpeg[0]} type="image/jpeg" />
+				<source srcset={src.webp[0]} type="image/webp" />
+				<img src={src.img} alt="my top" on:error={handleImgError} loading="lazy" />
+			</picture>
+		{/if}
+	</div>
 	<h1>{data.blog.title}</h1>
 	<p class="naddress">
 		naddress: <a
@@ -48,6 +80,10 @@
 		max-width: 800px;
 	}
 
+	hgroup .image-wrapper {
+		height: 320px;
+	}
+
 	hgroup img {
 		min-width: 100%;
 		height: 320px;