Astrofolio 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.
Here are some examples of using MDX:
h2 Heading
h3 Heading
h4 Heading
h5 Heading
Emphasis
This is bold text
This is italic text
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
CodeBlocks
// This is commented-out code
export default function HelloWorld() {
return (
<h1>Hello, World!</h1>
);
}
Images
Astrofolio uses Astro Image in MDX for seamless image rendering:
<Image
src="/opengraph-image.png"
alt="OpenGraph image"
width={640}
height={500}
/>
Renders:
Image Grid
Astrofolio 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: "#" },
{ src: "/photos/photo3.jpg", alt: "Photo3"},
]}
/>
Renders:
Embeds
Tweets
Astrofolio uses astro-tweet to embed tweets in MDX posts.
<Tweet id="1617979122625712128" />
Renders:
The hottest new programming language is English
YouTube Videos
Astrofolio uses astro-embed to embed YouTube videos in MDX posts.
<YouTube id="wXhTHyIgQ_U" />
Renders:
Captions
Astrofolio 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:
Captions that flow smoothly, making your content easy to read and visually appealing with a clean look.
Tables
Astrofolio 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:
Title | Description |
---|---|
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. |
Math Expressions
Astrofolio 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:
Callout
Astrofolio uses a custom callout component to render important information in MDX posts.
<Callout emoji="💡">
[Astrofolio](https://astrofolio-astro.vercel.app/) is a clean, simple, and fast portfolio built with Astro, Tailwind CSS, and bun for optimal performance.
</Callout>
Renders:
Astrofolio is a clean, simple, and fast portfolio built with Astro, Tailwind CSS, and bun for optimal performance.