Master Layout Test - All Content Types

This comprehensive test post demonstrates every type of content element to verify the Wikipedia-style 3-column layout works correctly. Use this to test collapsible sidebars, content expansion, and responsive behavior.

Introduction and Purpose

This master test document serves as a reference for testing all layout features. You can collapse the left (Contents) and right (All Posts) sidebars to verify that the main content expands properly and all elements render correctly.

Testing Checklist

Before deploying, verify:

1. TOC generates from all headings correctly
2. Collapsing left/right sidebars expands main content
3. Code blocks stay full width (don't wrap like images)
4. Images float inline with text wrapping
5. Tables, blockquotes, and videos stay full width
6. Anchor links work on all headings
7. Mobile view stacks correctly

Text Content and Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a standard paragraph with regular text flow. It should maintain optimal line length and comfortable reading experience across all screen sizes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a standard paragraph with regular text flow. It should maintain optimal line length and comfortable reading experience across all screen sizes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a standard paragraph with regular text flow. It should maintain optimal line length and comfortable reading experience across all screen sizes.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Notice how the text wraps naturally around the inline image on the right side. This is similar to how Wikipedia presents images alongside content.

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. The image should not interfere with the reading flow, but instead complement the content. Multiple paragraphs can exist alongside a single floated image.

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. The text continues to wrap until the image height is exceeded, then returns to full width.

Headings Hierarchy

Testing all heading levels for TOC generation and anchor links.

Level 3 Heading - Subsection

This is a level 3 heading. It should appear in the table of contents with proper indentation.

Level 4 Heading - Detail

Even more nested content. The TOC should show this with further indentation.

Level 5 Heading - Fine Detail

Very specific section content goes here.

Level 6 Heading - Deepest Level

The smallest heading level. Rarely used but supported.

Another Level 3 Section

Back to level 3 for more content organization.

Lists and Enumeration

Unordered Lists

Here's a standard bulleted list:

• First item in the list
• Second item with more detail
• Third item
  • Nested item 1
  • Nested item 2
    • Deeply nested item
• Fourth item back at root level

Ordered Lists

Numbered lists for sequential content:

1. First step in the process
2. Second step that follows
3. Third step with detail
   1. Sub-step 3.1
   2. Sub-step 3.2
   3. Sub-step 3.3
4. Fourth and final step

Task Lists

• Completed task
• Another completed item
• Pending task
• Future task

Definition Lists

Term 1 : Definition for term 1 goes here with detailed explanation.

Term 2 : Definition for term 2 with more context and information.

Code Examples

Inline Code

Use inline code like const variable = "value" within paragraphs for short snippets or command references like npm install or git commit -m "message".

Code Blocks

Full-width code blocks should NOT wrap around images. They must stay full width and clear any floats.

interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

// TypeScript example
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}
 
function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}
 
const currentUser: User = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
  role: 'admin'
};
 
console.log(greetUser(currentUser));

JavaScript Example

// Async/await pattern
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);
    throw error;
  }
}
 
// Usage
fetchUserData(123)
  .then(user => console.log(user))
  .catch(err => console.error(err));

Python Example

# Python class example
class BlogPost:
    def __init__(self, title, content, author):
        self.title = title
        self.content = content
        self.author = author
        self.published = False
 
    def publish(self):
        self.published = True
        print(f"Published: {self.title}")
 
    def __str__(self):
        return f"{self.title} by {self.author}"
 
# Create and publish a post
post = BlogPost("Test Post", "Content here", "John")
post.publish()

Shell Commands

# Common git commands
git add .
git commit -m "Update blog layout"
git push origin main
 
# NPM commands
npm install
npm run build
npm run dev
 
# Docker commands
docker build -t myapp .
docker run -p 3000:3000 myapp

Blockquotes

Blockquotes should also stay full width and not wrap around images. They represent important quoted content. Blockquotes should also stay full width and not wrap around images. They represent important quoted content.

Blockquotes should also stay full width and not wrap around images. They represent important quoted content. Blockquotes should also stay full width and not wrap around images. They represent important quoted content. Blockquotes should also stay full width and not wrap around images. They represent important quoted content. Blockquotes should also stay full width and not wrap around images. They represent important quoted content.

This is a blockquote with substantial content. It should span the full width of the content area, not wrap around any floated images. Blockquotes are used for quotations, callouts, or important information that needs to stand out from regular paragraphs.

Important Note: Multiple blockquotes can appear in sequence. Each should be full width and properly spaced.

This is a multi-paragraph blockquote.

It can contain multiple paragraphs with proper spacing between them. Each paragraph maintains the blockquote styling and indentation.

— Attribution for the quote

Tables

Tables must remain full width and not be affected by floated images.

Simple Table

Complex Table

