A preview of a note.
A NotePreview component has the following properties:
| Prop | Required | Description |
|---|---|---|
value | yes | Type NoteMeta & { path: string }; (note from a content collection). |
as | no | Heading element for the title (h2–h6, default: h2). |
class | no | Additional Tailwind classes. |
NotePreview inherits color and border-color from the parent:
<script lang="ts">
import { NotePreview } from '$lib/components/index.js';
const note = {
title: 'SvelteKit deployment best practices',
description:
'For SvelteKit on Railway, set env vars, add health checks, and use security headers to ensure reliable, secure, and smooth production deployments.',
publishedDate: '2025-05-18',
link: 'https://blog.example.com/articles/comprehensive-guide-to-sveltekit-deployment-strategies-best-practices-performance-optimization-security-considerations-monitoring-and-troubleshooting-techniques-for-production-environments',
_meta: {
filePath: 'sveltekit-deployment-tips/+page.md',
fileName: '+page.md',
directory: 'sveltekit-deployment-tips',
extension: 'md',
path: 'sveltekit-deployment-tips/+page'
},
path: '/notes/sveltekit-deployment-tips'
};
</script>
<div class="base-font-color dark:base-font-color-dark">
<NotePreview value={note} as="h3" />
</div>