Blog System Banner

Welcome to the complete showcase of this blog system! This post demonstrates every single feature available, from syntax highlighting in 50+ programming languages to beautiful callouts and advanced formatting.

✅

Success

This blog system is built with Next.js 14, MDX, and custom React components for maximum flexibility and performance!

📋 Table of Contents

This blog features an interactive Table of Contents (TOC) sidebar that:

📍 Automatically extracts all H2 and H3 headings
🎯 Highlights the current section as you scroll
🖱️ Allows quick navigation with smooth scrolling
👻 Appears on hover (desktop) for a clean reading experience
📱 Accessible via floating button on mobile devices
🎨 Notion-style design with indented subheadings

💡

Tip

Look to the right side of your screen! You'll see the TOC that follows you as you scroll. Hover over it to see the full menu, or click any heading to jump to that section instantly.

🌈 Reading Progress Bar

At the very top of this page, you'll notice a rainbow progress bar that shows how far you've scrolled:

✨ Features:

🌈 Animated rainbow gradient that flows continuously
📊 Real-time progress tracking as you scroll
🎭 Smooth animation using GPU-accelerated transforms
💡 Subtle glow effect underneath
📱 Fully responsive and optimized for mobile
⚡ Zero performance impact with requestAnimationFrame

💬

Info

The progress bar uses advanced browser APIs for buttery-smooth performance. Try scrolling up and down to see it in action!

🎯 Callout Components

Our blog system features 6 types of callouts for different use cases:

📘 Note Callout

📘

Note

This is a note callout. Use it for general information, tips, or important points that need attention.

💬 Info Callout

💬

Info

This is an info callout. Perfect for additional context, explanations, or helpful information that supports your main content.

✅ Success Callout

✅

Success

This is a success callout. Use it to highlight positive outcomes, completed steps, or best practices that lead to success.

💡 Tip Callout

💡

Tip

This is a tip callout. Share pro tips, shortcuts, or helpful advice that can make readers' lives easier.

⚠️ Warning Callout

⚠️

Warning

This is a warning callout. Use it to caution readers about potential pitfalls, common mistakes, or things to watch out for.

🚨 Danger Callout

🚨

Danger

This is a danger callout. Reserve it for critical warnings, security issues, or actions that could cause serious problems if not handled carefully.

💻 Syntax Highlighting

Our blog system supports 50+ programming languages with beautiful syntax highlighting, copy buttons, and language badges!

Frontend Technologies

JavaScript

javascript

// Modern JavaScript with ES6+ features
const greet = (name) => {
  return `Hello, ${name}! Welcome to our blog.`;
};
 
// Async/await example
async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
 
// Array methods
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const sum = numbers.reduce((acc, n) => acc + n, 0);

TypeScript

typescript

// TypeScript interfaces and types
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}
 
// Generic function
function identity<T>(arg: T): T {
  return arg;
}
 
// Class with access modifiers
class BlogPost {
  constructor(
    private id: number,
    public title: string,
    protected author: string
  ) {}
 
  getDetails(): string {
    return `${this.title} by ${this.author}`;
  }
}
 
// Type guards
function isUser(obj: any): obj is User {
  return 'id' in obj && 'name' in obj && 'email' in obj;
}

React / JSX

jsx

import React, { useState, useEffect } from 'react';
 
// Custom Hook
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved !== null ? JSON.parse(saved) : initialValue;
  });
 
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
 
  return [value, setValue];
}
 
// Component with hooks
export default function BlogCard({ title, excerpt, image }) {
  const [likes, setLikes] = useLocalStorage('likes', 0);
  const [isHovered, setIsHovered] = useState(false);
 
  return (
    <article 
      className="blog-card"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <img src={image} alt={title} />
      <h2>{title}</h2>
      <p>{excerpt}</p>
      <button onClick={() => setLikes(likes + 1)}>
        ❤️ {likes} Likes
      </button>
    </article>
  );
}

CSS / SCSS

css

/* Modern CSS with custom properties */
:root {
  --primary-color: #3b82f6;
  --secondary-color: #10b981;
  --text-color: #1f2937;
  --transition: all 0.3s ease;
}
 
/* Flexbox layout */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
}
 
/* Grid layout */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
 
