How Posts Render on Dev with Min

Purpose

This post is a live rendering guide for Dev with Min. It shows how a published post can use Markdown, MDX components, Mermaid diagrams, and code blocks inside the final article layout.

When I add or change rendering components later, this post should make the public result easy to inspect.

Markdown baseline

Normal paragraphs should be comfortable to read at article width. Inline code like bun run check:public should be visible without becoming visually noisy. Keyboard tokens can use HTML such as ⌘ + K.

Blockquotes are available for quoted or emphasized prose:

A post can stay practical while still keeping context, tradeoffs, and future questions close to the technical details.

Lists render with normal Markdown:

• short observations
• implementation notes
• commands worth keeping
• follow-up questions

Callouts

Callouts are MDX components for giving different kinds of information a stable visual shape.

Mermaid diagrams

Mermaid diagrams render through the local Mermaid component. Each diagram can have a title and is wrapped in a scrollable figure.

flowchart LR
Experience[Experience] --> Draft[Draft]
Draft --> Review[Review]
Review --> Publish[Publish]
Publish --> Revisit[Revisit]
Revisit --> Draft

sequenceDiagram
participant Reader
participant Browser
participant Blog
Reader->>Browser: Open post URL
Browser->>Blog: Request static page
Blog-->>Browser: Return HTML, CSS, and JS
Browser-->>Reader: Render post

erDiagram
AUTHOR ||--o{ POST : writes
POST ||--o{ TAG : has
AUTHOR {
  string id PK
  string name
}
POST {
  string id PK
  string title
  datetime published_at
}
TAG {
  string slug PK
  string name
}

stateDiagram
[*] --> Draft
Draft --> Published: publish
Published --> Revised: learn more
Revised --> Published: update

classDiagram
class WritingPost {
  +string title
  +string section
  +string[] tags
  +boolean draft
}
class ProjectRecord {
  +string name
  +string status
}
class DeveloperProfile {
  +string focus
}
DeveloperProfile --> WritingPost : authors
WritingPost --> ProjectRecord : references

gitGraph
commit id: "draft"
branch revise
checkout revise
commit id: "clarify"
checkout main
merge revise
commit id: "publish"

Code blocks

Code blocks use Expressive Code. Titles, terminals, line highlights, labels, diff markers, and logs should all render consistently.

type WritingSection = "light-notes" | "field-logs" | "deep-dives";


export function getSectionLabel(section: WritingSection) {
  return section.replace("-", " ");
}

bun run check
bun run check:public

draft: z.boolean().default(true),
draft: z.boolean().default(false),

packages.default = pkgs.stdenvNoCC.mkDerivation {
  pname = "dev-with-min";
  version = "0.1.0";
};

14:07:39 [build] Collecting build info...
14:07:40 [WARN] Some chunks are larger than expected
14:07:40 [build] Complete!

Frontmatter shape

Published writing should use the content schema directly:

---
title: "Example Post"
description: "A short summary for listings, RSS, and social previews."
publishedAt: 2026-07-06
section: field-logs
tags:
  - astro
  - mdx
draft: false
---