67 lines
3.5 KiB
HTML
67 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Skald Connectors</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;padding:2rem;max-width:900px;margin:0 auto}
|
|
h1{font-size:2rem;color:#38bdf8;margin-bottom:.5rem}
|
|
.sub{color:#64748b;margin-bottom:2rem}
|
|
.card{background:#1e293b;border-radius:12px;padding:1.25rem;display:flex;align-items:center;gap:1rem;margin-bottom:1rem;transition:background .2s}
|
|
.card:hover{background:#334155}
|
|
.card img{width:48px;height:48px;border-radius:8px;object-fit:cover}
|
|
.card h2{font-size:1.125rem;color:#f1f5f9;margin-bottom:.25rem}
|
|
.card p{font-size:.875rem;color:#94a3b8}
|
|
.tags{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap;align-items:center}
|
|
.tag{font-size:.75rem;padding:2px 8px;border-radius:4px;background:#0f172a;color:#64748b}
|
|
.tag.api-key{color:#f59e0b;border:1px solid #f59e0b}
|
|
.tag.oauth{color:#f97316;border:1px solid #f97316}
|
|
.tag.python{color:#22c55e;border:1px solid #22c55e}
|
|
.tag.remote{color:#22d3ee;border:1px solid #22d3ee}
|
|
.tag.local{color:#22d3ee;border:1px solid #22d3ee}
|
|
.tag.search{color:#a78bfa;border:1px solid #a78bfa}
|
|
.tag.email{color:#ef4444;border:1px solid #ef4444}
|
|
.tag.google{color:#eab308;border:1px solid #eab308}
|
|
.scope-global{font-size:.75rem;padding:2px 8px;border-radius:4px;background:#0f172a;color:#22c55e;border:1px solid #22c55e}
|
|
.scope-user{font-size:.75rem;padding:2px 8px;border-radius:4px;background:#0f172a;color:#38bdf8;border:1px solid #38bdf8}
|
|
.type-local{font-size:.75rem;padding:2px 8px;border-radius:4px;background:#0f172a;color:#a78bfa;border:1px solid #a78bfa}
|
|
.type-remote{font-size:.75rem;padding:2px 8px;border-radius:4px;background:#0f172a;color:#f472b6;border:1px solid #f472b6}
|
|
.footer{text-align:center;color:#475569;margin-top:3rem;font-size:.875rem}
|
|
a{text-decoration:none;color:inherit}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🔌 Skald Connectors</h1>
|
|
<p class="sub">Tested, ready-to-use connectors for Skald agents.</p>
|
|
<div id="list">Loading...</div>
|
|
<p class="footer"><a href="/connectors.json" style="color:#64748b">connectors.json</a></p>
|
|
<script>
|
|
fetch("/connectors.json")
|
|
.then(r=>r.json())
|
|
.then(d=>{
|
|
document.getElementById("list").innerHTML = d.connectors.map(c => {
|
|
const typeBadge = c.type === 'mcp_remote' ? '<span class="type-remote">📡 remote</span>'
|
|
: '<span class="type-local">💻 local</span>';
|
|
const scopeBadge = c.scope === 'global' ? '<span class="scope-global">🌐 global</span>'
|
|
: '<span class="scope-user">👤 user</span>';
|
|
return '<a href="/'+c.folder+'/"><div class="card">' +
|
|
'<img src="/'+c.icon_small+'" alt="">' +
|
|
'<div>' +
|
|
'<h2>'+c.name+'</h2>' +
|
|
'<p>'+c.user_description+'</p>' +
|
|
'<div class="tags">' +
|
|
typeBadge +
|
|
scopeBadge +
|
|
c.requires.map(r => '<span class="tag '+r.toLowerCase()+'">'+r+'</span>').join('') +
|
|
c.tags.map(t => '<span class="tag '+t.toLowerCase()+'">'+t+'</span>').join('') +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div></a>'
|
|
}).join('')
|
|
})
|
|
.catch(e=>{document.getElementById("list").innerHTML='<p>Error loading connectors</p>'})
|
|
</script>
|
|
</body>
|
|
</html> |