Adds auth, etc to next.js site

2021-09-03 15:11:50 +01:00 · 2021-09-03 15:11:50 +01:00 · fbbaf08513
commit fbbaf08513
parent dc74b14c10
36 changed files with 2130 additions and 63 deletions
--- a/packages/www/next.config.js
+++ b/packages/www/next.config.js
@ -1,6 +1,74 @@
-const withTM = require('next-transpile-modules')(['@tldraw/tldraw'])
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const withPWA = require('next-pwa')

-module.exports = withTM({
+const {
+  GITHUB_ID,
+  GITHUB_SECRET,
+  GITHUB_API_SECRET,
+  NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
+  SENTRY_ORG,
+  SENTRY_PROJECT,
+  SENTRY_AUTH_TOKEN,
+  NODE_ENV,
+  VERCEL_GIT_COMMIT_SHA,
+  GA_MEASUREMENT_ID,
+} = process.env
+
+process.env.SENTRY_DSN = SENTRY_DSN
+
+const isProduction = NODE_ENV === 'production'
+
+const basePath = ''
+
+module.exports = withPWA({
+  productionBrowserSourceMaps: true,
+  env: {
+    NEXT_PUBLIC_COMMIT_SHA: VERCEL_GIT_COMMIT_SHA,
+    GA_MEASUREMENT_ID,
+    GITHUB_ID,
+    GITHUB_SECRET,
+    GITHUB_API_SECRET,
+  },
+  webpack: (config, options) => {
+    if (!options.isServer) {
+      config.resolve.alias['@sentry/node'] = '@sentry/browser'
+    }
+
+    config.plugins.push(
+      new options.webpack.DefinePlugin({
+        'process.env.NEXT_IS_SERVER': JSON.stringify(options.isServer.toString()),
+      })
+    )
+
+    if (
+      SENTRY_DSN &&
+      SENTRY_ORG &&
+      SENTRY_PROJECT &&
+      SENTRY_AUTH_TOKEN &&
+      VERCEL_GIT_COMMIT_SHA &&
+      isProduction
+    ) {
+      config.plugins.push(
+        new SentryWebpackPlugin({
+          include: '.next',
+          ignore: ['node_modules'],
+          stripPrefix: ['webpack://_N_E/'],
+          urlPrefix: `~${basePath}/_next`,
+          release: VERCEL_GIT_COMMIT_SHA,
+          authToken: SENTRY_AUTH_TOKEN,
+          org: SENTRY_PROJECT,
+          project: SENTRY_ORG,
+        })
+      )
+    }
+    return config
+  },
+  basePath,
+  pwa: {
+    disable: !isProduction,
+    dest: 'public',
+  },
  reactStrictMode: true,
  webpack5: true,
  symlinks: false,
--- a/packages/www/package.json
+++ b/packages/www/package.json
@ -18,10 +18,19 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@sentry/integrations": "^6.12.0",
+    "@sentry/node": "^6.12.0",
+    "@sentry/react": "^6.12.0",
+    "@sentry/tracing": "^6.12.0",
+    "@sentry/webpack-plugin": "^1.17.1",
    "@stitches/react": "^0.2.3",
    "@tldraw/tldraw": "^0.0.57",
+    "browser-fs-access": "^0.20.4",
+    "gtag": "^1.0.1",
    "idb": "^6.1.2",
    "next": "^11.1.0",
+    "next-auth": "^3.29.0",
+    "next-pwa": "^5.3.1",
    "next-transpile-modules": "^8.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
--- a/packages/www/pages/_app.tsx
+++ b/packages/www/pages/_app.tsx
@ -16,9 +16,7 @@ function MyApp({ Component, pageProps }: AppProps): JSX.Element {
        />
      </Head>
      <div>
-        <main>
-          <Component {...pageProps} />
-        </main>
+        <Component {...pageProps} />
      </div>
    </>
  )
--- a/packages/www/pages/_document.tsx
+++ b/packages/www/pages/_document.tsx
@ -0,0 +1,76 @@
+import NextDocument, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
+import { getCssString } from 'styles'
+import { GA_TRACKING_ID } from '-utils/gtag'
+
+class MyDocument extends NextDocument {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await NextDocument.getInitialProps(ctx)
+
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssString() }} />
+        </>
+      ),
+    }
+  }
+
+  render(): JSX.Element {
+    const APP_NAME = 'tldraw'
+    const APP_DESCRIPTION = 'A tiny little drawing app.'
+    const APP_URL = 'https://tldraw.com'
+
+    return (
+      <Html lang="en">
+        <Head>
+          <meta name="application-name" content={APP_NAME} />
+          <meta name="apple-mobile-web-app-capable" content="yes" />
+          <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+          <meta name="apple-mobile-web-app-title" content={APP_NAME} />
+          <meta name="description" content={APP_DESCRIPTION} />
+          <meta name="format-detection" content="telephone=no" />
+          <meta name="mobile-web-app-capable" content="yes" />
+          <meta name="theme-color" content="#fafafa" />
+
+          <meta name="twitter:card" content="summary" />
+          <meta name="twitter:url" content={APP_URL} />
+          <meta name="twitter:title" content={APP_NAME} />
+          <meta name="twitter:description" content={APP_DESCRIPTION} />
+          <meta name="twitter:creator" content="@steveruizok" />
+
+          <meta property="og:type" content="website" />
+          <meta property="og:title" content={APP_NAME} />
+          <meta property="og:description" content={APP_DESCRIPTION} />
+          <meta property="og:site_name" content={APP_NAME} />
+          <meta property="og:url" content={APP_URL} />
+
+          <link rel="manifest" href="/manifest.json" />
+          <link rel="shortcut icon" href="/favicon.ico" />
+          <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
+
+          <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', '${GA_TRACKING_ID}', {
+                page_path: window.location.pathname,
+              });
+          `,
+            }}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
--- a/packages/www/pages/api/auth/[...nextauth].ts
+++ b/packages/www/pages/api/auth/[...nextauth].ts
@ -0,0 +1,57 @@
+import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
+import NextAuth from 'next-auth'
+import Providers from 'next-auth/providers'
+
+export default function Auth(
+  req: NextApiRequest,
+  res: NextApiResponse
+): ReturnType<NextApiHandler> {
+  return NextAuth(req, res, {
+    providers: [
+      Providers.GitHub({
+        clientId: process.env.GITHUB_ID,
+        clientSecret: process.env.GITHUB_SECRET,
+        scope: 'read:user',
+      }),
+    ],
+    callbacks: {
+      async redirect(url, baseUrl) {
+        return baseUrl
+      },
+      async signIn(user, account, profile: any) {
+        const canLogin = await isSponsoringMe(profile?.login)
+
+        if (canLogin) {
+          return canLogin
+        } else {
+          return '/sponsorware'
+        }
+      },
+    },
+  })
+}
+
+const whitelist = ['steveruizok']
+
+async function isSponsoringMe(login: string) {
+  if (whitelist.includes(login)) return true
+
+  const res = await fetch('https://api.github.com/graphql', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: 'bearer ' + process.env.GITHUB_API_SECRET,
+    },
+    body: JSON.stringify({
+      query: `
+        query { 
+          user(login: "steveruizok") { 
+            isSponsoredBy(accountLogin: "${login}") 
+          } 
+        }
+      `,
+    }),
+  }).then((res) => res.json())
+
+  return res?.data?.user?.isSponsoredBy
+}
--- a/packages/www/pages/index.tsx
+++ b/packages/www/pages/index.tsx
@ -1,13 +1,35 @@
-import * as React from 'react'
+import Head from 'next/head'
 import dynamic from 'next/dynamic'
-const Editor = dynamic(() => import('../components/editor'), { ssr: false })
+import type { GetServerSideProps } from 'next'
+import { getSession } from 'next-auth/client'

-export function Index(): JSX.Element {
+const Editor = dynamic(() => import('components/editor'), { ssr: false })
+
+export default function Home(): JSX.Element {
  return (
-    <div>
-      <Editor />
-    </div>
+    <>
+      <Head>
+        <title>tldraw</title>
+      </Head>
+      <div style={{ display: 'absolute', zIndex: 1 }}>
+        <Editor />
+      </div>
+      <button style={{ display: 'absolute', zIndex: 9999999 }}>Sign Out</button>
+    </>
  )
 }

-export default Index
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = await getSession(context)
+
+  if (!session?.user && process.env.NODE_ENV !== 'development') {
+    context.res.setHeader('Location', `/sponsorware`)
+    context.res.statusCode = 307
+  }
+
+  return {
+    props: {
+      session,
+    },
+  }
+}
--- a/packages/www/pages/shhh.tsx
+++ b/packages/www/pages/shhh.tsx
@ -0,0 +1,13 @@
+import * as React from 'react'
+import dynamic from 'next/dynamic'
+const Editor = dynamic(() => import('../components/editor'), { ssr: false })
+
+export function Shhh(): JSX.Element {
+  return (
+    <div>
+      <Editor />
+    </div>
+  )
+}
+
+export default Shhh
--- a/packages/www/pages/signout.tsx
+++ b/packages/www/pages/signout.tsx
@ -0,0 +1,9 @@
+import { signOut } from 'next-auth/client'
+
+export default function SignOut(): JSX.Element {
+  return (
+    <div>
+      <button onClick={() => signOut()}>Sign Out</button>
+    </div>
+  )
+}
--- a/packages/www/pages/sponsorware.tsx
+++ b/packages/www/pages/sponsorware.tsx
@ -0,0 +1,182 @@
+import styled from '-styles'
+import { getSession, signin, signout, useSession } from 'next-auth/client'
+import type { GetServerSideProps } from 'next'
+import React from 'react'
+
+export default function Sponsorware(): JSX.Element {
+  const [session, loading] = useSession()
+
+  return (
+    <OuterContent>
+      <Content
+        size={{
+          '@sm': 'small',
+        }}
+      >
+        <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>
+        <video autoPlay muted playsInline onClick={(e) => e.currentTarget.play()}>
+          <source src="images/hello.mp4" type="video/mp4" />
+        </video>
+        <p>This project is currently: </p>
+        <ul>
+          <li>in development</li>
+          <li>only available for my sponsors</li>
+        </ul>
+        <p>
+          If you&apos;d like to try it out,{' '}
+          <a
+            href="https://github.com/sponsors/steveruizok"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            sponsor me on Github
+          </a>{' '}
+          (at any level) and sign in below.
+        </p>
+        <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&apos;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>
+    </OuterContent>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = await getSession(context)
+
+  return {
+    props: {
+      session,
+    },
+  }
+}
+
+const OuterContent = styled('div', {
+  backgroundColor: '$canvas',
+  padding: '8px 8px 64px 8px',
+  margin: '0 auto',
+  overflow: 'scroll',
+  position: 'fixed',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: '100%',
+  height: '100%',
+})
+
+const Content = styled('div', {
+  width: '720px',
+  padding: '8px 16px',
+  maxWidth: '100%',
+  backgroundColor: '$panel',
+  borderRadius: '4px',
+  boxShadow: '$12',
+  color: '$text',
+  fontSize: '$2',
+  fontFamily: '$body',
+  lineHeight: 1.5,
+
+  '& a': {
+    color: '$bounds',
+    backgroundColor: '$boundsBg',
+    padding: '2px 4px',
+    margin: '0 -3px',
+    borderRadius: '2px',
+  },
+
+  '& p': {
+    borderRadius: '8px',
+  },
+
+  '& video': {
+    maxWidth: '100%',
+    border: '1px solid $overlay',
+    borderRadius: '4px',
+    overflow: 'hidden',
+    margin: '16px 0',
+  },
+
+  '& iframe': {
+    border: 'none',
+    backgroundColor: 'none',
+    background: 'none',
+  },
+
+  variants: {
+    size: {
+      small: {
+        fontSize: '$3',
+        padding: '32px',
+      },
+    },
+  },
+})
+
+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',
+  fontSize: '$3',
+  color: '$panel',
+  border: 'none',
+  borderRadius: '4px',
+
+  variants: {
+    variant: {
+      primary: {
+        fontWeight: 'bold',
+        background: '$bounds',
+        color: '$panel',
+        boxShadow: '$4',
+      },
+      secondary: {
+        border: '1px solid $overlay',
+        background: 'transparent',
+        color: '$muted',
+      },
+    },
+  },
+})
--- a/packages/www/public/VerveineRegular.woff
+++ b/packages/www/public/VerveineRegular.woff
--- a/packages/www/public/android-chrome-192x192.png
+++ b/packages/www/public/android-chrome-192x192.png
--- a/packages/www/public/android-chrome-512x512.png
+++ b/packages/www/public/android-chrome-512x512.png
--- a/packages/www/public/android-chrome-maskable-192x192.png
+++ b/packages/www/public/android-chrome-maskable-192x192.png
--- a/packages/www/public/android-chrome-maskable-512x512.png
+++ b/packages/www/public/android-chrome-maskable-512x512.png
--- a/packages/www/public/android-chrome-maskable-beta-512x512.png
+++ b/packages/www/public/android-chrome-maskable-beta-512x512.png
--- a/packages/www/public/apple-touch-icon.png
+++ b/packages/www/public/apple-touch-icon.png
--- a/packages/www/public/favicon-16x16.png
+++ b/packages/www/public/favicon-16x16.png
--- a/packages/www/public/favicon-32x32.png
+++ b/packages/www/public/favicon-32x32.png
--- a/packages/www/public/favicon.ico
+++ b/packages/www/public/favicon.ico
--- a/packages/www/public/flat.png
+++ b/packages/www/public/flat.png
--- a/packages/www/public/icons/Redo.svg
+++ b/packages/www/public/icons/Redo.svg
@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 2.49538C12.2239 2.49538 12 2.71923 12 2.99538V5.49559H9.49979C9.22364 5.49559 8.99979 5.71945 8.99979 5.99559C8.99979 6.27173 9.22364 6.49559 9.49979 6.49559H12.5C12.7761 6.49559 13 6.27173 13 5.99559V2.99538C13 2.71923 12.7761 2.49538 12.5 2.49538Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.69698 2.04877C6.62345 1.89773 5.52991 2.09968 4.58113 2.62417C3.63236 3.14867 2.87973 3.9673 2.43667 4.95673C1.99361 5.94616 1.8841 7.05278 2.12465 8.10985C2.3652 9.16693 2.94278 10.1172 3.77036 10.8175C4.59794 11.5177 5.63069 11.9301 6.713 11.9924C7.79531 12.0547 8.86855 11.7635 9.77101 11.1628C10.6735 10.5621 11.3563 9.68441 11.7165 8.66191C11.8083 8.40146 11.6715 8.11593 11.4111 8.02417C11.1506 7.93241 10.8651 8.06916 10.7733 8.32961C10.4851 9.14762 9.93888 9.84981 9.21691 10.3304C8.49493 10.811 7.63632 11.0439 6.77046 10.994C5.9046 10.9442 5.07839 10.6143 4.41631 10.0541C3.75424 9.49386 3.29217 8.73363 3.09972 7.88796C2.90728 7.04229 2.99488 6.15698 3.34934 5.36542C3.7038 4.57387 4.30591 3.91895 5.06494 3.49935C5.82398 3.07974 6.69882 2.91819 7.55765 3.03902C8.41649 3.15985 9.21279 3.55653 9.82658 4.16928L9.83745 4.17981L12.1576 6.35996C12.3588 6.54906 12.6753 6.53921 12.8644 6.33797C13.0535 6.13673 13.0436 5.8203 12.8424 5.63121L10.5276 3.4561C9.76111 2.69329 8.76794 2.19945 7.69698 2.04877Z" fill="black"/>
+</svg>
--- a/packages/www/public/icons/Trash.svg
+++ b/packages/www/public/icons/Trash.svg
@ -0,0 +1,6 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.65555C2 4.37941 2.22386 4.15555 2.5 4.15555H12.2C12.4761 4.15555 12.7 4.37941 12.7 4.65555C12.7 4.93169 12.4761 5.15555 12.2 5.15555H2.5C2.22386 5.15555 2 4.93169 2 4.65555Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.27208 3C6.11885 3 5.97189 3.06087 5.86353 3.16923C5.75518 3.27758 5.6943 3.42454 5.6943 3.57778V4.15556H9.00542V3.57778C9.00542 3.42454 8.94454 3.27758 8.83619 3.16923C8.72783 3.06087 8.58087 3 8.42764 3H6.27208ZM10.0054 4.15556V3.57778C10.0054 3.15933 9.83919 2.75801 9.54329 2.46212C9.2474 2.16623 8.84609 2 8.42764 2H6.27208C5.85363 2 5.45232 2.16623 5.15642 2.46212C4.86053 2.75801 4.6943 3.15933 4.6943 3.57778V4.15556H3.57764C3.30149 4.15556 3.07764 4.37941 3.07764 4.65556V12.2C3.07764 12.6185 3.24387 13.0198 3.53976 13.3157C3.83565 13.6115 4.23696 13.7778 4.65541 13.7778H10.0443C10.4628 13.7778 10.8641 13.6115 11.16 13.3157C11.4559 13.0198 11.6221 12.6185 11.6221 12.2V4.65556C11.6221 4.37941 11.3982 4.15556 11.1221 4.15556H10.0054ZM4.07764 5.15556V12.2C4.07764 12.3532 4.13851 12.5002 4.24686 12.6086C4.35522 12.7169 4.50218 12.7778 4.65541 12.7778H10.0443C10.1975 12.7778 10.3445 12.7169 10.4529 12.6086C10.5612 12.5002 10.6221 12.3532 10.6221 12.2V5.15556H4.07764Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.27246 6.85001C6.5486 6.85001 6.77246 7.07386 6.77246 7.35001V10.5833C6.77246 10.8595 6.5486 11.0833 6.27246 11.0833C5.99632 11.0833 5.77246 10.8595 5.77246 10.5833V7.35001C5.77246 7.07386 5.99632 6.85001 6.27246 6.85001Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.42773 6.85001C8.70388 6.85001 8.92773 7.07386 8.92773 7.35001V10.5833C8.92773 10.8595 8.70388 11.0833 8.42773 11.0833C8.15159 11.0833 7.92773 10.8595 7.92773 10.5833V7.35001C7.92773 7.07386 8.15159 6.85001 8.42773 6.85001Z" fill="black"/>
+</svg>
--- a/packages/www/public/icons/Undo.svg
+++ b/packages/www/public/icons/Undo.svg
@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 2.49538C2.77614 2.49538 3 2.71923 3 2.99538V5.49559H5.50021C5.77636 5.49559 6.00021 5.71945 6.00021 5.99559C6.00021 6.27173 5.77636 6.49559 5.50021 6.49559H2.5C2.22386 6.49559 2 6.27173 2 5.99559V2.99538C2 2.71923 2.22386 2.49538 2.5 2.49538Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.30302 2.04877C8.37655 1.89773 9.47009 2.09968 10.4189 2.62417C11.3676 3.14867 12.1203 3.9673 12.5633 4.95673C13.0064 5.94616 13.1159 7.05278 12.8753 8.10985C12.6348 9.16693 12.0572 10.1172 11.2296 10.8175C10.4021 11.5177 9.36931 11.9301 8.287 11.9924C7.20469 12.0547 6.13145 11.7635 5.22899 11.1628C4.32653 10.5621 3.64374 9.68441 3.2835 8.66191C3.19174 8.40146 3.32849 8.11593 3.58894 8.02417C3.84939 7.93241 4.13492 8.06916 4.22668 8.32961C4.51488 9.14762 5.06112 9.84981 5.78309 10.3304C6.50507 10.811 7.36368 11.0439 8.22954 10.994C9.0954 10.9442 9.92161 10.6143 10.5837 10.0541C11.2458 9.49386 11.7078 8.73363 11.9003 7.88796C12.0927 7.04229 12.0051 6.15698 11.6507 5.36542C11.2962 4.57387 10.6941 3.91895 9.93506 3.49935C9.17602 3.07974 8.30118 2.91819 7.44235 3.03902C6.58351 3.15985 5.78721 3.55653 5.17342 4.16928L5.16255 4.17981L2.84239 6.35996C2.64115 6.54906 2.32472 6.53921 2.13562 6.33797C1.94653 6.13673 1.95637 5.8203 2.15761 5.63121L4.47241 3.4561C5.23889 2.69329 6.23206 2.19945 7.30302 2.04877Z" fill="black"/>
+</svg>
--- a/packages/www/public/icons/grab.svg
+++ b/packages/www/public/icons/grab.svg
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="openhand">
+            <g id="bg-copy" fill="#FFFFFF" opacity="1">
+                <rect id="bg" x="0" y="0" width="35" height="35"></rect>
+            </g>
+            <path d="M13.5557,17.5742 C13.4577,17.1992 13.3597,16.7272 13.1497,16.0222 C12.9827,15.4652 12.8077,15.1632 12.6797,14.7892 C12.5247,14.3342 12.3767,14.0682 12.1837,13.6082 C12.0447,13.2792 11.8197,12.5602 11.7267,12.1682 C11.6077,11.6592 11.7597,11.2442 11.9707,10.9622 C12.2237,10.6232 12.9327,10.4722 13.3277,10.6112 C13.6987,10.7412 14.0717,11.1232 14.2437,11.3992 C14.5317,11.8592 14.6007,12.0312 14.9607,12.9412 C15.3537,13.9332 15.5247,14.8592 15.5717,15.1722 L15.6567,15.6242 C15.6557,15.5842 15.6137,14.5022 15.6127,14.4622 C15.5777,13.4332 15.5527,12.6392 15.5747,11.5232 C15.5767,11.3972 15.6387,10.9362 15.6587,10.8082 C15.7367,10.3082 15.9637,10.0082 16.3317,9.8292 C16.7437,9.6282 17.2577,9.6142 17.7327,9.8122 C18.1557,9.9852 18.3587,10.3622 18.4197,10.8342 C18.4337,10.9432 18.5137,11.8212 18.5127,11.9412 C18.4997,12.9662 18.5187,13.5822 18.5277,14.1152 C18.5317,14.3462 18.5307,15.7402 18.5447,15.5842 C18.6057,14.9282 18.6387,12.3952 18.8887,11.6422 C19.0327,11.2092 19.2937,10.8962 19.6827,10.7132 C20.1137,10.5102 20.7957,10.6432 21.0867,10.9562 C21.3717,11.2612 21.5327,11.6482 21.5687,12.1092 C21.6007,12.5142 21.5497,13.0062 21.5487,13.3542 C21.5487,14.2212 21.5277,14.6782 21.5117,15.4752 C21.5107,15.5132 21.4967,15.7732 21.5347,15.6572 C21.6287,15.3772 21.7227,15.1152 21.8007,14.9122 C21.8497,14.7872 22.0417,14.2982 22.1597,14.0532 C22.2737,13.8192 22.3707,13.6842 22.5747,13.3652 C22.7747,13.0522 22.9897,12.9172 23.2427,12.8042 C23.7827,12.5692 24.3517,12.9162 24.5437,13.3952 C24.6297,13.6102 24.5527,14.1082 24.5157,14.5002 C24.4547,15.1472 24.2617,15.8062 24.1637,16.1482 C24.0357,16.5952 23.8897,17.3832 23.8237,17.7492 C23.7517,18.1432 23.5897,19.1312 23.4647,19.5692 C23.3787,19.8702 23.0937,20.5472 22.8127,20.9532 C22.8127,20.9532 21.7387,22.2032 21.6207,22.7652 C21.5037,23.3282 21.5427,23.3322 21.5197,23.7302 C21.4957,24.1292 21.6407,24.6532 21.6407,24.6532 C21.6407,24.6532 20.8387,24.7572 20.4067,24.6872 C20.0157,24.6252 19.5317,23.8462 19.4067,23.6092 C19.2347,23.2812 18.8677,23.3442 18.7247,23.5862 C18.4997,23.9692 18.0157,24.6562 17.6737,24.6992 C17.0057,24.7832 15.6197,24.7292 14.5347,24.7192 C14.5347,24.7192 14.7197,23.7082 14.3077,23.3612 C14.0027,23.1012 13.4777,22.5772 13.1637,22.3012 L12.3317,21.3802 C12.0477,21.0202 11.7027,20.2872 11.0887,19.3952 C10.7407,18.8912 10.0617,18.3102 9.8047,17.8162 C9.5817,17.3912 9.4737,16.8622 9.6147,16.4912 C9.8397,15.8972 10.2897,15.5942 10.9767,15.6592 C11.4957,15.7092 11.8247,15.8652 12.2147,16.1962 C12.4397,16.3862 12.7877,16.7302 12.9647,16.9442 C13.1277,17.1392 13.1677,17.2202 13.3417,17.4532 C13.5717,17.7602 13.6437,17.9122 13.5557,17.5742" id="hand" fill="#FFFFFF"></path>
+            <path d="M13.5557,17.5742 C13.4577,17.1992 13.3597,16.7272 13.1497,16.0222 C12.9827,15.4652 12.8077,15.1632 12.6797,14.7892 C12.5247,14.3342 12.3767,14.0682 12.1837,13.6082 C12.0447,13.2792 11.8197,12.5602 11.7267,12.1682 C11.6077,11.6592 11.7597,11.2442 11.9707,10.9622 C12.2237,10.6232 12.9327,10.4722 13.3277,10.6112 C13.6987,10.7412 14.0717,11.1232 14.2437,11.3992 C14.5317,11.8592 14.6007,12.0312 14.9607,12.9412 C15.3537,13.9332 15.5247,14.8592 15.5717,15.1722 L15.6567,15.6242 C15.6557,15.5842 15.6137,14.5022 15.6127,14.4622 C15.5777,13.4332 15.5527,12.6392 15.5747,11.5232 C15.5767,11.3972 15.6387,10.9362 15.6587,10.8082 C15.7367,10.3082 15.9637,10.0082 16.3317,9.8292 C16.7437,9.6282 17.2577,9.6142 17.7327,9.8122 C18.1557,9.9852 18.3587,10.3622 18.4197,10.8342 C18.4337,10.9432 18.5137,11.8212 18.5127,11.9412 C18.4997,12.9662 18.5187,13.5822 18.5277,14.1152 C18.5317,14.3462 18.5307,15.7402 18.5447,15.5842 C18.6057,14.9282 18.6387,12.3952 18.8887,11.6422 C19.0327,11.2092 19.2937,10.8962 19.6827,10.7132 C20.1137,10.5102 20.7957,10.6432 21.0867,10.9562 C21.3717,11.2612 21.5327,11.6482 21.5687,12.1092 C21.6007,12.5142 21.5497,13.0062 21.5487,13.3542 C21.5487,14.2212 21.5277,14.6782 21.5117,15.4752 C21.5107,15.5132 21.4967,15.7732 21.5347,15.6572 C21.6287,15.3772 21.7227,15.1152 21.8007,14.9122 C21.8497,14.7872 22.0417,14.2982 22.1597,14.0532 C22.2737,13.8192 22.3707,13.6842 22.5747,13.3652 C22.7747,13.0522 22.9897,12.9172 23.2427,12.8042 C23.7827,12.5692 24.3517,12.9162 24.5437,13.3952 C24.6297,13.6102 24.5527,14.1082 24.5157,14.5002 C24.4547,15.1472 24.2617,15.8062 24.1637,16.1482 C24.0357,16.5952 23.8897,17.3832 23.8237,17.7492 C23.7517,18.1432 23.5897,19.1312 23.4647,19.5692 C23.3787,19.8702 23.0937,20.5472 22.8127,20.9532 C22.8127,20.9532 21.7387,22.2032 21.6207,22.7652 C21.5037,23.3282 21.5427,23.3322 21.5197,23.7302 C21.4957,24.1292 21.6407,24.6532 21.6407,24.6532 C21.6407,24.6532 20.8387,24.7572 20.4067,24.6872 C20.0157,24.6252 19.5317,23.8462 19.4067,23.6092 C19.2347,23.2812 18.8677,23.3442 18.7247,23.5862 C18.4997,23.9692 18.0157,24.6562 17.6737,24.6992 C17.0057,24.7832 15.6197,24.7292 14.5347,24.7192 C14.5347,24.7192 14.7197,23.7082 14.3077,23.3612 C14.0027,23.1012 13.4777,22.5772 13.1637,22.3012 L12.3317,21.3802 C12.0477,21.0202 11.7027,20.2872 11.0887,19.3952 C10.7407,18.8912 10.0617,18.3102 9.8047,17.8162 C9.5817,17.3912 9.4737,16.8622 9.6147,16.4912 C9.8397,15.8972 10.2897,15.5942 10.9767,15.6592 C11.4957,15.7092 11.8247,15.8652 12.2147,16.1962 C12.4397,16.3862 12.7877,16.7302 12.9647,16.9442 C13.1277,17.1392 13.1677,17.2202 13.3417,17.4532 C13.5717,17.7602 13.6437,17.9122 13.5557,17.5742" id="hand-border" stroke="#000000" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M20.5664,21.7344 L20.5664,18.2754" id="line3" stroke="#000000" stroke-width="0.75" stroke-linecap="round"></path>
+            <path d="M18.5508,21.7461 L18.5348,18.2731" id="line2" stroke="#000000" stroke-width="0.75" stroke-linecap="round"></path>
+            <path d="M16.5547,18.3047 L16.5757,21.7307" id="line1" stroke="#000000" stroke-width="0.75" stroke-linecap="round"></path>
+        </g>
+    </g>
+</svg>
--- a/packages/www/public/icons/pointer.svg
+++ b/packages/www/public/icons/pointer.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="pointer">
+            <g id="bg" fill="#FFFFFF" opacity="0.00999999978">
+                <rect x="0" y="0" width="35" height="35"></rect>
+            </g>
+            <path d="M12,24.4219 L12,8.4069 L23.591,20.0259 L16.81,20.0259 L16.399,20.1499 L12,24.4219 Z" id="point-border" fill="#FFFFFF"></path>
+            <path d="M21.0845,25.0962 L17.4795,26.6312 L12.7975,15.5422 L16.4835,13.9892 L21.0845,25.0962 Z" id="stem-border" fill="#FFFFFF"></path>
+            <path d="M19.751,24.4155 L17.907,25.1895 L14.807,17.8155 L16.648,17.0405 L19.751,24.4155 Z" id="stem" fill="#000000"></path>
+            <path d="M13,10.814 L13,22.002 L15.969,19.136 L16.397,18.997 L21.165,18.997 L13,10.814 Z" id="point" fill="#000000"></path>
+        </g>
+    </g>
+</svg>
--- a/packages/www/public/icons/resize.svg
+++ b/packages/www/public/icons/resize.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="resizenortheastsouthwest">
+            <g id="bg-copy" fill="#FFFFFF" opacity="1">
+                <rect id="bg" x="0" y="0" width="35" height="35"></rect>
+            </g>
+            <path d="M19.7432,17.0869 L15.6712,21.1549 L18.5002,23.9829 L10.0272,23.9699 L10.0142,15.4999 L12.8552,18.3419 L16.9302,14.2739 L18.3442,12.8589 L15.5002,10.0169 L23.9862,10.0169 L23.9862,18.5009 L21.1562,15.6739 L19.7432,17.0869 Z" id="resize-border" fill="#FFFFFF"></path>
+            <path d="M18.6826,16.7334 L14.2556,21.1574 L16.0836,22.9854 L11.0276,22.9694 L11.0136,17.9154 L12.8556,19.7564 L17.2836,15.3344 L19.7576,12.8594 L17.9136,11.0164 L22.9866,11.0164 L22.9866,16.0874 L21.1566,14.2594 L18.6826,16.7334 Z" id="resize" fill="#000000"></path>
+        </g>
+    </g>
+</svg>
--- a/packages/www/public/images/hello.mp4
+++ b/packages/www/public/images/hello.mp4
--- a/packages/www/public/sw.js
+++ b/packages/www/public/sw.js
--- a/packages/www/public/sw.js.map
+++ b/packages/www/public/sw.js.map
--- a/packages/www/public/workbox-e9cae24d.js
+++ b/packages/www/public/workbox-e9cae24d.js
--- a/packages/www/public/workbox-e9cae24d.js.map
+++ b/packages/www/public/workbox-e9cae24d.js.map
--- a/packages/www/public/worker-9zorZIgg-EzXvsnHBrTO_.js
+++ b/packages/www/public/worker-9zorZIgg-EzXvsnHBrTO_.js
@ -0,0 +1 @@
+self.__WB_DISABLE_DEV_LOGS=!0;
--- a/packages/www/tsconfig.json
+++ b/packages/www/tsconfig.json
@ -1,28 +1,18 @@
 {
  "extends": "../../tsconfig.base.json",
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/*.test.ts",
-    "**/*.spec.ts",
-    "dist"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.spec.ts", "dist"],
  "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "rootDir": ".",
+    "baseUrl": ".",
    "outDir": "./dist/types",
-    "baseUrl": "src",
    "allowJs": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "paths": {
+      "-*": ["./*"]
+    }
  }
 }
--- a/packages/www/utils/sentry.ts
+++ b/packages/www/utils/sentry.ts
@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import * as Sentry from '@sentry/node'
+import { RewriteFrames } from '@sentry/integrations'
+
+export function init(): void {
+  if (!process.env.NEXT_PUBLIC_SENTRY_DSN) return
+
+  const integrations = []
+
+  if (process.env.NEXT_IS_SERVER === 'true' && process.env.NEXT_PUBLIC_SENTRY_SERVER_ROOT_DIR) {
+    // For Node.js, rewrite Error.stack to use relative paths, so that source
+    // maps starting with ~/_next map to files in Error.stack with path
+    // app:///_next
+    integrations.push(
+      new RewriteFrames({
+        iteratee: (frame) => {
+          frame.filename = frame.filename?.replace(
+            process.env.NEXT_PUBLIC_SENTRY_SERVER_ROOT_DIR!,
+            'app:///'
+          )
+          frame.filename = frame.filename?.replace('.next', '_next')
+          return frame
+        },
+      })
+    )
+  }
+
+  Sentry.init({
+    enabled: process.env.NODE_ENV === 'production',
+    integrations,
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    release: process.env.NEXT_PUBLIC_COMMIT_SHA,
+  })
+}
--- a/packages/www/worker/index.js
+++ b/packages/www/worker/index.js
@ -0,0 +1 @@
+self.__WB_DISABLE_DEV_LOGS = true
--- a/yarn.lock
+++ b/yarn.lock