fix(website): open off-site links in a new tab

[ashrafchowdury]

Context

Clicking Docs, Changelog, Roadmap, Status, or a self-host link on the marketing site navigated away in the same tab, so the site was gone and the visitor had to hit back to return. Off-site destinations should open in a new tab and leave the marketing site behind them, which is how the live agenta.ai already behaves.

This branch also carries two smaller fixes that were already in progress: the footer social icons were pointing at the wrong glyphs, and the HowItWorks scroll section needed polish. All three are described below.

Changes

Off-site links open in a new tab

Button.astro gains an external prop. When the button renders as a link, external adds target="_blank" rel="noopener"; as a <button> (no href) it does nothing.

Before:
<Button href="https://agenta.ai/docs">Browse the docs</Button> → same-tab

After:
<Button href="https://agenta.ai/docs" external>Browse the docs</Button> → new tab

The same external flag now drives the nav and footer link lists, which emit target/rel from it in both the desktop and mobile markup. Links flipped to external: the nav Docs link and the Resources dropdown (Changelog, Roadmap, and the hidden Tutorial), the footer Changelog and Roadmap (Docs and Status were already external), the two self-host chips in the OpenSource section (Docker Compose, Helm charts), and the 404 page's "Browse the docs" button. First-party routes (Pricing, Blog, internal pages) are untouched and still navigate in the same tab.

Footer social icons

The repo's social-*.svg files aren't named by platform, and the footer pointed at the wrong ones: LinkedIn rendered the Slack glyph and Slack rendered an OpenAI mark. There was no real LinkedIn icon in the repo. Added a LinkedIn SVG and remapped each platform to its actual glyph.

Before:

• LinkedIn → /icons/social-2.svg (the Slack glyph)
• Slack → /icons/social-4.svg (an OpenAI mark)

After:

• LinkedIn → /icons/social-linkedin.svg (new, real LinkedIn glyph)
• Slack → /icons/social-2.svg (the real Slack glyph)

A comment now records which numbered file is which, since the filenames don't say.

HowItWorks scroll and nav pill

• Pulled the pinned section length into a named SECTION_VH constant and dropped it from 500 to 320 (~67vh down to ~37vh of scroll per beat), so the six chat stages feel snappier.
• Changed the placeholder $0.00 cost figures in the chat metadata to realistic numbers ($0.14 and $0.06).
• Added a top-edge fade mask on the scrolled chat card so revealed messages dissolve into the card instead of being sliced by a hard overflow cut. The static (reduced-motion / small-screen) layout has no overflow and is left unmasked.
• Rewrote the scroll→stage handler to coalesce a burst of scroll/resize events into one requestAnimationFrame, so the single getBoundingClientRect read happens at most once per frame.
• Nav pill: replaced the always-on requestAnimationFrame loop (which ran every frame forever, even while idle) with a passive scroll/resize listener that coalesces into one rAF per frame and only writes the .nav-scrolled class on an actual crossing of the 24px threshold.
• Tightened --nav-pill-inset from 24px to 12px so the floating pill sits closer to the top.

Tests / notes

• Visual and client-side changes only; no data or routing logic touched.
• rel="noopener" is applied without noreferrer, which keeps the referrer for our own docs analytics while still closing the window.opener hole.
• The branch bundles three themes. If you'd rather review them as separate PRs, say so and I'll split them.

What to QA

• Landing nav: click Docs. It opens the docs site in a new tab and the marketing site stays put. Open the Resources dropdown and confirm Changelog and Roadmap do the same.
• Footer: Docs, Changelog, Roadmap, and Status open in a new tab. Blog and the internal links still navigate in the same tab.
• OpenSource section: the Docker Compose and Helm charts chips open docs in a new tab.
• 404 page: "Browse the docs" opens a new tab; "Back to home" and "Read the blog" stay in the same tab.
• Footer social row: the four icons read X, LinkedIn, GitHub, Slack, each with the correct glyph and destination.
• HowItWorks (desktop): the six chat stages advance faster than before, the thread fades into the top of the card as it grows, and the metadata rows show non-zero costs ($0.14 / $0.06).
• Scroll the landing page: the nav collapses into the floating pill past ~24px and expands at the top; the pill sits a touch higher than before.
• Regression: internal links anywhere (Pricing, Blog, first-party pages) still open in the same tab, not a new one.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Ready	Preview, Comment	Jul 24, 2026 7:02am

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8cd3b65f-1b57-4a61-b5b2-f3b7980e11ae

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/website-links-open-external-tab

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Website preview

Preview URL: https://pr-5474-agenta-website-preview.mahmoud-637.workers.dev

Built from d9cb8a55556950257832c932f455591a2889707d. This comment updates in place on every push.