MDX Project Demo

Project Overview

This is a demo project page to verify that the MDX project rendering system works identically to the Sanity-powered version. It tests every available UI component within the project description context.

The project uses `Next.js` with the App Router, `TypeScript` for type safety, and `Tailwind CSS` for styling.

Architecture

Tech Stack

Layer	Technology	Purpose
Frontend	Next.js 15	React framework with SSR/SSG
Styling	Tailwind CSS	Utility-first CSS
Content	MDX	Markdown with JSX components
Database	Supabase	Comments, reactions, views
Deployment	Vercel	Edge network hosting

System Design

The application follows a content-first architecture where blog posts and projects are stored as local MDX files rather than in a headless CMS:

TYPESCRIPT

1// Content loading pipeline
2interface ContentPipeline {
3  source: "local-mdx";
4  compiler: "next-mdx-remote/rsc";
5  plugins: ["remark-gfm"];
6  output: {
7    content: React.ReactElement;
8    frontmatter: Record<string, unknown>;
9    headings: MdxHeading[];
10  };
11}

1// Content loading pipeline
2interface ContentPipeline {
3  source: "local-mdx";
4  compiler: "next-mdx-remote/rsc";
5  plugins: ["remark-gfm"];
6  output: {
7    content: React.ReactElement;
8    frontmatter: Record<string, unknown>;
9    headings: MdxHeading[];
10  };
11}

Info

MDX files are compiled at build time using `next-mdx-remote/rsc`, producing static HTML with zero client-side JavaScript for content rendering.

Key Features

Static Site Generation

All blog posts and project pages are statically generated at build time:

TSX

1export async function generateStaticParams() {
2  const slugs = await getAllPostSlugs();
3  return slugs.map((slug) => ({ post: slug }));
4}

1export async function generateStaticParams() {
2  const slugs = await getAllPostSlugs();
3  return slugs.map((slug) => ({ post: slug }));
4}

This means:

Instant page loads — HTML is pre-rendered
SEO friendly — search engines see complete content
Cost effective — no server compute per request

Code Block Support

The code block widget renders with macOS-style window chrome, syntax highlighting, and a copy button:

PYTHON

1def process_content(mdx_source: str) -> dict:
2    """Parse MDX frontmatter and extract headings."""
3    frontmatter = extract_yaml(mdx_source)
4    headings = extract_headings(mdx_source)
5    plain_text = strip_markup(mdx_source)
6
7    return {
8        "frontmatter": frontmatter,
9        "headings": headings,
10        "read_time": calculate_read_time(plain_text),
11    }

1def process_content(mdx_source: str) -> dict:
2    """Parse MDX frontmatter and extract headings."""
3    frontmatter = extract_yaml(mdx_source)
4    headings = extract_headings(mdx_source)
5    plain_text = strip_markup(mdx_source)
6
7    return {
8        "frontmatter": frontmatter,
9        "headings": headings,
10        "read_time": calculate_read_time(plain_text),
11    }

CSS

1/* Custom scrollbar for code blocks */
2.code-container::-webkit-scrollbar {
3  height: 6px;
4}
5
6.code-container::-webkit-scrollbar-thumb {
7  background: rgba(99, 102, 241, 0.3);
8  border-radius: 3px;
9}

1/* Custom scrollbar for code blocks */
2.code-container::-webkit-scrollbar {
3  height: 6px;
4}
5
6.code-container::-webkit-scrollbar-thumb {
7  background: rgba(99, 102, 241, 0.3);
8  border-radius: 3px;
9}

Rich Content Components

Tip

All components from the blog system work identically in project pages — same styling, same behavior.

Warning

When migrating from Sanity, ensure all PortableText custom blocks have corresponding MDX component wrappers.

Performance Metrics

The migration from Sanity to local MDX improved build performance:

Before vs After

Metric	Sanity (Before)	MDX (After)	Improvement
Build Time	~45s	~12s	73% faster
TTFB	~200ms	~50ms	75% faster
Bundle Size	12KB (client)	0KB (RSC)	100% reduced
API Calls	n per page	0	Eliminated

Design Philosophy

"Make it work, make it right, make it fast."

Kent Beck

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."

Antoine de Saint-Exupéry

"Good software, like wine, takes time."

Joel Spolsky

Color System

The project uses semantic color highlighting for different concepts:

Server Components run only on the server
Client Components hydrate on the browser
Shared Components work in both contexts
Build-time only code runs during `next build`

Ordered Steps

Define content schema in frontmatter YAML
Write MDX content with embedded JSX components
Compile with `next-mdx-remote/rsc` at build time
Serve pre-rendered HTML from the edge

Unordered Features

Hot module replacement during development
Automatic syntax highlighting for 30+ languages
KaTeX math rendering with source preview
Responsive tables with horizontal scroll
Fullscreen image lightbox with download

Video Demo

Image

The best tool is the one that gets out of your way and lets you focus on what matters — the content.

Conclusion

This demo project page verifies that every UI component renders correctly in the MDX project system. The styling, spacing, and interactivity should be identical to the Sanity-powered version.