/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
.card {
  animation: fadeIn 0.6s ease-out;
  transition: var(--transition);
}
 
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

HTML

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Amazing blog system showcase">
    <title>Blog System Showcase</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <a href="/" class="logo">My Blog</a>
            <ul class="nav-links">
                <li><a href="/blog">Blog</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article class="blog-post">
            <h1>Welcome to Our Blog</h1>
            <p>This is an amazing blog system!</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2025 My Blog. All rights reserved.</p>
    </footer>
    
    <script src="main.js"></script>
</body>
</html>

💡

Tip

Notice the copy button in the top-right corner of each code block? Click it to copy the entire code snippet instantly!

Backend Technologies

Python

python

# Python with type hints
from typing import List, Dict, Optional
import asyncio
 
class BlogManager:
    def __init__(self, db_connection: str):
        self.db = db_connection
        self.posts: List[Dict] = []
    
    def add_post(self, title: str, content: str, author: str) -> Dict:
        """Add a new blog post"""
        post = {
            'id': len(self.posts) + 1,
            'title': title,
            'content': content,
            'author': author,
            'created_at': datetime.now()
        }
        self.posts.append(post)
        return post
    
    def get_post(self, post_id: int) -> Optional[Dict]:
        """Retrieve a post by ID"""
        return next((p for p in self.posts if p['id'] == post_id), None)
    
    # List comprehension
    def get_posts_by_author(self, author: str) -> List[Dict]:
        return [p for p in self.posts if p['author'] == author]
 
# Async function
async def fetch_data(url: str) -> Dict:
    async with aiohttp.ClientSession() as session:
        async with session.get(url) as response:
            return await response.json()
 
# Decorator example
def timing_decorator(func):
    def wrapper(*args, **kwargs):
        start = time.time()
        result = func(*args, **kwargs)
        end = time.time()
        print(f"{func.__name__} took {end - start:.2f} seconds")
        return result
    return wrapper

Node.js / Express

javascript

// Express.js API with middleware
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
 
const app = express();
 
// Middleware
app.use(express.json());
app.use(cors());
 
// MongoDB Schema
const BlogSchema = new mongoose.Schema({
  title: { type: String, required: true },
  content: { type: String, required: true },
  author: { type: String, required: true },
  tags: [String],
  createdAt: { type: Date, default: Date.now }
});
 
const Blog = mongoose.model('Blog', BlogSchema);
 
// Routes
app.get('/api/blogs', async (req, res) => {
  try {
    const blogs = await Blog.find().sort({ createdAt: -1 });
    res.json(blogs);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});
 
app.post('/api/blogs', async (req, res) => {
  try {
    const blog = new Blog(req.body);
    await blog.save();
    res.status(201).json(blog);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});
 
// Error handling middleware
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ error: 'Something went wrong!' });
});
 
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

PHP

php

<?php
// Modern PHP 8+ features
class BlogPost {
    public function __construct(
        public readonly int $id,
        public string $title,
        public string $content,
        private string $author,
        public array $tags = []
    ) {}
    
    // Named arguments
    public static function create(
        string $title,
        string $content,
        string $author,
        array $tags = []
    ): self {
        $id = self::generateId();
        return new self($id, $title, $content, $author, $tags);
    }
    
    // Match expression (PHP 8+)
    public function getStatus(): string {
        return match($this->published) {
            true => 'Published',
            false => 'Draft',
            default => 'Unknown'
        };
    }
    
    // Nullable return type
    public function getAuthor(): ?string {
        return $this->author;
    }
}
 
// Arrow functions
$filter = fn($post) => $post->published === true;
$publishedPosts = array_filter($posts, $filter);
 
// PDO database connection
try {
    $pdo = new PDO('mysql:host=localhost;dbname=blog', 'user', 'pass');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $stmt = $pdo->prepare('SELECT * FROM posts WHERE author = :author');
    $stmt->execute(['author' => $author]);
    $posts = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log($e->getMessage());
}
?>

SQL

sql

