Skip to content

Commit 5817510

Browse files
jsscclrJessica Claire Edwards
andauthored
feat(dotcom): link top-left logo to tldraw.dev (tldraw#8938)
In order to harden the symbiosis between tldraw.com and tldraw.dev (tldraw#8871), this PR repoints the top-left logo on the anonymous tldraw.com editor panel from an in-app `Link to="/"` to an external anchor at `https://tldraw.dev`. The new anchor uses `target="_blank"` with `rel="noopener noreferrer"`, an `aria-label` for screen readers (the logo is image-only), and UTM params (`utm_source=dotcom&utm_medium=organic&utm_campaign=top-left-logo`) matching the existing sidebar dot.dev link and overlay CTA conventions. The change applies to all three render contexts of the anonymous panel via the shared `TlaEditorTopLeftPanelAnonymous` component: root tldraw.com, anonymous guest on someone else's file, and logged-out viewer of a published file. The signed-in panel is unaffected (its top-left has no clickable logo; the sidebar provides file navigation). ### Things considered - **Loss of in-app "home" navigation for anon users.** The original `Link to="/"` was the only way for an anonymous viewer of a shared/published file to return to tldraw.com. In practice this is not a real loss: anon users on a shared/published file have no file index to return to, and the browser back button is unchanged. Signed-in users navigate the file list via the sidebar (`TlaSidebar`), which is untouched. - **Optional follow-ups not included** to keep scope tight: a `useTldrawAppUiEvents` click-tracking hook, and a regression e2e spec mirroring `apps/dotcom/client/e2e/tests/sidebar-dotdev-link.spec.ts` for the top-left logo. Happy to follow up in separate PRs. Closes tldraw#8871 ### Change type - [x] `improvement` ### Test plan 1. Open tldraw.com in a logged-out browser (or any anonymous context: shared file, published file). 2. Click the tldraw logo in the top-left of the editor. 3. Confirm a new tab opens at `https://tldraw.dev?utm_source=dotcom&utm_medium=organic&utm_campaign=top-left-logo`. 4. Confirm the original tab stays on tldraw.com. 5. Inspect the logo's `<a>` element: `target="_blank"`, `rel="noopener noreferrer"`, `aria-label="tldraw.dev"`. - [ ] Unit tests - [ ] End to end tests ### Release notes - Link the top-left tldraw logo on tldraw.com to tldraw.dev. ### Code changes | Section | LOC change | | --- | --- | | Apps | +9 / -3 | Co-authored-by: Jessica Claire Edwards <jessica@tldraw.com>
1 parent 1b8673f commit 5817510

1 file changed

Lines changed: 9 additions & 3 deletions

File tree

apps/dotcom/client/src/tla/components/TlaEditor/TlaEditorTopLeftPanel.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import classNames from 'classnames'
22
import { useCallback, useEffect, useRef, useState } from 'react'
3-
import { Link, useParams } from 'react-router-dom'
3+
import { useParams } from 'react-router-dom'
44
import {
55
AccessibilityMenu,
66
ColorSchemeMenu,
@@ -106,9 +106,15 @@ export function TlaEditorTopLeftPanelAnonymous() {
106106

107107
return (
108108
<>
109-
<Link to="/" className={styles.topLeftOfflineLogo}>
109+
<a
110+
href="https://tldraw.dev?utm_source=dotcom&utm_medium=organic&utm_campaign=top-left-logo"
111+
target="_blank"
112+
rel="noopener noreferrer"
113+
aria-label="tldraw.dev"
114+
className={styles.topLeftOfflineLogo}
115+
>
110116
<TlaLogo data-testid="tla-top-left-logo-icon" />
111-
</Link>
117+
</a>
112118
{anonFileName && (
113119
<>
114120
<span

0 commit comments

Comments
 (0)