How to render or load a list of markdown files dynamically in a page? Remix Vite

[zxlvera]

Hi all,

I am building a page with changelog / release notes using Remix and Vite.

Currently referencing https://github.com/pcattori/remix-blog-mdx but the code here requires the user to click on the slug before loading the page in routes folder in Remix.

The plan is to have a folder content that contains a list of *.md or *.mdx files by dates and render the markdown in descending dates.
MDX documentation only shows standard imports, which is not what I am looking for..

import Content from './content.mdx' 

Examples:

• Neon Tech ; Repo
• Tailwind Changelog

How do I load / render the entire markdown files once I navigate to /changelog?

. └── app/ ├── docs/ │ └── content/ │ ├── 2024-09-25.mdx │ ├── 2024-09-24.mdx │ └── 2024-09-23.mdx ├── models/ │ └── changelog.server.ts └── routes/ ├── changelog.tsx ├── changelog._index.tsx └── changelog.2024-09-23.mdx // this works 

Inside models/changelog.server.ts, there are a few ways I could get the markdown content

// this is in raw string which is not ideal const modules = import.meta.glob<{ frontmatter: Frontmatter }>( "../docs/changelog/*.mdx", { as: 'raw', eager: true }, ); 

or I get an object of props / children in post.default()

export const getPosts = async (): Promise<PostMeta[]> => { const modules = import.meta.glob<{ frontmatter: Frontmatter }>( "../docs/changelog/*.mdx", { eager: true }, ); const posts = Object.entries(modules).map((data) => { const [file, post] = data; const id = file.replace("../", "").replace(/\.mdx$/, ""); const slug = post.frontmatter.slug; // if (slug === undefined) throw new Error(`No route for ${id}`); return { file, slug, frontmatter: post.frontmatter, // component: post.default() }; }); return sortBy(posts, (post) => post.frontmatter.published, "desc"); }; 

[ChristianMurphy]

Welcome @zxlvera! 👋
I'm not sure I understand what you are asking here.

I am building a page with changelog / release notes using Remix and Vite.

Based off this I gather you want a systematic way to create a changelog?
Consider using https://github.com/changesets/changesets, this is what several MDX projects use.

The plan is to have a folder content that contains a list of *.md or *.mdx files by dates and render the markdown in descending dates.
MDX documentation only shows standard imports, which is not what I am looking for..

What are you looking for then?

How do I load / render the entire markdown files once I navigate to /changelog?

I don't understand what you mean.
Are you talking about the /changelog route on your remix server?
That is an Remix question, they do support at https://github.com/remix-run/remix/discussions

Inside models/changelog.server.ts, there are a few ways I could get the markdown content

This is definitely Remix specific, and also depends on what you want to do with said content.

[zxlvera]

Hi Christian,

Thanks for replying. Yes I was referring to the route /changelog where I will display 'release notes' on a website.

I figured out after referring to NextJS documentation for MDX here. Remix's documentation on MDX wasn't helpful. Hope my solution will help others.

What I did was to include an export component in every *.mdx file in a content folder.

import { MdxLayout } from "../../components/mdx-layout.tsx"; # Header 1 body text export default ({ children }) => <MdxLayout>{children}</MdxLayout>; 

and created a MdxLayout component shown in NextJS documentation here

export default function MdxLayout({ children }: { children: React.ReactNode }) { // Create any shared layout or styles here return <div style={{ color: 'blue' }}>{children}</div> } 

Now the solution in routes/changelog._index.tsx i used lazy load to load the components

import { json, useLoaderData } from '@remix-run/react'; import { useEffect, useState, Suspense } from 'react'; import { getPosts } from '~/models/post.server'; export const loader = async () => { return json(await getPosts()); }; const componentsMap = import.meta.glob("../docs/changelog/*.mdx"); export default function Component() { const posts = useLoaderData<typeof loader>(); const [components, setComponents] = useState<{ [key: string]: React.ComponentType<any>; }>({}); useEffect(() => { // Dynamically import components posts.forEach(async (post) => { console.log(post); const slug = post.slug; const importPath = `../docs/changelog/${post.frontmatter.published}.mdx`; if (componentsMap[importPath]) { const module = await componentsMap[importPath](); setComponents((prev) => ({ ...prev, [post.frontmatter.published]: module.default, })); } }); }, [posts]); return ( <div className="p-10"> <ul className="space-y-8"> {posts.map((post) => { const PostComponent = components[post.frontmatter.published]; return ( <li key={post.slug}> {PostComponent ? ( <Suspense fallback={<div>Loading...</div>}> <PostComponent {...post} /> </Suspense> ) : ( <div>Component not found for slug: {post.slug}</div> )} </li> ); })} </ul> </div> ); }