From 880c1269ecf8ef33f4d38371eb69157ef992ee63 Mon Sep 17 00:00:00 2001 From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com> Date: Fri, 8 May 2026 16:59:46 -0700 Subject: [PATCH 1/2] fix(marketing): inline graph paper SVG, swap copy link for icon button The /pattern-graph-paper.svg public asset was 404ing in production, so the hero grid pattern never rendered. Inline the SVG as a data URI in the mask so it can never miss. While here, turn the "$ npx executor web" hero link into a button that copies the command to the clipboard, with a copy icon that crossfades to a check on success. --- apps/marketing/src/pages/index.astro | 28 ++++++++++++++++++++-- apps/marketing/src/styles/global.css | 36 ++++++++++++++++++++++++++-- 2 files changed, 60 insertions(+), 4 deletions(-) diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro index 8d6dc03fe..d5c7ef04f 100644 --- a/apps/marketing/src/pages/index.astro +++ b/apps/marketing/src/pages/index.astro @@ -43,10 +43,14 @@ import { AnimatedBeamDemo } from '../components/animated-beam-demo'

Try Cloud → - +
@@ -291,3 +295,23 @@ import { AnimatedBeamDemo } from '../components/animated-beam-demo' + + diff --git a/apps/marketing/src/styles/global.css b/apps/marketing/src/styles/global.css index a1bf02793..8b7a2be67 100644 --- a/apps/marketing/src/styles/global.css +++ b/apps/marketing/src/styles/global.css @@ -55,8 +55,9 @@ body { z-index: 1; } .pattern-graph { - -webkit-mask-image: url("/pattern-graph-paper.svg"); - mask-image: url("/pattern-graph-paper.svg"); + --pattern-graph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%3E%3Cg%20fill-rule='evenodd'%3E%3Cg%20fill='%23000'%3E%3Cpath%20opacity='.5'%20d='M96%2095h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9z'/%3E%3Cpath%20d='M6%205V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + -webkit-mask-image: var(--pattern-graph); + mask-image: var(--pattern-graph); -webkit-mask-size: 100px 100px; mask-size: 100px 100px; opacity: 0.08; @@ -141,11 +142,42 @@ body { align-items: center; gap: 0.4rem; transition: color 0.15s ease; + background: transparent; + border: 0; + padding: 0; + font-family: inherit; + cursor: pointer; } .btn-link:hover { color: var(--color-ink); } +.copy-icons { + position: relative; + display: inline-flex; + width: 14px; + height: 14px; + margin-left: 0.15rem; +} +.copy-icons > svg { + position: absolute; + inset: 0; + transition: opacity 0.15s ease, transform 0.15s ease; +} +.copy-icon-check { + opacity: 0; + transform: scale(0.8); + color: var(--color-accent); +} +.copy-btn[data-copied="true"] .copy-icon-copy { + opacity: 0; + transform: scale(0.8); +} +.copy-btn[data-copied="true"] .copy-icon-check { + opacity: 1; + transform: scale(1); +} + /* Legal pages */ .legal-prose { color: color-mix(in srgb, var(--color-ink) 85%, transparent); From 285438800be5f184687cfa2e2edd096377713575 Mon Sep 17 00:00:00 2001 From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com> Date: Fri, 8 May 2026 17:01:18 -0700 Subject: [PATCH 2/2] chore: fmt --- apps/marketing/src/styles/global.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/marketing/src/styles/global.css b/apps/marketing/src/styles/global.css index 8b7a2be67..93bf010a0 100644 --- a/apps/marketing/src/styles/global.css +++ b/apps/marketing/src/styles/global.css @@ -162,7 +162,9 @@ body { .copy-icons > svg { position: absolute; inset: 0; - transition: opacity 0.15s ease, transform 0.15s ease; + transition: + opacity 0.15s ease, + transform 0.15s ease; } .copy-icon-check { opacity: 0;