Skip to content

Commit 9985490

Browse files
committed
docs(site): add detailed strategy page and docs navigation links
- Add docs/strategies.html with detailed full/per-module/hot-cold guidance - Include case-by-case scenarios and decision recommendations - Link strategies page from all docs nav bars - Add strategy discovery links in homepage and quick-start pages
1 parent 755c5ff commit 9985490

6 files changed

Lines changed: 311 additions & 0 deletions

File tree

docs/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@
150150
<a class="nav-logo" href="/">context-forge</a>
151151
<div class="nav-links">
152152
<a href="#how-it-works" class="hide-sm">How it works</a>
153+
<a href="strategies.html" class="hide-sm">Strategies</a>
153154
<a href="#languages" class="hide-sm">Languages</a>
154155
<a href="#quick-start" class="hide-sm">Quick start</a>
155156
<a href="https://github.com/manojmallick/context-forge" class="nav-gh" target="_blank">★ GitHub</a>
@@ -377,6 +378,21 @@ <h4>Open Copilot and ask about your code</h4>
377378
</div>
378379
</div>
379380
</div>
381+
382+
<div class="terminal" style="margin-top:24px">
383+
<div class="term-bar">
384+
<div class="term-dot" style="background:#ff5f57"></div>
385+
<div class="term-dot" style="background:#febc2e"></div>
386+
<div class="term-dot" style="background:#28c840"></div>
387+
<span class="term-title">strategy quick picks</span>
388+
</div>
389+
<div class="term-body">
390+
<div><span class="tc">full</span> <span style="float:right" class="tw">best default · complete context</span></div>
391+
<div><span class="tc">per-module</span> <span style="float:right" class="ts">no context loss · lower per-question tokens</span></div>
392+
<div><span class="tc">hot-cold</span> <span style="float:right" class="tp">smallest always-on · MCP recommended</span></div>
393+
<div style="margin-top:8px"><a href="strategies.html" style="color:var(--pd);text-decoration:none">Read full strategy guide →</a></div>
394+
</div>
395+
</div>
380396
</section>
381397

382398
<!-- BOTTOM CTA -->
@@ -395,6 +411,7 @@ <h2>Built for the community</h2>
395411
<div class="footer-inner">
396412
<span class="footer-logo">context-forge</span>
397413
<div class="footer-links">
414+
<a href="strategies.html">Strategies</a>
398415
<a href="https://github.com/manojmallick/context-forge">GitHub</a>
399416
<a href="https://github.com/manojmallick/context-forge/blob/main/CONTRIBUTING.md">Contributing</a>
400417
<a href="https://github.com/manojmallick/context-forge/blob/main/CHANGELOG.md">Changelog</a>

docs/languages.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
<a href="roadmap.html" class="hide-sm">Roadmap</a>
111111
<a href="repomix.html" class="hide-sm">Repomix</a>
112112
<a href="https://github.com/manojmallick/context-forge" class="nav-gh" target="_blank">★ GitHub</a>
113+
<a href="strategies.html" class="hide-sm">Strategies</a>
113114
</div>
114115
</nav>
115116

docs/quick-start.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@
121121
<a class="nav-logo" href="index.html">context-forge</a>
122122
<div class="nav-links">
123123
<a href="quick-start.html" class="hide-sm active">Quick start</a>
124+
<a href="strategies.html" class="hide-sm">Strategies</a>
124125
<a href="languages.html" class="hide-sm">Languages</a>
125126
<a href="roadmap.html" class="hide-sm">Roadmap</a>
126127
<a href="repomix.html" class="hide-sm">Repomix</a>
@@ -440,6 +441,11 @@ <h2>Command reference</h2>
440441
<p class="section-ey">What's next</p>
441442
<h2>Explore further</h2>
442443
<div class="next-grid">
444+
<a class="next-card" href="strategies.html">
445+
<div class="next-card-ey">v1.1</div>
446+
<div class="next-card-title">Context strategies</div>
447+
<div class="next-card-desc">Full vs per-module vs hot-cold with case-by-case recommendations and token trade-offs.</div>
448+
</a>
443449
<a class="next-card" href="languages.html">
444450
<div class="next-card-ey">21 languages</div>
445451
<div class="next-card-title">Language support</div>
@@ -462,6 +468,7 @@ <h2>Explore further</h2>
462468
<div class="footer-inner">
463469
<span class="footer-logo">context-forge v1.0.0</span>
464470
<div class="footer-links">
471+
<a href="strategies.html">Strategies</a>
465472
<a href="https://github.com/manojmallick/context-forge">GitHub</a>
466473
<a href="https://github.com/manojmallick/context-forge/blob/main/CONTRIBUTING.md">Contributing</a>
467474
<a href="https://github.com/manojmallick/context-forge/blob/main/CHANGELOG.md">Changelog</a>

