Introduction#

This is a sample blog post demonstrating many of the features of our academic blog system. The design is inspired by clean, research-oriented sites and implements a layout optimized for technical writing.

Typography and Basic Formatting#

Regular paragraph text uses Source Serif 4 for excellent readability. Headings use Inter for a clean, modern look. You can use italic text, bold text, and inline code formatting.

Lists#

Unordered lists work as expected:

• First item with some detail
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered lists maintain proper numbering:

1. First numbered item
2. Second numbered item
3. Third numbered item

Mathematical Equations#

Inline math works like this: $E = mc^2$ and display math is centered:

More complex equations are supported:

Sidenotes#

This is where sidenotes really shine ¹ 1. This is a sidenote. On desktop screens wider than 1024px, it appears in the right margin. On smaller devices, it appears inline with a distinctive style. This allows for additional context without interrupting the reading flow. . They provide a way to add supplementary information without disrupting the main narrative flow.

You can have multiple sidenotes ² 2. Another sidenote here. These are automatically numbered and styled to match the academic aesthetic. throughout your article. They are particularly useful for:

• Definitions and explanations
• Citations and references
• Additional context
• Side observations

Code Blocks#

Here is a TypeScript code example:

/**
 * Function: fibonacci(n)
 *
 * Calculates the nth Fibonacci number using dynamic programming.
 */
function fibonacci(n: number): number {
  //  Step 1 - Handle base cases
  if (n <= 1) return n;

  //  Step 2 - Initialize array for memoization
  const fib: number[] = [0, 1];

  //  Step 3 - Calculate Fibonacci numbers up to n
  for (let i = 2; i <= n; i++) {
    fib[i] = fib[i - 1] + fib[i - 2];
  }

  //  Step 4 - Return result
  return fib[n];
}

console.log(fibonacci(10)); // Output: 55

Python code is also well-supported:

def quick_sort(arr):
    """
    Implements quicksort algorithm.

    Args:
        arr: List of comparable elements.

    Returns:
        Sorted list.
    """
    #  Step 1 - Handle base case
    if len(arr) <= 1:
        return arr

    #  Step 2 - Choose pivot and partition
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]

    #  Step 3 - Recursively sort and combine
    return quick_sort(left) + middle + quick_sort(right)

print(quick_sort([3, 6, 8, 10, 1, 2, 1]))

Images and Figures#

Images can be embedded with proper captions using the <Figure> component:

This demonstrates how to:

• Reference a CDN-hosted image by cdn://images/0321_good.png.
• Attach a caption and credit.
• Rely on remark-cdn to rewrite paths to hashed URLs at build time.

Tables#

Tables are styled for clarity:

Blockquotes#

Important quotes can be highlighted:

The key to performance is elegance, not battalions of special cases.

• Jon Bentley and Douglas McIlroy

Links and References#

External links work normally: Astro documentation

Internal links to other posts: Another post

Tag links: #tutorial, #markdown

Horizontal Rules#

Use horizontal rules to separate major sections:

Conclusion#

This sample post demonstrates the MDX features commonly used in this blog system. The design prioritizes:

1. Readability - Optimal line length, spacing, and clear typography
2. Academic Style - Sidenotes and clean layout
3. Developer Experience - MDX with custom components
4. Performance - Static generation with fast page loads

Check out the TIL section for shorter, focused insights, or browse posts by tag.