first-commit

2026-05-04 14:58:14 -04:00
commit a46764fb1b
1210 changed files with 233231 additions and 0 deletions
@@ -0,0 +1,11 @@
+# dir-key-nav-minimal
+
+8 张幻灯片，每张一个纯色/渐变 mono-background（indigo / cream / crimson / emerald / slate / violet / white / charcoal）。灵感直接来自 `20260405 演示幻灯片【方向键版】.html` —— 八个 `t-*` 主题类，每张幻灯一个背景，方向键切换，极简 editorial 气质。
+
+**Visual traits:** 每张独立背景色 + 单一 accent、巨大 160px 标题无副图、4px 短粗 accent line divider、arrow-prefixed mono list、左下 `← →` 键盘提示 + 右下 page label、全屏 breathing negative space、JetBrains Mono 做数字 / 代码 / 键盘 hint、每个背景有自己的 `.dk-accent` 色。
+
+**Use when:** 有话要说、没太多图、希望用排版节奏推进观众注意力；keynote 式的极简讲稿；每张幻灯只讲一件事；公开分享 / keynote / 演讲稿。
+
+**Source inspiration:** `20260405-Karpathy-知识库/20260405 演示幻灯片【方向键版】.html`.
+
+**Path:** `templates/full-decks/dir-key-nav-minimal/index.html`
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Dir-Key Nav Minimal</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-dir-key-nav-minimal">
+<div class="deck">
+
+  <!-- 1. COVER · indigo -->
+  <section class="slide t-indigo is-active">
+    <div class="dk-snum">01 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Karpathy LLM Wiki</div>
+      <h1 class="dk-h0">为什么笔记<br>治不了 <span class="dk-accent">LLM</span></h1>
+      <span class="dk-line"></span>
+      <p class="dk-lede">8 种背景、8 张幻灯，一个关于如何把 AI 变成「长期记忆外挂」的最短陈述。<strong>按 → 继续。</strong></p>
+    </div>
+    <div class="dk-keyhint">nav · <kbd>←</kbd> <kbd>→</kbd> · <kbd>space</kbd></div>
+    <div class="dk-page">cover</div>
+  </section>
+
+  <!-- 2. SECTION · cream -->
+  <section class="slide t-cream">
+    <div class="dk-snum">02 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Chapter 01</div>
+      <h1 class="dk-h0">The <span class="dk-accent">Problem</span>.</h1>
+      <span class="dk-line"></span>
+      <p class="dk-lede">Token 上限是一个物理事实。你每次和 LLM 说话，它都是一个失忆症患者。</p>
+    </div>
+    <div class="dk-keyhint">chapter · 01 / 04</div>
+    <div class="dk-page">section</div>
+  </section>
+
+  <!-- 3. CONTENT · crimson -->
+  <section class="slide t-crimson">
+    <div class="dk-snum">03 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Symptoms</div>
+      <h2 class="dk-h1">四种你已经<br>受够的<br><span class="dk-accent">遗忘</span>。</h2>
+      <ul class="dk-list">
+        <li>昨天聊过的项目，今天重新解释一遍</li>
+        <li>上下文窗口一到，它开始「编造记忆」</li>
+        <li>不同 session 之间毫无关联，就像第一次见</li>
+        <li>你的真正偏好从未被记住，每次都要 re-prompt</li>
+      </ul>
+    </div>
+    <div class="dk-keyhint">content · list</div>
+    <div class="dk-page">03</div>
+  </section>
+
+  <!-- 4. CONTENT · emerald -->
+  <section class="slide t-emerald">
+    <div class="dk-snum">04 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">The Fix</div>
+      <h2 class="dk-h1">答案不是<br><span class="dk-accent">更大</span> 的窗口。</h2>
+      <p class="dk-lede" style="margin-top:10px">而是：把你的知识、偏好、历史都<strong>写进文件系统</strong>。<br>让 LLM 每次对话前，先去读那个系统。</p>
+      <div class="dk-grid-2">
+        <div class="dk-col"><h3>× 窗口 stuffing</h3><p>把所有东西塞 prompt，贵、慢、最终溢出。</p></div>
+        <div class="dk-col"><h3>✓ 文件 + 检索</h3><p>按需加载，永远不溢出，结构化可 diff。</p></div>
+      </div>
+    </div>
+    <div class="dk-keyhint">content · compare</div>
+    <div class="dk-page">04</div>
+  </section>
+
+  <!-- 5. CODE · slate -->
+  <section class="slide t-slate">
+    <div class="dk-snum">05 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Minimal Setup</div>
+      <h2 class="dk-h2"><span class="dk-accent">4 行</span> YAML<br>就能开始。</h2>
+      <pre class="dk-code">memory:
+  root: ~/.llm-wiki
+  format: markdown
+  retrieval: hybrid  # embedding + bm25</pre>
+      <p class="dk-lede" style="margin-top:16px;font-size:20px">你现在拥有一个会随时间增长的 <strong>第二大脑</strong>。每次对话它都会被读、被更新。</p>
+    </div>
+    <div class="dk-keyhint">content · code</div>
+    <div class="dk-page">05</div>
+  </section>
+
+  <!-- 6. CHART · violet — big number with bar -->
+  <section class="slide t-violet">
+    <div class="dk-snum">06 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">30-day result</div>
+      <div class="dk-big dk-accent">87%</div>
+      <p class="dk-lede" style="margin-top:14px;font-size:26px">的 re-explain 被消除。平均每次对话节省 <strong>4.2 分钟</strong> 的 re-context。</p>
+      <svg viewBox="0 0 900 80" style="width:100%;max-width:900px;margin-top:30px">
+        <rect x="0" y="30" width="900" height="22" rx="11" fill="rgba(255,255,255,.12)"/>
+        <rect x="0" y="30" width="783" height="22" rx="11" fill="#c4b5fd"/>
+        <text x="792" y="47" font-family="JetBrains Mono" font-size="16" fill="#c4b5fd" font-weight="700">87%</text>
+      </svg>
+    </div>
+    <div class="dk-keyhint">chart · big-num</div>
+    <div class="dk-page">06</div>
+  </section>
+
+  <!-- 7. CTA · white -->
+  <section class="slide t-white">
+    <div class="dk-snum">07 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Start tonight</div>
+      <h2 class="dk-h1">开始<br>你的 <span class="dk-accent">wiki</span>。</h2>
+      <span class="dk-line"></span>
+      <p class="dk-lede">不是装又一个插件。是决定：从今晚起，<strong>你的所有 AI 对话都要有一个共同的 vault</strong>。</p>
+      <pre class="dk-code" style="font-size:18px">$ mkdir ~/llm-wiki && cd ~/llm-wiki
+$ git init
+$ echo "# my brain" > README.md</pre>
+    </div>
+    <div class="dk-keyhint">cta · three-commands</div>
+    <div class="dk-page">07</div>
+  </section>
+
+  <!-- 8. THANKS · charcoal -->
+  <section class="slide t-charcoal">
+    <div class="dk-snum">08 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">End · thanks for staying</div>
+      <h1 class="dk-h0"><span class="dk-accent">謝謝</span>。</h1>
+      <span class="dk-line"></span>
+      <p class="dk-lede">Karpathy 的原始 thread + 我的 vault 结构都在 <strong>github.com/lewis/llm-wiki</strong>。欢迎按 ← 再看一遍。</p>
+    </div>
+    <div class="dk-keyhint">press <kbd>←</kbd> to rewind · <kbd>F</kbd> for fullscreen</div>
+    <div class="dk-page">fin</div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
@@ -0,0 +1,60 @@
+/* dir-key-nav-minimal — 方向键极简 · 8 种 mono-background 切换 */
+.tpl-dir-key-nav-minimal{
+  --dk-font:'Inter','Noto Sans SC','PingFang SC',-apple-system,sans-serif;
+  --dk-mono:'JetBrains Mono',monospace;
+  background:#000;
+  color:#fff;
+  font-family:var(--dk-font);
+}
+.tpl-dir-key-nav-minimal .slide{padding:80px 104px;overflow:hidden;position:absolute;inset:0}
+/* 8 background themes */
+.tpl-dir-key-nav-minimal .t-indigo{background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);color:#fff}
+.tpl-dir-key-nav-minimal .t-cream{background:#F5F0E8;color:#1a1a1a}
+.tpl-dir-key-nav-minimal .t-crimson{background:linear-gradient(135deg,#7f1d1d 0%,#991b1b 100%);color:#fff}
+.tpl-dir-key-nav-minimal .t-emerald{background:linear-gradient(135deg,#052e16 0%,#064e3b 100%);color:#ecfdf5}
+.tpl-dir-key-nav-minimal .t-slate{background:linear-gradient(135deg,#0f1923 0%,#1a2942 100%);color:#e6edf3}
+.tpl-dir-key-nav-minimal .t-violet{background:linear-gradient(135deg,#1e0a2e 0%,#2e1065 100%);color:#f5f3ff}
+.tpl-dir-key-nav-minimal .t-white{background:#ffffff;color:#111216}
+.tpl-dir-key-nav-minimal .t-charcoal{background:linear-gradient(135deg,#111827 0%,#1f2937 100%);color:#f3f4f6}
+
+.tpl-dir-key-nav-minimal .dk-snum{position:absolute;top:30px;right:48px;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;font-family:var(--dk-mono)}
+.tpl-dir-key-nav-minimal .t-cream .dk-snum,
+.tpl-dir-key-nav-minimal .t-white .dk-snum{color:#999}
+.tpl-dir-key-nav-minimal .t-indigo .dk-snum,
+.tpl-dir-key-nav-minimal .t-crimson .dk-snum,
+.tpl-dir-key-nav-minimal .t-emerald .dk-snum,
+.tpl-dir-key-nav-minimal .t-slate .dk-snum,
+.tpl-dir-key-nav-minimal .t-violet .dk-snum,
+.tpl-dir-key-nav-minimal .t-charcoal .dk-snum{color:rgba(255,255,255,.38)}
+
+.tpl-dir-key-nav-minimal .dk-eyebrow{font-size:12px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;opacity:.55;margin-bottom:22px;display:flex;align-items:center;gap:14px}
+.tpl-dir-key-nav-minimal .dk-eyebrow::after{content:'';flex:1;max-width:120px;height:1px;background:currentColor;opacity:.3}
+.tpl-dir-key-nav-minimal .dk-h0{font-size:160px;font-weight:900;line-height:.9;letter-spacing:-5px;margin:0 0 20px}
+.tpl-dir-key-nav-minimal .dk-h1{font-size:100px;font-weight:900;line-height:.98;letter-spacing:-3px;margin:0 0 18px}
+.tpl-dir-key-nav-minimal .dk-h2{font-size:72px;font-weight:800;line-height:1.05;letter-spacing:-2px;margin:0 0 16px}
+.tpl-dir-key-nav-minimal .dk-lede{font-size:26px;line-height:1.45;opacity:.72;max-width:900px;font-weight:300}
+.tpl-dir-key-nav-minimal .dk-lede strong{font-weight:700;opacity:1}
+.tpl-dir-key-nav-minimal .dk-big{font-family:var(--dk-mono);font-size:240px;font-weight:800;line-height:.9;letter-spacing:-10px}
+
+.tpl-dir-key-nav-minimal .dk-line{display:block;width:90px;height:4px;background:currentColor;margin:30px 0;opacity:.85}
+.tpl-dir-key-nav-minimal .t-indigo .dk-accent{color:#a5b4fc}
+.tpl-dir-key-nav-minimal .t-cream .dk-accent{color:#B5392A}
+.tpl-dir-key-nav-minimal .t-crimson .dk-accent{color:#fecaca}
+.tpl-dir-key-nav-minimal .t-emerald .dk-accent{color:#6ee7b7}
+.tpl-dir-key-nav-minimal .t-slate .dk-accent{color:#7dd3fc}
+.tpl-dir-key-nav-minimal .t-violet .dk-accent{color:#c4b5fd}
+.tpl-dir-key-nav-minimal .t-white .dk-accent{color:#6366f1}
+.tpl-dir-key-nav-minimal .t-charcoal .dk-accent{color:#fbbf24}
+
+.tpl-dir-key-nav-minimal .dk-list{list-style:none;padding:0;margin:28px 0 0;font-family:var(--dk-mono);font-size:22px;line-height:2}
+.tpl-dir-key-nav-minimal .dk-list li{padding-left:30px;position:relative;font-weight:400;opacity:.85}
+.tpl-dir-key-nav-minimal .dk-list li::before{content:'→';position:absolute;left:0;opacity:.5}
+.tpl-dir-key-nav-minimal .dk-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:36px}
+.tpl-dir-key-nav-minimal .dk-col h3{font-size:28px;font-weight:700;margin-bottom:10px}
+.tpl-dir-key-nav-minimal .dk-col p{font-size:19px;line-height:1.55;opacity:.72;font-weight:300}
+.tpl-dir-key-nav-minimal .dk-code{font-family:var(--dk-mono);font-size:16px;line-height:1.9;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:24px 28px;margin-top:24px;white-space:pre}
+.tpl-dir-key-nav-minimal .t-cream .dk-code,
+.tpl-dir-key-nav-minimal .t-white .dk-code{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}
+.tpl-dir-key-nav-minimal .dk-keyhint{position:absolute;bottom:34px;left:104px;font-family:var(--dk-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.45}
+.tpl-dir-key-nav-minimal .dk-keyhint kbd{display:inline-block;padding:2px 10px;margin:0 3px;border:1px solid currentColor;border-radius:4px;font-size:12px}
+.tpl-dir-key-nav-minimal .dk-page{position:absolute;bottom:34px;right:48px;font-family:var(--dk-mono);font-size:12px;letter-spacing:2px;opacity:.45}