refactor(close): use wordmark-light.svg for brand mark by yigitdot · Pull Request #47 · decdn/website

yigitdot · 2026-05-09T02:41:04Z

Summary

Replace the styled "decdn_" text in the Close (Contact) section with public/wordmark-light.svg, mirroring the existing Chrome.tsx <img> pattern (output: "export" rules out next/image).
Give the wordmark its own fluid sizing curve (clamp(4.75rem, 14vw, 11.5rem)) so phones don't fall to the --fs-display floor.
Apply a height-proportional negative margin-left so the mark visually outdents past the content's left edge across viewports.
Drop the decorative trailing _ from alt text on the wordmark <img> in both Close.tsx and Chrome.tsx (light/dark variants). The original text-based markup hid the underscore via aria-hidden; the new image now mirrors that behavior so screen readers announce "decdn" instead of "decdn underscore".

Test plan

pnpm lint clean
pnpm build (static export) succeeds
/#contact renders the wordmark at ~360px, ~768px, ~1440px without overflow
Reveal animation still fires on scroll
VoiceOver (or any screen reader) announces the wordmark as "decdn", not "decdn underscore"

Reviewer feedback

Accepted: alt-text fix flagged by Copilot + Gemini (commit bb1bb59).
Rejected: Gemini's suggestion to cast the whole style object as React.CSSProperties instead of the per-key ["--var" as string] cast. The new code matches the existing ["--reveal-delay" as string] pattern at Close.tsx:36; switching styles in one spot would diverge from neighboring code without functional benefit.

🤖 Generated with Claude Code

Replace the hand-composed "decdn_" spans with the canonical public/wordmark-light.svg, matching the navbar pattern. Sized via a dedicated fluid clamp so the mark stays substantial on phones, with a height-relative negative margin-left to push it past the content edge. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

cloudflare-workers-and-pages · 2026-05-09T02:41:05Z

Deploying website with Cloudflare Pages

Latest commit:	`93898d1`
Status:	✅ Deploy successful!
Preview URL:	https://e22e513c.website-70y.pages.dev
Branch Preview URL:	https://close-wordmark-svg.website-70y.pages.dev

View logs

Copilot

Pull request overview

Refactors the Contact (“Close”) section’s brand mark to use the exported public/wordmark-light.svg (matching the existing <img> approach used elsewhere in the site under output: "export" constraints), and adjusts responsive sizing/positioning to improve appearance across viewports.

Changes:

Replaced the styled decdn_ text markup with an <img> pointing at /wordmark-light.svg.
Added a dedicated responsive height curve via clamp(...) and used it to derive a proportional negative margin-left.
Preserved the existing scroll reveal behavior by keeping data-reveal on the new element.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

gemini-code-assist

Code Review

This pull request replaces the text-based logo in the Close component with an SVG image. The review feedback suggests improving accessibility by removing the decorative underscore from the image's alt text to match the previous implementation's screen reader behavior. Additionally, it recommends simplifying the TypeScript casting for inline CSS variables by casting the entire style object to React.CSSProperties instead of individual keys.

gemini-code-assist · 2026-05-09T02:43:32Z

+              ["--wordmark-h" as string]: "clamp(4.75rem, 14vw, 11.5rem)",
+              height: "var(--wordmark-h)",
+              width: "auto",
+              marginLeft: "calc(var(--wordmark-h) * -0.18)",
+            }}


Casting individual CSS variable keys with as string is a bit verbose. A cleaner approach in TypeScript is to cast the entire style object to React.CSSProperties, which allows for arbitrary property names starting with -- without needing individual casts for each key.

Suggested change

["--wordmark-h" as string]: "clamp(4.75rem, 14vw, 11.5rem)",

height: "var(--wordmark-h)",

width: "auto",

marginLeft: "calc(var(--wordmark-h) * -0.18)",

}}

"--wordmark-h": "clamp(4.75rem, 14vw, 11.5rem)",

height: "var(--wordmark-h)",

width: "auto",

marginLeft: "calc(var(--wordmark-h) * -0.18)",

} as React.CSSProperties}

Thanks — valid as a project-wide convention question, but not the right scope for this PR. The per-key ["--var" as string] cast is used 9× across 6 files today and there are zero as React.CSSProperties casts; switching this single site would create the codebase's first outlier (and the immediate neighbors in Close.tsx lines 39 and 49 still use the per-key form). Tracked for a sweep evaluation in #48.

Screen readers were announcing the trailing "_" literally ("decdn underscore"). The previous text-based markup hid it via aria-hidden; replicate that intent for the <img> by removing it from the alt. Applied to Close and to both Chrome navbar variants for consistency. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Without width/height attrs the browser falls back to the 300x150 replaced-element default until the SVG resource is fetched, then re-flows to the real 411:110 ratio — a horizontal layout shift in the surrounding flex column. The HTML attrs only feed the browser's aspect-ratio reservation; CSS continues to control rendered size via var(--wordmark-h). Mirrors the existing Chrome.tsx wordmark pattern. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings May 9, 2026 02:41

Copilot started reviewing on behalf of yigitdot May 9, 2026 02:41 View session

Copilot AI reviewed May 9, 2026

View reviewed changes

Comment thread components/site/Close.tsx Outdated

gemini-code-assist Bot reviewed May 9, 2026

View reviewed changes

yigitdot mentioned this pull request May 9, 2026

Convention: per-key ["--var" as string] cast vs. as React.CSSProperties for CSS-variable style props #48

Closed

3 tasks

yigitdot requested a review from Copilot May 9, 2026 02:59

Copilot started reviewing on behalf of yigitdot May 9, 2026 02:59 View session

Copilot AI reviewed May 9, 2026

View reviewed changes

Comment thread components/site/Close.tsx

This was referenced May 9, 2026

Chrome.tsx wordmark: declare SVG intrinsic dimensions (411×110) for cross-file consistency #49

Closed

Sync Chrome.tsx wordmark <img> intrinsic dimensions to 411×110 (match Close.tsx and SVG source) #50

Closed

yigitdot merged commit 8b206ea into main May 9, 2026
7 checks passed

yigitdot deleted the close-wordmark-svg branch May 9, 2026 03:32

Navigation Menu

refactor(close): use wordmark-light.svg for brand mark - #47

refactor(close): use wordmark-light.svg for brand mark#47
yigitdot merged 3 commits into
mainfrom
close-wordmark-svg

yigitdot commented May 9, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented May 9, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

gemini-code-assist Bot May 9, 2026

Uh oh!

yigitdot May 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

yigitdot commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Reviewer feedback

Uh oh!

cloudflare-workers-and-pages Bot commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying website with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

gemini-code-assist Bot May 9, 2026

Choose a reason for hiding this comment

Uh oh!

yigitdot May 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

yigitdot commented May 9, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented May 9, 2026 •

edited

Loading