---
title: "Your Post Title Here"
tags: [tag1, tag2, optional-tag]
excerpt: "A concise, one-sentence summary of your content."
teaser: "/figures/your-teaser-image.png" # Optional: Path to a teaser image
 # Optional: Set to false to hide the teaser image on the post page
---

# Introduction to Your Topic

This is a standard Markdown paragraph. You can write your content here using regular Markdown syntax.

## Standard Markdown Elements

### Headings

Headings (`#`, `##`, `###`, etc.) automatically generate IDs and anchor links.

```markdown
# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 Heading
```

### Paragraphs and Basic Formatting

You can use **bold**, *italics*, `inline code`, and [links](https://example.com).

Internal links: [Link to another page](/blog/my-other-post)
Anchor links: [Link to a section on this page](#custom-components)

### Lists

-   Item 1
-   Item 2
    -   Sub-item 2.1
    -   Sub-item 2.2
1.  Ordered item 1
2.  Ordered item 2

### Code Blocks

```javascript
// Example code block
function helloWorld() {
  console.log("Hello, MDX!");
}
```

## Custom Components

This project provides several custom React components that you can use directly within your MDX files without needing to import them.

### `<Image>`

This is a wrapper around the Next.js `<Image>` component, automatically applying `rounded-lg` styling. Use it for all images.

```mdx
<Image src="/figures/your-figure.png" alt="A descriptive alt text for your image" width={800} height={600} />
```

You can also embed images within `div` elements for custom styling, like centering and adding captions:

```mdx
<div className="my-6 text-center">
  <Image src="/figures/21_coins.png" alt="Visualization showing agents exhibiting emergent coin-collecting behavior" className="w-3/4 mx-auto rounded-lg" />
  <figcaption className="text-sm text-muted-foreground mt-2">Example of emergent behavior (e.g., coin hoarding) due to specification misalignment.</figcaption>
</div>
```

### `<Cite>`

Use this component to add academic-style citations. It requires a `bibtexKey` that must exist in your bibliography (e.g., `_bibliography.bib`).

```mdx
This is a claim that needs a citation. <Cite bibtexKey="altmann2024emergence" />
```

### `<InfoBox>`

This component renders a floating informational box, useful for project details, asides, or metadata.

```mdx
<InfoBox title="Project Details">
  - **Status**: In Progress
  - **Tech**: Next.js, MDX, Tailwind CSS
  - **Date**: August 2025
</InfoBox>
```

## Deriving from Markdown

To convert a standard Markdown (`.md`) file into an MDX (`.mdx`) file for this project:

1.  **Rename the file**: Change the extension from `.md` to `.mdx`.
2.  **Add Frontmatter**: At the very top of the file, add a YAML frontmatter block. Ensure you include `title`, `tags`, and `teaser`.
    ```yaml
    ---
    title: "Your Markdown Content Title"
    tags: [markdown, conversion]
    excerpt: "A brief summary of your converted markdown content."
    ---
    ```
3.  **Replace Markdown Images**: If you have standard Markdown image syntax (`![alt text](/path/to/image.png)`), convert them to the `<Image>` component syntax for better styling and Next.js optimization.
    -   **Before**: `![My Image](/figures/my-image.png)`
    -   **After**: `<Image src="/figures/my-image.png" alt="My Image" width={800} height={600} />` (adjust `width` and `height` as appropriate).
4.  **Integrate Custom Components**: Where appropriate, add `<Cite>` for citations or `<InfoBox>` for structured information.

This template provides a comprehensive guide to authoring content in MDX for this website.