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>
  );
}