docs/repomix.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@
138138
<a href="roadmap.html" class="hide-sm">Roadmap</a>
139139
<a href="repomix.html" class="hide-sm active">Repomix</a>
140140
<a href="https://github.com/manojmallick/context-forge" class="nav-gh" target="_blank">★ GitHub</a>
141+
<a href="strategies.html" class="hide-sm">Strategies</a>
141142
</div>
142143
</nav>
143144

docs/roadmap.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@
112112
<a href="roadmap.html" class="hide-sm active">Roadmap</a>
113113
<a href="repomix.html" class="hide-sm">Repomix</a>
114114
<a href="https://github.com/manojmallick/context-forge" class="nav-gh" target="_blank">★ GitHub</a>
115+
<a href="strategies.html" class="hide-sm">Strategies</a>
115116
</div>
116117
</nav>
117118

docs/strategies.html

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
6+
<title>Context Strategies — ContextForge</title>
7+
<meta name="description" content="Choose the right ContextForge strategy: full, per-module, or hot-cold. Detailed examples, decision tree, token trade-offs, and MCP vs non-MCP workflows.">
8+
<meta property="og:title" content="ContextForge strategies: full vs per-module vs hot-cold">
9+
<meta property="og:description" content="Detailed case-by-case guide to reduce tokens without losing context. Learn when to use each strategy and how to configure it.">
10+
<meta property="og:url" content="https://manojmallick.github.io/context-forge/strategies.html">
11+
<meta name="twitter:card" content="summary_large_image">
12+
<link rel="canonical" href="https://manojmallick.github.io/context-forge/strategies.html">
13+
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
14+
<style>
15+
:root{
16+
--bg:#09090c;--s1:#0f0f13;--s2:#161619;--s3:#1d1d22;--s4:#25252c;
17+
--line:#2a2a33;--line2:#38383f;
18+
--t1:#f0eeff;--t2:#9896b0;--t3:#52506a;
19+
--p:#7c6af7;--pl:rgba(124,106,247,.1);--pd:#b3aaff;
20+
--g:#10b981;--gl:rgba(16,185,129,.1);--gd:#6ee7b7;
21+
--a:#f59e0b;--al:rgba(245,158,11,.1);--ad:#fcd34d;
22+
--r:#f43f5e;
23+
}
24+
*{box-sizing:border-box;margin:0;padding:0}
25+
html{scroll-behavior:smooth}
26+
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden}
27+
28+
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(9,9,12,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between}
29+
.nav-logo{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;color:var(--pd);text-decoration:none}
30+
.nav-links{display:flex;align-items:center;gap:24px}
31+
.nav-links a{font-size:13px;color:var(--t2);text-decoration:none;transition:.15s}
32+
.nav-links a:hover{color:var(--t1)}
33+
.nav-links a.active{color:var(--t1)}
34+
.nav-gh{background:var(--p);color:#fff;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;text-decoration:none;transition:.15s}
35+
.nav-gh:hover{opacity:.85;color:#fff}
36+
@media(max-width:600px){.nav-links .hide-sm{display:none}}
37+
38+
.page-hero{padding:120px 24px 56px;text-align:center;position:relative;overflow:hidden}
39+
.page-hero::before{content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:720px;height:720px;background:radial-gradient(circle,rgba(124,106,247,.08) 0%,transparent 65%);pointer-events:none}
40+
.hero-inner{max-width:780px;margin:0 auto;position:relative;z-index:1}
41+
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--pl);border:1px solid rgba(124,106,247,.25);border-radius:20px;padding:5px 14px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--pd);margin-bottom:20px;letter-spacing:.04em}
42+
h1{font-family:'Syne',sans-serif;font-size:clamp(32px,5vw,56px);font-weight:800;line-height:1.08;margin-bottom:12px;background:linear-gradient(135deg,var(--t1) 30%,var(--pd) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
43+
.hero-sub{font-size:clamp(15px,2vw,18px);color:var(--t2);max-width:620px;margin:0 auto;font-weight:300;line-height:1.65}
44+
45+
.section{padding:56px 24px;max-width:980px;margin:0 auto}
46+
.section-ey{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pd);margin-bottom:10px;text-align:center}
47+
h2{font-family:'Syne',sans-serif;font-size:clamp(22px,3.5vw,34px);font-weight:800;text-align:center;margin-bottom:12px}
48+
.section-sub{font-size:15px;color:var(--t2);text-align:center;max-width:620px;margin:0 auto 32px;font-weight:300;line-height:1.65}
49+
.divider{border:none;border-top:1px solid var(--line);margin:0}
50+
51+
.table-wrap{background:var(--s2);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:24px}
52+
.table{width:100%;border-collapse:collapse}
53+
.table th{padding:12px 16px;text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);border-bottom:2px solid var(--line2);background:var(--s3)}
54+
.table td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--t2);vertical-align:top}
55+
.table tr:last-child td{border-bottom:none}
56+
.table td:first-child{font-weight:700;color:var(--t1)}
57+
58+
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
59+
@media(max-width:900px){.cards{grid-template-columns:1fr}}
60+
.card{background:var(--s2);border:1px solid var(--line);border-radius:14px;padding:18px}
61+
.card h3{font-family:'Syne',sans-serif;font-size:18px;margin-bottom:8px}
62+
.card p{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:12px}
63+
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
64+
.badge{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:2px 8px;border-radius:5px;border:1px solid}
65+
.badge.ok{background:var(--gl);color:var(--gd);border-color:rgba(16,185,129,.28)}
66+
.badge.warn{background:var(--al);color:var(--ad);border-color:rgba(245,158,11,.28)}
67+
.badge.info{background:var(--pl);color:var(--pd);border-color:rgba(124,106,247,.28)}
68+
.code{font-family:'IBM Plex Mono',monospace;font-size:12px;background:var(--s3);border:1px solid var(--line2);padding:10px 12px;border-radius:8px;display:block;white-space:pre-wrap;color:var(--gd)}
69+
70+
.scenarios{display:grid;grid-template-columns:1fr 1fr;gap:14px}
71+
@media(max-width:900px){.scenarios{grid-template-columns:1fr}}
72+
.scenario{background:var(--s2);border:1px solid var(--line);border-radius:14px;padding:18px}
73+
.scenario h4{font-family:'Syne',sans-serif;font-size:17px;margin-bottom:8px}
74+
.scenario p{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:8px}
75+
.scenario .winner{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gd)}
76+
77+
.list{background:var(--s2);border:1px solid var(--line);border-radius:14px;padding:18px}
78+
.list li{margin-left:18px;color:var(--t2);font-size:13px;line-height:1.7}
79+
.list strong{color:var(--t1)}
80+
81+
footer{background:var(--s1);border-top:1px solid var(--line);padding:32px 24px}
82+
.footer-inner{max-width:980px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
83+
.footer-logo{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--t3)}
84+
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
85+
.footer-links a{font-size:13px;color:var(--t3);text-decoration:none;transition:.15s}
86+
.footer-links a:hover{color:var(--t2)}
87+
.footer-mit{font-size:12px;color:var(--t3)}
88+
</style>
89+
</head>
90+
<body>
91+
92+
<nav>
93+
<a class="nav-logo" href="index.html">context-forge</a>
94+
<div class="nav-links">
95+
<a href="quick-start.html" class="hide-sm">Quick start</a>
96+
<a href="strategies.html" class="hide-sm active">Strategies</a>
97+
<a href="languages.html" class="hide-sm">Languages</a>
98+
<a href="roadmap.html" class="hide-sm">Roadmap</a>
99+
<a href="repomix.html" class="hide-sm">Repomix</a>
100+
<a href="https://github.com/manojmallick/context-forge" class="nav-gh" target="_blank">★ GitHub</a>
101+
</div>
102+
</nav>
103+
104+
<div class="page-hero">
105+
<div class="hero-inner">
106+
<div class="hero-badge">v1.1 strategy guide</div>
107+
<h1>Choose the right context strategy</h1>
108+
<p class="hero-sub">ContextForge supports three modes: full, per-module, and hot-cold. This page shows exactly when to use each one, what token cost to expect, and how MCP changes the decision.</p>
109+
</div>
110+
</div>
111+
112+
<hr class="divider">
113+
114+
<section class="section">
115+
<p class="section-ey">At a glance</p>
116+
<h2>Quick comparison</h2>
117+
<div class="table-wrap">
118+
<table class="table">
119+
<thead>
120+
<tr>
121+
<th>Strategy</th>
122+
<th>Always injected</th>
123+
<th>Context loss</th>
124+
<th>MCP required</th>
125+
<th>Best fit</th>
126+
</tr>
127+
</thead>
128+
<tbody>
129+
<tr>
130+
<td>full</td>
131+
<td>~4,000 tokens</td>
132+
<td>No</td>
133+
<td>No</td>
134+
<td>Default for all IDEs and onboarding</td>
135+
</tr>
136+
<tr>
137+
<td>per-module</td>
138+
<td>~100-300 tokens overview</td>
139+
<td>No</td>
140+
<td>No</td>
141+
<td>Module-based projects, focused work</td>
142+
</tr>
143+
<tr>
144+
<td>hot-cold</td>
145+
<td>~200-800 hot set</td>
146+
<td>Cold files unless fetched</td>
147+
<td>Yes for cold</td>
148+
<td>Claude Code / Cursor with MCP</td>
149+
</tr>
150+
</tbody>
151+
</table>
152+
</div>
153+
</section>
154+
155+
<hr class="divider">
156+
157+
<section class="section">
158+
<p class="section-ey">How to use</p>
159+
<h2>Each strategy in detail</h2>
160+
<p class="section-sub">Use the same config file key for all modes. Switch mode, run once, and compare token output with --report.</p>
161+
162+
<div class="cards">
163+
<div class="card">
164+
<h3>full</h3>
165+
<div class="badges">
166+
<span class="badge ok">No context loss</span>
167+
<span class="badge info">No MCP needed</span>
168+
</div>
169+
<p>Single output file with all signatures. Best if you want complete context all the time and do not want to manage additional files.</p>
170+
<span class="code">{
171+
"strategy": "full",
172+
"maxTokens": 6000
173+
}</span>
174+
</div>
175+
176+
<div class="card">
177+
<h3>per-module</h3>
178+
<div class="badges">
179+
<span class="badge ok">No context loss</span>
180+
<span class="badge info">No MCP needed</span>
181+
</div>
182+
<p>Writes one file per top-level module plus a tiny overview. You inject only the module you are currently working on.</p>
183+
<span class="code">{
184+
"srcDirs": ["server", "web", "desktop"],
185+
"strategy": "per-module"
186+
}</span>
187+
</div>
188+
189+
<div class="card">
190+
<h3>hot-cold</h3>
191+
<div class="badges">
192+
<span class="badge warn">Cold needs MCP</span>
193+
<span class="badge ok">Smallest always-on</span>
194+
</div>
195+
<p>Recently changed files stay hot and auto-injected. Everything else goes to context-cold.md and should be pulled via MCP when needed.</p>
196+
<span class="code">{
197+
"strategy": "hot-cold",
198+
"hotCommits": 10,
199+
"diffPriority": true
200+
}</span>
201+
</div>
202+
</div>
203+
</section>
204+
205+
<hr class="divider">
206+
207+
<section class="section">
208+
<p class="section-ey">Case by case</p>
209+
<h2>Real usage scenarios</h2>
210+
<p class="section-sub">Use this section to decide quickly based on your workflow, not just token numbers.</p>
211+
212+
<div class="scenarios">
213+
<div class="scenario">
214+
<h4>Scenario A: Fix a login bug</h4>
215+
<p>You edited auth files in the last few commits and need fast iteration.</p>
216+
<p class="winner">Winner: hot-cold. Hot set already contains the files you are editing.</p>
217+
</div>
218+
219+
<div class="scenario">
220+
<h4>Scenario B: Cross-module question</h4>
221+
<p>You need frontend + backend context in one answer. MCP may or may not be available.</p>
222+
<p class="winner">Winner: per-module. Load both module files, no context loss and no MCP dependency.</p>
223+
</div>
224+
225+
<div class="scenario">
226+
<h4>Scenario C: Team with MCP enabled</h4>
227+
<p>Claude Code / Cursor is standard across the team and MCP is always available.</p>
228+
<p class="winner">Winner: hot-cold. Keep always-on tiny and fetch cold context only when needed.</p>
229+
</div>
230+
231+
<div class="scenario">
232+
<h4>Scenario D: Onboarding new engineers</h4>
233+
<p>Need broad project understanding quickly, with minimal setup complexity.</p>
234+
<p class="winner">Winner: full. One file, complete picture, no additional workflow steps.</p>
235+
</div>
236+
</div>
237+
</section>
238+
239+
<hr class="divider">
240+
241+
<section class="section">
242+
<p class="section-ey">Decision tree</p>
243+
<h2>Pick the right default for your team</h2>
244+
<div class="list">
245+
<ol>
246+
<li><strong>No MCP in your IDE</strong>: choose <strong>full</strong> or <strong>per-module</strong>.</li>
247+
<li><strong>Module boundaries are clear</strong>: choose <strong>per-module</strong>.</li>
248+
<li><strong>MCP always available and active area is small</strong>: choose <strong>hot-cold</strong>.</li>
249+
<li><strong>Unsure</strong>: start with <strong>full</strong>, then move to <strong>per-module</strong> when output grows.</li>
250+
</ol>
251+
</div>
252+
</section>
253+
254+
<hr class="divider">
255+
256+
<section class="section">
257+
<p class="section-ey">More detail</p>
258+
<h2>Full reference docs</h2>
259+
<p class="section-sub">For complete migration steps, compatibility matrix, and advanced examples, use the full Markdown guide.</p>
260+
<div class="list">
261+
<ol>
262+
<li>Detailed guide in repository: <a href="https://github.com/manojmallick/context-forge/blob/main/docs/CONTEXT_STRATEGIES.md" style="color:var(--pd)">docs/CONTEXT_STRATEGIES.md</a></li>
263+
<li>CLI reference and setup: <a href="quick-start.html" style="color:var(--pd)">Quick Start</a></li>
264+
<li>MCP setup: <a href="https://github.com/manojmallick/context-forge/blob/main/docs/MCP_SETUP.md" style="color:var(--pd)">docs/MCP_SETUP.md</a></li>
265+
</ol>
266+
</div>
267+
</section>
268+
269+
<footer>
270+
<div class="footer-inner">
271+
<span class="footer-logo">context-forge</span>
272+
<div class="footer-links">
273+
<a href="index.html">Home</a>
274+
<a href="quick-start.html">Quick start</a>
275+
<a href="languages.html">Languages</a>
276+
<a href="roadmap.html">Roadmap</a>
277+
<a href="repomix.html">Repomix</a>
278+
</div>
279+
<span class="footer-mit">MIT © 2026 Manoj Kumar</span>
280+
</div>
281+
</footer>
282+
283+
</body>
284+
</html>

0 commit comments

Comments
 (0)