merge with upsteam 5731381edb

src/lib/components/index_profile.svelte

@@ -1,31 +1,24 @@
 <script lang="ts">
   import { site } from '$lib/config/site'
-  // import { src, width, height } from '/static/assets/avatar.jpg?width=384&metadata'
+  import Image from '$lib/components/prose/img.svelte'
-  // import srcset from '/static/assets/avatar.jpg?w=48;96;192&srcset'
 </script>
 
 <div class="sticky flex flex-col gap-4 top-24 xl:ml-auto xl:mr-8 xl:max-w-xs">
   <div class="h-card flex flex-col gap-4  card card-body p-4 items-right xl:border-2 xl:py-8 border-base-content/10 ">
     <a href={site.protocol + site.domain} class="hidden u-url u-uid">{site.author.name}</a>
     <figure class="relative mx-auto group">
-      <img
+       {#if site.author.avatar}
+      <Image
         class="u-photo rounded-full shadow-xl w-32 h-32 hover:rotate-[360deg] transition-transform duration-1000 ease-in-out"
         src={site.author.avatar}
         alt={site.author.name} />
-      <!-- <picture>
+    {/if}
-        <source {srcset} type="image/jpg" />
+    {#if site.author.status}
-        <img
+      <div
-          class="u-photo rounded-full shadow-xl transition-shadow z-10 w-24 h-24 md:w-32 md:h-32 hover:rotate-[360deg] transition-transform duration-1000 ease-in-out"
+        class="heart absolute rounded-full w-10 h-10 bottom-0 right-0 bg-base-100 shadow-xl text-xl text-center py-1.5">
-          {src}
+        {site.author.status}
-          {width}
+      </div>
-          {height}
+    {/if}
-          alt='/assets/avatar.jpg' />
-      </picture> -->
-      {#if site.author.status}
-        <div class="heart absolute rounded-full w-10 h-10 bottom-0 right-0 bg-base-100 shadow-xl text-xl text-center py-1.5">
-          {site.author.status}
-        </div>
-      {/if}
     </figure>
     <div class="text-center flex flex-col gap-2">
       <h2 class="text-2xl font-bold mt-0 mb-2 p-name">{site.author.name}</h2>

src/lib/components/prose/img.svelte

@@ -1,10 +1,39 @@
 <script lang="ts">
+  /* @see {@link https://github.com/sveltejs/kit/issues/241#issuecomment-1363621896} */
+
+  const images = import.meta.glob('/static/**/*.{jpg,jpeg,png,webp,avif}', {
+    import: 'default',
+    eager: true
+  })
+
+  const sources = import.meta.glob('/static/**/*.{jpg,jpeg,png,webp,avif}', {
+    query: {
+      format: 'avif',
+      width: '384;768',
+      source: ''
+    },
+    import: 'default',
+    eager: true
+  })
+
   let className: string | undefined = undefined
   export { className as class }
   export let src: string
   export let alt: string = src
   export let loading: 'eager' | 'lazy' = 'lazy'
   export let decoding: 'async' | 'sync' | 'auto' = 'async'
+
+  type Image = {
+    src: string
+    w: number
+    h: number
+  }
+
+  const image: Image = images[`/static${src}`] as any
+  const source: Image[] = sources[`/static${src}`] as any
 </script>
 
-<img {src} {alt} class={className ?? 'rounded-lg my-2'} {loading} {decoding} />
+<picture>
+  <source srcset={source.map(({ src, w }) => `${src} ${w}w`).join(', ')} type="image/avif" />
+  <img src={image.src} width={image.w} height={image.h} {alt} class={className ?? 'rounded-lg my-2'} {loading} {decoding} />
+</picture>