MythEclipse/mcpedia
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(web): refine aesthetic to archival precision, remove generic gradients and glowing blobs
CI / typecheck + tests (push) Canceled after 0s
Details
CI / build + deploy (Nix) — api (push) Canceled after 0s
Details
CI / build + deploy (Nix) — mcp (push) Canceled after 0s
Details
CI / build + deploy (Nix) — worker (push) Canceled after 0s
Details
CI / build + deploy (web) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
asepharyana committed 2026-08-22 15:12:00 +07:00
1 parent 011571e12d
commit 067115ba13
15 files changed
+604 -745
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/app/components/McpConfigSnippet.tsx
+17 -21
View File
@@ -6,11 +6,8 @@ import {
Sparkles,
Terminal,
Server,
Code2,
Copy,
Check,
CheckCircle2,
Cpu,
Laptop,
} from "lucide-react";
@@ -54,10 +51,10 @@ const CONFIGS = [
},
{
id: "http",
label: "Streamable HTTP Endpoint",
label: "Streamable HTTP (SSE)",
icon: Server,
lang: "json",
filename: "Streamable HTTP (SSE) Client Config",
filename: "Streamable HTTP Client Config",
content: `{
"mcpServers": {
"mcpedia-remote": {
@@ -74,11 +71,11 @@ const CONFIGS = [
label: "CLI & Scripts",
icon: Terminal,
lang: "bash",
filename: "Terminal / MCP Client Subprocess",
content: `# Ask questions over semantic knowledge
filename: "Terminal Subprocess / REPL",
content: `# Semantic question answering via MCP client
bun run apps/mcp-client/src/ask.ts "How does ret2win stack alignment work in x86_64?"
# Run interactive REPL with native tool calls
# Interactive REPL with tool discovery
bun run apps/mcp-client/src/index.ts`,
},
];
@@ -100,9 +97,9 @@ ${current.content}
}
return (
<div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl overflow-hidden shadow-sm">
<div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl overflow-hidden shadow-xs">
{/* Header bar with tabs */}
<div className="flex items-center justify-between px-4 sm:px-6 py-3 bg-[var(--bg-elevated)]/60 border-b border-[var(--border-color)] flex-wrap gap-2">
<div className="flex items-center justify-between px-4 py-2.5 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] flex-wrap gap-2">
<div className="flex items-center gap-1.5 flex-wrap">
{CONFIGS.map((c) => {
const Icon = c.icon;
@@ -112,9 +109,9 @@ ${current.content}
key={c.id}
onClick={() => setActiveTab(c.id)}
type="button"
className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-xl font-semibold transition-all cursor-pointer ${
className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md font-medium transition-all cursor-pointer ${
isSelected
? "bg-[var(--brand)] text-white shadow-md shadow-[var(--brand)]/20"
? "bg-[var(--brand)] text-[var(--brand-fg)] font-semibold shadow-xs"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-surface)]"
}`}
>
@@ -128,12 +125,12 @@ ${current.content}
<button
onClick={handleCopyAll}
type="button"
className="flex items-center gap-1.5 px-3 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-lg transition-all shadow-xs cursor-pointer font-medium"
className="flex items-center gap-1.5 px-2.5 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-primary)] rounded-md transition-colors shadow-xs cursor-pointer font-medium"
>
{copied ? (
<>
<Check className="w-3.5 h-3.5 text-emerald-500" />
<span className="text-emerald-500">Copied Config</span>
<span className="text-emerald-500">Copied</span>
</>
) : (
<>
@@ -144,15 +141,15 @@ ${current.content}
</button>
</div>
{/* Code preview via Markdown syntax highlighter */}
{/* Code preview */}
<div className="p-4 sm:p-5 [&>.prose>.group]:my-0 [&>.prose]:max-w-none">
<Markdown source={markdownSnippet} />
</div>
{/* Footer Info */}
<div className="px-4 sm:px-6 py-3 bg-[var(--bg-elevated)]/40 border-t border-[var(--border-color)] text-xs text-[var(--text-dim)] flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<div className="px-4 py-2.5 bg-[var(--bg-elevated)] border-t border-[var(--border-color)] text-xs text-[var(--text-dim)] flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<div className="flex items-center gap-2">
<span className="font-mono uppercase text-[10px] text-[var(--text-muted)] font-semibold">
<span className="font-mono uppercase text-[10px] text-[var(--text-muted)]">
Target File:
</span>
<span className="font-mono text-[var(--text-secondary)] text-[11px]">
@@ -160,10 +157,9 @@ ${current.content}
</span>
</div>
<div className="flex items-center gap-3 text-[11px]">
<span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-medium">
<CheckCircle2 className="w-3.5 h-3.5" />
<span>13 MCP Tools Ready</span>
<div className="flex items-center gap-3 text-[11px] font-mono">
<span className="flex items-center gap-1 text-[var(--text-muted)]">
<span>[ 13_TOOLS_ACTIVE ]</span>
</span>
</div>
</div>