March 6, 2026

Minimal Lines, Living Text

5 min read

March 6, 2026

Minimal Lines, Living Text

5 min read

This post is the rendering fixture for the blog. It includes bold, italic, strike, underline, inline code, links (external link to developers.notion.com), 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.

Structure

Unordered List

A list item with nested detail
- Nested bullet content
  Even deeper nesting
Another top-level item
Colored bold list item

Ordered List

1.
Ordered item one
1. a.
  Nested ordered item
2. b.
  Another nested item
2.
Ordered item two
3.
Ordered item three

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

Column 1

This is the first column. Use columns to present parallel information.

Item A
Item B
Item C

Column 2

Each column is independent and can contain any block type.

Item D
Item E
Item F

Column 3

Columns scale evenly across the page width.

Item G
Item H
Item I

Column 4

Great for dashboards, comparisons, or side-by-side layouts.

Item J
Item K
Item L

Column 5

Five columns maximize horizontal density.

Item X
Item Y
Item Z

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

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

Chart

Bar chart tallying the block types demonstrated on this page

HTML Embed

WebOS — a complete desktop operating system running in the browser

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.

End of rendering fixture — all block types demonstrated.

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.

任务名称	备注	状态	优先级	截止日期	负责人	标签	预计工时(h)	创建时间
📋设计登录页面 UI	参考 Figma 原型稿，注意移动端适配	已完成	高	2026年3月1日	咩羊	设计,前端	8	2026年3月6日 15:22
🔧用户认证接口开发	JWT + Refresh Token 方案，需与前端对接接口文档	进行中	高	2026年3月10日	咩羊	后端	16	2026年3月6日 15:22
🎨响应式布局适配	兼容 375px ~ 1920px 宽度，优先适配 iPhone 14	进行中	中	2026年3月12日	咩羊	前端,设计	10	2026年3月6日 15:22
📄撰写 API 接口文档	使用 Swagger，包含请求/响应示例和错误码说明	审核中	中	2026年3月8日	咩羊	文档,后端	4	2026年3月6日 15:22
🧪编写单元测试用例	覆盖率要求 ≥ 80%，重点覆盖核心业务逻辑	待处理	中	2026年3月15日	咩羊	测试,后端	6	2026年3月6日 15:22
🚀部署测试环境	Docker Compose 部署，配置 Nginx 反向代理	待处理	低	2026年3月20日	咩羊	后端	3	2026年3月6日 15:22

Structure

Unordered List

A list item with nested detail
- Nested bullet content
  Even deeper nesting
Another top-level item
Colored bold list item

Ordered List

1.
Ordered item one
1. a.
  Nested ordered item
2. b.
  Another nested item
2.
Ordered item two
3.
Ordered item three

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

Column 1

This is the first column. Use columns to present parallel information.

Item A
Item B
Item C

Column 2

Each column is independent and can contain any block type.

Item D
Item E
Item F

Column 3

Columns scale evenly across the page width.

Item G
Item H
Item I

Column 4

Great for dashboards, comparisons, or side-by-side layouts.

Item J
Item K
Item L

Column 5

Five columns maximize horizontal density.

Item X
Item Y
Item Z

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

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?

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

Chart

Bar chart tallying the block types demonstrated on this page

HTML Embed

WebOS — a complete desktop operating system running in the browser

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.

End of rendering fixture — all block types demonstrated.

Quiet Motion

Structure

Unordered List

Ordered List

Todo List

Toggle Samples

Toggle Sample

Why use toggles?

Nested Toggle

Inner Toggle

Math

Tables

Basic Table

Colored Table

Code

TypeScript

Python

SQL

Mermaid Diagram

Mermaid Sequence

Columns

Column 1

Column 2

Column 3

Column 4

Column 5

Quotes

Details (Accordion)

Media

Image

Video

File

Chart

HTML Embed

Text Colors & Backgrounds

Headings Showcase

Heading 1

Heading 2

Heading 3

Heading 4

Synced Block Demo

Table of Contents

Quiet Motion

Structure

Unordered List

Ordered List

Todo List

Toggle Samples

Toggle Sample

Why use toggles?

Nested Toggle

Inner Toggle

Math

Tables

Basic Table

Colored Table

Code

TypeScript

Python

SQL

Mermaid Diagram

Mermaid Sequence

Columns

Column 1

Column 2

Column 3

Column 4

Column 5

Quotes

Details (Accordion)

Media

Image

Video

File

Chart

HTML Embed

Text Colors & Backgrounds

Headings Showcase

Heading 1

Heading 2