MDX Components Showcase

This comprehensive guide demonstrates all the custom React components available in our MDX blog system. Use this as a reference for creating rich, interactive blog content.

Text Components

Headings Hierarchy

H1 - Main Title (text-4xl font-bold)

H2 - Major Section (text-3xl font-semibold)

H3 - Subsection (text-2xl font-semibold)

H4 - Minor Heading (text-xl font-medium)

H5 - Small Heading (text-lg font-medium)

H6 - Smallest Heading (text-base font-medium)

Paragraphs and Text

This is a regular paragraph with bold text, italic text, and inline code. The text uses proper line height and spacing for optimal readability.

Here's another paragraph that demonstrates proper spacing between elements. Notice how the text flows naturally and maintains good visual hierarchy.

Links

Here are various types of links:

• Internal link to another blog post
• External link to Lemapi website
• Link with custom styling

Lists

Unordered Lists

Here's an unordered list with various items:

• Primary item with bold text
• Secondary item with italic text
• Code item with inline code
• Regular item with normal text
• Nested item
  • Sub-item one
  • Sub-item two
    • Deep nested item
• Back to main level

Ordered Lists

Here's an ordered list showing a process:

1. First step - Initialize the project
2. Second step - Configure dependencies
3. Third step - Set up the environment
4. Fourth step - Test the implementation
5. Final step - Deploy to production

Code Examples

Inline Code

Use console.log() for debugging and useState() for state management in React.

Code Blocks

Here's a JavaScript code block:

// React component example
import React, { useState, useEffect } from "react";

const BlogPost = ({ title, content }) => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simulate loading
    setTimeout(() => setIsLoading(false), 1000);
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <article>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </article>
  );
};

export default BlogPost;

Here's a TypeScript code block:

// TypeScript interface example
interface BlogPost {
  id: string;
  title: string;
  content: string;
  author: string;
  publishedAt: string;
  tags: string[];
  featured: boolean;
}

const createBlogPost = (data: Partial<BlogPost>): BlogPost => {
  return {
    id: crypto.randomUUID(),
    title: data.title || "Untitled",
    content: data.content || "",
    author: data.author || "Anonymous",
    publishedAt: new Date().toISOString(),
    tags: data.tags || [],
    featured: data.featured || false,
    ...data,
  };
};

Tables

Basic Table

| Component | Type | Description | Status | | --------- | ----- | --------------------- | ---------- | | Heading | Text | Main page titles | ✅ Working | | Paragraph | Text | Body content | ✅ Working | | Code | Code | Inline and block code | ✅ Working | | List | List | Ordered and unordered | ✅ Working | | Table | Table | Data presentation | ✅ Working | | Link | Link | Internal and external | ✅ Working |

Complex Table

| Feature | Implementation | Performance | User Experience | Priority | | ----------------------- | --------------- | ----------- | --------------- | -------- | | MDX Rendering | next-mdx-remote | Fast | Excellent | High | | Syntax Highlighting | Prism.js | Good | Good | Medium | | Image Optimization | next/image | Excellent | Excellent | High | | SEO Optimization | next/head | Good | Excellent | High | | Type Safety | TypeScript | Excellent | Good | High |

Blockquotes

Simple Blockquote

This is a simple blockquote that demonstrates the styling of quoted text. It should have proper indentation and visual distinction from regular content.

Blockquote with Attribution

"The best way to predict the future is to create it."

— Peter Drucker

Blockquote with Multiple Paragraphs

This is a blockquote with multiple paragraphs to test the styling and spacing.

It should maintain proper spacing between paragraphs while keeping the blockquote styling consistent.

The visual hierarchy should be clear and readable.

Images

Regular Image

Here's an image that should be properly optimized:

Image with Caption

Figure 1: A sample code example demonstrating proper syntax highlighting

Custom Components

Badge Components

Here are various badge styles:

Card Components

Separator Component

This is content above the separator.

This is content below the separator.

Advanced Examples

Mixed Content

Here's a complex example that combines multiple components:

Code with Explanation

Here's a practical example of using MDX components:

// MDX Component Configuration
const mdxComponents = {
  // Custom heading components
  h1: ({ children, ...props }) => (
    <h1 className="text-4xl font-bold text-foreground" {...props}>
      {children}
    </h1>
  ),

  // Custom code components
  code: ({ children, ...props }) => (
    <code className="bg-muted px-1 py-0.5 rounded text-sm" {...props}>
      {children}
    </code>
  ),

  // Custom image components
  img: ({ src, alt, ...props }) => (
    <Image src={src} alt={alt} width={800} height={400} {...props} />
  ),
};

This configuration allows you to customize how each HTML element is rendered in your MDX content.

Conclusion

This showcase demonstrates the full range of components available in our MDX blog system. Each component is designed to work seamlessly with our design system and provide a consistent, professional appearance.

Key Takeaways

1. Consistent Styling - All components use shadcn color tokens
2. Proper Typography - Well-balanced heading hierarchy
3. Responsive Design - Components adapt to different screen sizes
4. Accessibility - Proper semantic HTML and ARIA attributes
5. Performance - Optimized images and efficient rendering

Next Steps

• Experiment with different component combinations
• Create custom components for specific use cases
• Test the components with real content
• Gather feedback from content creators

This showcase serves as both a testing ground and a reference guide for creating rich, interactive blog content using our MDX component system.