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

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

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>