113 lines
3.6 KiB
Plaintext
113 lines
3.6 KiB
Plaintext
---
|
|
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](/category/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 (``), convert them to the `<Image>` component syntax for better styling and Next.js optimization.
|
|
- **Before**: ``
|
|
- **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.
|