baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

image uses caption

Browse source
This commit is contained in:
Benjamin Palko 2025-06-27 09:07:19 -04:00
parent acc5bbd363
commit b338fced35
2 changed files with 18 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/lib/components/Image.svelte Normal file
View file

@ -0,0 +1,16 @@
<script lang="ts">
interface Props {
src: string;
alt: string;
caption?: string;
}
let { src, alt, caption }: Props = $props();
</script>
<figure class="flex flex-col">
<img class="aspect-4/2 w-full object-cover" {src} {alt} />
{#if caption}
<figcaption class="mt-2 text-center text-sm text-gray-500 italic">{caption}</figcaption>
{/if}
</figure>

3
src/routes/blog/[slug]/+page.svelte
View file

@ -10,6 +10,7 @@
import SvelteMarkdown from '@humanspeak/svelte-markdown';
import dayjs from 'dayjs';
import type { PageProps } from './$types';
import Image from '$lib/components/Image.svelte';
let { data }: PageProps = $props();
@ -21,7 +22,7 @@
<p class="text-gray-500">{dayjs(post.published).format('DD MMMM YYYY')}</p>
<h1 class="text-4xl font-light">{post.title}</h1>
</div>
<img class="aspect-4/2 w-full object-cover" src={post.image.url} alt={post.image.alt} />
<Image src={post.image.url} alt={post.image.alt} caption={post.image.caption} />
<div class="w-full max-w-5xl px-4">
<SvelteMarkdown
source={data.post.body}