Skip to content
  1. Tyke’s Notes
  2. /Minimal Lines, Living Text
designcontent structureproject

Minimal Lines, Living Text

The blog post emphasizes a minimalist design approach, highlighting the importance of white space, intentional constraints, and various content types such as lists, toggles, math, and code snippets. It includes principles for effective writing and design, showcases different block types, and explains the rendering pipeline for using Notion as a CMS, ultimately aiming for a clean and accessible user experience.

Published 3/6/2026Updated 3/25/2026
粤ICP备2026008719号
  1. Quiet Motion
  2. Structure
  3. Unordered List
  4. Ordered List
  5. Todo List
  6. Toggle Samples
  7. Toggle Sample
  8. Why use toggles?
  9. Nested Toggle
  10. Inner Toggle
  11. Math
  12. Tables
  13. Basic Table
  14. Colored Table
  15. Code
  16. TypeScript
  17. Python
  18. SQL
  19. Mermaid Diagram
  20. Mermaid Sequence
  21. Columns
  22. Column 1
  23. Column 2
  24. Column 3
  25. Column 4
  26. Column 5
  27. Quotes
  28. Details (Accordion)
  29. Media
  30. Image
  31. Video
  32. File
  33. Text Colors & Backgrounds
  34. Headings Showcase
  35. Heading 1
  36. Heading 2
  37. Heading 3
  38. Heading 4
  39. Synced Block Demo
  40. Table of Contents

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.

任务管理

6 loaded

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

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. 1.
    Ordered item one
    1. a.
      Nested ordered item
    2. b.
      Another nested item
  2. 2.
    Ordered item two
  3. 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.

typescript
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=mc2E = mc^2E=mc2 and block math works too.

∫01x2 dx=13\int_0^1 x^2 \, dx = \frac{1}{3}∫01​x2dx=31​
∑n=1∞1n2=π26\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}n=1∑∞​n21​=6π2​
∇⋅E=ρε0\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}∇⋅E=ε0​ρ​

The quadratic formula: x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}x=2a−b±b2−4ac​​

Tables

Basic Table

ElementRoleRule
DotAnchorMarks presence
LineGuideCreates pace
SpaceRestAllows breath

Colored Table

FeatureStatusPriorityNotes
HeadingsDoneHighH1–H4 supported
CalloutsDoneHighIcon + color
MathDoneMediumKaTeX rendering
MediaIn progressLowImage + video

Code

TypeScript

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

Python

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

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

mermaid
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

mermaid
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. 1.
    A webhook or ISR trigger fires when the page is updated.
  2. 2.
    The site fetches the page blocks via the Notion API.
  3. 3.
    Blocks are recursively mapped to React components.
  4. 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

A thin black line on white paper
A thin black line on white paper

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.

Table of Contents

  1. Quiet Motion
  2. Structure
  3. Unordered List
  4. Ordered List
  5. Todo List
  6. Toggle Samples
  7. Toggle Sample
  8. Why use toggles?
  9. Nested Toggle
  10. Inner Toggle
  11. Math
  12. Tables
  13. Basic Table
  14. Colored Table
  15. Code
  16. TypeScript
  17. Python
  18. SQL
  19. Mermaid Diagram
  20. Mermaid Sequence
  21. Columns
  22. Column 1
  23. Column 2
  24. Column 3
  25. Column 4
  26. Column 5
  27. Quotes
  28. Details (Accordion)
  29. Media
  30. Image
  31. Video
  32. File
  33. Text Colors & Backgrounds
  34. Headings Showcase
  35. Heading 1
  36. Heading 2
  37. Heading 3
  38. Heading 4
  39. Synced Block Demo
  40. Table of Contents

End of rendering fixture — all block types demonstrated.

On this page

  1. Quiet Motion
  2. Structure
  3. Unordered List
  4. Ordered List
  5. Todo List
  6. Toggle Samples
  7. Toggle Sample
  8. Why use toggles?
  9. Nested Toggle
  10. Inner Toggle
  11. Math
  12. Tables
  13. Basic Table
  14. Colored Table
  15. Code
  16. TypeScript
  17. Python
  18. SQL
  19. Mermaid Diagram
  20. Mermaid Sequence
  21. Columns
  22. Column 1
  23. Column 2
  24. Column 3
  25. Column 4
  26. Column 5
  27. Quotes
  28. Details (Accordion)
  29. Media
  30. Image
  31. Video
  32. File
  33. Text Colors & Backgrounds
  34. Headings Showcase
  35. Heading 1
  36. Heading 2
  37. Heading 3
  38. Heading 4
  39. Synced Block Demo
  40. Table of Contents