Writing content (Markdown & MDX)
Most user-facing text in EnjuFolio is written in Markdown / MDX and loaded from the src/contents directory:
- About →
src/contents/About.mdx - News →
src/contents/news/*.mdx - Research →
src/contents/research/*.mdx - Projects →
src/contents/projects/*.mdx
Each section has its own logistics and frontmatter; see:
This page focuses on the basics of how content is written.
1. Frontmatter & body
Many content files start with a frontmatter block:
---
title: 'Example entry'
date: '2025-02-27'
---
This is the body of the page.- The block wrapped in
---is the frontmatter (metadata). - Everything after the second
---is the body, written in Markdown / MDX. - News, research, and projects rely on frontmatter fields for sorting, routing, and links.
About how frontmatter is used in each section:
2. Markdown basics
EnjuFolio supports standard Markdown syntax.
Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6Emphasis
_italic text_ or _italic text_
**bold text** or **bold text**Bold (**…**) is rendered with extra visual emphasis in several layouts (for example, in About.mdx), and is often used to highlight names, institutions, or key phrases.
Links
[Link text](https://example.com)Lists
- First item
- Second item
- Third item1. First item
2. Second item
3. Third itemTables
| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |3. Images
You can embed images using standard Markdown:
- For local files, put them under
public/imagesand refer to them with/images/.... - You can also use full remote URLs.
- The alt text is used both for accessibility and rendered as the image’s caption (via
<figcaption>), so it’s worth writing something descriptive rather than leaving it empty.
4. Code blocks
Use fenced code blocks for code snippets:
```ts
function hello() {
console.log('Hello, world')
}
```(Use the language identifier you need: ts, js, bash, etc.)
5. MDX: Markdown + components
All content files under src/contents are MDX, which means:
- You can write plain Markdown only (no JSX needed) — this is the default and most common usage.
- When you need to, you can import and use React components in your content.
A minimal MDX example:
import { Callout } from '@/components/Callout'
# Example page
Some text in **Markdown**.
<Callout>This block is rendered using a React component.</Callout>If you don’t need components, you can treat these files as regular Markdown files and ignore the MDX features.
6. Section-specific behavior
Different sections apply slightly different layouts, but the underlying idea is the same:
- About:
src/contents/About.mdxis rendered directly into the home page. - News: each file in
src/contents/newsis a short MDX snippet representing a single item. - Research / Projects: frontmatter defines metadata; the body becomes the detail page content.
For section-specific details and required fields, refer to: