From 9a8cbb0f1303394114c57a416444a81d96d42e86 Mon Sep 17 00:00:00 2001 From: Enrico Piovesan Date: Tue, 7 Jul 2026 23:36:35 -0600 Subject: [PATCH] fix: homepage badge duplication, contrast, and mobile diagram legibility - Merge hero-meta and trust-bar into a single deduped badge row (both listed overlapping items like "MCP protocol"; on mobile the trust bar alone wrapped to 3 rows right after an equivalent hero row) - Fix --fg-subtle contrast: #4a3d60 on #0c0817 measured ~2:1, well below WCAG AA; bumped to #8a7ba3 (~5.1:1) - Fix hero-meta-item text: rgba(255,255,255,0.3) measured ~2:1 against the hero background; switched to var(--fg-muted) (~5.9:1) - Fix CapabilityFlow SVG on mobile: viewBox scaling shrank node labels to ~5.6px and sub-labels to ~3.9px, unreadable. Below 640px the diagram now scrolls horizontally at a fixed legible size instead of shrinking text past legibility. Co-Authored-By: Claude Sonnet 5 --- public/assets/css/base.css | 2 +- public/assets/css/home.css | 4 ++-- src/components/CapabilityFlow.astro | 14 ++++++++++++++ src/pages/index.astro | 2 +- 4 files changed, 18 insertions(+), 4 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index ade68ea..b17b4d8 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -17,7 +17,7 @@ ul { list-style: none; } /* Text */ --fg: #f0eeff; --fg-muted: #9088aa; - --fg-subtle: #4a3d60; + --fg-subtle: #8a7ba3; /* Accent */ --accent: #ff7a1a; diff --git a/public/assets/css/home.css b/public/assets/css/home.css index c4c0625..70e8e31 100644 --- a/public/assets/css/home.css +++ b/public/assets/css/home.css @@ -117,9 +117,9 @@ body { padding-top: 0; } align-items: center; gap: 0.4rem; font-size: 0.78rem; - color: rgba(255,255,255,0.3); + color: var(--fg-muted); } - .hero-meta-item svg { width: 12px; height: 12px; opacity: 0.5; } + .hero-meta-item svg { width: 12px; height: 12px; opacity: 0.7; } /* ── Trust bar ── */ .trust-bar { diff --git a/src/components/CapabilityFlow.astro b/src/components/CapabilityFlow.astro index b425214..0b88e50 100644 --- a/src/components/CapabilityFlow.astro +++ b/src/components/CapabilityFlow.astro @@ -112,6 +112,20 @@ height: auto; display: block; } + /* Below ~640px the viewBox scale-down shrinks node text past legibility; + scroll horizontally at a fixed minimum size instead of shrinking further. */ + @media (max-width: 640px) { + .flow-stage { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + margin: 0 -2rem; + padding: 0 2rem; + } + .flow-stage svg { + width: auto; + min-width: 640px; + } + } .pipe { fill: none; diff --git a/src/pages/index.astro b/src/pages/index.astro index ee57e27..244623c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,7 +2,7 @@ import BaseLayout from '@layouts/BaseLayout.astro'; import CapabilityFlow from '@components/CapabilityFlow.astro'; -const _body = "\n
\n
\n
\n
\n \n v0.7.0 · Apache 2.0 · Open source\n
\n

\n Define once.
Run anywhere.\n

\n

\n Traverse is a contract-driven WASM runtime. Write business logic once with a machine-readable contract and run it identically across browser, edge, cloud, and AI pipelines.\n

