Example Blog Post with Tables and Advanced Formatting

Introduction

This post demonstrates all the markdown features available in the SeaReady blog template system.

Headers

Headers automatically use the SeaReady brand navy color (#0E1A2B) and maintain proper hierarchy.

Third Level Header

This is a third-level header, perfect for subsections.

Text Formatting

You can use bold text to emphasize important points, or italic text for subtle emphasis. You can even combine them with bold and italic.

Use inline code for technical terms or commands.

Links

Here's an internal link and an external link which will automatically open in a new tab with an icon.

Lists

Unordered Lists

• First item in unordered list
• Second item with important details
• Third item

- Nested item - Another nested item

Ordered Lists

1. First step in the process
2. Second step with details
3. Third step to completion

Code Blocks

Here's a code block with syntax highlighting support:

interface BlogPostMetadata {
  title: string
  author: string
  date: string
  category: string
}

function getBlogPost(slug: string): BlogPost {
  return loadMarkdownFile(slug)
}

Blockquotes

This is a blockquote. It's styled with a cyan left border and light background, perfect for highlighting important quotes or callouts.

>

You can have multiple paragraphs in a blockquote.

Tables

Here's a standard table showing vessel specifications:

Vessel Type	Length (m)	Beam (m)	Draft (m)	Capacity (TEU)
Feeder	150	23	8.5	1,000
Panamax	294	32	12.5	5,000
Post-Panamax	366	49	15.5	13,000
Ultra Large	400	59	16.0	24,000

Comparison Table Example

Here's how different port systems compare:

Feature	Paper-Based	Digital MPX	SeaReady EMPX
Pre-arrival data	No	Yes	Yes
Real-time sync	No	Limited	Yes
Historical analysis	No	No	Yes
Mobile-friendly	No	Yes	Yes
Offline capable	Yes	No	Yes
Integration API	No	Limited	Yes

Images

You can include images with descriptive alt text:

!Vessel approaching port

Combining Elements

You can combine multiple markdown elements for rich content:

1. Step One: Initialize the system

- Check prerequisites - Install dependencies - Configure settings

1. Step Two: Run the application

npm install
   npm run dev

1. Step Three: Verify operation

- Open browser to http://localhost:3000 - Check console for errors - Test key features

Advanced Formatting

Definition Lists

You can create structured content:

Electronic Master-Pilot Exchange (EMPX)
: A digital system for exchanging critical vessel and passage information between ship's master and port pilot.

Vessel Traffic Service (VTS)
: A shore-based system designed to improve the safety and efficiency of vessel traffic.

Technical Specifications

When documenting technical details, you can use tables effectively:

Parameter	Value	Unit	Notes
Max Speed	22	knots	Laden condition
Service Speed	20	knots	Economic cruising
Range	8,000	nautical miles	At service speed
Fuel Capacity	4,000	tonnes	Heavy fuel oil

Code Examples with Multiple Languages

JavaScript Example

const processVesselData = async (vesselId) => {
  const data = await fetchVesselData(vesselId)
  return {
    name: data.name,
    imo: data.imo,
    position: data.coordinates
  }
}

Python Example

def calculate_eta(distance, speed):
    """Calculate estimated time of arrival"""
    hours = distance / speed
    return datetime.now() + timedelta(hours=hours)

Nested Lists with Mixed Types

1. Primary objective

- Sub-goal A - Sub-goal B 1. Detailed step 1 2. Detailed step 2 - Sub-goal C

1. Secondary objective

- Implementation phase - Testing phase

Conclusion

This post demonstrates the full range of markdown formatting available in the SeaReady blog system. All styles are automatically applied using the blog template system with consistent SeaReady branding.

For more information on using these features, see the documentation in /src/components/blog/README.md.