Skip to content

docs: refresh landing page hero, compile preview, and mobile layout #542

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jamesadevine merged 1 commit into from
May 14, 2026
+227 −67
Merged

docs: refresh landing page hero, compile preview, and mobile layout #542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 103 additions & 0 deletions docs-site/src/components/CompilePreview.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
---
// Side-by-side markdown → compiled YAML preview with arrow
---

<div class="compile-preview">
<div class="compile-panel compile-source">
<div class="compile-label">agent.md</div>
<slot name="source" />
</div>

<div class="compile-arrow" aria-hidden="true">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="23" stroke="currentColor" stroke-width="1.5" opacity="0.3" />
<path d="M18 24h12M26 18l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="compile-arrow-label">ado-aw compile</span>
</div>

<div class="compile-panel compile-output">
<div class="compile-label">pipeline.yml</div>
<slot name="output" />
</div>
</div>

<style>
.compile-preview {
display: flex;
align-items: stretch;
gap: 0;
margin: 2rem 0;
max-width: 100%;
}

.compile-panel {
flex: 1;
min-width: 0;
position: relative;
overflow: hidden;
border-radius: 0.75rem;
}

/* Strip Starlight code block margins inside the panels */
.compile-panel :global(pre) {
margin: 0;
border-radius: 0.75rem;
height: 100%;
font-size: 0.82rem;
}

.compile-label {
position: absolute;
top: 0.65rem;
right: 1rem;
z-index: 1;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sl-color-accent);
opacity: 0.7;
font-family: var(--sl-font-mono, monospace);
}

.compile-arrow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0 1.25rem;
color: var(--sl-color-accent);
flex-shrink: 0;
}

.compile-arrow-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.6;
white-space: nowrap;
font-family: var(--sl-font-mono, monospace);
}

/* Stack vertically on narrow viewports */
@media (max-width: 768px) {
.compile-preview {
flex-direction: column;
gap: 0;
}

.compile-arrow {
flex-direction: row;
padding: 0.75rem 0;
}

.compile-arrow svg {
transform: rotate(90deg);
width: 32px;
height: 32px;
}
}
</style>
117 changes: 50 additions & 67 deletions docs-site/src/content/docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,56 @@ hero:
---

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

## Define agents in markdown

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.

<CompilePreview>
<Fragment slot="source">
```markdown
---
on:
schedule: daily around 09:00
repos:
- my-org/my-service
schedule: weekly on monday around 10:00
engine:
model: gpt-4.1
tools:
bash: [grep, find, wc, jq]
safe-outputs:
create-pr:
title-prefix: "[security] "
max: 3
create-pull-request:
title-prefix: "[docs] "
max: 1
comment-on-work-item:
---

## Dependency Guardian
## Documentation Sync

Scan all package manifests for outdated or vulnerable dependencies.
For each finding, create a pull request that bumps the version
and updates the lockfile. Include a summary of CVEs addressed.
Review all public API surfaces and ensure the corresponding
docs are up to date. Open a PR with any corrections and
comment on related work items with a summary.
```
</Fragment>
<Fragment slot="output">
```yaml
# Auto-generated by ado-aw -- do not edit
trigger: none
schedules:
- cron: "23 10 * * 1"
branches:
include: [main]
stages:
- stage: Agent
# Network-isolated sandbox, read-only token...
- stage: Detection
# AI threat scan of proposed outputs...
- stage: Execution
# Apply approved PRs and comments...
```
</Fragment>
</CompilePreview>

Wake up to security patch PRs, documentation updates, and pipeline failure analysis -- all proposed, reviewed, and applied automatically while you sleep.
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.

---

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

```mermaid
flowchart LR
flowchart TD
E["Trigger"] --> Agent
subgraph Sandbox["Isolated Container -- Read-only Token -- Firewall"]
subgraph Sandbox["Sandbox"]
direction LR
Agent["AI Agent"]
Details["Isolated Container\nRead-only Token\nNetwork Firewall"]
end
Agent --> Output["Proposed\nSafe Outputs"]
Output --> Detect["Threat\nDetection"]
Detect -->|"safe"| Write["Executor\n(write token)"]
Agent --> Output["Proposed Safe Outputs"]
Output --> Detect["Threat Detection"]
Detect -->|"safe"| Write["Executor (write token)"]
Detect -->|"blocked"| Fail["Rejected"]
Write --> ADO["Azure DevOps\nAPIs"]
Write --> ADO["Azure DevOps APIs"]

style Sandbox stroke:#7c3aed,stroke-width:2px
style Sandbox stroke:#7c3aed,stroke-width:2px,fill:none
style Agent fill:#4361ee,color:#fff,stroke:#3a56d4
style Details fill:none,stroke:#7c3aed,stroke-width:1px,color:#9f7aea,stroke-dasharray:4 2,font-size:0.75rem
style Detect fill:#e6a817,color:#1a1a1a,stroke:#c49000
style Write fill:#2d9d78,color:#fff,stroke:#238066
style Fail fill:#e63946,color:#fff,stroke:#c5303c
Expand All @@ -94,55 +126,6 @@ flowchart LR

---

## Define agents in markdown

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.

<Tabs>
<TabItem label="Agent file">
```markdown
---
on:
schedule: weekly on monday around 10:00
engine:
model: gpt-4.1
tools:
bash: [grep, find, wc, jq]
safe-outputs:
create-pr:
title-prefix: "[docs] "
max: 1
comment-on-work-item:
---