\n
\n Get started →\n Read the docs\n
\n
\n \n \n Rust + WASM\n \n \n \n MCP protocol\n \n \n \n AI-agent ready\n \n \n \n Apache 2.0\n \n
\n
\n
\n\n\n
\n
\n Built on\n \n \n WebAssembly\n \n \n \n JSON Schema contracts\n \n \n \n MCP protocol\n \n \n \n Wasmtime runtime\n \n \n \n TOML-first config\n \n
\n
\n\n\n
\n
\n
\n \n
\n
\n
\n
\n pricing.toml\n
\n
\n 
[capability]\nname    = \"calculate-price\"\nversion = \"1.2.0\"\nwasm    = \"pricing.wasm\"\n\n[governing_spec]\ntitle   = \"Pricing Policy v3\"\nsource  = \"docs/pricing-policy.md\"\n\n[input]\ntype = \"object\"\nproperties.sku      = \"string\"\nproperties.quantity = \"integer\"\nproperties.region   = \"string\"\nrequired = [\"sku\", \"quantity\"]\n\n[output]\ntype = \"object\"\nproperties.total    = \"number\"\nproperties.currency = \"string\"\nrequired = [\"total\", \"currency\"]
\n
\n
\n
\n
\n
\n
\n terminal\n
\n
\n
$traverse run pricing --input '{\"sku\":\"PRO\",\"quantity\":5}'
\n
✓ Contract validated
\n
✓ WASM executed (2.1ms)
\n
→ {\"total\": 249.95, \"currency\": \"USD\"}
\n
\n
\n
\n
\n\n \n
\n
How Traverse works
\n

\n Write a contract.
Ship a capability.\n

\n

\n Three steps from idea to a portable, contract-governed piece of business logic running in any environment.\n

\n
\n
\n
01
\n
\n

Define the contract

\n

Write a TOML file with your capability name, the WASM binary path, and JSON Schema definitions for inputs and outputs. Link it to the governing spec document your team actually works from.

\n
\n
\n
\n
02
\n
\n

Compile to WASM

\n

Implement the logic in Rust and compile to wasm32-wasi. The same binary runs on every placement target without recompilation.

\n
\n
\n
\n
03
\n
\n

Register and run

\n

Add the capability to the registry with traverse add. Call it from the CLI, from an AI agent via MCP, or from your app directly. Every call is validated and traced.

\n
\n
\n
\n
\n
\n
\n
\n\n\n
\n
\n
\n
Features
\n

Everything business logic needs

\n

From contract validation to AI agent discovery, Traverse handles the entire lifecycle.

\n
\n
\n
\n
\n \n
\n

Contract-first validation

\n

Every capability call validates inputs against a JSON Schema precondition before execution. Postconditions validate the output. Bad data never reaches your logic.

\n
\n
\n
\n \n
\n

WASM sandbox isolation

\n

Each capability runs in its own Wasmtime WASM instance with linear memory isolation. A capability cannot access host resources it was not explicitly granted.

\n
\n
\n
\n \n
\n

AI agent integration

\n

Expose your entire capability registry to AI agents via the MCP stdio server. Claude, GPT-4, and any MCP-compatible agent can discover and call capabilities safely.

\n
\n
\n
\n \n
\n

Cross-platform portability

\n

One WASM binary runs on the local target today. The same binary will run unchanged on browser, edge, cloud, and AI pipeline targets as they ship.

\n
\n
\n
\n \n
\n

Trace artifacts

\n

Every execution produces a trace artifact: the input, the output, the contract version, and a timestamp. Audit any past run without re-executing anything.

\n
\n
\n
\n \n
\n

Governing specs

\n

Every contract links to the governing spec document it implements. When the policy changes, you update the spec and bump the contract version. The paper trail is built in.

\n
\n
\n
\n
\n\n\n
\n
\n
\n
By the numbers
\n

One runtime. Any environment.

\n
\n
\n
\n
1
\n
WASM binary runs identically across all placement targets — local, browser, edge, cloud, AI pipeline.
\n
\n
\n
0
\n
Logic rewrites when moving between environments. Same contract, same binary, same behavior everywhere.
\n
\n
\n
2ms
\n
Typical contract execution time on the local target. WASM startup is fast. Contract validation adds negligible overhead.
\n
\n
\n
\n
\n\n\n
\n
\n
\n
Use cases
\n

Built for real business logic

\n

Pricing rules, eligibility checks, compliance logic — any deterministic computation that needs to run reliably everywhere.

\n
\n
\n
\n
\n \n
\n

Pricing and discount logic

\n

Encode complex pricing rules as a contract with a link to your pricing policy document. The same capability runs in your frontend, your backend, and inside AI agent pipelines with identical results.

\n Learn more →\n
\n
\n
\n \n
\n

Eligibility and access rules

\n

Run eligibility logic as a sandboxed WASM capability so an AI agent can check a user's eligibility for a product, service, or feature without risk of hallucinating the answer.

\n Learn more →\n
\n
\n
\n \n
\n

Compliance and audit logic

\n

Capture regulatory and compliance rules in versioned contracts with governing spec links. Every execution is traced. Auditors can replay any historical decision from the trace artifact.

\n Learn more →\n
\n
\n
\n \n
\n

AI agent guardrails

\n

Give your AI agents a set of contract-governed capabilities to call. The agent cannot exceed the contract's boundaries. Postcondition checks block invalid outputs before they propagate.

\n Learn more →\n
\n
\n
\n
\n\n\n
\n
\n
\n

Start building with Traverse

\n

Install the CLI, write your first contract, and run it in under five minutes.

\n
\n Get started →\n View on GitHub\n
\n
\n
\n\n"; +const _body = "\n
\n
\n
\n
\n \n v0.7.0 · Apache 2.0 · Open source\n
\n

\n Define once.
Run anywhere.\n

\n

\n Traverse is a contract-driven WASM runtime. Write business logic once with a machine-readable contract and run it identically across browser, edge, cloud, and AI pipelines.\n

\n
\n Get started →\n Read the docs\n
\n
\n \n \n Rust + WASM\n \n \n \n MCP protocol\n \n \n \n JSON Schema contracts\n \n \n \n Apache 2.0\n \n
\n
\n
\n\n\n
\n
\n
\n \n
\n
\n
\n
\n pricing.toml\n
\n
\n 
[capability]\nname    = \"calculate-price\"\nversion = \"1.2.0\"\nwasm    = \"pricing.wasm\"\n\n[governing_spec]\ntitle   = \"Pricing Policy v3\"\nsource  = \"docs/pricing-policy.md\"\n\n[input]\ntype = \"object\"\nproperties.sku      = \"string\"\nproperties.quantity = \"integer\"\nproperties.region   = \"string\"\nrequired = [\"sku\", \"quantity\"]\n\n[output]\ntype = \"object\"\nproperties.total    = \"number\"\nproperties.currency = \"string\"\nrequired = [\"total\", \"currency\"]
\n
\n
\n
\n
\n
\n
\n terminal\n
\n
\n
$traverse run pricing --input '{\"sku\":\"PRO\",\"quantity\":5}'
\n
✓ Contract validated
\n
✓ WASM executed (2.1ms)
\n
→ {\"total\": 249.95, \"currency\": \"USD\"}
\n
\n
\n
\n
\n\n \n
\n
How Traverse works
\n

\n Write a contract.
Ship a capability.\n

\n

\n Three steps from idea to a portable, contract-governed piece of business logic running in any environment.\n

\n
\n
\n
01
\n
\n

Define the contract

\n

Write a TOML file with your capability name, the WASM binary path, and JSON Schema definitions for inputs and outputs. Link it to the governing spec document your team actually works from.

\n
\n
\n
\n
02
\n
\n

Compile to WASM

\n

Implement the logic in Rust and compile to wasm32-wasi. The same binary runs on every placement target without recompilation.

\n
\n
\n
\n
03
\n
\n

Register and run

\n

Add the capability to the registry with traverse add. Call it from the CLI, from an AI agent via MCP, or from your app directly. Every call is validated and traced.

\n
\n
\n
\n
\n
\n
\n
\n\n\n
\n
\n
\n
Features
\n

Everything business logic needs

\n

From contract validation to AI agent discovery, Traverse handles the entire lifecycle.

\n
\n
\n
\n
\n \n
\n

Contract-first validation

\n

Every capability call validates inputs against a JSON Schema precondition before execution. Postconditions validate the output. Bad data never reaches your logic.

\n
\n
\n
\n \n
\n

WASM sandbox isolation

\n

Each capability runs in its own Wasmtime WASM instance with linear memory isolation. A capability cannot access host resources it was not explicitly granted.

\n
\n
\n
\n \n
\n

AI agent integration

\n

Expose your entire capability registry to AI agents via the MCP stdio server. Claude, GPT-4, and any MCP-compatible agent can discover and call capabilities safely.

\n
\n
\n
\n \n
\n

Cross-platform portability

\n

One WASM binary runs on the local target today. The same binary will run unchanged on browser, edge, cloud, and AI pipeline targets as they ship.

\n
\n
\n
\n \n
\n

Trace artifacts

\n

Every execution produces a trace artifact: the input, the output, the contract version, and a timestamp. Audit any past run without re-executing anything.

\n
\n
\n
\n \n
\n

Governing specs

\n

Every contract links to the governing spec document it implements. When the policy changes, you update the spec and bump the contract version. The paper trail is built in.

\n
\n
\n
\n
\n\n\n
\n
\n
\n
By the numbers
\n

One runtime. Any environment.

\n
\n
\n
\n
1
\n
WASM binary runs identically across all placement targets — local, browser, edge, cloud, AI pipeline.
\n
\n
\n
0
\n
Logic rewrites when moving between environments. Same contract, same binary, same behavior everywhere.
\n
\n
\n
2ms
\n
Typical contract execution time on the local target. WASM startup is fast. Contract validation adds negligible overhead.
\n
\n
\n
\n
\n\n\n
\n
\n
\n
Use cases
\n

Built for real business logic

\n

Pricing rules, eligibility checks, compliance logic — any deterministic computation that needs to run reliably everywhere.

\n
\n
\n
\n
\n \n
\n

Pricing and discount logic

\n

Encode complex pricing rules as a contract with a link to your pricing policy document. The same capability runs in your frontend, your backend, and inside AI agent pipelines with identical results.

\n Learn more →\n
\n
\n
\n \n
\n

Eligibility and access rules

\n

Run eligibility logic as a sandboxed WASM capability so an AI agent can check a user's eligibility for a product, service, or feature without risk of hallucinating the answer.

\n Learn more →\n
\n
\n
\n \n
\n

Compliance and audit logic

\n

Capture regulatory and compliance rules in versioned contracts with governing spec links. Every execution is traced. Auditors can replay any historical decision from the trace artifact.

\n Learn more →\n
\n
\n
\n \n
\n

AI agent guardrails

\n

Give your AI agents a set of contract-governed capabilities to call. The agent cannot exceed the contract's boundaries. Postcondition checks block invalid outputs before they propagate.

\n Learn more →\n
\n
\n
\n
\n\n\n
\n
\n
\n

Start building with Traverse

\n

Install the CLI, write your first contract, and run it in under five minutes.

\n
\n Get started →\n View on GitHub\n
\n
\n
\n\n"; const _jsonLd = "{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareApplication\",\"name\":\"Traverse\",\"description\":\"A contract-driven Rust and WASM runtime for discovering, validating, and composing portable business capabilities.\",\"url\":\"https://traverse-framework.com\",\"author\":{\"@type\":\"Person\",\"name\":\"Enrico Piovesan\"},\"license\":\"https://www.apache.org/licenses/LICENSE-2.0\",\"applicationCategory\":\"DeveloperApplication\",\"softwareVersion\":\"0.7.0\",\"codeRepository\":\"https://github.com/traverse-framework/traverse\"}"; // Split so the CapabilityFlow animation renders between the trust bar and "How it works" const HIW_MARKER = '';