jpreagan.com VS remark-mdx-images

You are welcome to take inspiration or use code from my website, but please remove my personal information and content. The source code is available on GitHub with updated documentation to make it easier for you to start. If you have any questions or feedback, don't hesitate to reach me on Twitter."

Also, note I've made use of some styling here; just a minimal example of how you can use Tailwind CSS and the official Tailwind Typography plugin. It's really fantastic for this sort of use case. If you're curious more about the styling have a look at the GitHub repo.

Here I'm using remarkGfm to provide GitHub Flavored Markdown, and rehype-prism-plus to give syntax highlighting for code blocks. You'll need to import a prism theme in /pages/_app.tsx or add your own custom tokens to global styles. I went with the latter option and you can take a look at how I did that here.

You can see my page here, and the code lives here. Also, be sure to check out Lee Robinson's personal dashboard for more inspiration.

You might also want to embed images in your MDX. Proprietary solutions like Cloudinary are great services, but can get a bit pricey too. Something you might want to look at is image bundling with remark-mdx-images, which you can use with mdx-bundler.