diff --git a/packages/tldraw/package.json b/packages/tldraw/package.json index a6c7f1f98..2258afde7 100644 --- a/packages/tldraw/package.json +++ b/packages/tldraw/package.json @@ -59,7 +59,7 @@ "@radix-ui/react-id": "^0.0.6", "@radix-ui/react-radio-group": "^0.0.18", "@radix-ui/react-tooltip": "^0.0.20", - "@stitches/react": "^0.2.3", + "@stitches/react": "^1.0.0", "@tldraw/core": "^0.0.57", "perfect-freehand": "^0.5.3", "react-hotkeys-hook": "^3.4.0", diff --git a/packages/tldraw/src/styles/stitches.config.ts b/packages/tldraw/src/styles/stitches.config.ts index d48dfb840..c6d8f9257 100644 --- a/packages/tldraw/src/styles/stitches.config.ts +++ b/packages/tldraw/src/styles/stitches.config.ts @@ -1,6 +1,6 @@ -import { createCss, defaultThemeMap } from '@stitches/react' +import { createStitches, defaultThemeMap } from '@stitches/react' -const { styled, css, theme, getCssString } = createCss({ +const { styled, css, createTheme, getCssText } = createStitches({ themeMap: { ...defaultThemeMap, }, @@ -99,7 +99,7 @@ const { styled, css, theme, getCssString } = createCss({ }, }) -const dark = theme({ +const dark = createTheme({ colors: { brushFill: 'rgba(180, 180, 180, .05)', brushStroke: 'rgba(180, 180, 180, .25)', @@ -136,4 +136,4 @@ const dark = theme({ export default styled -export { css, getCssString, dark } +export { css, getCssText, dark } diff --git a/packages/www/components/editor.tsx b/packages/www/components/editor.tsx index fa8e129e8..73c840bda 100644 --- a/packages/www/components/editor.tsx +++ b/packages/www/components/editor.tsx @@ -1,5 +1,9 @@ import { TLDraw } from '@tldraw/tldraw' -export default function Editor() { - return +interface EditorProps { + id?: string +} + +export default function Editor({ id = 'home' }: EditorProps) { + return } diff --git a/packages/www/next.config.js b/packages/www/next.config.js index 1c2f148a1..af4b6a360 100644 --- a/packages/www/next.config.js +++ b/packages/www/next.config.js @@ -1,6 +1,14 @@ /* eslint-disable @typescript-eslint/no-var-requires */ const withTM = require('next-transpile-modules')(['@tldraw/tldraw']) +const { NODE_ENV } = process.env + +const isProduction = NODE_ENV === 'production' + module.exports = withTM({ reactStrictMode: true, + pwa: { + disable: !isProduction, + dest: 'public', + }, }) diff --git a/packages/www/package.json b/packages/www/package.json index 138340042..e2da311ef 100644 --- a/packages/www/package.json +++ b/packages/www/package.json @@ -20,7 +20,11 @@ "next": "11.1.2", "react": "17.0.2", "react-dom": "17.0.2", - "next-transpile-modules": "^8.0.0" + "next-auth": "3.29.0", + "next-transpile-modules": "^8.0.0", + "next-pwa": "^5.2.23", + "next-themes": "^0.0.15", + "@stitches/react": "^1.0.0" }, "devDependencies": { "@types/react": "^17.0.19", diff --git a/packages/www/pages/_document.tsx b/packages/www/pages/_document.tsx new file mode 100644 index 000000000..34f37c5b7 --- /dev/null +++ b/packages/www/pages/_document.tsx @@ -0,0 +1,86 @@ +import NextDocument, { Html, Head, Main, NextScript, DocumentContext } from 'next/document' +import { getCssText } from '../styles' +import { GA_TRACKING_ID } from '../utils/gtag' + +class MyDocument extends NextDocument { + static async getInitialProps(ctx: DocumentContext): Promise<{ + styles: JSX.Element + html: string + head?: JSX.Element[] + }> { + try { + const initialProps = await NextDocument.getInitialProps(ctx) + + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} +