Skip to content

Commit 75c225d

Browse files
aykevldeadprogram
aykevl
authored and
deadprogram
committed
Integrated playground
Instead of having a separate play.tinygo.org, use tinygo.org/play that actually integrates into the Docsy theme.
1 parent 251d5fb commit 75c225d

File tree

5 files changed

+391
-1
lines changed

5 files changed

+391
-1
lines changed

‎config/development/server.toml

+6
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

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ Ready to get started? [Click here](getting-started).
6060
{{% /blocks/section %}}
6161

6262
{{< blocks/section color="primary" type="row" >}}
63-
{{% blocks/feature icon="fa-lightbulb" title="TinyGo Playground" url="https://play.tinygo.org/" %}}
63+
{{% blocks/feature icon="fa-lightbulb" title="TinyGo Playground" url="/play/" %}}
6464
Try TinyGo online
6565
{{% /blocks/feature %}}
6666

‎content/play/_index.md

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
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">{{< readfile "/simulator/simulator.md" >}}</div>
81+
</div>
82+
<div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalTitle" aria-hidden="true">
83+
<div class="modal-dialog">
84+
<div class="modal-content">
85+
<div class="modal-header">
86+
<h1 class="modal-title fs-5" id="exampleModalLabel">About TinyGo Playground</h1>
87+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
88+
</div>
89+
<div class="modal-body">
90+
<p>
91+
The TinyGo Playground is a service provided by the TinyGo project
92+
to compile and run small code samples directly in the browser. It
93+
has been heavily inspired by the <a
94+
href="https://play.golang.org/">Go Playground</a> but differs in
95+
some significant ways:
96+
</p>
97+
<ul>
98+
<li>
99+
We use the <a href="https://github.com/tinygo-org/tinygo">TinyGo compiler</a> in addition to the main Go compiler.
100+
</li>
101+
<li>
102+
Instead of running code on the server, code is compiled to <a
103+
href="https://webassembly.org/">WebAssembly</a> and runs
104+
directly in the browser.
105+
</li>
106+
<li>
107+
It can simulate a few popular boards directly in the browser.
108+
However, please note that this is a simulation which can differ
109+
in behavior from how the program will run on an actual device.
110+
</li>
111+
<li>
112+
Boards that support drag-and-drop programming can be flashed
113+
directly using the Flash button.
114+
</li>
115+
</ul>
116+
<p>
117+
Like the Go Playground, it's possible to share code
118+
snippets. These code snippets are stored on Google's
119+
servers in the US and can be viewed by some TinyGo
120+
members. While we'll try to make sure the shared data
121+
can only be accessed by those who have the URL, we
122+
cannot guarantee security. If you accidentally shared
123+
something that should not be shared (for example, a
124+
password or personally identifying information), you can
125+
contact us at
126+
<a href="mailto:[email protected]">[email protected]</a>
127+
with the URL so we can remove it.
128+
</p>
129+
<p>
130+
Source code of the playground: <a
131+
href="https://github.com/tinygo-org/playground">github.com/tinygo-org/playground</a>.
132+
</p>
133+
</div>
134+
<div class="modal-footer">
135+
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
136+
</div>
137+
</div>
138+
</div>
139+
</div>
140+
<div class="modal modal-lg fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
141+
<div class="modal-dialog">
142+
<div class="modal-content">
143+
<div class="modal-header">
144+
<h1 class="modal-title fs-5" id="shareModalLabel">Share</h1>
145+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
146+
</div>
147+
<div class="modal-body">
148+
<div class="input-group">
149+
<input type="text" class="form-control user-select-all" placeholder="Loading..." readonly/>
150+
<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>
151+
</div>
152+
</div>
153+
</div>
154+
</div>
155+
</div>
156+
</div>

‎netlify.toml

+7
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"

0 commit comments

Comments
 (0)