Display Project images

Author: stormwarning

www/src/lib/components/project-article.svelte

@@ -1,6 +1,9 @@
 <script>
+import { urlFor } from '$lib/sanity/image.js'
+
 import FaviconGithub from './icons/favicon-github.svelte'
 import Heading from './heading.svelte'
+import IconRSS from './icons/icon-rss.svelte'
 import MentionLink from './mention-link.svelte'
 import PortableText from './portable-text.svelte'
 
@@ -17,7 +20,9 @@ export let project
 				<MentionLink href={project.site}>Visit site</MentionLink>
 			{/if}
 			{#if project.post}
-				<MentionLink href={project.post}>Read blog post</MentionLink>
+				<MentionLink href={project.post} logo={IconRSS}
+					>Read post</MentionLink
+				>
 			{/if}
 			{#if project.repo}
 				<MentionLink href={project.repo} logo={FaviconGithub}
@@ -29,5 +34,32 @@ export let project
 			<PortableText value={project.lede} />
 		</div>
 	</div>
-	<!-- <div>Images</div> -->
+	{#if project.images?.length > 0}
+		<div class="l:gap-8 flex justify-end gap-6">
+			{#each project.images as image}
+				<figure class="not-prose m-0 flex">
+					<picture class="transition-opacity duration-300">
+						<source
+							srcset={urlFor(image).format('webp').url()}
+							type="image/webp"
+						/>
+						<img
+							class="h-full w-full object-contain"
+							style:aspect-ratio={image.metadata.dimensions
+								.aspectRatio}
+							style:max-height="{Math.floor(
+								image.metadata.dimensions.height / 2,
+							)}px"
+							loading="lazy"
+							decoding="async"
+							alt=""
+							sizes="100vw"
+							srcset={urlFor(image).format('jpg').url()}
+							src={urlFor(image).format('jpg').url()}
+						/>
+					</picture>
+				</figure>
+			{/each}
+		</div>
+	{/if}
 </article>

www/src/lib/sanity/projects.js

@@ -6,7 +6,15 @@ import { client } from './client.js'
  * @returns {Promise<import('./types.js').ProjectsQueryResult>}
  */
 export async function getProjects() {
-	let projectsQuery = groq`*[_type == "project"] | order(_createdAt desc)`
+	let projectsQuery = groq`
+		*[_type == "project"]{
+	 		...,
+	 		'post': array::join(['/writing', post->slug.current], '/'),
+			images[]{
+				...,
+				'metadata': asset->metadata
+			},
+		} | order(_createdAt desc)`
 
 	return await client.fetch(projectsQuery)
 }