代码优先的页面外壳

---
import nav from '../../.generated/navigation.json';
import '../styles/global.css';
import '../styles/code-reading.css';
const { title = 'Pysolate Spine', description = '从真实代码读懂 PLM', headings = [], wide = false } = Astro.props;
const current = Astro.url.pathname;
const activeSection = nav.find(p=>current===`/${p.slug}/`)?.section || (current==='/'||current.startsWith('/code/')?'reading':'implementation');
const groups = [{id:'reading', title:'代码带读 · 主线'}, {id:'deep', title:'机制深度解析'}, {id:'patterns', title:'Go 组合速成'}, {id:'basics', title:'前置课程 · 从零开始'}, {id:'research', title:'研究探索'}, {id:'implementation', title:'实现与面试练习'}];
---

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="noindex, nofollow, noarchive, nosnippet" />
  <meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet" />
  <meta name="description" content={description} />
  <meta name="color-scheme" content="light dark" />
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <title>{title} · Pysolate Spine</title>
</head>

<body>
<a class="skip" href="#main">跳到正文</a>
<header>
  <a class="brand" href="/"><span class="mark">P</span><span><strong>Pysolate Spine</strong><small>READ THE CODE · UNDERSTAND THE SYSTEM</small></span></a>
  <nav class="top"><a href="/read/">代码带读</a><a href="/deep/">深度解析</a><a href="/go-patterns/">Go 组合速成</a><a href="/foundations/">基础查阅</a><a href="/research-positioning/">研究探索</a><a href="/guide/">实现</a><a href="/code/">源码</a><span class="quiet">NO INDEX</span></nav>
</header>
<details class="mobile-nav"><summary>课程与章节</summary><nav>{groups.map(g=><details class="nav-section" open={activeSection===g.id}><summary>{g.title}</summary>{nav.filter(p=>p.section===g.id).map(p=><a href={`/${p.slug}/`} aria-current={current===`/${p.slug}/`?'page':undefined}>{p.title}</a>)}</details>)}<a href="/code/">源码索引</a></nav></details>

<div class:list={['shell', { wide }]}>
  <aside class="sidebar"><div class="rail-label">沿执行路径理解每块代码</div>{groups.map(g=><details class="nav-section" open={activeSection===g.id}><summary>{g.title}</summary><nav>{nav.filter(p=>p.section===g.id).map((p,i)=><a href={`/${p.slug}/`} aria-current={current===`/${p.slug}/`?'page':undefined}><span>{String(g.id==='implementation'?i+1:i).padStart(2,'0')}</span>{p.title}</a>)}</nav></details>)}<a class="source-link" href="/code/">浏览实际源码 ↗</a><p class="rail-note">先问这一块完成什么。<br/>再跟状态和调用，语法随用随查。</p></aside>
  <main id="main"><slot /></main>
  <aside class="toc">{headings.length>0 && <><div class="rail-label">本页内容</div><nav>{headings.filter(h=>h.depth===2).map(h=><a href={`#${h.slug}`}>{h.text}</a>)}</nav></>}</aside>
</div>
<footer>面向理解与协作的精简实现 <span>公开链接 · 禁止搜索索引 · 无访问鉴权</span></footer>
</body>
</html>

---
import Layout from '../layouts/Docs.astro';
import coverage from '../../.generated/reading-coverage.json';
const paths = [
  {href:'/read-entry/', title:'先跟完一次普通执行', description:'从 main 的参数出发，走过 Go、Wasm、C、Python 和 Host 工具。'},
  {href:'/read-futures/', title:'再读 PLM 与 Future', description:'跟随一次提前读取，看任务怎样登记、完成并在原位置交付。'},
  {href:'/read-prefix-host/', title:'接入流式源码', description:'看接收、解析、提前准备与最终领取怎样协作。'},
  {href:'/read-prepared/', title:'最后读内存复用', description:'先 full-copy，再跟进 Linux COW 的系统调用与所有权。'},
];
---

<Layout title="沿真实代码学习">
  <section class="hero"><div class="eyebrow">FOLLOW THE EXECUTION</div><h1>跟完一次执行，<br/>读懂<em>整块代码。</em></h1><p class="lede">先看这一步为什么存在、接到什么状态。<br/>再沿函数调用理解源码，跟清结果与资源交给谁。</p><div class="actions"><a class="button" href="/read/">先看执行地图 →</a><a class="button secondary" href="/read-entry/">从 main 开始带读</a></div></section>
  <section><div class="section-heading"><span class="eyebrow">先走主线，再展开旁支</span><h2>一次调用，逐层读懂</h2></div><div class="cards">{paths.map((p,i)=><a class="card" href={p.href}><span class="card-number">{String(i+1).padStart(2,'0')}</span><h3>{p.title}</h3><p>{p.description}</p><span class="arrow">↗</span></a>)}</div></section>
  <section class="command-card"><div><span class="eyebrow">先预测，再运行</span><h2>每一层都接回实际结果</h2></div><pre><code>make demo     <span># 普通执行</span>
make explain  <span># 实际 PLM 转换</span>
make prepared-cow <span># Linux 写时复制</span></code></pre></section>
  <div class="notice"><strong>按职责分块，保留完整覆盖。</strong>带读片段从仓库提取，覆盖 {coverage.length} 个教学源文件的全部非空行。每块都接回目的、状态变化与调用去向；覆盖检查负责防漏，讲解仍需结合源码审读。<a href="/foundations/">背景课程</a>和 Go 语法可以随用随查。</div>
</Layout>

/* Excerpt numbers refer to the original source, not to this Markdown page. */
.code-excerpt { --line-start: 0; margin: 1rem 0 1.5rem; }
.code-excerpt pre code { counter-reset: source-line var(--line-start); }
.code-excerpt pre code .line { counter-increment: source-line; }
.code-excerpt pre code .line::before {
  content: counter(source-line);
  display: inline-block;
  width: 3.5em;
  padding-right: 1.2em;
  color: #87909b;
  text-align: right;
  user-select: none;
}
.code-excerpt pre { padding-left: .6rem; }
.reading-start { border-left: 3px solid var(--accent, #c57343); padding-left: 1rem; }
@media (max-width: 720px) {
  .code-excerpt pre { font-size: .78rem; }
  .code-excerpt pre code .line::before { width: 2.8em; padding-right: .8em; }
}