Example Blog Post: Complete Feature Showcase

This example post demonstrates all available MDX components and features in your marketing site template. Use this as a reference when creating client blog posts.

Standard Markdown Elements

Typography Hierarchy

You can use headings from H1 to H4. Each heading is styled with Playfair Display serif font for editorial appeal:

This is an H4 Heading

Regular paragraphs use a clean sans-serif font for readability. You can use bold text, italic text, and even bold italic for emphasis.

Lists

Unordered Lists:

• First important point
• Second key takeaway
• Third critical insight
  • Nested sub-point
  • Another nested item

Ordered Lists:

1. Step one in your process
2. Step two to follow
3. Step three to complete
4. Final step for success

Blockquotes

"This is a blockquote. Use it for highlighting important quotes, testimonials, or key insights. It's styled with a left border for visual emphasis."

— Attribution Name, Title

Code Blocks

// Example code snippet
const exampleFunction = () => {
  console.log('This is formatted code');
  return 'with syntax highlighting';
}

Custom MDX Components

Content Callout Boxes

Image Components

Full-Width Editorial Image

This is a full-width image with a caption. Perfect for hero images or major visual breaks in your content.

Side-by-Side Images

Use this for before/after comparisons, contrasting concepts, or dual visuals that complement each other.

Image with Quote (Left)

"This component places an image on the left with a highlighted quote on the right. Perfect for testimonials, team insights, or expert opinions."— Attribution Name, Title

Image with Quote (Right)

"This variation places the image on the right side with the quote on the left, offering layout flexibility for your content design."— Expert Name, Role

Image with Editorial Text (Left)

This component combines an image on the left with editorial text on the right. Use it for explaining concepts, showcasing products, or highlighting team members with descriptive content.

— Optional caption or attribution

Image with Editorial Text (Right)

The right-aligned version places the image on the right side with text on the left. Great for alternating layouts and maintaining visual interest throughout long-form content.

— Photo credit or caption

Blog Image (Rounded with Caption)

This rounded image component is perfect for inline blog images. It includes a subtle shadow and caption for a polished, professional appearance.

SEO-Optimized Q&A Sections

Use the QuestionAnswer component to create FAQ sections that generate structured data for search engines. These appear in Google's rich results and voice search answers.

Audio Narration Feature

This blog post includes audio narration configured in the frontmatter. The audio player appears:

• Desktop: Sticky position in the top-right corner
• Mobile: Below the title for easy access

The player features:

• Play/pause with spacebar support
• Multi-part chapter navigation
• Seekable timeline
• Volume control
• Duration display
• Analytics tracking (play, part completion, series completion)

Embedded Media Examples

Links

Here's a standard hyperlink and here's a link with descriptive anchor text.

Inline Images

Best Practices for Blog Posts

1. Frontmatter Requirements

Every blog post must include:

• title - SEO-optimized headline
• excerpt - Meta description (150-160 chars)
• author - Writer or company name
• date - ISO format with timezone
• readTime - Estimated reading time
• category - Content category
• featured - Boolean for homepage display
• slug - URL-safe identifier

2. Image Optimization

• Use descriptive filenames
• Add meaningful alt text for accessibility
• Compress images before upload (WebP/AVIF)
• Store in /public/jw/[slug]/ directory
• Recommended sizes: 1200x630 for OG, 800x600 for content

3. SEO Optimization

• Use one H1 (title) per post
• Include H2-H4 subheadings for structure
• Add QuestionAnswer components for FAQ schema
• Target keyword density: 1-2%
• Internal linking to related posts
• External links to authoritative sources

4. Content Structure

• Hook readers in first paragraph
• Use short paragraphs (2-3 sentences)
• Include visuals every 300-500 words
• Break up content with callout boxes
• End with clear call-to-action

5. Audio Narration (Optional)

• Generate scripts from post content
• Use consistent narrator voice
• Break into logical chapters (3-5 parts)
• Upload to Supabase storage
• Add metadata to frontmatter

Markdown Reference

Text Formatting:

• **bold** → bold
• *italic* → italic
• ***bold italic*** → bold italic
• ~~strikethrough~~ → ~~strikethrough~~
• `inline code` → inline code

Links:

• [Link text](https://url.com) → Link text

Images:

• ![Alt text](/path/to/image.jpg) → Standard image

Lists:

• Use - or * for unordered lists
• Use 1. 2. 3. for ordered lists

Blockquotes:

• Start line with > for blockquote

Code Blocks:

• Use triple backticks with language: ```javascript

Summary

This example post demonstrates:

✅ All standard Markdown elements ✅ Custom callout boxes (4 types) ✅ Image components (8 variations) ✅ SEO-optimized Q&A sections ✅ Audio narration configuration ✅ Typography hierarchy ✅ Best practices guide

Use this as a reference when creating new blog posts for your clients. Mix and match components to create engaging, SEO-optimized content that converts visitors into customers.

Need Help? Check the documentation in /docs/blog-instructions/blog-structure-guide.md for detailed authoring guidelines and component usage examples.