Fetch all content from markdown files

[RiccardoPP]

Hi,
I'm a newbie. I'm tring to build an infinite scrolling homepage for my blog with SvelteKit and MDsveX. I need to fetch all the content from the .svx/.md files, not only the metadata. I've tried some methods (for example this one or other similar with import.meta.glob but with I only fetch the metadata and not the whole html.

May you help me?

Thanks

[michaeloliverx]

Here is a simple setup that will get you what you want

// src/routes/blog/_posts.ts
import { basename, dirname } from "path";

export type Post = {
  slug: string;
  title: string;
  excerpt: string;
  isPublished: boolean;
  publishedOn: string;
  updatedOn: string;
};

const modules = import.meta.globEager("/content/posts/**/*.svelte.md");

export const posts: Post[] = Object.entries(modules).map(([filepath, module]) => {
  const slug = basename(dirname(filepath));
  const { metadata } = module;
  const { html } = module.default.render();
  return {
    slug,
    html,
    ...metadata,
  };
});

// src/routes/blog/index.json.ts
import type { EndpointOutput } from "@sveltejs/kit";

import { posts } from "./_posts";

export async function get(): Promise<EndpointOutput> {
  return {
    body: JSON.stringify(posts),
  };
}

This sets up an endpoint /blog.json which contains a list of all your posts metadata and html.

[RiccardoPP]

It works. Thanks!

[deep-research]

Hi Michael. I have a question about your example if you don't mind me asking. I am trying to understand how you got the following line to work in your page data file:

const { html } = module.default.render();

It works for me within a svelte component with a reactive declaration, but when I try to place it in my page data file, I get the following error messages on the client side:

render is not a function and
<Root> was created without expected prop 'form'

The data does appear in my server console though.

[MorganConrad]

I get the same intermittent error as @deep-research. Will try moving the code as suggested.