48 lines
3.7 KiB
TypeScript
48 lines
3.7 KiB
TypeScript
import { DeesElement, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
|
|
import { actionButton, icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame } from './sdig-workspace.shared.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sdig-workspace-developers': SdigWorkspaceDevelopers;
|
|
}
|
|
}
|
|
|
|
@customElement('sdig-workspace-developers')
|
|
export class SdigWorkspaceDevelopers extends DeesElement {
|
|
public static demo = () => workspaceDemoFrame(html`<sdig-workspace-developers></sdig-workspace-developers>`);
|
|
public static demoGroups = ['Signature Digital Workspace'];
|
|
|
|
public static styles = [workspaceBaseStyles, css`
|
|
.developer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
|
|
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
|
.metric-card { padding: 14px; }
|
|
.metric-value { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
|
|
pre.code { margin: 0; padding: 16px; background: var(--bg-el); border: 1px solid var(--border-subtle); border-radius: 6px; font-size: 12px; line-height: 1.7; color: var(--text-sec); overflow: auto; }
|
|
@media (max-width: 920px) { .developer-grid, .stats-grid { grid-template-columns: 1fr; } }
|
|
`];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
${topBar({ breadcrumb: ['signature.digital', 'Developers'], title: 'Developers', subtitle: pill('API · v0.42', 'info', true), actions: html`${actionButton('View on GitHub', 'outline', 'github')}${actionButton('New API key', 'primary', 'plus')}` })}
|
|
<div class="content-scroll developer-grid">
|
|
<div style="display: flex; flex-direction: column; gap: 16px;">
|
|
<div class="card" style="padding: 20px;"><div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;"><span style="font-size: 14px; font-weight: 600;">Send a document in 8 lines</span><span class="pill">node</span></div><pre class="code mono">import { Signature } from '@signature.digital/sdk';
|
|
|
|
const sig = new Signature(process.env.SIGD_KEY);
|
|
|
|
await sig.documents.send({
|
|
file: './msa.pdf',
|
|
recipients: [{ name: 'Sarah Chen', email: 'sarah@acme.com' }],
|
|
fields: 'auto',
|
|
});</pre></div>
|
|
<div class="stats-grid">${[['Requests this month', '14,892', '+8.2%'], ['P95 latency', '142ms', '-12ms'], ['Error rate', '0.04%', '✓']].map((metric) => html`<div class="card metric-card"><div class="metric-value">${metric[1]}</div><div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">${metric[0]}</div><div class="mono" style="font-size: 10px; color: var(--success); margin-top: 6px;">${metric[2]}</div></div>`)}</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 16px;">
|
|
<div class="card" style="padding: 16px;"><div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">${icon('github', 14)}<span style="font-size: 12px; font-weight: 600;">signature-digital/core</span></div><div style="font-size: 11px; color: var(--text-muted); line-height: 1.5;">MIT-licensed. Self-host on your own infra, or use signature.digital cloud.</div></div>
|
|
<div class="card" style="padding: 16px;"><div class="label-upper">Self-host status</div>${[['Docker image', 'ghcr.io/signature-digital'], ['Helm chart', 'v0.42.1'], ['Postgres ≥ 14', 'required'], ['S3-compatible', 'optional']].map((row) => html`<div style="display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 6px;"><span style="color: var(--text-muted);">${row[0]}</span><span class="mono" style="color: var(--text-sec);">${row[1]}</span></div>`)}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|