Blog Enhancements Demo

This post demonstrates all the new visual enhancements we’ve added to make blog posts more professional and engaging.

Table of Contents

The table of contents is automatically generated from your H2 and H3 headings and appears in the sidebar on desktop devices. It includes:

• Automatic scroll spy (highlights current section)
• Smooth scrolling to sections
• Responsive design (hidden on mobile)

Syntax Highlighting

Code blocks now feature beautiful syntax highlighting using Shiki with dual themes (light/dark).

JavaScript Example

// Example of modern JavaScript with async/await
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Failed to fetch user:', error);
    return null;
  }
}

// Arrow functions and destructuring
const processUsers = (users) => {
  return users.map(({ id, name, email }) => ({
    id,
    displayName: name.toUpperCase(),
    contact: email
  }));
};

Python Example

# Python class with decorators
from typing import List, Dict
import asyncio

class DataProcessor:
    def __init__(self, data: List[Dict]):
        self.data = data
    
    @property
    def count(self) -> int:
        """Return the number of items"""
        return len(self.data)
    
    async def process_async(self):
        """Process data asynchronously"""
        tasks = [self._process_item(item) for item in self.data]
        return await asyncio.gather(*tasks)
    
    async def _process_item(self, item: Dict):
        # Simulate async processing
        await asyncio.sleep(0.1)
        return item.get('value', 0) * 2

JSON Example

{
  "name": "DataFmt Blog",
  "version": "2.0.0",
  "features": {
    "syntaxHighlighting": true,
    "tableOfContents": true,
    "copyButtons": true,
    "customComponents": true
  },
  "themes": ["light", "dark"],
  "languages": ["es", "en", "fr", "de"]
}

Bash/Shell Commands

# Install dependencies
npm install

# Build for production
npm run build

# Run development server
npm run dev

# Deploy to Vercel
vercel --prod

Custom Components

We now have beautiful custom components to enhance content presentation.

Info Callouts

Regular informational content that needs to stand out.

Tip Callouts

Pro tips and helpful suggestions for readers.

Warning Callouts

Important warnings or gotchas to be aware of.

Success Callouts

Confirmations or successful outcomes.

Danger Callouts

Critical warnings about dangerous operations or errors.

Code Features

Copy to Clipboard

Every code block now has an automatic copy button that appears on hover. Try hovering over any code block above!

Features:

• ✅ Appears on hover
• ✅ Visual feedback (Copy → Copied!)
• ✅ Green checkmark on success
• ✅ Smooth transitions

Line Numbers & Formatting

Code is displayed with:

• Professional monospace fonts (Fira Code, Cascadia Code, etc.)
• Proper line height for readability
• Horizontal scroll for long lines
• Rounded corners with subtle shadows

Typography Enhancements

Blockquotes

“The best way to predict the future is to invent it.”

— Alan Kay

Blockquotes now feature decorative quotation marks and elegant styling.

Lists

Unordered lists have colorful markers:

• First item with a gradient marker
• Second item showing the style
• Third item demonstrating consistency
  • Nested items work too
  • With proper indentation

Ordered lists are numbered elegantly:

1. First step in the process
2. Second step with clear numbering
3. Third step maintaining style
   1. Sub-step A
   2. Sub-step B

Tables

Feature	Status	Notes
Syntax Highlighting	✅ Complete	Shiki with dual themes
Table of Contents	✅ Complete	Auto-generated with scroll spy
Copy Buttons	✅ Complete	On all code blocks
Custom Components	✅ Complete	Callouts ready to use
Reading Time	✅ Complete	Auto-calculated

Tables feature hover effects and clean styling.

Reading Time

The reading time is automatically calculated based on the article length (200 words per minute). You’ll see it displayed at the top of every post.

Responsive Design

All enhancements are fully responsive:

• Desktop: Table of contents in sidebar, full-width content
• Tablet: Optimized layout, responsive grid
• Mobile: Single column, TOC hidden, touch-friendly

Technical Details

Performance

All enhancements are optimized for performance:

// Efficient code block processing
function addCopyButtons() {
  const codeBlocks = document.querySelectorAll<HTMLElement>('.prose pre');
  
  codeBlocks.forEach((block) => {
    if (block.querySelector('.copy-code-button')) return; // Skip duplicates
    
    const button = createCopyButton();
    block.appendChild(button);
  });
}

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Clipboard API for copy functionality
• Intersection Observer for scroll spy
• CSS Grid for responsive layouts

Conclusion

These enhancements make blog posts:

1. More Professional - Syntax highlighting and polished design
2. More Functional - Copy buttons, TOC navigation
3. More Engaging - Visual callouts and better typography
4. More Accessible - Clear hierarchy and responsive design

Try scrolling through this post and using all the features! The table of contents will follow along, code blocks can be copied with a click, and everything looks great on any device.