Adds sponsorware

components/editor.tsx

@@ -6,8 +6,8 @@ import ToolsPanel from './tools-panel/tools-panel'
 import StylePanel from './style-panel/style-panel'
 import styled from 'styles'
 import PagePanel from './page-panel/page-panel'
-import dynamic from 'next/dynamic'
-import ControlsPanel from './controls-panel/controls-panel'
+// import dynamic from 'next/dynamic'
+// import ControlsPanel from './controls-panel/controls-panel'
 // import { useSelector } from 'state'
 // const CodePanel = dynamic(() => import('./code-panel/code-panel'))
 

package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-context-menu": "^0.0.21",
     "@radix-ui/react-dialog": "^0.0.18",
     "@radix-ui/react-dropdown-menu": "^0.0.20",
+    "@radix-ui/react-hover-card": "^0.0.3",
     "@radix-ui/react-icons": "^1.0.3",
     "@radix-ui/react-radio-group": "^0.0.17",
     "@radix-ui/react-tooltip": "^0.0.19",

pages/_app.tsx

@@ -6,6 +6,7 @@ import { Provider } from 'next-auth/client'
 
 function MyApp({ Component, pageProps }: AppProps) {
   globalStyles()
+
   useGtag()
 
   return (

pages/index.tsx

@@ -1,6 +1,9 @@
 // import Editor from "components/editor"
 import Head from 'next/head'
 import dynamic from 'next/dynamic'
+import { GetServerSideProps } from 'next'
+import { getSession } from 'next-auth/client'
+
 const Editor = dynamic(() => import('components/editor'), { ssr: false })
 
 export default function Home() {
@@ -13,3 +16,18 @@ export default function Home() {
     </>
   )
 }
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = await getSession(context)
+
+  if (!session?.user) {
+    context.res.setHeader('Location', `/sponsorware`)
+    context.res.statusCode = 307
+  }
+
+  return {
+    props: {
+      session,
+    },
+  }
+}

pages/signout.tsx

@@ -0,0 +1,10 @@
+import { GetServerSideProps, NextApiRequest, NextApiResponse } from 'next'
+import { signOut, signout } from 'next-auth/client'
+
+export default function SignOut() {
+  return (
+    <div>
+      <button onClick={() => signOut()}>Sign Out</button>
+    </div>
+  )
+}

pages/sponsorware.tsx

@@ -1,26 +1,25 @@
 import styled from 'styles'
-import { signin, signout, useSession } from 'next-auth/client'
+import { getSession, signin, signout, useSession } from 'next-auth/client'
+import { GetServerSideProps } from 'next'
+import React from 'react'
 
 export default function Sponsorware() {
   const [session, loading] = useSession()
 
   return (
     <Content>
-      <h1>tldraw is sponsorware</h1>
-      <video src="images/hello.mp4" autoPlay muted loop />
+      <h1>tldraw (is sponsorware)</h1>
       <p>
         Hey, thanks for visiting <a href="https://tldraw.com/">tldraw</a>, a
         tiny little drawing app by{' '}
         <a href="https://twitter.com/steveruizok">steveruizok</a>.
       </p>
-      <p>
-        {' '}
-        This project is currently:{' '}
-        <ul>
-          <li>in development</li>
-          <li>only available for my sponsors</li>
-        </ul>
-      </p>
+      <video src="images/hello.mp4" autoPlay muted loop />
+      <p>This project is currently: </p>
+      <ul>
+        <li>in development</li>
+        <li>only available for my sponsors</li>
+      </ul>
       <p>
         If you'd like to try it out,{' '}
         <a
@@ -32,23 +31,61 @@ export default function Sponsorware() {
         </a>{' '}
         (at $1 or more) and sign in below.
       </p>
-      <Button onClick={() => signin('github')}>Sign in With Github</Button>
-      <button onClick={() => signout()}>Sign Out</button>
-      <pre>{JSON.stringify(session, null, 2)}</pre>
+      <ButtonGroup>
+        {session ? (
+          <>
+            <Button onClick={() => signout()} variant={'secondary'}>
+              Sign Out
+            </Button>
+            <Detail>
+              Signed in as {session?.user?.name} ({session?.user?.email}), but
+              it looks like you're not yet a sponsor.
+              <br />
+              Something wrong? Try <a href="/">reloading the page</a> or DM me
+              on <a href="https://twitter.com/steveruizok">Twitter</a>.
+            </Detail>
+          </>
+        ) : (
+          <>
+            <Button onClick={() => signin('github')} variant={'primary'}>
+              {loading ? 'Loading...' : 'Sign in With Github'}
+            </Button>
+            <Detail>Already a sponsor? Just sign in to visit the app.</Detail>
+          </>
+        )}
+      </ButtonGroup>
     </Content>
   )
 }
 
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = await getSession(context)
+
+  // if (!!session?.user) {
+  //   context.res.setHeader('Location', `/`)
+  //   context.res.statusCode = 307
+  // }
+
+  return {
+    props: {
+      session,
+    },
+  }
+}
+
 const Content = styled('div', {
   width: '720px',
   maxWidth: 'calc(100% - 16px)',
   backgroundColor: '$panel',
-  margin: '72px auto',
-  borderRadius: '4px',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
-  padding: '16px',
+  margin: '32px auto',
+  borderRadius: '8px',
+  boxShadow: '0px 2px 24px rgba(0,0,0,.08), 0px 2px 4px rgba(0,0,0,.16)',
+  padding: '32px',
   overflow: 'hidden',
   color: '$text',
+  fontSize: '$3',
+  fontFamily: '$body',
+  lineHeight: 1.5,
 
   '& a': {
     color: '$bounds',
@@ -58,32 +95,60 @@ const Content = styled('div', {
     borderRadius: '2px',
   },
 
-  '& p': {
-    fontFamily: '$body',
-    fontSize: '$3',
-    lineHeight: 1.5,
-  },
+  '& p': {},
 
   '& video': {
     maxWidth: '100%',
-    boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
+    border: '1px solid $overlay',
     borderRadius: '4px',
     overflow: 'hidden',
     margin: '16px 0',
   },
+
+  '& iframe': {
+    border: 'none',
+    backgroundColor: 'none',
+    background: 'none',
+  },
+})
+
+const ButtonGroup = styled('div', {
+  display: 'grid',
+  gap: '16px',
+  margin: '40px 0 32px 0',
+})
+
+const Detail = styled('p', {
+  fontSize: '$2',
+  textAlign: 'center',
 })
 
 const Button = styled('button', {
+  cursor: 'pointer',
   width: '100%',
   padding: '12px 0',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   font: '$ui',
-  fontWeight: 'bold',
   fontSize: '$3',
-  background: '$bounds',
   color: '$panel',
   border: 'none',
-  margin: '32px 0 8px 0',
+  borderRadius: '4px',
+
+  variants: {
+    variant: {
+      primary: {
+        fontWeight: 'bold',
+        background: '$bounds',
+        color: '$panel',
+        boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
+      },
+      secondary: {
+        border: '1px solid $overlay',
+        background: 'transparent',
+        color: '$muted',
+      },
+    },
+  },
 })

styles/stitches.config.ts

@@ -20,6 +20,7 @@ const { styled, global, css, theme, getCssString } = createCss({
       inactive: '#cccccf',
       hover: '#efefef',
       text: '#333',
+      muted: '#777',
       input: '#f3f3f3',
       inputBorder: '#ddd',
     },
@@ -95,6 +96,7 @@ const globalStyles = global({
     overscrollBehavior: 'none',
     fontFamily: '$ui',
     fontSize: '$2',
+    backgroundColor: '$canvas',
   },
 })
 

yarn.lock

@@ -1731,6 +1731,21 @@
     "@radix-ui/react-primitive" "0.0.14"
     "@radix-ui/react-use-callback-ref" "0.0.5"
 
+"@radix-ui/react-hover-card@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-0.0.3.tgz#fb219ea72ddfa60fd3307820f025d353b5a0b8cd"
+  integrity sha512-/bq0SuD0al81wMstd168Hx2UQFpGqaWeSIoKK38EOP78bRGmlXQYh3n608uBvK/eCZrCqgnUIUwFtKSqYVlyxQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.0.5"
+    "@radix-ui/react-context" "0.0.5"
+    "@radix-ui/react-polymorphic" "0.0.12"
+    "@radix-ui/react-popper" "0.0.17"
+    "@radix-ui/react-portal" "0.0.14"
+    "@radix-ui/react-presence" "0.0.14"
+    "@radix-ui/react-primitive" "0.0.14"
+    "@radix-ui/react-use-controllable-state" "0.0.6"
+
 "@radix-ui/react-icons@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.0.3.tgz#4ef61f1234f44991f7a19e108f77ca37032b4be2"