Data Table

Embedded Videos

Video embeds should stay full width and clear any floated images.

YouTube Video Example

The video container maintains 16:9 aspect ratio and is fully responsive. It should never wrap around images.

Images - Various Styles

Standard Markdown Image (Centered)

Inline Image Component

Text content continues here and wraps around the inline image. This is the Wikipedia-style presentation that allows for efficient use of space while maintaining readability.

More text to demonstrate the wrapping behavior. The image should not interfere with code blocks, tables, or other full-width elements that come after it.

Additional paragraph to show continued text flow.

Left-Aligned Image

When an image is aligned to the left, the text wraps from the right side. This provides visual variety in your layout and helps break up long sections of text.

The text continues to wrap naturally around the left-floated image until the image height is exceeded.

Links and References

Standard Links

Here are some example links: Next.js Documentation, TailwindCSS, and MDX.

Footnote-Style References

This content references multiple sources¹ and includes citations² for academic or professional writing.

External Resources

• React Documentation
• TypeScript Handbook
• GitHub Guides
• MDN Web Docs

Advanced Formatting

Horizontal Rules

Use horizontal rules to separate major sections:

Emphasis and Strong

Regular text, italic text, bold text, bold and italic, strikethrough, and inline code.

Keyboard Keys

Press Cmd + S to save or Ctrl + C to copy.

Mathematical Notation (if supported)

The quadratic formula: x = (-b ± √(b² - 4ac)) / 2a

HTML Elements

Performance Considerations

When building web applications, performance is crucial. Here are key considerations:

Image Optimization

• Use WebP format for better compression
• Implement lazy loading for images below the fold
• Provide appropriate sizes for different viewports
• Use CDN for static assets

Code Splitting

• Split large bundles into smaller chunks
• Load components on demand
• Use dynamic imports for heavy libraries
• Implement route-based code splitting

Caching Strategies

// Service Worker caching example
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Accessibility

Ensure all content is accessible:

1. Alt text for images: Every image should have descriptive alt text
2. Semantic HTML: Use proper heading hierarchy (h1 → h2 → h3)
3. Keyboard navigation: All interactive elements should be keyboard accessible
4. Color contrast: Maintain sufficient contrast ratios
5. ARIA labels: Use ARIA attributes where appropriate

Horizontal Rules

Use horizontal rules to separate sections:

References and Footnotes

You can add references at the end of your posts. Here's how to structure them:

Multiple Content Types Together

Here's an example combining different elements:

Performance Metrics

When optimizing your application, consider these key metrics:

1. First Contentful Paint (FCP): Measures when the first text or image is painted
   • Target: < 1.8s
   • Tools: Lighthouse, WebPageTest
2. Largest Contentful Paint (LCP): Measures when the largest content element is rendered
   • Target: < 2.5s
   • Optimization: Image optimization, CDN usage
3. Cumulative Layout Shift (CLS): Measures visual stability
   • Target: < 0.1
   • Fix: Specify dimensions for images and embeds

Here's how to measure FCP in code:

// Measure First Contentful Paint
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP:', entry.startTime);
  }
}).observe({ type: 'paint', buffered: true });

Note: Always test on real devices with throttled networks to get accurate measurements.

The combination of proper heading structure, code examples, quotes, and inline formatting creates a pleasant reading experience.

Conclusion

This master test post demonstrates all content types:

• ✅ Multiple heading levels (h1-h6)
• ✅ Regular paragraphs with proper line height
• ✅ Unordered, ordered, and task lists
• ✅ Inline images with text wrapping
• ✅ Full-width code blocks in multiple languages
• ✅ Full-width tables with various complexity
• ✅ Full-width blockquotes
• ✅ Embedded videos (YouTube)
• ✅ Standard and inline image styles
• ✅ Links and references
• ✅ Horizontal rules and special formatting
• ✅ HTML elements and advanced features

Testing Instructions

1. Collapse Left Sidebar (TOC): Main content should expand
2. Collapse Right Sidebar (All Posts): Main content should expand further
3. Collapse Both: Maximum content width for focused reading
4. Expand Both: Return to balanced 3-column layout
5. Resize Window: Verify responsive behavior on mobile
6. Click Anchor Links: Test shareable section links
7. Scroll Through: Verify TOC highlights active section

Expected Behavior

• Images: Float inline with text wrapping
• Code blocks: Always full width, never wrap
• Tables: Always full width, never wrap
• Blockquotes: Always full width, never wrap
• Videos: Always full width, never wrap
• Lists: Clear floats, full width
• Headings: Clear floats, full width

All elements should render perfectly regardless of which sidebars are collapsed or expanded.

Last Updated: January 4, 2026 Status: Complete and tested Purpose: Master reference for layout testing