Welcome 👋

This blog platform is built with industry-standard tools that work everywhere:

• react-markdown - Standard Markdown parser for React
• react-syntax-highlighter - Theme-aware code highlighting
• Mermaid.js - Interactive diagram rendering
• remark-gfm - GitHub Flavored Markdown support

Why this stack?

✅ Cloudflare Workers compatible - No eval, new Function, or WebAssembly ✅ Theme-aware - Code blocks and diagrams adapt to light/dark mode ✅ SEO friendly - Server-rendered HTML with client hydration ✅ Standard syntax - Use industry-standard Markdown, no custom formats

How to use

1. Create or edit files in content/blog/*.mdx
2. Use standard Markdown frontmatter: title, date, summary, tags
3. Run npm run dev to start with hot reload (MDX changes auto-update!)
4. Deploy anywhere - Vercel, Cloudflare Pages, or any Node.js host

Rich content examples

Code blocks with syntax highlighting

Code blocks automatically adapt to your theme (light/dark):

// TypeScript example with full syntax highlighting
import { posts } from ".velite";
import { BlogContentWrapper } from "~/components/blog/blog-content-wrapper";

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = posts.find((p) => p.slug === params.slug);

  if (!post) {
    return <div>Post not found</div>;
  }

  return <BlogContentWrapper markdown={post.body} />;
}

JavaScript with different theme

// This will show in light or dark theme depending on your preference
const fetchData = async () => {
  const response = await fetch("/api/posts");
  const data = await response.json();
  return data;
};

fetchData()
  .then((posts) => console.log(posts))
  .catch((error) => console.error(error));

JSON data structures

{ "platform": "Modern Blog", "features": ["Theme-aware highlighting", "Mermaid diagrams", "GitHub Flavored Markdown"], "compatibility": { "cloudflare": true, "vercel": true, "nodejs": true } }

Python code

# Python syntax highlighting
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate first 10 Fibonacci numbers
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Mermaid Diagrams

Diagrams are rendered on the client side and adapt to your theme:

Flowchart

Sequence Diagram

Class Diagram

State Diagram

GitHub Flavored Markdown

Tables

Task Lists

• Set up react-markdown
• Add syntax highlighting with react-syntax-highlighter
• Integrate Mermaid.js for diagrams
• Implement theme detection
• Add more diagram examples
• Create additional blog posts

Strikethrough & Formatting

You can use strikethrough, bold, italic, and inline code.

Autolinks

URLs are automatically linked: https://github.com/remarkjs/react-markdown

Inline Code

Use inline code like npm run dev or const theme = "dark" within paragraphs.

Blockquotes

Pro tip: Run npm run dev instead of npm run dev:fast to enable hot reload for MDX files. Your content changes will automatically update without manual rebuilds!

Note: All code blocks and diagrams automatically adapt to your theme preference. Try switching between light and dark mode to see the difference!

Next Steps

1. Customize styles: Edit src/styles/globals.css and tailwind.config.ts
2. Add more posts: Create new .mdx files in content/blog/
3. Extend features: Add custom components in src/components/blog/
4. Deploy: Push to your favorite hosting platform

Check out the features demo for more examples!