I'm using the glob import functionality of Vite to bring in multiple markdown files to a SvelteKit page:
<script context="module">
export async function load() {
const employmentsMeta =
import.meta.globEager('./employments/*.md');
return {
props: {
employmentsMeta: employmentsMeta
}
};
}
</script>
<script>
export let employmentsMeta;
</script>
This works well for me to access the metadata via employmentsMeta[Object.keys(employmentsMeta)[0]]['metadata']. I'm having difficulty accessing the actual contents of the markdown file, however - no matter how I attempt to access it, it seems to be coming back as undefined.
For example, console.log(employmentsMeta[Object.keys(employmentsMeta)[0]['default']]) returns undefined, despite my understanding that there's a default export object in there, and the metadata access working as intended.
How do I access the payload / body of the imported markdown?
I have a similar use-case, with markdown files in SvelteKit as blog posts.
In your example, I'd get the file contents as html like this:
const contents = employmentsMeta[Object.keys(employmentsMeta)[0]].default.render();
contents here is an object like this:
{
html: '/* a string with the markdown content parsed as html */',
css: { code: '', map: null },
head: '',
}
I guess you have to use mdsvex for the md->html conversion to happen.
EDIT: I should mention that I do this in an endpoint ([slug].json.js), return the results, and get them in the route, as doing it in the load function was throwing an error (...default.render is not a function) client-side.