From 23efa94d546f538c371b00b3bdcd137669a6a996 Mon Sep 17 00:00:00 2001 From: James Devine Date: Thu, 14 May 2026 22:44:45 +0100 Subject: [PATCH] docs: refresh landing page hero, compile preview, and mobile layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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> --- docs-site/src/components/CompilePreview.astro | 103 +++++++++++++++ docs-site/src/content/docs/index.mdx | 117 ++++++++---------- docs-site/src/styles/custom.css | 74 +++++++++++ 3 files changed, 227 insertions(+), 67 deletions(-) create mode 100644 docs-site/src/components/CompilePreview.astro diff --git a/docs-site/src/components/CompilePreview.astro b/docs-site/src/components/CompilePreview.astro new file mode 100644 index 0000000..609318d --- /dev/null +++ b/docs-site/src/components/CompilePreview.astro @@ -0,0 +1,103 @@ +--- +// Side-by-side markdown → compiled YAML preview with arrow +--- + +
+
+
agent.md
+ +
+ + + +
+
pipeline.yml
+ +
+
+ + diff --git a/docs-site/src/content/docs/index.mdx b/docs-site/src/content/docs/index.mdx index 98b7a54..603849f 100644 --- a/docs-site/src/content/docs/index.mdx +++ b/docs-site/src/content/docs/index.mdx @@ -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. + + + ```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. ``` + + +```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... +``` + + -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. --- @@ -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 @@ -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. - - - -```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. -``` - - -```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... -``` - - - ---- - ## Get started in minutes diff --git a/docs-site/src/styles/custom.css b/docs-site/src/styles/custom.css index 2c578a0..9ea3b34 100644 --- a/docs-site/src/styles/custom.css +++ b/docs-site/src/styles/custom.css @@ -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 { @@ -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;