diff --git a/apps/tutorial/blog-2025-07.html b/apps/tutorial/blog-2025-07.html
new file mode 100644
index 0000000..bcee989
--- /dev/null
+++ b/apps/tutorial/blog-2025-07.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ 博客 · 2025-07
+
+
+
+
+
+
diff --git a/apps/tutorial/blog-2026-08.html b/apps/tutorial/blog-2026-08.html
new file mode 100644
index 0000000..958003c
--- /dev/null
+++ b/apps/tutorial/blog-2026-08.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ 博客 · 2026-08
+
+
+
+
+
+
diff --git a/apps/tutorial/blog-gorzil.html b/apps/tutorial/blog-gorzil.html
new file mode 100644
index 0000000..d86584c
--- /dev/null
+++ b/apps/tutorial/blog-gorzil.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ gorzil：面向多人协作的 AI 原生工具开发自述
+
+
+
+
+
+
diff --git a/apps/tutorial/blog-sapling-transformer.html b/apps/tutorial/blog-sapling-transformer.html
new file mode 100644
index 0000000..b05c8e2
--- /dev/null
+++ b/apps/tutorial/blog-sapling-transformer.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ sapling_transformer 近半月开发自述
+
+
+
+
+
+
diff --git a/apps/tutorial/src/components/BlogPages.tsx b/apps/tutorial/src/components/BlogPages.tsx
new file mode 100644
index 0000000..8cb54c4
--- /dev/null
+++ b/apps/tutorial/src/components/BlogPages.tsx
@@ -0,0 +1,213 @@
+/** 博客页——日期页（月内文章卡片预览）+ 文章页（markdown 风格化渲染）。
+ * 迷你 md 解析：#/##/###、> 引言、``` 代码块、-/* 列表、**粗体**、`行内码`。 */
+import type { ReactNode } from 'react'
+import { Page, Section } from '../lib/ui'
+import { MONTHS, POSTS, monthOf } from '../content/blogs'
+import { BrickDot, Mark, Tri } from '@stack/design-system'
+
+/* ── 行内：**粗体** 与 `行内码` ── */
+function inline(text: string): ReactNode[] {
+ const parts: ReactNode[] = []
+ const re = /(\*\*[^*]+\*\*|`[^`]+`)/g
+ let last = 0
+ let m: RegExpExecArray | null
+ let i = 0
+ while ((m = re.exec(text))) {
+ if (m.index > last) parts.push(text.slice(last, m.index))
+ const t = m[0]
+ if (t.startsWith('**')) parts.push({t.slice(2, -2)})
+ else parts.push(
+
+ {t.slice(1, -1)}
+ ,
+ )
+ last = m.index + t.length
+ }
+ if (last < text.length) parts.push(text.slice(last))
+ return parts
+}
+
+/* ── 块级渲染（对齐字体系统：h2=t2、h3=t3、正文=content、列表=积木点） ── */
+function Markdown({ raw }: { raw: string }) {
+ const lines = raw.replace(/^---\n[\s\S]*?\n---\n/, '').split('\n')
+ const out: ReactNode[] = []
+ let i = 0
+ let key = 0
+ while (i < lines.length) {
+ const ln = lines[i]
+ if (!ln.trim() || ln.trim() === '{/* truncate */}') {
+ i++
+ continue
+ }
+ if (ln.startsWith('```')) {
+ const buf: string[] = []
+ i++
+ while (i < lines.length && !lines[i].startsWith('```')) buf.push(lines[i++])
+ i++
+ out.push(
+
+ {buf.join('\n')}
+ ,
+ )
+ continue
+ }
+ if (ln.startsWith('> ')) {
+ out.push(
+
+ {inline(ln.slice(2))}
+
,
+ )
+ i++
+ continue
+ }
+ if (ln.startsWith('# ')) {
+ out.push(
+
+ {inline(ln.slice(2))}
+
,
+ )
+ i++
+ continue
+ }
+ if (ln.startsWith('## ')) {
+ out.push(
+
+
+ {inline(ln.slice(3))}
+
,
+ )
+ i++
+ continue
+ }
+ if (ln.startsWith('### ')) {
+ out.push(
+
+ {inline(ln.slice(4))}
+
,
+ )
+ i++
+ continue
+ }
+ if (/^\d+\. |- /.test(ln)) {
+ const items: string[] = []
+ const ordered = /^\d+\. /.test(ln)
+ while (i < lines.length && (ordered ? /^\d+\. /.test(lines[i]) : /^- /.test(lines[i]))) {
+ items.push(lines[i].replace(/^(\d+\.|-) /, ''))
+ i++
+ }
+ out.push(
+
+ {items.map((it, n) => (
+ -
+
+
+
+ {inline(it)}
+
+ ))}
+
,
+ )
+ continue
+ }
+ // 段落：连续非格式行合并
+ const buf: string[] = [ln]
+ i++
+ while (
+ i < lines.length &&
+ lines[i].trim() &&
+ !/^(#{1,3} |> |```|\d+\. |- |\/\* |\{\/\*)/.test(lines[i])
+ ) {
+ buf.push(lines[i])
+ i++
+ }
+ out.push(
+
+ {inline(buf.join(' '))}
+
,
+ )
+ }
+ return {out}
+}
+
+/* ── 文章卡片（日期页预览） ── */
+function BlogCard({ post }: { post: (typeof POSTS)[number] }) {
+ const quote =
+ post.raw
+ .split('\n')
+ .find((l) => l.startsWith('> ') && l.trim() !== '{/* truncate */}') ??
+ post.raw.split('\n').find((l) => l.trim() && !l.startsWith('#') && !l.startsWith('---') && !l.startsWith('---')) ??
+ ''
+ return (
+
+
+ {post.date}
+ {post.author}
+
+ {post.title}
+ {quote.replace(/^> /, '').slice(0, 90)}…
+
+ 阅读全文 →
+
+
+ )
+}
+
+/* ── 日期页：某月的文章卡片 ── */
+export function BlogDatePage({ dateKey }: { dateKey: string }) {
+ const month = MONTHS.find((m) => m.key === dateKey)!
+ return (
+
+
+
+ {month.posts.map((p) => (
+
+ ))}
+
+
+
+ )
+}
+
+/* ── 文章页 ── */
+export function BlogPostPage({ slug }: { slug: string }) {
+ const post = POSTS.find((p) => p.slug === slug)!
+ return (
+
+
+
+ {post.date.slice(2, 4)}
+
+
{post.title}
+
+ {post.date}
+ {post.author}
+ 开发自述
+
+
+
博客
+ {MONTHS.map((m) => {
+ const on = active === `blog-${m.key}`
+ return (
+
+ {m.key}
+
+ )
+ })}
+
diff --git a/apps/tutorial/src/pages/blog-2025-07/main.tsx b/apps/tutorial/src/pages/blog-2025-07/main.tsx
new file mode 100644
index 0000000..16a433e
--- /dev/null
+++ b/apps/tutorial/src/pages/blog-2025-07/main.tsx
@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import { BlogDatePage } from '../../components/BlogPages'
+
+createRoot(document.getElementById('root')!).render()
diff --git a/apps/tutorial/src/pages/blog-2026-08/main.tsx b/apps/tutorial/src/pages/blog-2026-08/main.tsx
new file mode 100644
index 0000000..324cba0
--- /dev/null
+++ b/apps/tutorial/src/pages/blog-2026-08/main.tsx
@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import { BlogDatePage } from '../../components/BlogPages'
+
+createRoot(document.getElementById('root')!).render()
diff --git a/apps/tutorial/src/pages/blog-gorzil/main.tsx b/apps/tutorial/src/pages/blog-gorzil/main.tsx
new file mode 100644
index 0000000..09a6f29
--- /dev/null
+++ b/apps/tutorial/src/pages/blog-gorzil/main.tsx
@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import { BlogPostPage } from '../../components/BlogPages'
+
+createRoot(document.getElementById('root')!).render()
diff --git a/apps/tutorial/src/pages/blog-sapling-transformer/main.tsx b/apps/tutorial/src/pages/blog-sapling-transformer/main.tsx
new file mode 100644
index 0000000..8241eb5
--- /dev/null
+++ b/apps/tutorial/src/pages/blog-sapling-transformer/main.tsx
@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import { BlogPostPage } from '../../components/BlogPages'
+
+createRoot(document.getElementById('root')!).render()
diff --git a/apps/tutorial/src/vite-env.d.ts b/apps/tutorial/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/apps/tutorial/src/vite-env.d.ts
@@ -0,0 +1 @@
+///