Project Overview

The project uses `Next.js` with the App Router, `TypeScript` for type safety, and `Tailwind CSS` for styling.

Architecture

Tech Stack

Layer	Technology	Purpose
Frontend	Next.js 15	React framework with SSR/SSG
Styling	Tailwind CSS	Utility-first CSS
Content	MDX	Markdown with JSX components
Database	Supabase	Comments, reactions, views
Deployment	Vercel	Edge network hosting

System Design

The application follows a content-first architecture where blog posts and projects are stored as local MDX files rather than in a headless CMS:

TYPESCRIPT

1// Content loading pipeline
2interface ContentPipeline {
3  source: "local-mdx";
4  compiler: "next-mdx-remote/rsc";
5  plugins: ["remark-gfm"];
6  output: {
7    content: React.ReactElement;
8    frontmatter: Record<string, unknown>;
9    headings: MdxHeading[];
10  };
11}

1// Content loading pipeline
2interface ContentPipeline {
3  source: "local-mdx";
4  compiler: "next-mdx-remote/rsc";
5  plugins: ["remark-gfm"];
6  output: {
7    content: React.ReactElement;
8    frontmatter: Record<string, unknown>;
9    headings: MdxHeading[];
10  };
11}

Info

MDX files are compiled at build time using `next-mdx-remote/rsc`, producing static HTML with zero client-side JavaScript for content rendering.

Key Features

Static Site Generation

All blog posts and project pages are statically generated at build time:

TSX

1export async function generateStaticParams() {
2  const slugs = await getAllPostSlugs();
3  return slugs.map((slug) => ({ post: slug }));
4}

1export async function generateStaticParams() {
2  const slugs = await getAllPostSlugs();
3  return slugs.map((slug) => ({ post: slug }));
4}

This means:

Instant page loads — HTML is pre-rendered
SEO friendly — search engines see complete content
Cost effective — no server compute per request

Code Block Support

The code block widget renders with macOS-style window chrome, syntax highlighting, and a copy button:

PYTHON

1def process_content(mdx_source: str) -> dict:
2    """Parse MDX frontmatter and extract headings."""
3    frontmatter = extract_yaml(mdx_source)
4    headings = extract_headings(mdx_source)
5    plain_text = strip_markup(mdx_source)
6
7    return {
8        "frontmatter": frontmatter,
9        "headings": headings,
10        "read_time": calculate_read_time(plain_text),
11    }

1def process_content(mdx_source: str) -> dict:
2    """Parse MDX frontmatter and extract headings."""
3    frontmatter = extract_yaml(mdx_source)
4    headings = extract_headings(mdx_source)
5    plain_text = strip_markup(mdx_source)
6
7    return {
8        "frontmatter": frontmatter,
9        "headings": headings,
10        "read_time": calculate_read_time(plain_text),
11    }

CSS

1/* Custom scrollbar for code blocks */
2.code-container::-webkit-scrollbar {
3  height: 6px;
4}
5
6.code-container::-webkit-scrollbar-thumb {
7  background: rgba(99, 102, 241, 0.3);
8  border-radius: 3px;
9}

1/* Custom scrollbar for code blocks */
2.code-container::-webkit-scrollbar {
3  height: 6px;
4}
5
6.code-container::-webkit-scrollbar-thumb {
7  background: rgba(99, 102, 241, 0.3);
8  border-radius: 3px;
9}

Rich Content Components

Tip

All components from the blog system work identically in project pages — same styling, same behavior.

Warning

When migrating from Sanity, ensure all PortableText custom blocks have corresponding MDX component wrappers.

Performance Metrics

The migration from Sanity to local MDX improved build performance:

Before vs After

Metric	Sanity (Before)	MDX (After)	Improvement
Build Time	~45s	~12s	73% faster
TTFB	~200ms	~50ms	75% faster
Bundle Size	12KB (client)	0KB (RSC)	100% reduced
API Calls	n per page	0	Eliminated

Design Philosophy

"Make it work, make it right, make it fast."

Kent Beck

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."

Antoine de Saint-Exupéry

"Good software, like wine, takes time."

Joel Spolsky

Color System

The project uses semantic color highlighting for different concepts:

Server Components run only on the server
Client Components hydrate on the browser
Shared Components work in both contexts
Build-time only code runs during `next build`

Ordered Steps

Define content schema in frontmatter YAML
Write MDX content with embedded JSX components
Compile with `next-mdx-remote/rsc` at build time
Serve pre-rendered HTML from the edge

Unordered Features

Hot module replacement during development
Automatic syntax highlighting for 30+ languages
KaTeX math rendering with source preview
Responsive tables with horizontal scroll
Fullscreen image lightbox with download

Video Demo

Image

The best tool is the one that gets out of your way and lets you focus on what matters — the content.

Conclusion

This demo project page verifies that every UI component renders correctly in the MDX project system. The styling, spacing, and interactivity should be identical to the Sanity-powered version.

MDX Project Demo

Join Baiyuechu Newsletter!

General

Specifics

Extra

MDX Project Demo

Join Baiyuechu Newsletter!