Remix Markdown overview page – DEV Community

Now that now we have our Markdown powered page to work, let’s have a look at how we will add some sort of overview web page.

This may very well be in your homepage to showcase your newest articles or just a weblog overview web page.

Observe: Whereas doing analysis, I couldn’t discover an automatic approach, so this text may get up to date as soon as I do.



Loading Markdown recordsdata

Markdown recordsdata must be loaded individually in Remix. I am not 100% positive if there may be an automatic approach of doing it on the level of writing.

If I do discover one, I will replace this text 🙌.

Let’s get began!

In our instance, we’ll create a weblog overview web page, so let’s add the index.tsx file inside our weblog listing.

Now we will begin by loading the markdown recordsdata we need to present.

import * as firstArticle from './my-first-article.md';
import * as secondArticle from './mdx-sample.mdx';
Enter fullscreen mode

Exit fullscreen mode

Then we solely need to load the metadata (Frontmatter part) of the Markdown recordsdata.
So let’s create a perform that solely extracts that data slightly than the entire file.

perform postFromModule(mod) {
  return {
    slug: mod.filename.change(/.mdx?$/, ''),
    ...mod.attributes.meta,
  };
}
Enter fullscreen mode

Exit fullscreen mode

This perform will return the slug and all frontmatter elements of the file.
The frontmatter part is every little thing inside the three dashes on the high of the file.

Then we will use the Remix loader to really load these pages.

export async perform loader() {
  return json([postFromModule(firstArticle), postFromModule(secondArticle)]);
}
Enter fullscreen mode

Exit fullscreen mode

Now we will entry this information inside our web page.

export default perform Index() {
  const posts = useLoaderData();

  return (
    <ul>
      {posts.map((submit) => (
        <li key={submit.slug}>
          <Hyperlink to={submit.slug}>{submit.title}</Hyperlink>
          {submit.description ? <p>{submit.description}</p> : null}
        </li>
      ))}
    </ul>
  );
}
Enter fullscreen mode

Exit fullscreen mode

And that is it. Remix will loop over the posts now we have outlined in our import and present the title and outline with a hyperlink to the precise web page.

Take a look at this GitHub repo to see the whole code.



Thanks for studying, and let’s join!

Thanks for studying my weblog. Be at liberty to subscribe to my e-mail e-newsletter and join on Facebook or Twitter



Add a Comment

Your email address will not be published. Required fields are marked *