Salu!

This is my first blog post using Next.js and MDX. I'm excited to share my thoughts and experiences with you.

What is MDX?

MDX is a format that lets you write JSX in your markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content.

Here's a simple example of JSX in markdown:

function Example() {
  return <div>This is JSX in markdown!</div>;
}

<Example />;

Interactive React Components in MDX

One of the most powerful features of MDX is the ability to include React components directly in your markdown content. These components can be fully interactive, allowing you to create rich user experiences right in your blog posts.

Example 1: A Color Palette Generator

Let's take a look at an interactive color palette generator below. You can select any base color, and it will generate a complete color palette that you might use in your designs. Try clicking on a color swatch to copy its hex code!

Example 2: Animated Counter Component

Here's another example of an interactive React component - an animated counter that responds to user interaction:

Code Highlighting Examples

MDX also supports syntax highlighting for various programming languages. Here are some examples:

JavaScript

// A simple JavaScript function
function calculateSum(a, b) {
  return a + b;
}

// Using arrow functions
const multiply = (a, b) => a * b;

// Working with arrays
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

TypeScript

// TypeScript interface
interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

// Function with type annotations
function getUserName(user: User): string {
  return user.name;
}

// Generic function
function getFirstItem<T>(array: T[]): T | undefined {
  return array.length > 0 ? array[0] : undefined;
}

CSS

/* Modern CSS example */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.card {
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

@media (prefers-color-scheme: dark) {
  .card {
    background-color: #2a2a2a;
    color: #f0f0f0;
  }
}

I hope you enjoy reading my blog! The combination of markdown and React components makes for a powerful authoring experience.

Feel free to explore the interactive components above and check out the syntax highlighting in the code blocks.