111 |
113 | ) : (
114 | <>
115 |
128 |
156 |
173 |
181 | {isEditing ? 'Click the canvas to exit' : 'Double click to interact'}
182 |
183 |
184 |
185 | )}
186 |
41 |
68 | )
69 | }
70 |
--------------------------------------------------------------------------------
/app/components/ExportButton.tsx:
--------------------------------------------------------------------------------
1 | import { useMakeReal } from '../hooks/useMakeReal'
2 |
3 | export function ExportButton() {
4 | const makeReal = useMakeReal()
5 |
6 | return (
7 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/app/components/LinkComponent.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { useEffect } from 'react'
3 |
4 | export function LinkComponent(props) {
5 | useEffect(() => {
6 | //listen for screenshot messages
7 | if (typeof window !== 'undefined') {
8 | const windowListener = (event: MessageEvent) => {
9 | if (event.data.action === 'take-screenshot') {
10 | const iframe2 = document.getElementById(
11 | `iframe-2-shape:${props.linkId}`
12 | ) as HTMLIFrameElement
13 | iframe2.contentWindow.postMessage(
14 | { action: 'take-screenshot', shapeid: `shape:${props.linkId}` },
15 | '*'
16 | )
17 | }
18 | }
19 | window.addEventListener('message', windowListener)
20 |
21 | return () => {
22 | window.removeEventListener('message', windowListener)
23 | }
24 | }
25 | }, [])
26 |
27 | return (
28 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/app/components/LinkLockupLink.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { track } from '@vercel/analytics'
4 |
5 | export function LinkLockupLink() {
6 | return (
7 | track('lockup_clicked', { timestamp: Date.now() })}
11 | >
12 |
42 | {!apiKey ? (
43 |
49 | ) : (
50 |
67 |
51 |
52 | OpenRouter Connected
53 |
54 |
60 |
61 | )}
62 |
63 |
66 | 
13 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/app/components/LockupLink.tsx:
--------------------------------------------------------------------------------
1 | import { useBreakpoint, useEditor, useValue } from '@tldraw/tldraw'
2 | import { track } from '@vercel/analytics/react'
3 |
4 | export function LockupLink() {
5 | const breakpoint = useBreakpoint()
6 | const editor = useEditor()
7 | const isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor])
8 |
9 | if (isFocusMode) return null
10 |
11 | return (
12 | track('lockup_clicked', { timestamp: Date.now() })}
16 | >
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/app/components/UrlLinkButton.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Icon, stopEventPropagation, useToasts } from '@tldraw/tldraw'
4 |
5 | export function UrlLinkButton({ uploadUrl }: { uploadUrl: string }) {
6 | const toast = useToasts()
7 |
8 | return (
9 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | html,
6 | body {
7 | overscroll-behavior-x: none;
8 | }
9 |
10 | .tlui-help-menu {
11 | display: none !important;
12 | }
13 |
14 | .tlui-debug-panel {
15 | display: none !important;
16 | }
17 |
18 | .tldraw__editor {
19 | position: fixed;
20 | inset: 0px;
21 | overflow: hidden;
22 | }
23 |
24 | .your-own-api-key {
25 | position: absolute;
26 | bottom: 64px;
27 | right: 0px;
28 | width: 100%;
29 | display: flex;
30 | flex-direction: column;
31 | align-items: center;
32 | justify-content: center;
33 | z-index: var(--layer-panels);
34 | color: var(--color-text-0);
35 | pointer-events: none;
36 | }
37 |
38 | .your-own-api-key__inner {
39 | display: flex;
40 | font-size: 12px;
41 | font-family: Inter, sans-serif;
42 | flex-direction: row;
43 | max-width: 308px;
44 | width: 100%;
45 | gap: 4px;
46 | background-color: var(--color-low);
47 | border-radius: 8px;
48 | padding: 6px;
49 | pointer-events: all;
50 | border: 4px solid var(--color-background);
51 | }
52 |
53 | .your-own-api-key__mobile {
54 | bottom: 108px;
55 | }
56 | .your-own-api-key__mobile input {
57 | bottom: 108px;
58 | font-size: 16px !important;
59 | pointer-events: all;
60 | }
61 |
62 | .your-own-api-key input {
63 | padding: 6px 12px;
64 | border-radius: 4px;
65 | color: transparent;
66 | background: var(--color-panel);
67 | width: 100%;
68 | height: 32px;
69 | }
70 |
71 | .input__wrapper {
72 | position: relative;
73 | flex-grow: 2;
74 | }
75 |
76 | .input__wrapper:not(:focus-within)::after {
77 | content: 'Your OpenAI API Key (risky but cool)';
78 | display: block;
79 | position: absolute;
80 | inset: 0px;
81 | display: flex;
82 | align-items: center;
83 | padding: 0px 12px;
84 | z-index: 999999999;
85 | background-color: none;
86 | font-size: 12px;
87 | font-family: Inter, sans-serif;
88 | opacity: 1;
89 | }
90 |
91 | .input__wrapper::after {
92 | pointer-events: none;
93 | }
94 |
95 | .your-own-api-key input:focus {
96 | color: var(--color-text-0);
97 | }
98 |
99 | .lockup__link {
100 | position: absolute;
101 | z-index: var(--layer-panels);
102 | bottom: 0px;
103 | right: 0px;
104 | }
105 |
106 | .lockup__link__mobile {
107 | bottom: 60px;
108 | }
109 |
110 | .question__button {
111 | all: unset;
112 | flex-shrink: 0;
113 | width: 32px;
114 | height: 32px;
115 | background-color: none;
116 | border-radius: 4px;
117 | display: flex;
118 | align-items: center;
119 | justify-content: center;
120 | cursor: pointer;
121 | }
122 |
123 | .lockup__link img {
124 | height: 40px;
125 | padding: 8px;
126 | }
127 |
--------------------------------------------------------------------------------
/app/hooks/useMakeReal.ts:
--------------------------------------------------------------------------------
1 | import { useEditor, useToasts } from '@tldraw/tldraw'
2 | import { useCallback, useEffect } from 'react'
3 | import { makeReal } from '../lib/makeReal'
4 | import { track } from '@vercel/analytics/react'
5 | import { useOpenRouter } from './useOpenRouter'
6 |
7 | export function useMakeReal() {
8 | const editor = useEditor()
9 | const toast = useToasts()
10 | const { apiKey } = useOpenRouter()
11 |
12 | return useCallback(async () => {
13 | track('make_real', { timestamp: Date.now() })
14 |
15 | try {
16 | await makeReal(editor, apiKey)
17 | } catch (e: any) {
18 | track('no_luck', { timestamp: Date.now() })
19 |
20 | console.error(e)
21 | toast.addToast({
22 | title: 'Something went wrong',
23 | description: `${e.message.slice(0, 100)}`,
24 | actions: [
25 | {
26 | type: 'primary',
27 | label: 'Learn more',
28 | onClick: () => {
29 | // open a new tab with the url...
30 | window.open('https://discord.gg/QHqp9f7ejq', '_blank')
31 | },
32 | },
33 | ],
34 | })
35 | }
36 | }, [apiKey, editor, toast])
37 | }
38 |
--------------------------------------------------------------------------------
/app/hooks/useOpenRouter.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 |
3 | const LOCAL_STORAGE_KEY = 'make-real:openrouter-api-key'
4 |
5 | export function useOpenRouter() {
6 | const [apiKey, setApiKey] = useState