How would you get a list of posts including metadata?

[didier]

I want to get a list of all posts in my /posts directory as well as each post's metadata. However, I can't seem to find anywhere to point me in the right direction. i don't have a .json post index to map over, and I don't want to use one either. I should mention I previously got this working with @jackfranklin/rollup-plugin-markdown using the following syntax:

import allPosts from './posts/*.md'

In short: when I create a new md file, I want that post to show up in a posts list

Essentially, I want

/posts
  first-post.md
  second-post.md

to turn into something like this on the front-end

My Blog

1. First Post
2. Second Post

[Pytal]

I'm currently using import-all.macro simply because the alternatives I've found are not as actively maintained but have also used babel-plugin-import-glob-array. Something like the snippet below would work.

import importAll from 'import-all.macro'

export const posts = Object.entries(importAll.sync('./posts/*.svx'))

[samlfair]

This is easier in SvelteKit, because you can use Vite's globImport. Here's how I did it:

<script>
  import globToArray from '$lib/globToArray'

  const modules = import.meta.globEager('./blog/*.svx')
  const posts = globToArray(modules)
</script>

globToArray just converts the ESM import object to an array for parsing in Svelte.

I found it worked better with globEager instead of glob, though I don't really understand the difference.

To access the component itself, you can use <svelte:component />:

{#each posts as post}
  <svelte:component this={post.default} />
{/each}

[winston0410]

save my day!

[bwklein]

globToArray link is broken in your reply, it is now https://github.com/samlfair/blog/blob/mdsvex/src/lib/utilities/globToArray.js

[alexiglesias93]

SvelteKit approach to fetch the posts data:

const glob_import = import.meta.glob<{ default: SvelteComponent; metadata: Record<string, any> }>(
	'./writing/*.md',
	{
		eager: true
	}
);
const writings = Object.entries(glob_import);
console.log({ writings });

This will return the posts data like this:

type Path = string; // The file path
type Module = {
  default: SvelteComponent; // The Svelte Component
  metadata: Record<string, any> // An object containing the frontmatter
}
type Writings = [Path, Module][];

// Writings
[
    [
        "./writing/test.md",
        {
            default: SvelteComponent,
            metadata: {
                layout: "writing",
                title: "Post One",
                subtitle: "Test",
                author: "alex",
                date: "August 9th, 2022"
            }
        }
    ]
]

If you want to mount the components, you can do it like:

{#each writings as [path, module]}
	<svelte:component this={module.default} />
{/each}

[didier]

I ended up doing it from within the load function in SvelteKit, using methods similar to those above — consider this answered!

[theetrain]

For those who received the same error as me:

The left-hand side of an assignment expression must be a variable or a property access.

Ensure you have the Svelte config extensions option and mdsvex config extensions option both set:

svelte.config.js

const config = {
  preprocess: [vitePreprocess(), mdsvex({ extensions: ['.md'] })],
  extensions: ['.svelte', '.md']
}

In my case, I'm using .md. Each imported file will be processed by mdsvex and you'll have the keys metadata (frontmatter) and default (Svelte 4 class or Svelte 5 function) that you may manually server-render using the server-side component API.