yuukiii/hermes-mcp
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(design): FINDING-003,004,005,006,007,008,009 — remove emoji, H4→H3, touch targets, favicon, nav link, H1 text-wrap

Browse Source
This commit is contained in:
Garfield
2026-06-12 12:55:42 -04:00
parent b08d234494
commit 58a6d0f200
3 changed files with 44 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/index.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SquareMCP Docs — AI Social Media Gateway</title>
<meta name="description" content="Connect Claude, Codex CLI, and opencode to LinkedIn, TikTok, WhatsApp, and more via the Model Context Protocol.">
<link rel="icon" type="image/svg+xml" href="squaremcp-logo.svg">
<link rel="stylesheet" href="styles.css">
</head>
<body>
@@ -18,31 +19,31 @@
<a href="agent-tutorial.html">Agent tutorial</a>
<a href="https://hermes.squaremcp.com/openapi-social.json" target="_blank">API reference ↗</a>
</div>
<a href="https://squaremcp.com" class="nav-cta" target="_blank">Open app</a>
<a href="https://app.squaremcp.com" class="nav-cta" target="_blank">Open app</a>
</div>
</nav>
<div class="page">
<div class="hero">
<h1>Build AI agents that<br>talk to the world</h1>
<h1>Build AI agents that talk to the world</h1>
<p>SquareMCP connects Claude, Codex CLI, and opencode to LinkedIn, TikTok, WhatsApp, Instagram, Twitter, and more — through a single MCP server.</p>
</div>
<div class="card-grid">
<a href="getting-started.html" class="card" style="text-decoration:none;color:inherit;">
<h4>🚀 Getting started</h4>
<h3>Getting started</h3>
<p>Add SquareMCP to Claude Desktop, Codex CLI, or opencode in five minutes.</p>
</a>
<a href="platforms.html" class="card" style="text-decoration:none;color:inherit;">
<h4>🔌 Platform guides</h4>
<h3>Platform guides</h3>
<p>Connect LinkedIn, TikTok, and WhatsApp. Step-by-step setup for each platform.</p>
</a>
<a href="agent-tutorial.html" class="card" style="text-decoration:none;color:inherit;">
<h4>🤖 Agent tutorial</h4>
<h3>Agent tutorial</h3>
<p>Real code: a Claude agent that researches news and posts to LinkedIn automatically.</p>
</a>
<a href="https://hermes.squaremcp.com/openapi-social.json" target="_blank" class="card" style="text-decoration:none;color:inherit;">
<h4>📖 API reference ↗</h4>
<h3>API reference ↗</h3>
<p>Full OpenAPI spec for every social tool. Mail API available separately.</p>
</a>
</div>
@@ -54,33 +55,33 @@
<h2>Supported clients</h2>
<div class="card-grid">
<div class="card">
<h4>Claude Desktop</h4>
<h3>Claude Desktop</h3>
<p>Add a <code>mcpServers</code> entry to <code>claude_desktop_config.json</code>. No extra software needed.</p>
</div>
<div class="card">
<h4>Codex CLI</h4>
<h3>Codex CLI</h3>
<p>Pass <code>--mcp-server</code> or configure in <code>~/.codex/config.json</code>. Full PKCE OAuth flow supported.</p>
</div>
<div class="card">
<h4>opencode</h4>
<h3>opencode</h3>
<p>Add SquareMCP to your opencode MCP providers list. HTTP Bearer transport.</p>
</div>
<div class="card">
<h4>Custom agents</h4>
<h3>Custom agents</h3>
<p>Any MCP client that supports Streamable HTTP transport works. See the agent tutorial for a from-scratch example.</p>
</div>
</div>
<h2>Supported platforms</h2>
<div class="card-grid">
<div class="card"><h4><span class="icon" style="background:#0a66c2;">in</span> LinkedIn</h4><p>Post text, images, and video. Search connections, send messages.</p></div>
<div class="card"><h4><span class="icon" style="background:#000;">🎵</span> TikTok</h4><p>Upload and publish videos. View creator analytics.</p></div>
<div class="card"><h4><span class="icon" style="background:#25d366;">💬</span> WhatsApp</h4><p>Send messages and templates. Receive inbound via webhook.</p></div>
<div class="card"><h4><span class="icon" style="background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);">📷</span> Instagram</h4><p>Publish reels and image posts via Business API.</p></div>
<div class="card"><h4><span class="icon" style="background:#000;">𝕏</span> Twitter / X</h4><p>Tweet with media. Search and read timeline.</p></div>
<div class="card"><h4><span class="icon" style="background:#1877f2;">f</span> Facebook</h4><p>Post to pages, share photos and video.</p></div>
<div class="card"><h4><span class="icon" style="background:#0088cc;">✈️</span> Telegram</h4><p>Send messages and photos via bot token.</p></div>
<div class="card"><h4><span class="icon" style="background:#5865f2;">🎮</span> Discord</h4><p>Send messages to channels via bot.</p></div>
<div class="card"><h3><span class="icon" style="background:#0a66c2;">in</span> LinkedIn</h3><p>Post text, images, and video. Search connections, send messages.</p></div>
<div class="card"><h3><span class="icon" style="background:#000;font-size:11px;letter-spacing:-0.5px;">Tk</span> TikTok</h3><p>Upload and publish videos. View creator analytics.</p></div>
<div class="card"><h3><span class="icon" style="background:#25d366;color:#fff;font-size:11px;">WA</span> WhatsApp</h3><p>Send messages and templates. Receive inbound via webhook.</p></div>
<div class="card"><h3><span class="icon" style="background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff;font-size:11px;">Ig</span> Instagram</h3><p>Publish reels and image posts via Business API.</p></div>
<div class="card"><h3><span class="icon" style="background:#000;">𝕏</span> Twitter / X</h3><p>Tweet with media. Search and read timeline.</p></div>
<div class="card"><h3><span class="icon" style="background:#1877f2;">f</span> Facebook</h3><p>Post to pages, share photos and video.</p></div>
<div class="card"><h3><span class="icon" style="background:#0088cc;font-size:11px;">Tg</span> Telegram</h3><p>Send messages and photos via bot token.</p></div>
<div class="card"><h3><span class="icon" style="background:#5865f2;font-size:11px;">Dc</span> Discord</h3><p>Send messages to channels via bot.</p></div>
</div>
</div>

