Skip to content

Commit 24d0f9f

Browse files
aykevlaykevl
committed
Integrated playground
Instead of having a separate play.tinygo.org, use tinygo.org/play that actually integrates into the Docsy theme.
1 parent 3b97c18 commit 24d0f9f

File tree

7 files changed

+437
-4
lines changed

7 files changed

+437
-4
lines changed

‎config/development/server.toml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Internal redirect for playground share URLs.
2+
[[redirects]]
3+
force = false
4+
from = "/play/s/*"
5+
to = "/play/"
6+
status = 200

‎content/_index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ Ready to get started? [Click here](getting-started).
8383
</div>
8484
<div class="tab-content">
8585
<div class="tab-pane active terminal-box" id="simulator-panel-terminal" role="tabpanel" aria-labelledby="simulator-tab-terminal">
86-
<textarea class="terminal" readonly tabindex="0"></textarea>
86+
<div class="terminal" tabindex="0"></div>
8787
</div>
8888
<div class="tab-pane panel-properties content" id="simulator-panel-properties" role="tabpanel" aria-labelledby="simulator-properties-tab">
8989
<div class="content" tabindex="0"></div>
@@ -105,7 +105,7 @@ Ready to get started? [Click here](getting-started).
105105
{{% /blocks/section %}}
106106

107107
{{< blocks/section color="primary" type="row" >}}
108-
{{% blocks/feature icon="fa-lightbulb" title="TinyGo Playground" url="https://play.tinygo.org/" %}}
108+
{{% blocks/feature icon="fa-lightbulb" title="TinyGo Playground" url="/play/" %}}
109109
Try TinyGo online
110110
{{% /blocks/feature %}}
111111

‎content/play/_index.md‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
---
2+
title: Playground
3+
description: "TinyGo playground. Run Go code directly in the browser and simulate some popular development boards."
4+
---
5+
6+
<link rel="stylesheet" href="/playground/simulator.css">
7+
<link rel="stylesheet" href="/playground/simulator-bootstrap.css">
8+
<script type="module" src="/playground-play.js"></script>
9+
<style>
10+
#playground {
11+
margin-top: 1.5rem;
12+
margin-bottom: 0.75rem;
13+
display: flex;
14+
flex-direction: column;
15+
}
16+
#playground-header {
17+
display: flex;
18+
align-items: center;
19+
justify-content: space-between;
20+
flex-wrap: wrap;
21+
}
22+
#target .project-name .buttons {
23+
margin-left: 16px;
24+
}
25+
.playground-editor {
26+
min-height: 60vh;
27+
flex: 1 0 0;
28+
resize: none;
29+
}
30+
.playground-editor:not([style*="height"]) {
31+
max-height: initial;
32+
}
33+
.playground-editor .cm-scroller {
34+
flex: 1 0 0;
35+
}
36+
#middle {
37+
display: flex;
38+
flex-grow: 1;
39+
flex-direction: column;
40+
gap: 0.75rem;
41+
}
42+
#output {
43+
flex: 1 0 0;
44+
}
45+
@media (min-width: 768px) {
46+
#playground {
47+
margin-top: 5rem;
48+
/* 100% - header - padding bottom */
49+
height: calc(100vh - 5rem - 0.75rem);
50+
}
51+
#middle {
52+
flex-direction: row;
53+
}
54+
.playground-editor {
55+
min-height: initial;
56+
}
57+
}
58+
</style>
59+
<div id="playground">
60+
<div id="playground-header">
61+
<h2>Playground</h2>
62+
<div>
63+
<div id="target" class="btn-group mb-2">
64+
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
65+
Console (TinyGo)
66+
</button>
67+
<div class="dropdown-menu">
68+
<a class="dropdown-item active" href>Console (TinyGo)</a>
69+
<span id="target-loading" class="dropdown-item disabled">Loading...</span>
70+
</div>
71+
</div>
72+
<button type="button" id="btn-flash" class="btn btn-secondary mb-2" disabled>Flash</button>
73+
<button type="button" id="btn-share" class="btn btn-secondary mb-2">Share</button>
74+
<button type="button" id="btn-about" class="btn btn-secondary mb-2" data-bs-toggle="modal" data-bs-target="#aboutModal">About</button>
75+
<a href="/tour/" class="btn btn-secondary mb-2">Tour</a>
76+
</div>
77+
</div>
78+
<div id="middle">
79+
<div class="playground-editor" tabindex="-1"></div>
80+
<div id="output" class="simulator inline">
81+
<div class="schematic-buttons">
82+
<button class="schematic-button-pause schematic-button" title="Pause/resume the simulation">
83+
<!-- only one of these two images is visible at a time -->
84+
<img src="/playground/resources/codicon/debug-pause.svg" class="button-img-pause"/>
85+
<img src="/playground/resources/codicon/play.svg" class="button-img-play"/>
86+
</button>
87+
</div>
88+
<svg class="schematic" tabindex="0">
89+
<g class="schematic-wrapper" style="transform: translate(50%, 50%)">
90+
<g class="schematic-parts"></g>
91+
<g class="schematic-wires"></g>
92+
</g>
93+
</svg>
94+
<div class="card-header">
95+
<ul class="nav nav-tabs card-header-tabs" role="tablist">
96+
<li class="nav-item" role="presentation">
97+
<button class="nav-link active panel-tab-terminal" id="simulator-tab-terminal" data-bs-toggle="tab" data-bs-target="#simulator-panel-terminal" type="button" role="tab" aria-controls="simulator-panel-terminal" aria-selected="true">Terminal</button>
98+
</li>
99+
<li class="nav-item" role="presentation">
100+
<button class="nav-link" id="simulator-properties-tab" data-bs-toggle="tab" data-bs-target="#simulator-panel-properties" type="button" role="tab" aria-controls="simulator-panel-properties" aria-selected="false">Properties</button>
101+
</li>
102+
<li class="nav-item" role="presentation">
103+
<button class="nav-link" id="simulator-add-tab" data-bs-toggle="tab" data-bs-target="#simulator-panel-add" type="button" role="tab" aria-controls="simulator-panel-add" aria-selected="false">Add</button>
104+
</li>
105+
</ul>
106+
</div>
107+
<div class="tab-content">
108+
<div class="tab-pane active terminal-box" id="simulator-panel-terminal" role="tabpanel" aria-labelledby="simulator-tab-terminal">
109+
<div class="terminal" tabindex="0"></div>
110+
</div>
111+
<div class="tab-pane panel-properties content" id="simulator-panel-properties" role="tabpanel" aria-labelledby="simulator-properties-tab">
112+
<div class="content" tabindex="0"></div>
113+
</div>
114+
<div class="tab-pane" id="simulator-panel-add" role="tabpanel" aria-labelledby="simulator-add-tab" tabindex="0">
115+
<div class="panel-add">
116+
Loading...
117+
</div>
118+
</div>
119+
</div>
120+
<div class="schematic-tooltip"></div>
121+
<div class="templates d-none">
122+
<button class="panel-add-button btn btn-primary btn-sm">Add</button>
123+
<select class="panel-add-select form-select form-select-sm"></select>
124+
</div>
125+
</div>
126+
</div>
127+
<div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalTitle" aria-hidden="true">
128+
<div class="modal-dialog">
129+
<div class="modal-content">
130+
<div class="modal-header">
131+
<h1 class="modal-title fs-5" id="exampleModalLabel">About TinyGo Playground</h1>
132+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
133+
</div>
134+
<div class="modal-body">
135+
<p>
136+
The TinyGo Playground is a service provided by the TinyGo project
137+
to compile and run small code samples directly in the browser. It
138+
has been heavily inspired by the <a
139+
href="https://play.golang.org/">Go Playground</a> but differs in
140+
some significant ways:
141+
</p>
142+
<ul>
143+
<li>
144+
We use the <a href="https://github.com/tinygo-org/tinygo">TinyGo compiler</a> in addition to the main Go compiler.
145+
</li>
146+
<li>
147+
Instead of running code on the server, code is compiled to <a
148+
href="https://webassembly.org/">WebAssembly</a> and runs
149+
directly in the browser.
150+
</li>
151+
<li>
152+
It can simulate a few popular boards directly in the browser.
153+
However, please note that this is a simulation which can differ
154+
in behavior from how the program will run on an actual device.
155+
</li>
156+
<li>
157+
Boards that support drag-and-drop programming can be flashed
158+
directly using the Flash button.
159+
</li>
160+
</ul>
161+
<p>
162+
Like the Go Playground, it's possible to share code
163+
snippets. These code snippets are stored on Google's
164+
servers in the US and can be viewed by some TinyGo
165+
members. While we'll try to make sure the shared data
166+
can only be accessed by those who have the URL, we
167+
cannot guarantee security. If you accidentally shared
168+
something that should not be shared (for example, a
169+
password or personally identifying information), you can
170+
contact us at [TODO] with the URL so we can remove it.
171+
</p>
172+
<p>
173+
Source code of the playground: <a
174+
href="https://github.com/tinygo-org/playground">github.com/tinygo-org/playground</a>.
175+
</p>
176+
</div>
177+
<div class="modal-footer">
178+
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
179+
</div>
180+
</div>
181+
</div>
182+
</div>
183+
<div class="modal modal-lg fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
184+
<div class="modal-dialog">
185+
<div class="modal-content">
186+
<div class="modal-header">
187+
<h1 class="modal-title fs-5" id="shareModalLabel">Share</h1>
188+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
189+
</div>
190+
<div class="modal-body">
191+
<div class="input-group">
192+
<input type="text" class="form-control user-select-all" placeholder="Loading..." readonly/>
193+
<button class="btn btn-outline-secondary copy-to-clipboard" type="button" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard" data-bs-placement="bottom" disabled><span class="fa fa-clipboard"></span></button>
194+
</div>
195+
</div>
196+
</div>
197+
</div>
198+
</div>
199+
</div>

‎layouts/tour/baseof.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
</div>
7171
<div class="tab-content">
7272
<div class="tab-pane active terminal-box" id="simulator-panel-terminal" role="tabpanel" aria-labelledby="simulator-tab-terminal">
73-
<textarea class="terminal" readonly tabindex="0"></textarea>
73+
<div class="terminal" tabindex="0"></div>
7474
</div>
7575
<div class="tab-pane panel-properties content" id="simulator-panel-properties" role="tabpanel" aria-labelledby="simulator-properties-tab">
7676
<div class="content" tabindex="0"></div>

‎netlify.toml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@
2121
Cross-Origin-Opener-Policy = "same-origin"
2222
Cross-Origin-Embedder-Policy = "require-corp"
2323

24+
# Internal redirect for playground share URLs.
25+
[[redirects]]
26+
force = false
27+
from = "/play/s/*"
28+
to = "/play/"
29+
status = 200
30+
2431
[[redirects]]
2532
from = "/bluetooth"
2633
to = "https://github.com/tinygo-org/bluetooth#go-bluetooth"

‎static/playground‎

0 commit comments

Comments
 (0)