#Examples or Tutorials for using mdx-bundler with Remix?

1 messages · Page 1 of 1 (latest)

near scaffold
#

I'm looking at Remix and mdx-bundler, and struggling to understand how to use it correctly. Compiling(?) a single mdx-page, looks fairly straight forward, but can't figure out how to use it correctly in relation to generating an index of the blog posts and stuff like that.

Is there a simple "complete" example, or a tutorial anywhere for how to create a simple blog with mdx-bundler and remix? Looking for something with a folder per post (with pictures in same folder), and a post-page, and an index-page listing out all (or latest) posts.

I tried looking at Kent C. Dodds website, but it's so complicated that I've given up trying to figure out how it all works. 😕

civic elbow
#

If it's all on the same repo, Remix actually parses .md/.mdx files in your routes folder natively.

#

You don't have to go through mdx-bundler at all.

near scaffold
# civic elbow If it's all on the same repo, Remix actually parses .md/.mdx files in your route...

Yeah, I'm aware of that, but the like the docs itself say:

Rather than compiling your content at build-time like this document demonstrates, it's typically better UX and DX if you do this at runtime via something like mdx-bundler. It's also much more customizable and powerful. However, if you prefer to do this compilation at build-time, continue reading.

...

Clearly this is not a scalable solution for a blog with thousands of posts. Realistically speaking, writing is hard, so if your blog starts to suffer from too much content, that's an awesome problem to have. If you get to 100 posts (congratulations!), we suggest you rethink your strategy and turn your posts into data stored in a database so that you don't have to rebuild and redeploy your blog every time you fix a typo. You can even keep using MDX with MDX Bundler.

civic elbow
#

Something like

const postsDirectory = path.join(process.cwd(), 'routes/posts');
  const filenames = await fs.readdir(postsDirectory);

to get your list of files.

near scaffold
near scaffold
civic elbow
#

I wonder if the remix examples have a simple implementation somewhere?

near scaffold
#

Can't find any. The only blog-related example I see there, is a prisma database one

civic elbow
#

Would be a good weekend project!

near scaffold
whole aurora
#

I got stuck on this same problem. I tried importing the markdown.mdx file and displaying it as a component, that didn't work. Then I tried mdx-bundler/client

import { getMDXComponent } from "mdx-bundler/client";
...
function MainCharacter() {
    const MDXLayout = React.useMemo(() => getMDXComponent(someMarkDown), [someMarkDown]);
    return (<MDXLayout />);

that didn't work either.

I then tried making a 'loadMarkdownFromFile.server.tsx' function and this didn't work either:

import { bundleMDX } from "mdx-bundler";

// This doesn't work..
export const loadMarkdownFromFile = async () => {
    console.log(`__dirname -> ${__dirname}`);

    const { code, frontmatter } = await bundleMDX({
        file: 'readme.mdx',
        cwd: '/tmp/', //../apps/frontend/app/routes/api/',
    });
    // Kaboom There was an error
//     ENOENT: no such file or directory, open 'readme.mdx'

// Error: ENOENT: no such file or directory, open 'readme.mdx'
//     at Object.openSync (node:fs:594:3)
//     at Object.readFileSync (node:fs:462:35)

    return ({ code, frontmatter });
}
atomic patio
civic elbow
#

Ah, I knew I saw one before!

atomic patio
#

I use app/utils/mdx.server.ts for several projects from this one reading MDX files to some headless remix projects that use MDX from directus and strapi

near scaffold