-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
72 lines (67 loc) · 2.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>AppExplorer</title>
<script src="https://miro.com/app/static/sdk/v2/miro.js"></script>
<link rel="stylesheet" href="index.css" />
<link rel="icon" type="image/svg+xml" href="/AppExplorer.svg" />
</head>
<body>
<script type="module">
import { attachToSocket } from "./src/miro.ts";
attachToSocket();
</script>
<div class="container">
<h1>AppExplorer Miro Extension</h1>
<div class="content">
<h2>Getting Started</h2>
<ol>
<li>
<input type="checkbox" checked disabled />Launch local webserver for
Miro on <a href="http://localhost:50505">http://localhost:50505</a>
</li>
<li>
<input type="checkbox" disabled />
<a
href="https://miro.com/oauth/authorize/?response_type=code&client_id=3458764531189693223&redirect_uri=%2Fconfirm-app-install%2F"
>
Authorize AppExplorer
</a>
for your Miro team
</li>
<li>
<input type="checkbox" disabled />Create a new Miro board in your
account
</li>
<li>
<input type="checkbox" disabled />Add AppExplorer to the board.
<div>
<strong>Tip:</strong> At the moment, the AppExplorer icon only
shows up on boards that have NOT been authorized. Once you
authorize it, the icon goes away and it just loads this page in
the background.
</div>
</li>
<li>
<input type="checkbox" disabled />From VSCode run "AppExplorer:
Create Card" command
</li>
</ol>
</div>
<div class="getting-started">
<h2>Miro Extension</h2>
<p>
When you have a Miro board open, it uses an iframe to load this page
you're looking at. Its main purpose is to coordinate communication
between Miro and the local webserver running in VSCode.
</p>
<p>
I added instructions so that if you open this page to verify the
webserver is running, you can also see the next steps to get started
with the extension.
</p>
</div>
</div>
</body>
</html>