Custom MDX Examples

Nextfolio uses custom MDX for blog posts, making it easy to include JSX components such as interactive embeds, charts, or alerts directly in your markdown content.

Blockquotes

If today were the last day of my life, would I want to do what I am about to do today? – Steve Jobs

Links

• Nextfolio is built with Next.js.
• Nextfolio uses pnpm for package management.

Images

Nextfolio uses Next.js Image in MDX for seamless image rendering:

<Image
  src="/opengraph-image.png"
  alt="OpenGraph image"
  width={640}
  height={500}
/>

Renders:

Image Grid

Nextfolio uses a custom image grid component to display image galleries.

<ImageGrid
  columns={3} // Accepts 2, 3, or 4 columns
  images={[
    { src: "/photos/photo1.jpg", alt: "Photo1", href: "#" }, // 'href' is optional
    { src: "/photos/photo2.jpg", alt: "Photo2", href: "#" },
  ]}
/>

Renders:

Embeds

YouTube Videos

Nextfolio uses react-youtube to embed YouTube videos in MDX posts.

<YouTube videoId="jFrO45im1II" />

Renders:

Captions

Nextfolio uses react-wrap-balancer to evenly balance captions in MDX posts.

<Caption>
  Captions that flow smoothly, making your content easy to read and visually
  appealing with a clean look.
</Caption>

Renders:

Tables

Nextfolio uses a custom table component to render tables in MDX posts.

<Table
  data={{
    headers: ["Title", "Description"],
    rows: [
      [
        "First item",
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perspiciatis repellat amet quos.",
      ],
      [
        "Second item",
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perspiciatis repellat amet quos.",
      ],
    ],
  }}
/>

Renders:

Math Expressions

Nextfolio allows you to render mathematical expressions in MDX posts using KaTeX . Simply wrap your expression in $ to include KaTeX within your MDX content.

$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$

Renders:

$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$

Callout

Nextfolio uses a custom callout component to render important information in MDX posts.

<Callout emoji="💡">
[Nextfolio](https://nextfolio.site) is a clean, simple, and fast portfolio built with Next.js, Tailwind CSS, and pnpm for optimal performance.
</Callout>

Renders: