Skip to content

Commit cbf9783

Browse files
Strawbangclaude
Strawbang
and
claude
committed
feat: add Ecosystem, Integrations, and Search
- Ecosystem: visual flow showing how tools work together on the homepage - Integrations: editor compatibility section (Claude Code, Cursor, Windsurf, Copilot) with config snippets - Search: Pagefind-powered search page, indexed on build, linked from nav - Nav: search icon linking to /search Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 25580f1 commit cbf9783

8 files changed

Lines changed: 742 additions & 4 deletions

File tree

‎package-lock.json‎

Lines changed: 97 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@
77
},
88
"scripts": {
99
"dev": "astro dev",
10-
"build": "astro build",
10+
"build": "astro build && npx pagefind --site dist",
1111
"preview": "astro preview",
1212
"astro": "astro"
1313
},
1414
"dependencies": {
1515
"@astrojs/sitemap": "^3.7.1",
1616
"astro": "^6.0.5",
17-
"marked": "^17.0.4"
17+
"marked": "^17.0.4",
18+
"pagefind": "^1.4.0"
1819
}
1920
}

‎src/components/Ecosystem.astro‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
---
2+
---
3+
4+
<section class="ecosystem">
5+
<div class="section-inner">
6+
<div class="section-label reveal">How it fits together</div>
7+
<h2 class="reveal">One stack, zero friction</h2>
8+
<p class="section-sub reveal">Each tool solves a distinct problem. Together they cover the full cost of AI-assisted development.</p>
9+
10+
<div class="flow reveal">
11+
<div class="flow-col">
12+
<div class="flow-label">Your editor sends a request</div>
13+
<div class="flow-node editor-node">
14+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
15+
<rect x="2" y="3" width="20" height="14" rx="2"/><polyline points="8 21 12 17 16 21"/>
16+
</svg>
17+
Claude Code · Cursor · Windsurf
18+
</div>
19+
</div>
20+
21+
<div class="flow-arrow">↓</div>
22+
23+
<div class="flow-row">
24+
<div class="flow-tool">
25+
<div class="tool-chip chip-rust">trimcp</div>
26+
<p>MCP tool outputs compressed before they reach the model</p>
27+
<span class="tool-stat">−60–90% tokens on MCP responses</span>
28+
</div>
29+
<div class="flow-tool">
30+
<div class="tool-chip chip-rust">tersify</div>
31+
<p>Code and text stripped of noise before being sent</p>
32+
<span class="tool-stat">−50% tokens on code context</span>
33+
</div>
34+
</div>
35+
36+
<div class="flow-arrow">↓</div>
37+
38+
<div class="flow-row">
39+
<div class="flow-tool">
40+
<div class="tool-chip chip-rust">semtree</div>
41+
<p>Codebase parsed and indexed semantically with tree-sitter</p>
42+
<span class="tool-stat">Precise context — only what's relevant</span>
43+
</div>
44+
<div class="flow-tool">
45+
<div class="tool-chip chip-rust">aimemo</div>
46+
<p>Decisions, conventions, and tasks remembered across sessions</p>
47+
<span class="tool-stat">No repeated explanations</span>
48+
</div>
49+
</div>
50+
51+
<div class="flow-arrow">↓</div>
52+
53+
<div class="flow-col">
54+
<div class="flow-label">The model gets what it needs — nothing more</div>
55+
<div class="flow-node result-node">
56+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
57+
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
58+
</svg>
59+
Faster · cheaper · smarter completions
60+
</div>
61+
</div>
62+
</div>
63+
64+
<div class="also-note reveal">
65+
<span class="note-label">Also standalone</span>
66+
<span class="note-text">
67+
<a href="/projects/semstore">semstore</a> is the vector store powering semtree — available as a library to build your own semantic search into any Rust app.
68+
</span>
69+
</div>
70+
</div>
71+
</section>
72+
73+
<style>
74+
.ecosystem {
75+
border-top: 1px solid var(--border);
76+
border-bottom: 1px solid var(--border);
77+
}
78+
79+
.flow {
80+
margin-top: 3rem;
81+
display: flex;
82+
flex-direction: column;
83+
align-items: center;
84+
gap: 0;
85+
}
86+
87+
.flow-arrow {
88+
font-size: 1.25rem;
89+
color: var(--rust-dim);
90+
padding: 0.75rem 0;
91+
line-height: 1;
92+
}
93+
94+
.flow-col {
95+
display: flex;
96+
flex-direction: column;
97+
align-items: center;
98+
gap: 0.75rem;
99+
width: 100%;
100+
max-width: 600px;
101+
}
102+
103+
.flow-label {
104+
font-family: 'IBM Plex Mono', monospace;
105+
font-size: 0.72rem;
106+
color: var(--text-dim);
107+
text-transform: uppercase;
108+
letter-spacing: 0.1em;
109+
}
110+
111+
.flow-node {
112+
display: inline-flex;
113+
align-items: center;
114+
gap: 0.6rem;
115+
padding: 0.65rem 1.5rem;
116+
border-radius: 4px;
117+
font-family: 'IBM Plex Mono', monospace;
118+
font-size: 0.82rem;
119+
width: 100%;
120+
max-width: 480px;
121+
justify-content: center;
122+
}
123+
124+
.editor-node {
125+
background: var(--bg-2);
126+
border: 1px solid var(--border-hi);
127+
color: var(--text-muted);
128+
}
129+
130+
.result-node {
131+
background: var(--rust-glow);
132+
border: 1px solid var(--rust-dim);
133+
color: var(--rust);
134+
}
135+
136+
.flow-row {
137+
display: grid;
138+
grid-template-columns: 1fr 1fr;
139+
gap: 1px;
140+
width: 100%;
141+
max-width: 700px;
142+
background: var(--border);
143+
border: 1px solid var(--border);
144+
border-radius: 6px;
145+
overflow: hidden;
146+
}
147+
148+
.flow-tool {
149+
background: var(--bg-2);
150+
padding: 1.25rem 1.5rem;
151+
display: flex;
152+
flex-direction: column;
153+
gap: 0.5rem;
154+
}
155+
156+
.tool-chip {
157+
font-family: 'Space Mono', monospace;
158+
font-size: 0.78rem;
159+
font-weight: 700;
160+
letter-spacing: -0.02em;
161+
display: inline-block;
162+
margin-bottom: 0.25rem;
163+
}
164+
165+
.chip-rust { color: var(--rust); }
166+
167+
.flow-tool p {
168+
font-size: 0.82rem;
169+
color: var(--text-muted);
170+
line-height: 1.6;
171+
margin: 0;
172+
}
173+
174+
.tool-stat {
175+
font-family: 'IBM Plex Mono', monospace;
176+
font-size: 0.7rem;
177+
color: var(--text-dim);
178+
border-top: 1px solid var(--border);
179+
padding-top: 0.5rem;
180+
margin-top: 0.25rem;
181+
}
182+
183+
.also-note {
184+
margin-top: 2.5rem;
185+
display: flex;
186+
align-items: baseline;
187+
gap: 0.75rem;
188+
padding: 1rem 1.5rem;
189+
background: var(--bg-2);
190+
border: 1px solid var(--border);
191+
border-radius: 4px;
192+
max-width: 700px;
193+
width: 100%;
194+
}
195+
196+
.note-label {
197+
font-family: 'IBM Plex Mono', monospace;
198+
font-size: 0.68rem;
199+
text-transform: uppercase;
200+
letter-spacing: 0.1em;
201+
color: var(--rust);
202+
white-space: nowrap;
203+
flex-shrink: 0;
204+
}
205+
206+
.note-text {
207+
font-size: 0.85rem;
208+
color: var(--text-muted);
209+
line-height: 1.6;
210+
}
211+
212+
.note-text a {
213+
color: var(--rust);
214+
text-decoration: none;
215+
}
216+
217+
.note-text a:hover { text-decoration: underline; }
218+
219+
@media (max-width: 640px) {
220+
.flow-row { grid-template-columns: 1fr; }
221+
.also-note { flex-direction: column; gap: 0.4rem; }
222+
}
223+
</style>

0 commit comments

Comments
 (0)