Welcome

This post is rendered straight from a Markdown file in /content/blog. Frontmatter on top, body below — that's the whole authoring contract.

How it works

1. Drop a .md file into content/blog/.
2. The build reads the directory with fs, parses frontmatter via gray-matter, and ships the body through next-mdx-remote.
3. Posts are sorted by date (newest first) on the index page, and every slug gets its own dynamic route.

Obsidian admonitions

These are blockquote-prefixed callouts. They're intercepted in the MDX components map and replaced with styled cards.

A regular blockquote (no marker) still renders as a normal blockquote:

Plain blockquotes keep their classic styling.

Obsidian wiki-style images

The pre-processor rewrites ![file](/file.png) into standard Markdown ![file](/file.png) before MDX sees it. Drop the asset into /public and reference it like this:

You can also alias the alt text:

GFM features

Tables work via remark-gfm:

Code highlighting

Fenced blocks are highlighted at build time with Shiki (via rehype-pretty-code). Two themes are emitted — github-light and github-dark-dimmed — and the right one is picked based on the active color scheme. Zero client-side JavaScript is shipped for the highlighting itself.

A simple TypeScript snippet:

import { getAllPosts } from "@/lib/mdx";
 
const posts = getAllPosts();
console.log(`Found ${posts.length} posts`);

You can request line numbers with showLineNumbers and highlight specific lines with {1,3-4}:

import { MDXRemote } from "next-mdx-remote/rsc";
 
export default function Post({ source }: { source: string }) {
  return (
    <article className="prose">
      <MDXRemote source={source} />
    </article>
  );
}

Highlight specific words or expressions with /pattern/:

import { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Even a shell snippet looks right:

pnpm add next-mdx-remote gray-matter rehype-pretty-code shiki

And you can inline-highlight a token with the syntax — e.g. const value = 42 — for type-aware coloring.

That's it — happy writing.