A header for a post page.
A PostHeader component has the following properties:
| Prop | Required | Description |
|---|---|---|
value | yes | Type Post (post from a content collection). |
class | no | Additional Tailwind classes. |
<script lang="ts">
import { PostHeader } from '$lib/components/index.js';
const post = {
title: 'How to handle images',
description:
'Adding images to Markdown files has changed. This post explains how to embed images.',
author: {
id: 'thilo',
name: 'Thilo Maier',
initials: 'TM',
url: 'https://bsky.app/profile/maier.tech',
imageUrl: 'https://maier.tech/assets/portrait-thilo-maier.jpg',
_meta: {
filePath: 'thilo.json',
fileName: 'thilo.json',
directory: '.',
extension: 'json',
path: 'thilo'
}
},
publishedDate: '2025-10-08',
lastmodDate: '2025-10-15',
tags: [
{
id: 'images',
label: 'Images',
path: '/',
_meta: {
filePath: 'images.json',
fileName: 'images.json',
directory: '.',
extension: 'json',
path: 'images'
}
},
{
id: 'svelte',
label: 'Svelte',
path: '/',
_meta: {
filePath: 'svelte.json',
fileName: 'svelte.json',
directory: '.',
extension: 'json',
path: 'svelte'
}
}
],
_meta: {
filePath: 'how-to-handle-images/+page.md',
fileName: '+page.md',
directory: 'how-to-handle-images',
extension: 'md',
path: 'how-to-handle-images/+page'
},
path: '/posts/how-to-handle-images'
};
</script>
<PostHeader value={post} />
<script lang="ts">
import { PostHeader } from '$lib/components/index.js';
const post = {
title: 'How to handle images',
description:
'Adding images to Markdown files has changed. This post explains how to embed images.',
publishedDate: '2025-10-08',
_meta: {
filePath: 'how-to-handle-images/+page.md',
fileName: '+page.md',
directory: 'how-to-handle-images',
extension: 'md',
path: 'how-to-handle-images/+page'
},
path: '/posts/how-to-handle-images'
};
</script>
<PostHeader value={post} />