PostHeader

A header for a post page.

Props

A PostHeader component has the following properties:

PropRequiredDescription
valueyesType Post (post from a content collection).
classnoAdditional Tailwind classes.

Examples

Complete post

Post

How to handle images

Thilo Maier •
Last modified:
<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} />

No author and no tags

Post

How to handle images

<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} />