18
docs/squaremcp-logo.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>SquareMCP logo</title>
<defs>
<linearGradient id="squaremcp-logo-gradient" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
<stop stop-color="#7DB6FF"/>
<stop offset="1" stop-color="#0E63F6"/>
</linearGradient>
</defs>
<path
d="M10 12C10 10.8954 10.8954 10 12 10H31V17H17V31H10V12ZM33 10H52C53.1046 10 54 10.8954 54 12V31H47V17H33V10ZM10 33H17V47H31V54H12C10.8954 54 10 53.1046 10 52V33ZM47 33H54V52C54 53.1046 53.1046 54 52 54H33V47H47V33Z"
fill="url(#squaremcp-logo-gradient)"
/>
<path
d="M24 24H33V31H40V40H31V33H24V24Z"
fill="#0E63F6"
opacity="0.92"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 736 B

9
docs/styles.css
View File

@@ -87,11 +87,15 @@ a:hover { text-decoration: underline; }
.nav-cta {
background: var(--accent);
color: #fff !important;
padding: 7px 16px;
padding: 10px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
min-height: 44px;
display: inline-flex;
align-items: center;
transition: background 0.15s;
white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-hover) !important; text-decoration: none !important; }
@@ -111,6 +115,7 @@ a:hover { text-decoration: underline; }
font-weight: 700;
line-height: 1.25;
margin-bottom: 12px;
text-wrap: balance;
}
.hero p {
@@ -247,7 +252,7 @@ p code, li code {
}
.card:hover { border-color: #3a3a3b; }
.card h4 { font-size: 15px; margin-bottom: 6px; }
.card h3, .card h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.card p { font-size: 13px; color: var(--text-secondary); margin: 0; }
/* ── Tab switcher ── */