Add AdWords into a new user's "untrustedMetadata" (front-end part only) #32

windmountain · 2025-03-21T00:16:05Z

This change is a backport of work already committed to mabels/backend

The work went there first because that's where the puck is going to be and because it's a nicer, more up-to date place to work. Then I realized we wanted this part out ASAP, so it's here for the main branch as well.

The Change

Before this change there was one login page and it didn't pass a ?gclid= parameter anywhere.

After this change:

There's still a login page, but it's less exciting (no orange curved arrow animation) and only does login.
There's a new signup page that's similar but specifically for signup. (In the most basic version, this page is where AdWords should go. When AdWords pages go elsewhere, they should link to here with a &gclid query parameter.)
Because the signup page uses Clerk's component, it is also able to pass along some metadata. (So called 'untrustedMetadata' because a user could tell us anything.)
We can use that to pass along gclid which was the whole point of this.
A few style fixes for the new component, which is wider than what we had before.
Hide the orange curved arrow on phones, because it gets cut off and you can't read it.
We can also pass along the user's initial email opt-in, so if we wanted to we could remove part where they ask that question after signing in.

Because this is a backport:

Miscellaneous fixes to appease the linter and VSCode problems.
Disables saving dark mode to local storage. This was causing unexpected dark mode that was tricky to debug and turn off.
- The main plan is that mabels/backend branch has a cleaner implementation of this, and I'm just doing a temporary fix until that merges in.
- My product view is that this should be taken directly from the browser and we should not have our own setting for this. (I can see how it was useful for hooking up to a temporary button for debugging, as it was, but there is a browser dev tool that does a better job of this.)

netlify · 2025-03-21T00:16:20Z

✅ Deploy Preview for dreamy-puffpuff-aba7db ready!

Name	Link
🔨 Latest commit	`e95eb1b`
🔍 Latest deploy log	https://app.netlify.com/sites/dreamy-puffpuff-aba7db/deploys/67dd7e153cc08b00086b154d
😎 Deploy Preview	https://deploy-preview-32--dreamy-puffpuff-aba7db.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

mabels · 2025-03-21T15:09:39Z

src/components/FireproofWordmark.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+
+type Props = {


interface and readonly

mabels · 2025-03-21T15:20:36Z

src/pages/docs/show.tsx

@@ -114,7 +114,7 @@ export default function Document() {
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.00001 1C9.85666 1 11.6373 1.73755 12.9501 3.0504C14.263 4.36325 15.0005 6.14385 15.0005 8.0005C15.0005 9.85715 14.263 11.6378 12.9501 12.9506C11.6373 14.2634 9.85666 15.001 8.00001 15.001C6.14336 15.001 4.36276 14.2634 3.04991 12.9506C1.73706 11.6378 0.999512 9.85715 0.999512 8.0005C0.999512 6.14385 1.73706 4.36325 3.04991 3.0504C4.36276 1.73755 6.14336 1 8.00001 1ZM9.05001 5.298C9.57001 5.298 9.99201 4.937 9.99201 4.402C9.99201 3.867 9.56901 3.506 9.05001 3.506C8.53001 3.506 8.11001 3.867 8.11001 4.402C8.11001 4.937 8.53001 5.298 9.05001 5.298ZM9.23301 10.925C9.23301 10.818 9.27001 10.54 9.24901 10.382L8.42701 11.328C8.25701 11.507 8.04401 11.631 7.94401 11.598C7.89864 11.5813 7.86072 11.549 7.83707 11.5068C7.81342 11.4646 7.8056 11.4154 7.81501 11.368L9.18501 7.04C9.29701 6.491 8.98901 5.99 8.33601 5.926C7.64701 5.926 6.63301 6.625 6.01601 7.512C6.01601 7.618 5.99601 7.882 6.01701 8.04L6.83801 7.093C7.00801 6.916 7.20601 6.791 7.30601 6.825C7.35528 6.84268 7.39565 6.87898 7.41846 6.92609C7.44127 6.97321 7.4447 7.02739 7.42801 7.077L6.07001 11.384C5.91301 11.888 6.21001 12.382 6.93001 12.494C7.99001 12.494 8.61601 11.812 9.23401 10.925H9.23301Z" fill="currentColor" />


move svg out

mabels · 2025-03-21T15:22:05Z

src/pages/login.tsx

  const [emailPreference, setEmailPreference] = useState(false);
  const [activeSlide, setActiveSlide] = useState(0);
-  const isDarkMode = useDarkMode().isDarkMode;
+  const isDarkMode = useContext(DarkModeContext)?.isDarkMode;


put it in out App Context

mabels · 2025-03-21T15:22:38Z

src/pages/login.tsx

          </div>
        </div>
      </div>
    </div>
  );
 }