-- Complex SQL queries
CREATE TABLE blog_posts (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(255) NOT NULL,
    slug VARCHAR(255) UNIQUE NOT NULL,
    content TEXT NOT NULL,
    author_id BIGINT NOT NULL,
    category_id INT,
    published_at TIMESTAMP NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (author_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY (category_id) REFERENCES categories(id) ON DELETE SET NULL,
    INDEX idx_published (published_at),
    FULLTEXT INDEX idx_content (title, content)
);
 
-- Complex JOIN query
SELECT 
    p.id,
    p.title,
    u.name AS author_name,
    c.name AS category_name,
    COUNT(co.id) AS comment_count,
    AVG(r.rating) AS avg_rating
FROM blog_posts p
INNER JOIN users u ON p.author_id = u.id
LEFT JOIN categories c ON p.category_id = c.id
LEFT JOIN comments co ON p.id = co.post_id
LEFT JOIN ratings r ON p.id = r.post_id
WHERE p.published_at IS NOT NULL
    AND p.published_at <= NOW()
GROUP BY p.id, p.title, u.name, c.name
HAVING comment_count > 0
ORDER BY p.published_at DESC
LIMIT 10;
 
-- Common Table Expression (CTE)
WITH popular_posts AS (
    SELECT post_id, COUNT(*) as view_count
    FROM post_views
    WHERE viewed_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)
    GROUP BY post_id
    HAVING view_count > 100
)
SELECT p.*, pp.view_count
FROM blog_posts p
INNER JOIN popular_posts pp ON p.id = pp.post_id
ORDER BY pp.view_count DESC;

💬

Info

Our syntax highlighting system automatically detects the language and applies appropriate color coding and formatting!

Modern Frameworks

Vue.js

vue

<template>
  <div class="blog-card">
    <img :src="post.image" :alt="post.title" />
    <h2>{{ post.title }}</h2>
    <p>{{ post.excerpt }}</p>
    <div class="meta">
      <span>{{ formattedDate }}</span>
      <span>{{ post.readTime }}</span>
    </div>
    <button @click="handleLike" :class="{ liked: isLiked }">
      {{ isLiked ? '❤️' : '🤍' }} {{ likeCount }}
    </button>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
const props = defineProps({
  post: {
    type: Object,
    required: true
  }
});
 
const isLiked = ref(false);
const likeCount = ref(props.post.likes || 0);
 
const formattedDate = computed(() => {
  return new Date(props.post.publishDate).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
});
 
const handleLike = () => {
  isLiked.value = !isLiked.value;
  likeCount.value += isLiked.value ? 1 : -1;
};
</script>
 
<style scoped>
.blog-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
 
.blog-card:hover {
  transform: translateY(-8px);
}
</style>

Svelte

svelte

<script>
  // Svelte reactive statements
  let count = 0;
  let name = 'World';
  
  // Reactive declaration
  $: doubled = count * 2;
  $: greeting = `Hello, ${name}!`;
  
  // Reactive statement
  $: if (count >= 10) {
    alert(`Count is dangerously high!`);
    count = 9;
  }
  
  function increment() {
    count += 1;
  }
  
  // Lifecycle
  import { onMount } from 'svelte';
  
  onMount(() => {
    console.log('Component mounted');
  });
</script>
 
<main>
  <h1>{greeting}</h1>
  <p>Count: {count}</p>
  <p>Doubled: {doubled}</p>
  
  <button on:click={increment}>
    Increment
  </button>
  
  <input bind:value={name} placeholder="Enter your name" />
</main>
 
