Add Attack Surface Overview page

[ElliotFriedman]

Summary

• Adds a new Attack Surface Overview page with an interactive radial threat map showing 12 key attack vectors for Web3 protocols
• Each node is color-coded by posture state (red = gap, amber = in progress, green = secured) with click-to-toggle and localStorage persistence
• Clicking a node opens a detail card with description, severity, attack example tags, GAP/IN PROGRESS/SECURED toggle, and a link to the relevant framework guide
• Designed as a visual-first tool for CSOs and leadership to quickly assess security posture and identify gaps without reading dense documentation
• This is designed to help organizations visually identify areas for improvement, and get buy in from other executives to close gaps.
• Responsive design with mobile fallback list; print-friendly styles

Attack vectors covered

Smart Contract Exploits, Multisig Operational Failures, DPRK/Threat Actor Hiring, Leadership Phishing, Infrastructure Compromise, Frontend/DNS Hijacking, Operational Security Failures, Supply Chain Attacks, Monitoring & Alerting Gaps, Social Engineering, Duress Situations, Governance Attacks

Functionality

Clicking a node also opens a detail card below the map showing a description, severity level, example attack types as tags, a three-way GAP / IN PROGRESS / SECURED toggle, and a direct link to the relevant SEAL framework guide. All posture state is persisted in localStorage so users can return and pick up where they left off. The page is designed to give security leaders an at-a-glance view of their exposure without needing to read through documentation, and to serve as a jumping-off point into the existing framework content for remediation.

New files

• components/attack-surface/ — threatData.ts, AttackSurfaceDashboard.tsx, AttackSurface.css
• docs/pages/attack-surface.mdx

Modified files

• components/index.ts — added export
• vocs.config.tsx — added sidebar entry under Introduction

Test plan

• pnpm docs:dev → page renders at /attack-surface
• Click nodes to toggle posture state (red → green → amber → red)
• State persists across page reload (localStorage)
• Click node to open detail card with description, tags, and framework link
• GAP/IN PROGRESS/SECURED buttons in detail card update node color
• Framework links navigate to correct existing pages
• Responsive: mobile fallback list below 600px
• Dark mode: diagram remains legible

🤖 Generated with Claude Code

[github-actions]

Sidebar Configuration Reminder

This PR includes added, renamed, or removed documentation files:

• docs/pages/attack-surface.mdx (added)

Please ensure that:

• The sidebar in vocs.config.tsx has been updated to include these files
• New content has the dev: true parameter so it's marked as under development
• Sidebar links match the file paths - use the preview deployment to verify

See Contributing Guide – Sidebar & Navigation for more details.

---

_{This is an automated reminder. If this PR doesn't need sidebar changes, you can ignore this message.}

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
frameworks	✅ Ready (View Log)	Visit Preview	550e049

[scode2277]

Hey @ElliotFriedman, thanks for the contribution!

I think this is really cool! I have a few suggestions on how we could frame it a bit better:

• i think that it would fit better as last page of the Introduction block and we can link it in the "How to navigate the website", as well as the Introduction page.
• i'm not sure we need the reminder workflow, i think a comment at the beginning of the page asking to add all the info required should be enough. In any case, if a contributor updates the attack surface page, we would make sure everything works well before merging.
• on the UX side, as it's not immediately obvious that clicking on an attack vector makes the card appear at the bottom, we could add a scrollIntoView, or something like it, to make it smoother and more understandable.

wdyt?

Thanks again for putting this together!