This post is the rendering fixture for the blog. It includes bold, italic, strike, underline, inline code, links, and tinted text. Also: red, blue, green, purple, orange, pink, brown.

Quiet Motion

A blog should feel light, not empty.
Lines guide the eye, dots keep rhythm.
White space is not wasted space — it breathes.

🔆

Everything in this project is intentionally reduced to content, thin dividers, and small motion.

💡

Design principle: Constraint is a creative tool. The fewer elements you allow, the more meaningful each one becomes.

⚠️

Warning block example: This callout style is reserved for important notices or cautions in the actual blog.

任务管理

6 records

任务名称	截止日期	创建时间	优先级	状态	预计工时(h)	负责人	标签	备注

Structure

Unordered List

Ordered List

Todo List

Published through Notion

Add toggle sample

Add math formulas

Add more essays

Integrate with deployment pipeline

Toggle Samples

Toggle Sample

Text inside a toggle block.

const style = "minimal";

Why use toggles?

Toggles are perfect for supplementary content — footnotes, extended examples, or spoilers — that shouldn't interrupt reading flow. They keep the page clean while keeping information accessible.

Nested Toggle

This is the outer toggle content.

Inner Toggle

Content nested two levels deep inside toggles.

Math

Inline math looks like $E = mc^2$ and block math works too.

\int_0^1 x^2 \, dx = \frac{1}{3}

\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}

\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}

The quadratic formula: $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

Tables

Basic Table

Element	Role	Rule
Dot	Anchor	Marks presence
Line	Guide	Creates pace
Space	Rest	Allows breath

Colored Table

Feature	Status	Priority	Notes
Headings	Done	High	H1–H4 supported
Callouts	Done	High	Icon + color
Math	Done	Medium	KaTeX rendering
Media	In progress	Low	Image + video

Code

TypeScript

export function Divider() {
  return <div aria-hidden className="h-px w-full bg-current/12" />;
}

Python

def fibonacci(n: int) -> list[int]:
    a, b = 0, 1
    result = []
    for _ in range(n):
        result.append(a)
        a, b = b, a + b
    return result

print(fibonacci(10))

SQL

SELECT
    p.title,
    p.slug,
    p.published_at,
    COUNT(v.id) AS view_count
FROM posts p
LEFT JOIN views v ON v.post_id = p.id
WHERE p.published = true
GROUP BY p.id
ORDER BY view_count DESC
LIMIT 10;

Mermaid Diagram

graph TD
    A["Write in Notion"] --> B["Fetch via API"]
    B --> C["Parse Blocks"]
    C --> D["Render to HTML"]
    D --> E["Deploy to CDN"]
    E --> F["Reader sees post"]

Mermaid Sequence

sequenceDiagram
    participant Author
    participant Notion
    participant Site
    Author->>Notion: Edit page
    Notion-->>Site: Webhook trigger
    Site->>Notion: Fetch latest blocks
    Notion-->>Site: Return block data
    Site-->>Author: Updated live site

Columns

Left Column

This is the left column. Use columns to present parallel information or create a two-up layout for comparisons.

Item A
Item B
Item C

Right Column

This is the right column. Each column is independent and can contain any block type.

Item X
Item Y
Item Z

📝

Writing
Keep sentences short. One idea per sentence. Paragraphs breathe.

🎨

Design
Use restraint. Remove before you add. White space is intentional.

⚙️

Engineering
Build for change. The API shape matters more than the implementation.

Quotes

The best interface is no interface.
— Golden Krishna

Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.
— Antoine de Saint-Exupéry

Design is not just what it looks like and feels like. Design is how it works.
— Steve Jobs

Details (Accordion)

Why Notion as a CMS?

It keeps writing friction low while still giving structured metadata. You get a rich editor, a database for properties like tags and slugs, and a public API — all without maintaining a separate admin panel.

The tradeoff is rendering: you must fetch and transform Notion's block structure yourself. But for a personal blog, that's a one-time investment.

How does the rendering pipeline work?

1.
A webhook or ISR trigger fires when the page is updated.
2.
The site fetches the page blocks via the Notion API.
3.
Blocks are recursively mapped to React components.
4.
The page is statically rendered and cached on the CDN.

Total latency from save to live: under 10 seconds.

What block types are supported?

Currently supported:

Paragraph, Heading 1–3
Bulleted, numbered, todo lists
Toggles, callouts, quotes
Code (with syntax highlighting)
Tables, dividers
Images, videos
Math (inline and block via KaTeX)

Not yet supported: databases, synced blocks, embeds.

Media

Image

Video

What is Notion? (YouTube)

File

3DCV_02_imaging.pptx

Open

Text Colors & Backgrounds

Gray text / Brown text / Orange text / Yellow text / Green text / Blue text / Purple text / Pink text / Red text

Gray bg Brown bg Orange bg Yellow bg Green bg Blue bg Purple bg Pink bg Red bg

Headings Showcase

Heading 1

Heading 2

Heading 3

Heading 4

Synced Block Demo

Synced source

🔁

This is a synced block. Any changes here will reflect wherever this block is referenced.

Minimal Lines, Living Text