fix: name and label

src/components/AuthenticationFlow/EmailLoginForm.tsx

@@ -2,8 +2,7 @@ import Cookies from 'js-cookie';
 import type { FormEvent } from 'react';
 import { useId, useState } from 'react';
 import { httpPost } from '../../lib/http';
-import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
-import { FIRST_LOGIN_TAG } from './TriggerVerifyAccount';
+import { FIRST_LOGIN_PARAM, setAuthToken } from '../../lib/jwt';
 
 type EmailLoginFormProps = {
   isDisabled?: boolean;
@@ -40,7 +39,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
       const currentLocation = window.location.href;
       const url = new URL(currentLocation, window.location.origin);
       if (response?.isNewUser) {
-        url.searchParams.set(FIRST_LOGIN_TAG, '1');
+        url.searchParams.set(FIRST_LOGIN_PARAM, '1');
       }
       window.location.href = url.toString();
       return;

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
-import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
+import { FIRST_LOGIN_PARAM, setAuthToken } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { triggerUtmRegistration } from '../../lib/browser.ts';
-import { FIRST_LOGIN_TAG } from './TriggerVerifyAccount.tsx';
 
 type GitHubButtonProps = {
   isDisabled?: boolean;
@@ -78,7 +76,7 @@ export function GitHubButton(props: GitHubButtonProps) {
 
         const url = new URL(redirectUrl, window.location.origin);
         if (response?.isNewUser) {
-          url.searchParams.set(FIRST_LOGIN_TAG, '1');
+          url.searchParams.set(FIRST_LOGIN_PARAM, '1');
         }
         window.location.href = url.toString();
       })

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
+import { FIRST_LOGIN_PARAM, TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
@@ -8,7 +8,6 @@ import {
   getStoredUtmParams,
   triggerUtmRegistration,
 } from '../../lib/browser.ts';
-import { FIRST_LOGIN_TAG } from './TriggerVerifyAccount.tsx';
 
 type GoogleButtonProps = {
   isDisabled?: boolean;
@@ -82,7 +81,7 @@ export function GoogleButton(props: GoogleButtonProps) {
 
         const url = new URL(redirectUrl, window.location.origin);
         if (response?.isNewUser) {
-          url.searchParams.set(FIRST_LOGIN_TAG, '1');
+          url.searchParams.set(FIRST_LOGIN_PARAM, '1');
         }
         window.location.href = url.toString();
       })

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
+import { FIRST_LOGIN_PARAM, TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';
 import { triggerUtmRegistration } from '../../lib/browser.ts';
-import { FIRST_LOGIN_TAG } from './TriggerVerifyAccount.tsx';
 
 type LinkedInButtonProps = {
   isDisabled?: boolean;
@@ -77,7 +76,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
 
         const url = new URL(redirectUrl, window.location.origin);
         if (response?.isNewUser) {
-          url.searchParams.set(FIRST_LOGIN_TAG, '1');
+          url.searchParams.set(FIRST_LOGIN_PARAM, '1');
         }
         window.location.href = url.toString();
       })

src/components/AuthenticationFlow/TriggerVerifyAccount.tsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import { httpPost } from '../../lib/http';
-import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
+import { FIRST_LOGIN_PARAM, TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 import { Spinner } from '../ReactIcons/Spinner';
 import { ErrorIcon2 } from '../ReactIcons/ErrorIcon2';
 import { triggerUtmRegistration } from '../../lib/browser.ts';
 
-export const FIRST_LOGIN_TAG = 'fl' as const;
-
 export function TriggerVerifyAccount() {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState('');
@@ -35,7 +33,7 @@ export function TriggerVerifyAccount() {
 
         const url = new URL('/', window.location.origin);
         if (response?.isNewUser) {
-          url.searchParams.set(FIRST_LOGIN_TAG, '1');
+          url.searchParams.set(FIRST_LOGIN_PARAM, '1');
         }
         window.location.href = url.toString();
       })

src/components/ShareIcons/ShareIcons.tsx

@@ -6,12 +6,14 @@ import { RedditIcon } from '../ReactIcons/RedditIcon';
 import { TwitterIcon } from '../ReactIcons/TwitterIcon';
 
 type ShareIconsProps = {
+  resourceId: string;
+  resourceType: string;
   pageUrl: string;
   description: string;
 };
 
 export function ShareIcons(props: ShareIconsProps) {
-  const { pageUrl, description } = props;
+  const { pageUrl, description, resourceType, resourceId } = props;
 
   const shareIconsRef = useRef<HTMLDivElement>(null);
 
@@ -73,7 +75,10 @@ export function ShareIcons(props: ShareIconsProps) {
       ref={shareIconsRef}
     >
       <div className="sticky top-[100px] flex flex-col items-center gap-1.5">
-        {icons.map((icon, index) => (
+        {icons.map((icon, index) => {
+          const host = new URL(icon.url).host;
+
+          return (
             <a
               key={index}
               href={icon.url}
@@ -85,14 +90,15 @@ export function ShareIcons(props: ShareIconsProps) {
               onClick={() => {
                 window.fireEvent({
                   category: 'RoadmapShareLink',
-                action: 'Roadmap Share Link Clicked',
+                  action: `Share Roadmap / ${resourceType} / ${resourceId} / ${host}`,
                   label: icon.url,
                 });
               }}
             >
               {icon.icon}
             </a>
-        ))}
+          );
+        })}
       </div>
     </div>
   );

src/lib/jwt.ts

@@ -3,6 +3,7 @@ import Cookies from 'js-cookie';
 import type { AllowedOnboardingStatus } from '../api/user';
 
 export const TOKEN_COOKIE_NAME = '__roadmapsh_jt__';
+export const FIRST_LOGIN_PARAM = 'fl' as const;
 
 export type TokenPayload = {
   id: string;

src/pages/[roadmapId]/index.astro

@@ -134,6 +134,8 @@ const projects = await getProjectsByRoadmapId(roadmapId);
 
     <div class='container relative !max-w-[1000px]'>
       <ShareIcons
+        resourceId={roadmapId}
+        resourceType='roadmap'
         description={roadmapData.briefDescription}
         pageUrl={`https://roadmap.sh/${roadmapId}`}
         client:load

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -94,6 +94,8 @@ const ogImageUrl = getOpenGraphImageUrl({
       !bestPracticeData.isUpcoming && bestPracticeData.jsonUrl && (
         <div class='container relative !max-w-[1000px]'>
           <ShareIcons
+            resourceId={bestPracticeId}
+            resourceType='best-practice'
             description={bestPracticeData.briefDescription}
             pageUrl={`https://roadmap.sh/best-practices/${bestPracticeId}`}
             client:load