DEV Community

Cover image for Shared layouts for markdown files in Remix
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Shared layouts for markdown files in Remix

In the previous article, we added the Typography Tailwind plugin to render each blog nicely.
However, we didn't have an excellent place to put the prose class for rendering purposes.

We set the prose on the root.tsx file.
This works, but it means we add the prose class to literally every rendered page.

To make it a bit more sustainable, we can use the shared layouts method to create a unique blog layout.

Adding a shared markdown layout

When we set up our markdown files in Remix, we dedicated a blog folder for them.

We can simply create a blog.tsx file in our routes directory to use the shared layout.

This file can be used to render specific layouts for the blog items.

Let's keep it super simple for now:

import { Outlet } from '@remix-run/react';

export default function Blog() {
  return (
    <div className='prose'>
      <h1>Welcome to the blog:</h1>
      <Outlet />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Each blog item will now have this static heading title and its markdown rendered inside the outlet!

Resulting in the following:

Markdown layout in Remix

The cool part is that this layout can be as extended as you want, and it will be used by all markdown files in the blog directory!

If you are interested, I uploaded the code for this article on this GitHub repo.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (3)

Collapse
psypher1 profile image
James 'Dante' Midzi

As Chris continues to teach us Remix, Eleventy takes me further and further away from js Frameworks

Collapse
dailydevtips1 profile image
Chris Bongers Author

For most things we don't need more than a static site generator.
I can build most of the stuff I need in Astro or Eleventy.

Although sometimes you just want that dynamic vibe :)

Collapse
psypher1 profile image
James 'Dante' Midzi • Edited on

I'm realising that now๐Ÿ˜…

And I'm glad that I have the ability (and choice) to do both - static and dynamic๐Ÿ˜„