How to add content (posts, projects, images, code)

This is a quick, practical checklist for adding content to this site.

1) Create a post or project

Use the generator scripts when possible (they apply the template and frontmatter).

Post

• Location: src/content/posts/
• File name: my-post-slug.mdx

npm run new:post my-post-slug

Project

• Location: src/content/projects/
• File name: my-project-slug.mdx

npm run new:project my-project-slug

2) Add images

There are two approaches: “simple” (just copy a file) or “optimized” (Astro image pipeline).

Option A (simple): serve from public/

1. Put files under public/, for example:

• public/images/my-post/diagram.png

2. Reference them from MDX with a plain <img>:

<img src="/images/my-post/diagram.png" alt="Diagram" />

Example (rendered below):

This works because anything in public/ is served from the site root.

Option B (optimized): import from src/assets/

Use this when you want Astro’s <Image /> optimization (formats like WebP, responsive sizing, etc.).

---
import { Image } from 'astro:assets';
import figure from '../../assets/profile-placeholder.png';
---

<Image src={figure} alt="Example image" width={800} format="webp" />

Notes:

• The import path is relative to the .mdx file.
• Prefer this when performance/quality matters.

3) Add code snippets

Code blocks

Use fenced code blocks:

export function hello(name: string) {
  return `Hello, ${name}`;
}

Inline code

Use backticks for short commands/config keys: npm run build.

4) Island demo (Preact + React-compat)

This section is a reference example: how to embed a small interactive “island” in an otherwise static MDX post.

5) Publish checklist

Before publishing:

• Ensure draft: false in the frontmatter.
• Sanity check locally:

npm run dev
npm run build