fix: signup analytics and csp policies

website/components/nav.js

@@ -40,7 +40,7 @@ export default function Nav() {
                 <a className='mx-4 hidden md:inline'>{l.text}</a>
               </Link>
             ))}
-            <Link href='/docs/getting-started/deploy'>
+            <Link href='/docs/start/quickstart'>
               <a className='group ml-4 inline-flex flex-none items-center rounded-full bg-blue-500 py-2.5 px-3.5 text-[14px] font-semibold leading-3 text-white shadow-sm transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'>
                 Get Started{' '}
                 <span className='ml-1 transition-transform group-hover:translate-x-0.5'>

website/components/signup-form.js

@@ -1,5 +1,6 @@
 import { useState, useRef } from 'react'
 import ReCAPTCHA from 'react-google-recaptcha'
+import analytics from '../lib/analytics'
 
 export default function SignupForm() {
   const [email, setEmail] = useState('')
@@ -12,10 +13,16 @@ export default function SignupForm() {
       return
     }
 
+    const user = await analytics.user()
+
     try {
       const res = await fetch('/api/signup', {
         method: 'POST',
-        body: JSON.stringify({ email, code }),
+        body: JSON.stringify({
+          email,
+          code,
+          aid: user.anonymousId(),
+        }),
         headers: {
           Accept: 'application/json',
           'Content-Type': 'application/json',
@@ -29,12 +36,7 @@ export default function SignupForm() {
       setSubmitted(true)
     } catch (e) {
       setError(true)
-    }
-
-    if (window.analytics) {
-      window.analytics.identify({
-        email,
-      })
+      console.error(e)
     }
   }
 
@@ -59,6 +61,7 @@ export default function SignupForm() {
         size='invisible'
         sitekey='6Lcld3EcAAAAAONnvAUZR6igONL-TZm9XextIS9U'
         onChange={onReCAPTCHAChange}
+        onError={e => console.log(e)}
       />
       <form className='relative flex flex-1 space-x-2' onSubmit={onSubmit}>
         <input
@@ -78,7 +81,7 @@ export default function SignupForm() {
         />
       </form>
       {error && (
-        <div className='absolute -bottom-8 mt-2 ml-6 text-xs text-red-400'>
+        <div className='absolute -bottom-8 mt-5 ml-6 text-xs text-red-400'>
           Could not register for updates
         </div>
       )}

website/lib/analytics.js

@@ -0,0 +1,7 @@
+import { AnalyticsBrowser } from '@segment/analytics-next'
+
+const analytics = AnalyticsBrowser.load({
+  writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY,
+})
+
+export default analytics

website/next.config.js

@@ -6,6 +6,7 @@ const ContentSecurityPolicy = `
   style-src 'self' 'unsafe-inline';
   img-src 'self' user-images.githubusercontent.com raw.githubusercontent.com i.ytimg.com;
   frame-src www.google.com youtube.com www.youtube.com youtube-nocookie.com www.youtube-nocookie.com;
+  connect-src 'self' api.segment.io cdn.segment.com;
 `
 
 module.exports = phase => ({