Welcome to your new blog powered by Velite + Next.js.

This post exercises our MDX → shadcn mapping. Try toggling dark mode and verify everything looks right.

Table of contents

Headings

H1 Title

Some intro text under H1.

H2 Section

H3 Subsection

H4 Sub-subsection

H5

H6

Paragraphs, links, and inline code

This paragraph has an internal link to the blog index and an external link to shadcn/ui. It also shows inline code within text.

You can also use strikethrough via GFM: deprecated now replaced.

Blockquote → Alert

Lists

Unordered list:

• First item
• Second item
  • Nested item
• Third item

Ordered list:

1. Step one
2. Step two
3. Step three

Task list (GFM):

• Set up MDX
• Map components
• Polish visuals

Table

Caption: Feature matrix

Code blocks

Typescript:

export function greet(name: string) {
  return `Hello, ${name}!`
}
 
console.log(greet("MDX"))

Shell:

pnpm add remark-gfm rehype-slug rehype-autolink-headings

Mermaid diagram

graph TD
  A[Write/Modify Code] --> B{Run pnpm dev}
  B --> C[Test in Browser]
  C -->|Looks good?| D[Commit]
  C -->|Needs changes?| A
  D --> E[Deploy]
  %% Add clickable link on Commit node to verify anchors/tooltips
  click D href "https://mermaid.js.org" "Mermaid docs" _blank