## Documentation Sync

Review all public API surfaces and ensure the corresponding
docs are up to date. Open a PR with any corrections and
comment on related work items with a summary.
```
</TabItem>
<TabItem label="Compiled pipeline">
```yaml
# Auto-generated by ado-aw -- do not edit
trigger: none
schedules:
- cron: "23 10 * * 1"
branches:
include: [main]
stages:
- stage: Agent
# Network-isolated sandbox, read-only token...
- stage: Detection
# AI threat scan of proposed outputs...
- stage: Execution
# Apply approved PRs and comments...
```
</TabItem>
</Tabs>

---

## Get started in minutes

<CardGrid>
Expand Down
74 changes: 74 additions & 0 deletions docs-site/src/styles/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,73 @@
.hero {
text-align: center;
padding: 3rem 1rem;
position: relative;
overflow: hidden;
}

/* Hero background glow — dark mode: animated aurora */
.hero::before {
content: '';
position: absolute;
inset: -50%;
z-index: -1;
background:
radial-gradient(ellipse 40% 50% at 30% 20%, rgba(139, 92, 246, 0.25) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 70% 10%, rgba(236, 72, 153, 0.18) 0%, transparent 55%),
radial-gradient(ellipse 45% 55% at 55% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
radial-gradient(ellipse 35% 45% at 20% 60%, rgba(168, 85, 247, 0.20) 0%, transparent 55%);
animation: hero-drift 12s ease-in-out infinite alternate;
pointer-events: none;
filter: blur(40px);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}

.hero::after {
content: '';
position: absolute;
inset: -50%;
z-index: -1;
background:
radial-gradient(ellipse 50% 35% at 60% 40%, rgba(192, 132, 252, 0.15) 0%, transparent 55%),
radial-gradient(ellipse 40% 50% at 35% 70%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
radial-gradient(ellipse 45% 40% at 75% 65%, rgba(244, 114, 182, 0.10) 0%, transparent 50%);
animation: hero-drift-reverse 15s ease-in-out infinite alternate;
pointer-events: none;
filter: blur(50px);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}

@keyframes hero-drift {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
33% { transform: translate(5%, -3%) rotate(2deg) scale(1.05); }
66% { transform: translate(-3%, 4%) rotate(-1deg) scale(0.97); }
100% { transform: translate(4%, 2%) rotate(3deg) scale(1.03); }
}

@keyframes hero-drift-reverse {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
50% { transform: translate(-5%, 3%) rotate(-3deg) scale(1.06); }
100% { transform: translate(3%, -4%) rotate(2deg) scale(0.95); }
}

/* Hero background glow — light mode: softer aurora */
[data-theme='light'] .hero::before {
background:
radial-gradient(ellipse 40% 50% at 30% 20%, rgba(107, 70, 193, 0.14) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 70% 10%, rgba(219, 39, 119, 0.09) 0%, transparent 55%),
radial-gradient(ellipse 45% 55% at 55% 50%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
radial-gradient(ellipse 35% 45% at 20% 60%, rgba(124, 58, 237, 0.10) 0%, transparent 55%);
filter: blur(50px);
}

[data-theme='light'] .hero::after {
background:
radial-gradient(ellipse 50% 35% at 60% 40%, rgba(147, 51, 234, 0.08) 0%, transparent 55%),
radial-gradient(ellipse 40% 50% at 35% 70%, rgba(79, 70, 229, 0.06) 0%, transparent 50%),
radial-gradient(ellipse 45% 40% at 75% 65%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
filter: blur(60px);
}

.hero h1 {
Expand Down Expand Up @@ -141,6 +208,13 @@ pre {
border-radius: 0.5rem;
}

/* Mermaid diagrams — prevent mobile overflow */
.mermaid,
pre:has(.mermaid) {
overflow-x: auto;
max-width: 100%;
}

/* Table styling */
table {
border-collapse: collapse;
Expand Down