Skip to content

Commit 2499d29

Browse files
jamesadevineCopilot
jamesadevine
and
Copilot
authored
docs: refresh landing page hero, compile preview, and mobile layout (#542)
- Strengthen hero tagline copy - Add animated aurora background glow for dark and light modes - Replace tabs with side-by-side CompilePreview component (md → yaml) - Move compile preview immediately after hero section - Fix mermaid diagram for mobile (TD layout, overflow handling) - Fix create-pr → create-pull-request to match codebase - Redesign sandbox subgraph with stacked details Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 8df9682 commit 2499d29

3 files changed

Lines changed: 227 additions & 67 deletions

File tree

‎docs-site/src/components/CompilePreview.astro‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
// Side-by-side markdown → compiled YAML preview with arrow
3+
---
4+
5+
<div class="compile-preview">
6+
<div class="compile-panel compile-source">
7+
<div class="compile-label">agent.md</div>
8+
<slot name="source" />
9+
</div>
10+
11+
<div class="compile-arrow" aria-hidden="true">
12+
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13+
<circle cx="24" cy="24" r="23" stroke="currentColor" stroke-width="1.5" opacity="0.3" />
14+
<path d="M18 24h12M26 18l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
15+
</svg>
16+
<span class="compile-arrow-label">ado-aw compile</span>
17+
</div>
18+
19+
<div class="compile-panel compile-output">
20+
<div class="compile-label">pipeline.yml</div>
21+
<slot name="output" />
22+
</div>
23+
</div>
24+
25+
<style>
26+
.compile-preview {
27+
display: flex;
28+
align-items: stretch;
29+
gap: 0;
30+
margin: 2rem 0;
31+
max-width: 100%;
32+
}
33+
34+
.compile-panel {
35+
flex: 1;
36+
min-width: 0;
37+
position: relative;
38+
overflow: hidden;
39+
border-radius: 0.75rem;
40+
}
41+
42+
/* Strip Starlight code block margins inside the panels */
43+
.compile-panel :global(pre) {
44+
margin: 0;
45+
border-radius: 0.75rem;
46+
height: 100%;
47+
font-size: 0.82rem;
48+
}
49+
50+
.compile-label {
51+
position: absolute;
52+
top: 0.65rem;
53+
right: 1rem;
54+
z-index: 1;
55+
font-size: 0.7rem;
56+
font-weight: 600;
57+
text-transform: uppercase;
58+
letter-spacing: 0.05em;
59+
color: var(--sl-color-accent);
60+
opacity: 0.7;
61+
font-family: var(--sl-font-mono, monospace);
62+
}
63+
64+
.compile-arrow {
65+
display: flex;
66+
flex-direction: column;
67+
align-items: center;
68+
justify-content: center;
69+
gap: 0.5rem;
70+
padding: 0 1.25rem;
71+
color: var(--sl-color-accent);
72+
flex-shrink: 0;
73+
}
74+
75+
.compile-arrow-label {
76+
font-size: 0.65rem;
77+
font-weight: 600;
78+
text-transform: uppercase;
79+
letter-spacing: 0.06em;
80+
opacity: 0.6;
81+
white-space: nowrap;
82+
font-family: var(--sl-font-mono, monospace);
83+
}
84+
85+
/* Stack vertically on narrow viewports */
86+
@media (max-width: 768px) {
87+
.compile-preview {
88+
flex-direction: column;
89+
gap: 0;
90+
}
91+
92+
.compile-arrow {
93+
flex-direction: row;
94+
padding: 0.75rem 0;
95+
}
96+
97+
.compile-arrow svg {
98+
transform: rotate(90deg);
99+
width: 32px;
100+
height: 32px;
101+
}
102+
}
103+
</style>

‎docs-site/src/content/docs/index.mdx‎

Lines changed: 50 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,56 @@ hero:
1717
---
1818

1919
import { Card, CardGrid, Tabs, TabItem } from '@astrojs/starlight/components';
20+
import CompilePreview from '../../components/CompilePreview.astro';
2021

22+
## Define agents in markdown
23+
24+
No pipeline YAML to hand-write. No complex scripting. Just describe the agent's purpose in a markdown file with a YAML front-matter header for configuration.
25+
26+
<CompilePreview>
27+
<Fragment slot="source">
2128
```markdown
2229
---
2330
on:
24-
schedule: daily around 09:00
25-
repos:
26-
- my-org/my-service
31+
schedule: weekly on monday around 10:00
32+
engine:
33+
model: gpt-4.1
34+
tools:
35+
bash: [grep, find, wc, jq]
2736
safe-outputs:
28-
create-pr:
29-
title-prefix: "[security] "
30-
max: 3
37+
create-pull-request:
38+
title-prefix: "[docs] "
39+
max: 1
40+
comment-on-work-item:
3141
---
3242

33-
## Dependency Guardian
43+
## Documentation Sync
3444

35-
Scan all package manifests for outdated or vulnerable dependencies.
36-
For each finding, create a pull request that bumps the version
37-
and updates the lockfile. Include a summary of CVEs addressed.
45+
Review all public API surfaces and ensure the corresponding
46+
docs are up to date. Open a PR with any corrections and
47+
comment on related work items with a summary.
3848
```
49+
</Fragment>
50+
<Fragment slot="output">
51+
```yaml
52+
# Auto-generated by ado-aw -- do not edit
53+
trigger: none
54+
schedules:
55+
- cron: "23 10 * * 1"
56+
branches:
57+
include: [main]
58+
stages:
59+
- stage: Agent
60+
# Network-isolated sandbox, read-only token...
61+
- stage: Detection
62+
# AI threat scan of proposed outputs...
63+
- stage: Execution
64+
# Apply approved PRs and comments...
65+
```
66+
</Fragment>
67+
</CompilePreview>
3968

40-
Wake up to security patch PRs, documentation updates, and pipeline failure analysis -- all proposed, reviewed, and applied automatically while you sleep.
69+
Vulnerabilities patched. Docs updated. Broken builds diagnosed and fixed. By the time you open your laptop, agents have already done the work -- proposed, reviewed, and ready to merge.
4170

4271
---
4372

@@ -65,19 +94,22 @@ Wake up to security patch PRs, documentation updates, and pipeline failure analy
6594
Every compiled pipeline enforces a defense-in-depth model. The agent **never** receives write credentials or secrets.
6695

6796
```mermaid
68-
flowchart LR
97+
flowchart TD
6998
E["Trigger"] --> Agent
70-
subgraph Sandbox["Isolated Container -- Read-only Token -- Firewall"]
99+
subgraph Sandbox["Sandbox"]
100+
direction LR
71101
Agent["AI Agent"]
102+
Details["Isolated Container\nRead-only Token\nNetwork Firewall"]
72103
end
73-
Agent --> Output["Proposed\nSafe Outputs"]
74-
Output --> Detect["Threat\nDetection"]
75-
Detect -->|"safe"| Write["Executor\n(write token)"]
104+
Agent --> Output["Proposed Safe Outputs"]
105+
Output --> Detect["Threat Detection"]
106+
Detect -->|"safe"| Write["Executor (write token)"]
76107
Detect -->|"blocked"| Fail["Rejected"]
77-
Write --> ADO["Azure DevOps\nAPIs"]
108+
Write --> ADO["Azure DevOps APIs"]
78109
79-
style Sandbox stroke:#7c3aed,stroke-width:2px
110+
style Sandbox stroke:#7c3aed,stroke-width:2px,fill:none
80111
style Agent fill:#4361ee,color:#fff,stroke:#3a56d4
112+
style Details fill:none,stroke:#7c3aed,stroke-width:1px,color:#9f7aea,stroke-dasharray:4 2,font-size:0.75rem
81113
style Detect fill:#e6a817,color:#1a1a1a,stroke:#c49000
82114
style Write fill:#2d9d78,color:#fff,stroke:#238066
83115
style Fail fill:#e63946,color:#fff,stroke:#c5303c
@@ -94,55 +126,6 @@ flowchart LR
94126

95127
---
96128

97-
## Define agents in markdown
98-
99-
No pipeline YAML to hand-write. No complex scripting. Just describe the agent's purpose in a markdown file with a YAML front-matter header for configuration.
100-
101-
<Tabs>
102-
<TabItem label="Agent file">
103-
```markdown
104-
---
105-
on:
106-
schedule: weekly on monday around 10:00
107-
engine:
108-
model: gpt-4.1
109-
tools:
110-
bash: [grep, find, wc, jq]
111-
safe-outputs:
112-
create-pr:
113-
title-prefix: "[docs] "
114-
max: 1
115-
comment-on-work-item:
116-
---
117-
118-
## Documentation Sync
119-
120-
Review all public API surfaces and ensure the corresponding
121-
docs are up to date. Open a PR with any corrections and
122-
comment on related work items with a summary.
123-
```
124-
</TabItem>
125-
<TabItem label="Compiled pipeline">
126-
```yaml
127-
# Auto-generated by ado-aw -- do not edit
128-
trigger: none
129-
schedules:
130-
- cron: "23 10 * * 1"
131-
branches:
132-
include: [main]
133-
stages:
134-
- stage: Agent
135-
# Network-isolated sandbox, read-only token...
136-
- stage: Detection
137-
# AI threat scan of proposed outputs...
138-
- stage: Execution
139-
# Apply approved PRs and comments...
140-
```
141-
</TabItem>
142-
</Tabs>
143-
144-
---
145-
146129
## Get started in minutes
147130

148131
<CardGrid>

‎docs-site/src/styles/custom.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,73 @@
4848
.hero {
4949
text-align: center;
5050
padding: 3rem 1rem;
51+
position: relative;
52+
overflow: hidden;
53+
}
54+
55+
/* Hero background glow — dark mode: animated aurora */
56+
.hero::before {
57+
content: '';
58+
position: absolute;
59+
inset: -50%;
60+
z-index: -1;
61+
background:
62+
radial-gradient(ellipse 40% 50% at 30% 20%, rgba(139, 92, 246, 0.25) 0%, transparent 60%),
63+
radial-gradient(ellipse 50% 40% at 70% 10%, rgba(236, 72, 153, 0.18) 0%, transparent 55%),
64+
radial-gradient(ellipse 45% 55% at 55% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
65+
radial-gradient(ellipse 35% 45% at 20% 60%, rgba(168, 85, 247, 0.20) 0%, transparent 55%);
66+
animation: hero-drift 12s ease-in-out infinite alternate;
67+
pointer-events: none;
68+
filter: blur(40px);
69+
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
70+
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
71+
}
72+
73+
.hero::after {
74+
content: '';
75+
position: absolute;
76+
inset: -50%;
77+
z-index: -1;
78+
background:
79+
radial-gradient(ellipse 50% 35% at 60% 40%, rgba(192, 132, 252, 0.15) 0%, transparent 55%),
80+
radial-gradient(ellipse 40% 50% at 35% 70%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
81+
radial-gradient(ellipse 45% 40% at 75% 65%, rgba(244, 114, 182, 0.10) 0%, transparent 50%);
82+
animation: hero-drift-reverse 15s ease-in-out infinite alternate;
83+
pointer-events: none;
84+
filter: blur(50px);
85+
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
86+
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
87+
}
88+
89+
@keyframes hero-drift {
90+
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
91+
33% { transform: translate(5%, -3%) rotate(2deg) scale(1.05); }
92+
66% { transform: translate(-3%, 4%) rotate(-1deg) scale(0.97); }
93+
100% { transform: translate(4%, 2%) rotate(3deg) scale(1.03); }
94+
}
95+
96+
@keyframes hero-drift-reverse {
97+
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
98+
50% { transform: translate(-5%, 3%) rotate(-3deg) scale(1.06); }
99+
100% { transform: translate(3%, -4%) rotate(2deg) scale(0.95); }
100+
}
101+
102+
/* Hero background glow — light mode: softer aurora */
103+
[data-theme='light'] .hero::before {
104+
background:
105+
radial-gradient(ellipse 40% 50% at 30% 20%, rgba(107, 70, 193, 0.14) 0%, transparent 60%),
106+
radial-gradient(ellipse 50% 40% at 70% 10%, rgba(219, 39, 119, 0.09) 0%, transparent 55%),
107+
radial-gradient(ellipse 45% 55% at 55% 50%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
108+
radial-gradient(ellipse 35% 45% at 20% 60%, rgba(124, 58, 237, 0.10) 0%, transparent 55%);
109+
filter: blur(50px);
110+
}
111+
112+
[data-theme='light'] .hero::after {
113+
background:
114+
radial-gradient(ellipse 50% 35% at 60% 40%, rgba(147, 51, 234, 0.08) 0%, transparent 55%),
115+
radial-gradient(ellipse 40% 50% at 35% 70%, rgba(79, 70, 229, 0.06) 0%, transparent 50%),
116+
radial-gradient(ellipse 45% 40% at 75% 65%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
117+
filter: blur(60px);
51118
}
52119

53120
.hero h1 {
@@ -141,6 +208,13 @@ pre {
141208
border-radius: 0.5rem;
142209
}
143210

211+
/* Mermaid diagrams — prevent mobile overflow */
212+
.mermaid,
213+
pre:has(.mermaid) {
214+
overflow-x: auto;
215+
max-width: 100%;
216+
}
217+
144218
/* Table styling */
145219
table {
146220
border-collapse: collapse;

0 commit comments

Comments
 (0)