-function Slide({ data, isDarkMode }) {
+function Slide({ data, isDarkMode }: { data: { text: string; author: string; role: string }; isDarkMode: boolean }) {


extract into interface

windmountain added 2 commits March 20, 2025 19:37

Separate sign up and log in pages

5ba3c2d

Remove deprecated container query plugin that was causing lint error

fefc1d8

windmountain added 4 commits March 20, 2025 20:18

Tidy React imports

d28f7be

Fix 'Fireproof' SVG in dark mode

fbe2306

Use Clerk dark theme in dark mode

821e8e7

Move login/signup SVGs to components

e95eb1b

mabels reviewed Mar 21, 2025

View reviewed changes

src/components/FireproofWordmark.tsx

@@ -0,0 +1,55 @@

import React from "react"

type Props = {

Copy link

mabels Mar 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

interface and readonly

mabels reviewed Mar 21, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add AdWords into a new user's "untrustedMetadata" (front-end part only) #32

Add AdWords into a new user's "untrustedMetadata" (front-end part only) #32

windmountain commented Mar 21, 2025 •

edited

Loading

netlify bot commented Mar 21, 2025 •

edited

Loading

mabels Mar 21, 2025

mabels Mar 21, 2025

mabels Mar 21, 2025

mabels Mar 21, 2025

		@@ -114,7 +114,7 @@ export default function Document() {
		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M8.00001 1C9.85666 1 11.6373 1.73755 12.9501 3.0504C14.263 4.36325 15.0005 6.14385 15.0005 8.0005C15.0005 9.85715 14.263 11.6378 12.9501 12.9506C11.6373 14.2634 9.85666 15.001 8.00001 15.001C6.14336 15.001 4.36276 14.2634 3.04991 12.9506C1.73706 11.6378 0.999512 9.85715 0.999512 8.0005C0.999512 6.14385 1.73706 4.36325 3.04991 3.0504C4.36276 1.73755 6.14336 1 8.00001 1ZM9.05001 5.298C9.57001 5.298 9.99201 4.937 9.99201 4.402C9.99201 3.867 9.56901 3.506 9.05001 3.506C8.53001 3.506 8.11001 3.867 8.11001 4.402C8.11001 4.937 8.53001 5.298 9.05001 5.298ZM9.23301 10.925C9.23301 10.818 9.27001 10.54 9.24901 10.382L8.42701 11.328C8.25701 11.507 8.04401 11.631 7.94401 11.598C7.89864 11.5813 7.86072 11.549 7.83707 11.5068C7.81342 11.4646 7.8056 11.4154 7.81501 11.368L9.18501 7.04C9.29701 6.491 8.98901 5.99 8.33601 5.926C7.64701 5.926 6.63301 6.625 6.01601 7.512C6.01601 7.618 5.99601 7.882 6.01701 8.04L6.83801 7.093C7.00801 6.916 7.20601 6.791 7.30601 6.825C7.35528 6.84268 7.39565 6.87898 7.41846 6.92609C7.44127 6.97321 7.4447 7.02739 7.42801 7.077L6.07001 11.384C5.91301 11.888 6.21001 12.382 6.93001 12.494C7.99001 12.494 8.61601 11.812 9.23401 10.925H9.23301Z" fill="currentColor" />

Add AdWords into a new user's "untrustedMetadata" (front-end part only) #32

Are you sure you want to change the base?

Add AdWords into a new user's "untrustedMetadata" (front-end part only) #32

Conversation

windmountain commented Mar 21, 2025 • edited Loading

The Change

netlify bot commented Mar 21, 2025 • edited Loading

✅ Deploy Preview for dreamy-puffpuff-aba7db ready!

mabels Mar 21, 2025

Choose a reason for hiding this comment

mabels Mar 21, 2025

Choose a reason for hiding this comment

mabels Mar 21, 2025

Choose a reason for hiding this comment

mabels Mar 21, 2025

Choose a reason for hiding this comment

windmountain commented Mar 21, 2025 •

edited

Loading

netlify bot commented Mar 21, 2025 •

edited

Loading