Skip to content

Commit fe78620

Browse files
niechenniechen
committed
Update visual
1 parent 2db915c commit fe78620

File tree

4 files changed

+146
-65
lines changed

4 files changed

+146
-65
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,8 @@ logs/
6161

6262
# MCP specific
6363
.mcp/
64+
65+
# jekyll
66+
_site/
67+
.jekyll-cache/
68+
.jekyll-metadata

‎pages/_config.yml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Basic Jekyll Configuration
2+
title: MCPM - Model Context Protocol Manager
3+
description: Homebrew-like service for managing MCP servers
4+
url: ""
5+
baseurl: ""
6+
7+
# Build settings
8+
markdown: kramdown
9+
exclude:
10+
- Gemfile
11+
- Gemfile.lock
12+
- node_modules
13+
- vendor
14+
15+
# Set to true since we want to serve raw HTML files
16+
include: ["*.html"]

‎pages/index.html‎

Lines changed: 124 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,19 @@
1010
<link rel="icon" href="favicon.svg" type="image/svg+xml">
1111
<style>
1212
:root {
13-
--bg-color: #0f1117;
14-
--bg-accent: #1a1d25;
13+
--bg-color: #242830; /* Clean grey background */
14+
--bg-accent: #2e3238; /* Slightly darker grey for accent areas */
1515
--text-primary: #e2e8f0;
1616
--text-secondary: #a0aec0;
17-
--accent-color: #10b981;
18-
--accent-light: #34d399;
19-
--accent-dark: #047857;
20-
--success: #059669;
21-
--code-bg: #1a2e22;
22-
--card-border: #2d3748;
17+
--accent-color: #09784C; /* Deep green brand color */
18+
--accent-light: #5CD951; /* Light green brand color */
19+
--accent-dark: #09784C; /* Deep green brand color, darker version */
20+
--accent-highlight: #FF84BD; /* Pink brand color */
21+
--success: #5CD951; /* Light green brand color */
22+
--warning: #FEBF00; /* Yellow/amber brand color */
23+
--code-bg: #1e2124; /* Darker code background */
24+
--card-border: #3a3e45;
25+
--gradient-bg: linear-gradient(to right, #242830, #2e3238);
2326
}
2427

2528
* {
@@ -33,9 +36,7 @@
3336
line-height: 1.6;
3437
color: var(--text-primary);
3538
background-color: var(--bg-color);
36-
background-image:
37-
radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
38-
radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
39+
background-image: none; /* Removed gradient for cleaner look */
3940
margin: 0;
4041
padding: 0;
4142
min-height: 100vh;
@@ -50,15 +51,18 @@
5051
header {
5152
text-align: center;
5253
padding: 3rem 0;
53-
border-bottom: 1px solid rgba(16, 185, 129, 0.2);
54+
border-bottom: 1px solid var(--card-border);
5455
margin-bottom: 3rem;
56+
background: var(--bg-color);
57+
border-radius: 0; /* Sharp corners */
58+
box-shadow: none; /* Removed for cleaner look */
5559
}
5660

5761
h1 {
5862
font-size: 3.5rem;
5963
font-weight: 700;
6064
margin-bottom: 0.5rem;
61-
background: linear-gradient(90deg, var(--accent-color), var(--accent-light));
65+
background: linear-gradient(90deg, var(--accent-color), var(--accent-highlight));
6266
-webkit-background-clip: text;
6367
background-clip: text;
6468
color: transparent;
@@ -76,15 +80,16 @@
7680
margin: 2rem auto;
7781
max-width: 400px;
7882
width: 100%;
83+
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
7984
}
8085

8186
.coming-soon {
82-
background-color: var(--bg-accent);
87+
background: var(--bg-accent);
8388
border: 1px solid var(--card-border);
84-
border-radius: 12px;
89+
border-radius: 0; /* Sharp corners */
8590
padding: 2rem;
8691
margin: 2rem 0;
87-
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
92+
box-shadow: none;
8893
}
8994

9095
h2 {
@@ -100,10 +105,10 @@
100105
position: absolute;
101106
bottom: -8px;
102107
left: 0;
103-
height: 3px;
108+
height: 2px;
104109
width: 60px;
105-
background: linear-gradient(90deg, var(--accent-color), transparent);
106-
border-radius: 3px;
110+
background: var(--accent-color);
111+
border-radius: 0; /* Sharp corners */
107112
}
108113

109114
.features {
@@ -114,16 +119,18 @@
114119
}
115120

116121
.feature {
117-
background-color: var(--bg-accent);
118-
border: 1px solid var(--card-border);
119-
border-radius: 12px;
122+
background: var(--bg-accent);
123+
border-left: 3px solid var(--accent-color); /* Clean left border accent */
124+
border-radius: 0; /* Sharp corners */
120125
padding: 1.5rem;
121126
transition: transform 0.2s, box-shadow 0.2s;
127+
box-shadow: none;
122128
}
123129

124130
.feature:hover {
125-
transform: translateY(-5px);
126-
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
131+
transform: translateY(-3px);
132+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
133+
border-left: 3px solid var(--accent-light);
127134
}
128135

129136
h3 {
@@ -142,17 +149,23 @@
142149
.code-block {
143150
position: relative;
144151
margin: 1rem 0;
152+
box-shadow: none;
153+
border-radius: 0; /* Sharp corners */
154+
overflow: hidden;
155+
border-left: 3px solid var(--accent-color);
145156
}
146157

147158
code {
148159
background-color: var(--code-bg);
149160
padding: 0.75rem 1rem;
150-
border-radius: 8px;
161+
border-radius: 0; /* Sharp corners */
151162
font-family: 'Fira Code', monospace;
152163
display: block;
153164
overflow-x: auto;
154-
border-left: 3px solid var(--accent-color);
155-
padding-right: 40px; /* Space for the copy button */
165+
border-left: none; /* Removed since parent has border */
166+
padding-right: 45px; /* Space for the copy button */
167+
font-size: 0.95rem;
168+
line-height: 1.5;
156169
}
157170

158171
.copy-button {
@@ -163,12 +176,12 @@
163176
background-color: var(--accent-dark);
164177
color: var(--text-primary);
165178
border: none;
166-
border-radius: 4px;
167-
padding: 4px 8px;
168-
font-size: 0.8rem;
179+
border-radius: 0; /* Sharp corners */
180+
padding: 6px 10px;
181+
font-size: 0.85rem;
169182
cursor: pointer;
170-
opacity: 0.7;
171-
transition: opacity 0.2s, background-color 0.2s;
183+
opacity: 0.8;
184+
transition: all 0.2s ease;
172185
}
173186

174187
.copy-button:hover {
@@ -181,11 +194,12 @@
181194
}
182195

183196
.clients {
184-
background-color: var(--bg-accent);
197+
background: var(--bg-accent);
185198
border: 1px solid var(--card-border);
186-
border-radius: 12px;
199+
border-radius: 0; /* Sharp corners */
187200
padding: 2rem;
188201
margin: 2rem 0;
202+
box-shadow: none;
189203
}
190204

191205
ul {
@@ -211,22 +225,23 @@
211225
font-size: 0.9rem;
212226
text-align: center;
213227
padding: 2rem 0;
214-
border-top: 1px solid rgba(16, 185, 129, 0.1);
228+
border-top: 1px solid var(--card-border);
229+
background: var(--bg-accent);
215230
}
216231

217232
a {
218-
color: var(--accent-light);
233+
color: var(--accent-highlight);
219234
text-decoration: none;
220235
transition: color 0.2s;
221236
}
222237

223238
a:hover {
224-
color: var(--accent-color);
239+
color: var(--accent-light);
225240
text-decoration: underline;
226241
}
227242

228243
.command-prompt {
229-
color: var(--success);
244+
color: var(--warning);
230245
font-weight: 600;
231246
}
232247

@@ -253,21 +268,27 @@ <h1>MCPM</h1>
253268
<div class="terminal-animation">
254269
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
255270
<!-- Terminal background -->
256-
<rect x="10" y="10" width="280" height="80" rx="5" ry="5" fill="#2E3440" />
271+
<rect x="10" y="10" width="280" height="80" rx="0" ry="0" fill="#2e3238" />
272+
273+
<!-- Terminal header -->
274+
<rect x="10" y="10" width="280" height="20" rx="0" ry="0" fill="#242830" />
275+
276+
<!-- Window buttons, kept round for recognizability -->
277+
<circle cx="25" cy="20" r="4" fill="#FF5F57"/>
278+
<circle cx="40" cy="20" r="4" fill="#FEBC2E"/>
279+
<circle cx="55" cy="20" r="4" fill="#28C840"/>
257280

258281
<!-- Static command prompt -->
259-
<text x="30" y="55" font-family="monospace" font-size="24" fill="#D8DEE9">$</text>
260-
<text x="55" y="55" font-family="monospace" font-size="24" fill="#88C0D0">mcpm</text>
282+
<text x="30" y="55" font-family="monospace" font-size="24" fill="#e2e8f0">$</text>
283+
<text x="55" y="55" font-family="monospace" font-size="24" fill="#5CD951">mcpm</text>
261284

262285
<!-- Animated command text -->
263-
<text id="commandText" x="130" y="55" font-family="monospace" font-size="24" fill="#88C0D0"></text>
286+
<text id="commandText" x="130" y="55" font-family="monospace" font-size="24" fill="#FF84BD"></text>
264287

265288
<!-- Cursor -->
266-
<rect id="cursor" x="130" y="40" width="2" height="24" fill="#D8DEE9">
289+
<rect id="cursor" x="130" y="40" width="2" height="24" fill="#FEBF00">
267290
<animate attributeName="opacity" values="1;0;1" dur="0.8s" repeatCount="indefinite" />
268291
</rect>
269-
270-
<!-- No script here - moved to document scripts -->
271292
</svg>
272293
</div>
273294
</header>
@@ -303,41 +324,80 @@ <h3><span>📋</span> Server Listing</h3>
303324
</div>
304325

305326
<div class="feature">
306-
<h3><span>⚙️</span> Server Management</h3>
307-
<p>Control your MCP server processes with ease:</p>
327+
<h3><span>🔍</span> Server Discovery</h3>
328+
<p>Find available Model Context Protocol servers:</p>
308329
<div class="code-block">
309-
<code><span class="command-prompt">$</span> mcpm server start my-server</code>
310-
<button class="copy-button" data-command="mcpm server start my-server">📋</button>
330+
<code><span class="command-prompt">$</span> mcpm search</code>
331+
<button class="copy-button" data-command="mcpm search">📋</button>
311332
</div>
312333
</div>
313334

314335
<div class="feature">
315-
<h3><span>🔀</span> Server Toggling</h3>
316-
<p>Enable or disable servers for specific clients:</p>
336+
<h3><span>➕</span> Add Servers</h3>
337+
<p>Add MCP servers directly to your client:</p>
317338
<div class="code-block">
318-
<code><span class="command-prompt">$</span> mcpm toggle my-server</code>
319-
<button class="copy-button" data-command="mcpm toggle my-server">📋</button>
339+
<code><span class="command-prompt">$</span> mcpm add my-server</code>
340+
<button class="copy-button" data-command="mcpm add my-server">📋</button>
320341
</div>
321342
</div>
322343
</div>
323344

324-
<h2>Coming Soon</h2>
345+
<h2>More Powerful Features</h2>
325346
<div class="features">
326347
<div class="feature">
327-
<h3><span>🧩</span> Simple Server Installation</h3>
328-
<p>Install MCP servers with a single command:</p>
348+
<h3><span>🗑️</span> Remove Servers</h3>
349+
<p>Remove installed MCP servers when no longer needed:</p>
329350
<div class="code-block">
330-
<code><span class="command-prompt">$</span> mcpm install claude-config</code>
331-
<button class="copy-button" data-command="mcpm install claude-config">📋</button>
351+
<code><span class="command-prompt">$</span> mcpm remove my-server</code>
352+
<button class="copy-button" data-command="mcpm remove my-server">📋</button>
332353
</div>
333354
</div>
334355

335356
<div class="feature">
336-
<h3><span>🔍</span> Server Discovery</h3>
337-
<p>Find available Model Context Protocol servers:</p>
357+
<h3><span>⚙️</span> Configuration</h3>
358+
<p>Edit and manage your MCPM configuration:</p>
338359
<div class="code-block">
339-
<code><span class="command-prompt">$</span> mcpm search</code>
340-
<button class="copy-button" data-command="mcpm search">📋</button>
360+
<code><span class="command-prompt">$</span> mcpm config</code>
361+
<button class="copy-button" data-command="mcpm config">📋</button>
362+
</div>
363+
</div>
364+
365+
<div class="feature">
366+
<h3><span>🔎</span> Inspector</h3>
367+
<p>Launch the UI to examine installed servers:</p>
368+
<div class="code-block">
369+
<code><span class="command-prompt">$</span> mcpm inspector</code>
370+
<button class="copy-button" data-command="mcpm inspector">📋</button>
371+
</div>
372+
</div>
373+
374+
<div class="feature">
375+
<h3><span>📝</span> Edit Configuration</h3>
376+
<p>View or edit your client's configuration:</p>
377+
<div class="code-block">
378+
<code><span class="command-prompt">$</span> mcpm edit</code>
379+
<button class="copy-button" data-command="mcpm edit">📋</button>
380+
</div>
381+
</div>
382+
</div>
383+
384+
<h2>Save & Restore Configurations</h2>
385+
<div class="features">
386+
<div class="feature">
387+
<h3><span>💾</span> Stash Servers</h3>
388+
<p>Temporarily store server configurations:</p>
389+
<div class="code-block">
390+
<code><span class="command-prompt">$</span> mcpm stash my-server</code>
391+
<button class="copy-button" data-command="mcpm stash my-server">📋</button>
392+
</div>
393+
</div>
394+
395+
<div class="feature">
396+
<h3><span>♻️</span> Restore Servers</h3>
397+
<p>Restore previously stashed configurations:</p>
398+
<div class="code-block">
399+
<code><span class="command-prompt">$</span> mcpm pop my-server</code>
400+
<button class="copy-button" data-command="mcpm pop my-server">📋</button>
341401
</div>
342402
</div>
343403
</div>
@@ -401,8 +461,8 @@ <h2>Supported Clients</h2>
401461
const cursor = document.getElementById('cursor');
402462

403463
if (commandText && cursor) {
404-
// Commands to type
405-
const commands = [" search", " add", " list", " remove", "stash", "pop"];
464+
// Commands to type - updated to match actual CLI commands
465+
const commands = [" search", " add", " list", " remove", " edit", " stash", " pop"];
406466
let currentCommand = 0;
407467
let charIndex = 0;
408468
let isTyping = true;

‎pages/install‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
set -e
44

5-
# Colors for terminal output
5+
# Colors for terminal output - these are standard ANSI codes, keeping as is
66
RED='\033[0;31m'
77
GREEN='\033[0;32m'
88
YELLOW='\033[0;33m'

0 commit comments

Comments
 (0)