I am building a blog site with sveltekit and markdown. I import the .md file using dynamic import but i can only acces the metadata and not the post content written in markdown. Please help
//[slug.js]
export async function get({ params }) {
const post = await import(`../../posts/${params.slug}.md`)
console.log(post.default)
console.log(post.metadata)
return {
body: {
postContent: post.default,
meta: post.metadata
}
}
}
//[slug.svelte]
<script>
export let postContent, meta
const { title, date, thumbnail } = meta
</script>
<h1>{title}</h1>
<p>{date}</p>
<img src={thumbnail} alt={title} />
<p>{postContent}</p>
Using post.metadata I can get the post title, date and thumbnail but post.default returns this:
{ render: [Function: render], '$$render': [Function: $$render] }
How can I get the post content?
The solution is to use post.default on the endpoint [slug].js and use <svelte:component this={postContent}/> on the [slug].svelte file.
Here are the files for the solution:
//[slug].js
export async function get({ params }) {
const post = await import(`../../posts/${params.slug}.md`)
return {
body: {
postContent: post.default,
meta: post.metadata
}
}
}
//[slug].svelte
<script>
export let postContent, meta
const { title, date, thumbnail } = meta
</script>
<h1>{title}</h1>
<p>{date}</p>
<img src={thumbnail} alt={title} />
<svelte:component this={postContent} />