<style>
  main {
    text-align: center;
    padding: 2rem;
  }
  
  button {
    background: #ff3e00;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

System & DevOps

Bash/Shell

bash

#!/bin/bash
 
# Blog deployment script
set -e
 
echo "🚀 Starting blog deployment..."
 
# Variables
PROJECT_DIR="/var/www/blog"
BACKUP_DIR="/var/backups/blog"
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
 
# Function to create backup
create_backup() {
    echo "📦 Creating backup..."
    mkdir -p "$BACKUP_DIR"
    tar -czf "$BACKUP_DIR/blog_backup_$TIMESTAMP.tar.gz" "$PROJECT_DIR"
    echo "✅ Backup created: blog_backup_$TIMESTAMP.tar.gz"
}
 
# Function to deploy
deploy() {
    echo "📥 Pulling latest changes..."
    cd "$PROJECT_DIR"
    git pull origin main
    
    echo "📦 Installing dependencies..."
    npm install
    
    echo "🏗️ Building project..."
    npm run build
    
    echo "🔄 Restarting services..."
    pm2 restart blog-app
    
    echo "✅ Deployment complete!"
}
 
# Error handling
trap 'echo "❌ Deployment failed!"; exit 1' ERR
 
# Main execution
create_backup
deploy
 
echo "🎉 Blog deployed successfully!"

Docker

dockerfile

# Multi-stage Dockerfile for Next.js blog
FROM node:20-alpine AS base
 
# Dependencies stage
FROM base AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production && \
    npm cache clean --force
 
# Builder stage
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
 
ENV NEXT_TELEMETRY_DISABLED 1
 
RUN npm run build
 
# Production stage
FROM base AS runner
WORKDIR /app
 
ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1
 
RUN addgroup --system --gid 1001 nodejs && \
    adduser --system --uid 1001 nextjs
 
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
USER nextjs
 
EXPOSE 3000
 
ENV PORT 3000
ENV HOSTNAME "0.0.0.0"
 
CMD ["node", "server.js"]

YAML (Docker Compose)

yaml

# docker-compose.yml for full blog stack
version: '3.8'
 
services:
  # Next.js Blog Application
  blog-app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: blog-nextjs
    restart: unless-stopped
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=mongodb://mongo:27017/blog
      - REDIS_URL=redis://redis:6379
    depends_on:
      - mongo
      - redis
    networks:
      - blog-network
    volumes:
      - ./content:/app/content:ro
 
  # MongoDB Database
  mongo:
    image: mongo:7
    container_name: blog-mongo
    restart: unless-stopped
    ports:
      - "27017:27017"
    environment:
      MONGO_INITDB_ROOT_USERNAME: admin
      MONGO_INITDB_ROOT_PASSWORD: secret
      MONGO_INITDB_DATABASE: blog
    volumes:
      - mongo-data:/data/db
      - ./mongo-init.js:/docker-entrypoint-initdb.d/init.js:ro
    networks:
      - blog-network
 
  # Redis Cache
  redis:
    image: redis:7-alpine
    container_name: blog-redis
    restart: unless-stopped
    ports:
      - "6379:6379"
    volumes:
      - redis-data:/data
    networks:
      - blog-network
 
  # Nginx Reverse Proxy
  nginx:
    image: nginx:alpine
    container_name: blog-nginx
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - ./ssl:/etc/nginx/ssl:ro
    depends_on:
      - blog-app
    networks:
      - blog-network
 
volumes:
  mongo-data:
  redis-data:
 
networks:
  blog-network:
    driver: bridge

Additional Languages

Go

package main
 
import (
    "encoding/json"
    "log"
    "net/http"
    "time"
)
 
// BlogPost represents a blog post
type BlogPost struct {
    ID        int       `json:"id"`
    Title     string    `json:"title"`
    Content   string    `json:"content"`
    Author    string    `json:"author"`
    CreatedAt time.Time `json:"created_at"`
}
 
// BlogHandler handles blog requests
type BlogHandler struct {
    posts []BlogPost
}
 
func (h *BlogHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    
    switch r.Method {
    case http.MethodGet:
        h.getPosts(w, r)
    case http.MethodPost:
        h.createPost(w, r)
    default:
        http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
    }
}
 
func (h *BlogHandler) getPosts(w http.ResponseWriter, r *http.Request) {
    json.NewEncoder(w).Encode(h.posts)
}
 
func main() {
    handler := &BlogHandler{posts: []BlogPost{}}
    
    http.Handle("/api/posts", handler)
    
    log.Println("Server starting on :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

Rust

rust

// Rust web server with Actix
use actix_web::{web, App, HttpResponse, HttpServer, Result};
use serde::{Deserialize, Serialize};
use std::sync::Mutex;
 
#[derive(Debug, Serialize, Deserialize, Clone)]
struct BlogPost {
    id: u32,
    title: String,
    content: String,
    author: String,
}
 
struct AppState {
    posts: Mutex<Vec<BlogPost>>,
}
 
async fn get_posts(data: web::Data<AppState>) -> Result<HttpResponse> {
    let posts = data.posts.lock().unwrap();
    Ok(HttpResponse::Ok().json(&*posts))
}
 
async fn create_post(
    post: web::Json<BlogPost>,
    data: web::Data<AppState>
) -> Result<HttpResponse> {
    let mut posts = data.posts.lock().unwrap();
    posts.push(post.into_inner());
    Ok(HttpResponse::Created().json(&*posts))
}
 
#[actix_web::main]
async fn main() -> std::io::Result<()> {
    let app_state = web::Data::new(AppState {
        posts: Mutex::new(Vec::new()),
    });
 
    HttpServer::new(move || {
        App::new()
            .app_data(app_state.clone())
            .route("/api/posts", web::get().to(get_posts))
            .route("/api/posts", web::post().to(create_post))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

JSON

json

{
  "blog": {
    "name": "My Awesome Blog",
    "version": "2.0.0",
    "description": "A modern blog system with MDX support",
    "author": {
      "name": "Anirban Das",
      "email": "contact@example.com",
      "social": {
        "github": "https://github.com/username",
        "twitter": "https://twitter.com/username",
        "linkedin": "https://linkedin.com/in/username"
      }
    },
    "settings": {
      "theme": "dark",
      "postsPerPage": 10,
      "enableComments": true,
      "features": [
        "syntax-highlighting",
        "mdx-support",
        "seo-optimization",
        "responsive-design"
      ]
    },
    "posts": [
      {
        "id": 1,
        "title": "Getting Started",
        "slug": "getting-started",
        "published": true,
        "tags": ["tutorial", "beginner"]
      }
    ]
  }
}

✅

Success

50+ languages supported! Including Python, JavaScript, TypeScript, PHP, Go, Rust, Java, C++, Ruby, Swift, Kotlin, and many more!

📝 Text Formatting

Headings

Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Emphasis

This is bold text using double asterisks.

This is italic text using single asterisks.

This is bold and italic using triple asterisks.

You can also use inline code snippets for variable names or commands.

Blockquotes

"The best time to plant a tree was 20 years ago. The second best time is now."

— Chinese Proverb

💡 Pro Tip: Blockquotes are great for highlighting important quotes, testimonials, or key takeaways!

📋 Lists & Tables

Unordered Lists

First item
Second item
Third item with nested items:
- Nested item 1
- Nested item 2
  - Deeply nested item
Fourth item

Ordered Lists

Choose Your Path: Decide between frontend, backend, or full-stack
Learn the Basics: Master HTML, CSS, and JavaScript
Build Projects: Create at least 5 real projects
Create Portfolio: Showcase your work professionally
Start Applying: Apply for jobs or start freelancing

Mixed Lists

Frontend Development
- HTML5 & CSS3
- JavaScript ES6+
- React or Vue.js
Backend Development
- Node.js or Python
- Database (MongoDB/PostgreSQL)
- RESTful APIs
DevOps
- Git & GitHub
- Docker
- CI/CD pipelines

Task Lists (if supported)

🖼️ Images & Media

Standard Images

Images in our blog system are automatically optimized with Next.js Image component:

Web Development Workspace

Coding on Laptop

💡

Tip

All images are lazy-loaded and automatically responsive for optimal performance on all devices!

🔗 Links & Navigation

External Links

Visit my GitHub profile to see more projects.

Check out MDN Web Docs for web development resources.

Internal Links

Read my previous post on How to Become a Web Developer.

Anchor Links

Jump to Callout Components section above.

🎨 Advanced Features

Combining Features

💬

Info

You can combine multiple features together! Here's an example with code inside a callout:

javascript

const blogPost = {
  title: "Amazing Blog Post",
  author: "Anirban Das",
  published: true
};
 
console.log(`Publishing: ${blogPost.title}`);

Pretty cool, right? 🚀

Nested Content

⚠️

Warning

Important Notes:

Always test your code before deploying
Use version control (Git) for all projects
Write meaningful commit messages
Keep dependencies updated
Follow best practices and coding standards

Remember: Quality over quantity!

📊 Feature Comparison

Here's what makes this blog system special:

✅ Included Features:

🎨 Beautiful syntax highlighting for 50+ languages
📦 6 types of styled callout components
🖼️ Optimized image handling with Next.js
📱 Fully responsive design
🚀 Fast performance with static generation
🔍 SEO-optimized
📝 MDX support for React components in Markdown
💾 One-click code copying
🎯 Language detection and badges
🌈 Custom themed code blocks
📋 Interactive Table of Contents (Notion-style)
🌈 Animated rainbow reading progress bar
✅ Task lists with green checkboxes
🎭 Smooth scroll animations
👻 Auto-hiding TOC on desktop

🚫 Not Included (Yet):

Comments system (can be added with Disqus or similar)
Search functionality (can be integrated)

✅

Success

This blog system is actively maintained and new features are added regularly!

🎯 Real-World Examples

Example 1: Tutorial Code

Let's create a simple React hook:

javascript

import { useState, useEffect } from 'react';
 
export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Network response was not ok');
        const json = await response.json();
        setData(json);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
 
    fetchData();
  }, [url]);
 
  return { data, loading, error };
}

💡

Tip

This custom hook can be reused across your entire application for any API calls!

Example 2: Configuration File

json

{
  "name": "my-blog",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "14.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

Example 3: Styling

css

.blog-post {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
}
 
.blog-post h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

🏆 Best Practices

✅

Success

Do's:

Write clear and concise content
Use code examples to illustrate points
Break content into digestible sections
Add relevant images and callouts
Optimize for SEO with good metadata

🚨

Danger

Don'ts:

Don't write walls of text without formatting
Don't use too many callouts (they lose impact)
Don't forget to test code examples
Don't use low-quality or irrelevant images
Don't neglect mobile responsiveness

� Interactive Features Demo

Table of Contents Navigation

The TOC is designed to enhance your reading experience:

Desktop Experience:
- Sidebar appears semi-transparent on the right
- Hover to reveal full menu with all headings
- Active section is highlighted automatically
- Click any heading for instant navigation
Mobile Experience:
- Floating "Contents" button at bottom-right
- Tap to open full-screen TOC panel
- Swipe or tap backdrop to close
- Smooth slide-in animation
Smart Features:
- Auto-generates IDs from heading text
- H3 headings are indented more than H2
- Smooth scroll with proper offset for fixed header
- Uses Intersection Observer for performance

✅

Success

Pro Tip: The TOC automatically detects all headings in your blog post. No manual configuration needed!

Progress Bar Implementation

The rainbow progress bar showcases advanced web techniques:

javascript

// Smooth progress tracking with requestAnimationFrame
const updateProgress = useCallback(() => {
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - clientHeight;
  const scrollPercent = (scrollTop / docHeight) * 100;
  
  requestAnimationFrame(() => {
    setProgress(scrollPercent);
  });
}, []);

Technical Details:

Uses transform: scaleX() for GPU acceleration
Throttled updates with requestAnimationFrame
CSS custom properties for dynamic styling
Passive scroll listeners for better performance
7-color rainbow gradient with continuous animation

⚠️

Warning

The progress bar calculates based on total document height, not viewport height, so it accurately reflects your reading progress through the entire article!

�🎉 Conclusion

This blog system is powerful, flexible, and beautiful! Whether you're writing:

📚 Technical tutorials
💻 Code documentation
🎨 Design articles
🚀 Product updates
📖 Personal stories

You have all the tools you need to create engaging, professional content.

✅

Success

Ready to start blogging?

With features like TOC navigation, reading progress tracking, beautiful syntax highlighting, and 6 types of callouts, you have everything you need to create professional, engaging content! 🌍

What Makes This System Special?

Reader-Focused: TOC and progress bar help readers navigate long articles
Developer-Friendly: Just write MDX - all features work automatically
Performance-Optimized: Uses modern web APIs and GPU acceleration
Mobile-First: Every feature works beautifully on all screen sizes
Accessible: Proper semantic HTML and ARIA labels throughout
Beautiful: Notion-inspired design with smooth animations

💡

Tip

Want to see the TOC in action? Try clicking on different sections in the sidebar. Notice how it smoothly scrolls and highlights your current position!

📚 Additional Resources

Want to learn more? Check out these resources:

MDX Documentation - Learn about MDX
Next.js Docs - Next.js documentation
React Documentation - React fundamentals

"The best way to learn is by doing. Start creating content today!" 🚀

Thank you for reading! If you found this showcase helpful, share it with others who might benefit from it.

Last updated: October 28, 2025