Astro Nano

By default, all components rendered in MDX are treated as static HTML with no client-side JavaScript. To make components interactive (e.g., components that handle clicks, state, or lifecycle hooks), you must use Astro's client directives.

Commonly used directives include client:load to load the component immediately on page load.

<ReactComponent client:load />

Create footnotes by adding a caret and an ID inside brackets [^1] in the text, and defining the content at the bottom of the document using [^1]: content.

Here is a footnote[^1].

[^1]: This is the footnote content.

You can deploy your own instance of Astro Nano using one-click deployment buttons for Vercel or Netlify. These buttons clone the repository and initiate the deployment process automatically.

<!-- Deployment links are provided via SVG buttons in the README -->

Use the following syntax to style text:

• Headings: Use # followed by a space (e.g., # Heading 1).
• Bold: Use ** or __ (e.g., **bold**).
• Italic: Use * (e.g., *italic*).
• Bold and Italic: Combine symbols (e.g., ***bold and italic***).
• Strikethrough: Use ~ (e.g., ~strikethrough~).
• Code: Use single backticks for inline code (e.g., `code`).
• Code Blocks: Use triple backticks with an optional language identifier for syntax highlighting (e.g., ```js).

# Heading 1

**Bold text** and *italic text*.

`inline code`

```js
function hello() {
  console.log("hello world");
}

MDX in Astro allows you to import and use .astro, .jsx, .tsx, and other framework components directly within your markdown files. This enables the creation of interactive content within your blog posts or pages.

You can import components using standard ESM import syntax at the top of your MDX file, then use them as JSX tags.

import DateComp from "../../../components/FormattedDate.astro";

<DateComp date={new Date()} />

The projects collection is used to build a portfolio of work. Content files must be located in src/content/projects.

Each project is defined by a directory containing either a standard markdown file (index.md) or an MDX file (index.mdx). The directory name determines the URL slug for the project.

Example directory structure:

📁 /src/content/projects
└── 📁 project-1
      └── 📄 index.md
└── 📁 projects-2
      └── 📄 index.mdx

Generated URLs will follow the pattern:

• https://example.com/projects/project-1
• https://example.com/projects/projects-2

The blog collection is located in src/content/blog. To create a blog post, use a directory named after your desired URL slug containing an index.md or index.mdx file. The folder name determines the final URL path.

Example structure:

• src/content/blog/post-1/index.md -> https://example.com/blog/post-1
• src/content/blog/post-2/index.mdx -> https://example.com/blog/post-2

📁 /src/content/blog
└── 📁 post-1
      └── 📄 index.md
└── 📁 post-2
      └── 📄 index.mdx

Tables

Use | for columns and - for the header separator. Use : for alignment (e.g., :--- for left, ---: for right, :---: for center).

Blockquotes

Use > before a paragraph. For multi-line blockquotes, add > to every line.

| Item | Qty |
| :--- | --: |
| Bread | 1 |

> This is a blockquote.
> It can span multiple lines.

The work collection is used to manage work experience entries. Content files for this collection must be located in src/content/work/. Each Markdown or MDX file in this directory represents a single entry that will be rendered on the /work page.

📁 /src/content/work
└── 📄 apple.md
└── 📄 facebook.md
└── 📄 google.md
└── 📄 mcdonalds.md

Links

• Standard Link: [title](url)
• Quick Link: <url> (e.g., <http://example.com>)
• Email Link: <email@address.com>

Images

• Relative Image: ![title](./path/to/image.ext) (relative to the markdown file).
• Public Image: ![title](/path/to/image.ext) (relative to the public/ folder).
• External Image: ![title](https://url.com/image.ext)

[Astro](https://astro.build)
<http://www.example.com>

![Relative](./image.webp)
![Public](/image.webp)
![External](https://example.com/image.png)

When standard Markdown is insufficient, you can use specific HTML tags:

• Subscript: <sub>text</sub>
• Superscript: <sup>text</sup>
• Keyboard Input: <kbd>KEY</kbd>
• Abbreviation: <abbr title="Full Name">ABBR</abbr>
• Highlight: <mark>highlighted text</mark>

H<sub>2</sub>O
E=mc<sup>2</sup>
<kbd>CTRL</kbd>
<abbr title="Graphics Interchange Format">GIF</abbr>
<mark>Important</mark>