diff --git a/public/d2/docs/agentkit/openclaw-0.svg b/public/d2/docs/agentkit/openclaw-0.svg index 9588ffadd..3dcaa65a8 100644 --- a/public/d2/docs/agentkit/openclaw-0.svg +++ b/public/d2/docs/agentkit/openclaw-0.svg @@ -1,24 +1,24 @@ - + .d2-3148955235 .fill-N1{fill:#0A0F25;} + .d2-3148955235 .fill-N2{fill:#676C7E;} + .d2-3148955235 .fill-N3{fill:#9499AB;} + .d2-3148955235 .fill-N4{fill:#CFD2DD;} + .d2-3148955235 .fill-N5{fill:#DEE1EB;} + .d2-3148955235 .fill-N6{fill:#EEF1F8;} + .d2-3148955235 .fill-N7{fill:#FFFFFF;} + .d2-3148955235 .fill-B1{fill:#0A0F25;} + .d2-3148955235 .fill-B2{fill:#676C7E;} + .d2-3148955235 .fill-B3{fill:#9499AB;} + .d2-3148955235 .fill-B4{fill:#CFD2DD;} + .d2-3148955235 .fill-B5{fill:#DEE1EB;} + .d2-3148955235 .fill-B6{fill:#EEF1F8;} + .d2-3148955235 .fill-AA2{fill:#676C7E;} + .d2-3148955235 .fill-AA4{fill:#CFD2DD;} + .d2-3148955235 .fill-AA5{fill:#DEE1EB;} + .d2-3148955235 .fill-AB4{fill:#CFD2DD;} + .d2-3148955235 .fill-AB5{fill:#DEE1EB;} + .d2-3148955235 .stroke-N1{stroke:#0A0F25;} + .d2-3148955235 .stroke-N2{stroke:#676C7E;} + .d2-3148955235 .stroke-N3{stroke:#9499AB;} + .d2-3148955235 .stroke-N4{stroke:#CFD2DD;} + .d2-3148955235 .stroke-N5{stroke:#DEE1EB;} + .d2-3148955235 .stroke-N6{stroke:#EEF1F8;} + .d2-3148955235 .stroke-N7{stroke:#FFFFFF;} + .d2-3148955235 .stroke-B1{stroke:#0A0F25;} + .d2-3148955235 .stroke-B2{stroke:#676C7E;} + .d2-3148955235 .stroke-B3{stroke:#9499AB;} + .d2-3148955235 .stroke-B4{stroke:#CFD2DD;} + .d2-3148955235 .stroke-B5{stroke:#DEE1EB;} + .d2-3148955235 .stroke-B6{stroke:#EEF1F8;} + .d2-3148955235 .stroke-AA2{stroke:#676C7E;} + .d2-3148955235 .stroke-AA4{stroke:#CFD2DD;} + .d2-3148955235 .stroke-AA5{stroke:#DEE1EB;} + .d2-3148955235 .stroke-AB4{stroke:#CFD2DD;} + .d2-3148955235 .stroke-AB5{stroke:#DEE1EB;} + .d2-3148955235 .background-color-N1{background-color:#0A0F25;} + .d2-3148955235 .background-color-N2{background-color:#676C7E;} + .d2-3148955235 .background-color-N3{background-color:#9499AB;} + .d2-3148955235 .background-color-N4{background-color:#CFD2DD;} + .d2-3148955235 .background-color-N5{background-color:#DEE1EB;} + .d2-3148955235 .background-color-N6{background-color:#EEF1F8;} + .d2-3148955235 .background-color-N7{background-color:#FFFFFF;} + .d2-3148955235 .background-color-B1{background-color:#0A0F25;} + .d2-3148955235 .background-color-B2{background-color:#676C7E;} + .d2-3148955235 .background-color-B3{background-color:#9499AB;} + .d2-3148955235 .background-color-B4{background-color:#CFD2DD;} + .d2-3148955235 .background-color-B5{background-color:#DEE1EB;} + .d2-3148955235 .background-color-B6{background-color:#EEF1F8;} + .d2-3148955235 .background-color-AA2{background-color:#676C7E;} + .d2-3148955235 .background-color-AA4{background-color:#CFD2DD;} + .d2-3148955235 .background-color-AA5{background-color:#DEE1EB;} + .d2-3148955235 .background-color-AB4{background-color:#CFD2DD;} + .d2-3148955235 .background-color-AB5{background-color:#DEE1EB;} + .d2-3148955235 .color-N1{color:#0A0F25;} + .d2-3148955235 .color-N2{color:#676C7E;} + .d2-3148955235 .color-N3{color:#9499AB;} + .d2-3148955235 .color-N4{color:#CFD2DD;} + .d2-3148955235 .color-N5{color:#DEE1EB;} + .d2-3148955235 .color-N6{color:#EEF1F8;} + .d2-3148955235 .color-N7{color:#FFFFFF;} + .d2-3148955235 .color-B1{color:#0A0F25;} + .d2-3148955235 .color-B2{color:#676C7E;} + .d2-3148955235 .color-B3{color:#9499AB;} + .d2-3148955235 .color-B4{color:#CFD2DD;} + .d2-3148955235 .color-B5{color:#DEE1EB;} + .d2-3148955235 .color-B6{color:#EEF1F8;} + .d2-3148955235 .color-AA2{color:#676C7E;} + .d2-3148955235 .color-AA4{color:#CFD2DD;} + .d2-3148955235 .color-AA5{color:#DEE1EB;} + .d2-3148955235 .color-AB4{color:#CFD2DD;} + .d2-3148955235 .color-AB5{color:#DEE1EB;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0A0F25;--color-border-muted:#676C7E;--color-neutral-muted:#EEF1F8;--color-accent-fg:#676C7E;--color-accent-emphasis:#676C7E;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-3148955235);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-dark-d2-3148955235);mix-blend-mode:overlay}.sketch-overlay-B3{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-B4{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-B5{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-3148955235);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-3148955235);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-3148955235);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}@media screen and (prefers-color-scheme:dark){ + .d2-3148955235 .fill-N1{fill:#0A0F25;} + .d2-3148955235 .fill-N2{fill:#676C7E;} + .d2-3148955235 .fill-N3{fill:#9499AB;} + .d2-3148955235 .fill-N4{fill:#CFD2DD;} + .d2-3148955235 .fill-N5{fill:#DEE1EB;} + .d2-3148955235 .fill-N6{fill:#EEF1F8;} + .d2-3148955235 .fill-N7{fill:#FFFFFF;} + .d2-3148955235 .fill-B1{fill:#0A0F25;} + .d2-3148955235 .fill-B2{fill:#676C7E;} + .d2-3148955235 .fill-B3{fill:#9499AB;} + .d2-3148955235 .fill-B4{fill:#CFD2DD;} + .d2-3148955235 .fill-B5{fill:#DEE1EB;} + .d2-3148955235 .fill-B6{fill:#EEF1F8;} + .d2-3148955235 .fill-AA2{fill:#676C7E;} + .d2-3148955235 .fill-AA4{fill:#CFD2DD;} + .d2-3148955235 .fill-AA5{fill:#DEE1EB;} + .d2-3148955235 .fill-AB4{fill:#CFD2DD;} + .d2-3148955235 .fill-AB5{fill:#DEE1EB;} + .d2-3148955235 .stroke-N1{stroke:#0A0F25;} + .d2-3148955235 .stroke-N2{stroke:#676C7E;} + .d2-3148955235 .stroke-N3{stroke:#9499AB;} + .d2-3148955235 .stroke-N4{stroke:#CFD2DD;} + .d2-3148955235 .stroke-N5{stroke:#DEE1EB;} + .d2-3148955235 .stroke-N6{stroke:#EEF1F8;} + .d2-3148955235 .stroke-N7{stroke:#FFFFFF;} + .d2-3148955235 .stroke-B1{stroke:#0A0F25;} + .d2-3148955235 .stroke-B2{stroke:#676C7E;} + .d2-3148955235 .stroke-B3{stroke:#9499AB;} + .d2-3148955235 .stroke-B4{stroke:#CFD2DD;} + .d2-3148955235 .stroke-B5{stroke:#DEE1EB;} + .d2-3148955235 .stroke-B6{stroke:#EEF1F8;} + .d2-3148955235 .stroke-AA2{stroke:#676C7E;} + .d2-3148955235 .stroke-AA4{stroke:#CFD2DD;} + .d2-3148955235 .stroke-AA5{stroke:#DEE1EB;} + .d2-3148955235 .stroke-AB4{stroke:#CFD2DD;} + .d2-3148955235 .stroke-AB5{stroke:#DEE1EB;} + .d2-3148955235 .background-color-N1{background-color:#0A0F25;} + .d2-3148955235 .background-color-N2{background-color:#676C7E;} + .d2-3148955235 .background-color-N3{background-color:#9499AB;} + .d2-3148955235 .background-color-N4{background-color:#CFD2DD;} + .d2-3148955235 .background-color-N5{background-color:#DEE1EB;} + .d2-3148955235 .background-color-N6{background-color:#EEF1F8;} + .d2-3148955235 .background-color-N7{background-color:#FFFFFF;} + .d2-3148955235 .background-color-B1{background-color:#0A0F25;} + .d2-3148955235 .background-color-B2{background-color:#676C7E;} + .d2-3148955235 .background-color-B3{background-color:#9499AB;} + .d2-3148955235 .background-color-B4{background-color:#CFD2DD;} + .d2-3148955235 .background-color-B5{background-color:#DEE1EB;} + .d2-3148955235 .background-color-B6{background-color:#EEF1F8;} + .d2-3148955235 .background-color-AA2{background-color:#676C7E;} + .d2-3148955235 .background-color-AA4{background-color:#CFD2DD;} + .d2-3148955235 .background-color-AA5{background-color:#DEE1EB;} + .d2-3148955235 .background-color-AB4{background-color:#CFD2DD;} + .d2-3148955235 .background-color-AB5{background-color:#DEE1EB;} + .d2-3148955235 .color-N1{color:#0A0F25;} + .d2-3148955235 .color-N2{color:#676C7E;} + .d2-3148955235 .color-N3{color:#9499AB;} + .d2-3148955235 .color-N4{color:#CFD2DD;} + .d2-3148955235 .color-N5{color:#DEE1EB;} + .d2-3148955235 .color-N6{color:#EEF1F8;} + .d2-3148955235 .color-N7{color:#FFFFFF;} + .d2-3148955235 .color-B1{color:#0A0F25;} + .d2-3148955235 .color-B2{color:#676C7E;} + .d2-3148955235 .color-B3{color:#9499AB;} + .d2-3148955235 .color-B4{color:#CFD2DD;} + .d2-3148955235 .color-B5{color:#DEE1EB;} + .d2-3148955235 .color-B6{color:#EEF1F8;} + .d2-3148955235 .color-AA2{color:#676C7E;} + .d2-3148955235 .color-AA4{color:#CFD2DD;} + .d2-3148955235 .color-AA5{color:#DEE1EB;} + .d2-3148955235 .color-AB4{color:#CFD2DD;} + .d2-3148955235 .color-AB5{color:#DEE1EB;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0A0F25;--color-border-muted:#676C7E;--color-neutral-muted:#EEF1F8;--color-accent-fg:#676C7E;--color-accent-emphasis:#676C7E;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-3148955235);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-dark-d2-3148955235);mix-blend-mode:overlay}.sketch-overlay-B3{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-B4{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-B5{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-3148955235);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-3148955235);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-3148955235);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-3148955235);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-3148955235);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}}]]> - + - + - + -OpenClaw agentScalekit AgentKitThird-party servicesOAuth handlerToken vaultLinkedInGmailSalesforce50+ more Execute tools +OpenClaw agentScalekit AgentKitThird-party servicesOAuth handlerToken vaultLinkedInGmailSalesforce200+ more Execute tools diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index 16d530a10..ed06bc9d4 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -60,14 +60,32 @@ head: transform: translateX(-50%); position: relative; z-index: 1; + display: flex; + flex-direction: column; + min-height: calc(100vh - 64px); } + .gateway-section-label { + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--sl-color-text-muted); + text-align: center; + margin: 0; + padding: 1.25rem 0 0.5rem; + } + + .gateway { order: -1; } + .gateway-cli { order: 1; } + .gateway { display: flex; flex-direction: row; - min-height: clamp(22rem, calc(100vh - var(--sl-nav-height) - 20rem), 35rem); + flex: 1; + min-height: auto; margin-top: 0; - padding-top: 0.5rem; + padding-top: 0; overflow: hidden; background: var(--sl-color-bg); } @@ -78,8 +96,8 @@ head: flex-direction: column; align-items: center; justify-content: center; - gap: 1.25rem; - padding: 2.5rem 3rem; + gap: 1rem; + padding: 2rem 2.5rem; text-align: center; text-decoration: none; color: inherit; @@ -174,7 +192,7 @@ head: .panel-label { font-size: clamp(1.625rem, 1.2rem + 1vw, 2.2rem); - font-weight: 600; + font-weight: 400; color: var(--sl-color-text-heading); line-height: 1.15; letter-spacing: -0.03em; @@ -199,14 +217,7 @@ head: .panel-visual { - width: min(100%, 36rem); - margin: 0.1rem auto 0; - border-radius: 1.15rem; - border: none; - background: transparent; - box-shadow: none; - overflow: hidden; - text-align: left; + display: none; } .panel-visual-header { @@ -403,14 +414,8 @@ head: } @media (hover: hover) and (min-width: 1024px) { - .panel-agents, - .panel-saas { - justify-content: flex-start; - } - .panel-visual { - width: 70%; - margin-top: 0.5rem; + display: none; } } @@ -420,20 +425,129 @@ head: .gateway-cli { text-align: center; - padding: 0.5rem 0 0.75rem; + padding: 1.25rem 2rem 1.5rem; margin: 0; + background: var(--sl-color-bg); + border-top: 1px solid var(--sl-color-hairline); + flex-shrink: 0; } .gateway-cli-label { - font-size: 0.85rem; + font-size: 1.1rem; + font-weight: 400; color: var(--sl-color-text-muted); - margin: 0 0 0.3rem; + margin: 0 0 1.25rem; } - .gateway-cli .expressive-code { - max-width: 360px; - margin: 0 auto; - display: block; + @keyframes fadeUp { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: translateY(0); } + } + + .gateway-cli-steps { + display: flex; + align-items: stretch; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; + } + + .gateway-cli-step { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + max-width: 22rem; + text-align: center; + background: var(--sl-color-bg-card); + border: 1px solid var(--sl-color-hairline); + border-radius: 0.75rem; + padding: 1rem 1.1rem; + overflow: hidden; + opacity: 0; + animation: fadeUp 300ms ease-out forwards; + } + + .gateway-cli-step:nth-child(1) { animation-delay: 0ms; } + .gateway-cli-step:nth-child(3) { animation-delay: 80ms; } + .gateway-cli-step:nth-child(5) { animation-delay: 160ms; } + + .gateway-cli-step-num { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + border: 1px solid var(--sl-color-accent); + background: var(--sl-color-bg-card); + font-size: 0.75rem; + font-weight: 600; + color: var(--sl-color-accent); + flex-shrink: 0; + } + + .gateway-cli-step-title { + font-size: 0.9rem; + font-weight: 500; + color: var(--sl-color-text-heading); + } + + .gateway-cli-step-code { + font-family: 'JetBrains Mono', monospace; + font-size: 0.78rem; + padding: 0.25rem 0.6rem; + border-radius: 0.4rem; + background: var(--sl-color-bg); + border: 1px solid var(--sl-color-hairline); + color: var(--sl-color-text); + white-space: nowrap; + } + + .gateway-cli-step .expressive-code { + width: 100%; + max-width: 100%; + } + + .gateway-cli-step .expressive-code pre { + overflow-x: auto; + } + + .gateway-cli-agent-icons { + display: flex; + gap: 0.6rem; + justify-content: center; + margin-top: 0.25rem; + } + + .gateway-cli-agent-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 0.5rem; + border: 1px solid var(--sl-color-hairline); + background: var(--sl-color-bg); + color: var(--sl-color-text-muted); + font-size: 1rem; + } + + .gateway-cli-step-prompt { + font-size: 0.82rem; + font-style: italic; + color: var(--sl-color-text-muted); + line-height: 1.4; + max-width: 11rem; + } + + .gateway-cli-arrow { + font-size: 1.2rem; + color: var(--sl-color-hairline); + flex-shrink: 0; + opacity: 0.35; + align-self: center; + margin-top: 0; } .gateway-intro-inner { @@ -456,28 +570,18 @@ head: --- +import { Code } from '@astrojs/starlight/components' +import IconClaude from '~icons/simple-icons/claude' +import IconCopilot from '~icons/simple-icons/githubcopilot' +import IconCursor from '~icons/simple-icons/cursor' +import IconCodex from '~icons/simple-icons/openai' import agentkitHero from '../../assets/pages/hero/agentkit.svg' import authForSaasHero from '../../assets/pages/hero/auth-for-saas.svg'
-
-
-

- What are you solving? -

-

Choose your Scalekit documentation path

-
-
- -
- -```sh frame="none" showLineNumbers=false -npx @scalekit-inc/cli setup -``` - -
+

Choose your Scalekit documentation path

+ +
+

Try it in 3 steps

+
+
+ 1 + Run the CLI + +
+ → +
+ 2 + Choose your coding agent +
+ + + + +
+
+ → +
+ 3 + Ask it: + "Analyse my project and tell me what problems Scalekit can solve for me?" +
+
+